Manual Launch Guides

Manual Launch guides allow you to control when a guide is shown to your users based on a custom JavaScript trigger. This gives you the flexibility to decide the exact moment a guide should be displayed, enhancing the user experience.

Basic Usage

To use Manual Launch guides, you can trigger them through various user interactions, such as a button click. For example, the Launch Settings page provides a snippet for a button that you can add to your webpage:

<button onclick="guidesail.launch(guideId)">Launch Guide</button>

Advanced Usage

The core of this functionality is the guidesail.launch(guideId) function, which will launch the guide when called with the appropriate guide ID. This allows for more complex interactions and conditions to be set before displaying a guide.

For example, you can launch a guide based on a specific user action or a series of conditions:

Launch a Guide on Page Load

You can automatically launch a guide when the page loads. This is useful for onboarding guides or tutorials that should be shown immediately when a user visits a page.

// Launch a specific guide on page load
window.onload = function() {
    guidesail.launch('guideId');
};
 

Launch a Guide on Button Click

You can also launch a guide when a user clicks a button. This is useful for contextual help or tutorials that are triggered by user actions.

// Launch a specific guide on button click
document.getElementById('launchGuideButton').addEventListener('click', function() {
    guidesail.launch('guideIdOnClick');
});

Launch a Guide After a Custom Event

GuideSail allows you to launch a guide in response to custom events. This is useful for more complex scenarios where the guide should be shown based on specific user interactions or application states.

// Launch a specific guide after a custom event fires
document.addEventListener('customEvent', function() {
    guidesail.launch('guideIdOnCustomEvent');
});
 
// Example of dispatching a custom event
document.dispatchEvent(new CustomEvent('customEvent'));