LogoLogo
GitHubNPMDemo
  • Welcome to Cue.js
  • Getting Started
    • Installation
    • Basic Usages
  • Core Concepts
    • How Cue.Js Works
    • Tour Steps
    • Tour Lifecycle Events
  • Customization
    • Styling and Theming
    • Custom Navigation
  • Advanced Usage
    • Dynamic Content
    • Conditional Tours
    • Accessibility
    • Analytics Integration
  • API Reference
    • API Reference
  • Contributing
    • Contributing
Powered by GitBook
On this page
  • Choose Your Installation Method
  • Next Steps
Edit on GitHub
Export as PDF
  1. Getting Started

Installation

PreviousWelcome to Cue.jsNextBasic Usages

Last updated 23 days ago

Getting started with Cue.js is quick and easy. You can integrate it into your project using popular package managers like npm or Yarn, or you can simply include it directly via a Content Delivery Network (CDN).


Choose Your Installation Method

For the quickest setup, you can include Cue.js directly in your HTML using CDN links. This is ideal for simple projects or prototyping, as it doesn't require any build tools.

Place these lines in the <head> section of your HTML file:

Minified Version (Recommended for Production):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nani_samireddy/cue.js@latest/dist/cue.min.css">
<script src="https://cdn.jsdelivr.net/npm/@nani_samireddy/cue.js@latest/dist/cue.min.js"></script>

Unminified Version (For Development/Debugging):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nani_samireddy/cue.js@latest/dist/cue.css">
<script src="https://cdn.jsdelivr.net/npm/@nani_samireddy/cue.js@latest/dist/cue.umd.js"></script>

When using the CDN version, the Cue class will be globally available via window.Cue.

// Accessing the global Cue object
const cue = new Cue({ /* options */ });
// ...

If you're using Node.js and a package manager like npm, run the following command in your project's terminal:

npm install @nani_samireddy/cue.js

This will add cue.js as a dependency in your package.json file.

Once installed, you can import Cue.js into your JavaScript modules:

// For ES Modules (used with bundlers like Webpack, Vite, Parcel)
import Cue from '@nani_samireddy/cue.js';

// Don't forget to import the CSS as well!
// The exact path might vary slightly based on your bundler's configuration.
import '@nani_samireddy/cue.js/dist/cue.min.css'; // Or cue.css for development

If you prefer Yarn as your package manager, use this command in your project's terminal:

yarn add @nani_samireddy/cue.js

This will add cue.js as a dependency in your package.json file.

After installation, you can import Cue.js into your JavaScript modules:

// For ES Modules (used with bundlers like Webpack, Vite, Parcel)
import Cue from '@nani_samireddy/cue.js';

// Don't forget to import the CSS as well!
// The exact path might vary slightly based on your bundler's configuration.
import '@nani_samireddy/cue.js/dist/cue.min.css'; // Or cue.css for development

Next Steps

Once installed, you're ready to create your first tour!