Getting Started

Get the extension

Chrome Extension

Install the chrome extension here: GuideSail Extension. Once installed, make sure to pin the extension so that the icon is visible on the top right of your browser.

Add GuideSail to your App

There are multiple ways to get GuideSail up and running in your app:

Javascript

Copy the script tag below into any HTML page, make sure to input your own API key. Guides will run on your webpage automatically.

Make sure to add this at the end of the html document, to ensure it runs after the page loads completely.

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

NPM Package

For implementation in node.js based front-end apps, you may install the npm package

npm install guidesail

In-App Implementation

Once the npm package is installed, implementation is very simple. Import the package at the top level of your app and use the sail() function to start running guides on your app. Pass your custom API key to the function to give it access to your guides.

guidesail.sail('your_api_key')

React/NextJS

Below is an example of how to set up GuideSail on a React or NextJS app. It should be noted that GuideSail is platform agnostic and it can be used with any JavaScript based framework (e.g. Vue, Angular). Examples for other frameworks to be posted soon

You must ensure GuideSail runs on the top level of your app. To do this, add the sail function to run once at the entry point of your app. Below is an example of inserting the function into the entry point of a React or NextJS project using the useEffect hook

App.js

//import guidesail

import guidesail from 'guidesail';

...

...

//This code will run once on page load

useEffect(() => {

    guidesail.sail('your_api_key');

}, []);

It's as simple as that! Now all your guides will run on your app based on URL match with the guides you created.

Note: In order to implement Guides, you must be subscribed to GuideSail Pro.

Creating Guides

Creating a guide

Once the GuideSail extension is installed, building guides on your page takes just a few minutes.

Launch GuideSail

The first step is to navigate to the page (or one example of a page) where you would want the guide to run. If you want your guide to run on a particular page, for example: app.com/home, then you may navigate to that page and start the extension. If you want to run a guide on a page with a dynamic URL, you may use a custom url.

If it is your first time launching the extension you will be prompted to Sign In. Follow the button to the GuideSail app page where you can log in to give access to the extension. Once access is granted you may have to return to your page, refresh, and launch the extension again.

Create and Edit guides

Once you launch the guide on a page, if there is not already a guide created which would run on that page, you will be prompted to create a guide there. You may augment the URL match before starting, but this value may be changed later as well. URL Customization & Rules

If you already have a guide which matches the URL of the current page, the extension will allow you to edit it.

Guide Settings

Title: give your guide a unique title so that you can identify it. This does not impact the functionality of the guide, and can be changed at any time.
URL Match: GuideSail works by running your guides on particular pages, based on this url match criteria. . This can be changed at any time.
Once Only: Set this guide to run only once for each user, so that the same information isn't shown every time they visit a page. Note: This function may use User Tracking if you set it up, but it is not necessary for the feature to work.

Steps

When editing, you have 2 options (prompts/surveys coming soon!):

Tooltips will show on a particular element on the page. You can select an element to show the tooltip on using the element selection tool. The tooltip requires a title, and the description/body is optional.
Popups display over the whole page, right in the center. These are perfect for announcements.

By utilizing these URL matching options, you gain the granular control needed to deploy guides effectively across a spectrum of pages, from static to dynamically personalized, enhancing the overall user experience within your application. If you have specific examples or additional data to incorporate, feel free to share, and I'll tailor the explanation accordingly.

URL Matches

GuideSail works by running guides on the appropriate pages automatically once configured. All guides must be assigned a URL match to determine where they will run.

Basic URL:

For straightforward, static pages like your landing page or FAQ, a Basic URL match suffices. This involves specifying the exact location where you want the guide to run. It's an ideal choice when the content you wish to guide users through remains consistent across all instances of that particular page.

Custom URL:

However, when dealing with dynamic pages that vary based on user-specific information, a Custom URL match becomes indispensable. Here, you can prescribe a URL using '*' as a wildcard character to account for different values within the URL.

For instance, if your application features a dashboard page, and each user's dashboard URL includes their unique identifier (e.g., app.com/dashboard/655e8954), you can create a Custom URL match like this: app.com/dashboard/*. This wildcard captures the dynamic portion of the URL, ensuring that the guide adapts seamlessly to various user-specific dashboard pages.

Coming Soon

Surveys/Prompts: Add questions to your guides to gather user feedback in-app

Custom Styling Modify the color scheme, font, and button text to match your brand.

Analytics: Track how visitors view and interact with your guides. Understand what step along the way you lose them at.

Logic Flows / Conditional Guides: Dynamic guides based on user interaction/inputs.

Documentation & Install Guide