Add GuideSail to your product

Now that you have created your first guide, there are two ways to add GuideSail to your product in order for the guides to be displayed.

You must have the ability to add JavaScript to your product or webpage, either via script tags, or using a package manager such as npm.

API Key

The first step to adding your guides is finding your GuideSail API Key. Click here (opens in a new tab) or navigate to the GuideSail Dashboard, and find the 'API Key' page from the sidebar.

Copy your personal API Key, keep it for later.

Importing GuideSail

Method 1: Import a script tag

To add GuideSail via a script tag, you need to include the following script in your HTML file. This method is straightforward and doesn't require any build tools or package managers.

This method works well for:

• Traditional HTML webpages
• WordPress & similar CMS
• E-commerce Platforms (e.g., Shopify, Magento)
• & anywhere you can add script tags

Copy the script below into any HTML page head, or where script tags can be inserted into your website.

<script type="module">
  import guidesail from 'https://cdn.jsdelivr.net/npm/guidesail@1/+esm'
  guidesail.sail('your_api_key');
</script>

You may also find this exact code snippet from the GuideSail Dashboard API Key page here (opens in a new tab).

Method 2: via npm

This option is best for single page web apps running on a framework where JavaScript packages can be installed. Method 1 can still be used in this case, but it is less convenient.

####Step 1: Install the GuideSail package

npm install guidesail

Step 2: Import into your project and start GuideSail with sail()

import guidesail from 'guidesail'
...
...
guidesail.sail('your_api_key')