1. AppSensei Integration

Overview

AppSensei is a powerful tool that allows you to create interactive tours for your web applications with ease. This documentation will guide you through the simple process of creating tours using AppSensei.

{info} In order to try or begin using appsensei you will need to start a membership (it includes a 15 day trial!) Click here to activate your membership

Selecting the App

The first step in creating tours with AppSensei is selecting the web application where you want to add interactive tours. Follow these steps:

1. Log in to your AppSensei account.

2. From the dashboard, click on the create new team button (or select the one you want to use).

3. Create a new app, then hover on the app you want to integrate, click on the copy code option.

Copying the Widget Snippet

Once you've selected the app, you need to copy the widget snippet, which you will later paste into your web application's code. Click the "COPY" button to copy the code to your clipboard.

Pasting the Widget Snippet

Now that you have copied the widget snippet, you can easily add interactive tours to your web application. Follow these steps to paste the widget snippet into your application's code:

Open the HTML source code of the web page where you want to add the tour.
Locate the <body> tag in your HTML code. This is typically near the beginning of your HTML document.
Paste the previously copied widget snippet immediately after the opening <body> tag.

<!DOCTYPE html>
<html>
<head>
    <!-- Your head content here -->
</head>
<body>
    <!-- Paste the widget snippet here -->

    <!-- AppSensei Widget Code for ... -->
    <div id="appsensei-widget" app-id=APP_ID></div>
    <script type="module" src="src"></script>

    <!-- The rest of your HTML content -->
</body>
</html>

Save the changes to your HTML file

Now, when users access your web application, they will be able to interact with the tours created using AppSensei.

Congratulations! You have successfully integrated AppSensei and added interactive tours to your web application. If you have any questions or need further assistance, please refer to the AppSensei documentation or contact our support team.

For more advanced customization options and tour creation, please explore the additional features and settings provided by AppSensei.

Note: Ensure that you have the necessary permissions to modify the HTML code of your web application before pasting the widget snippet.

For more detailed information and advanced features, please refer to the AppSensei Documentation.

Custom Widget Trigger

AppSensei allows you to change the default floating action button into a custom integration that can be any clickable UI element like a button. To do this, add the id="appsensei-launchtour-ui" attribute to your custom trigger element.

Here's a code example of a custom button:

<!DOCTYPE html>
<html>
<head>
    <!-- Your head content here -->
</head>
<body>
    <!-- Custom Widget Trigger Button -->
    <button id="appsensei-launchtour-ui">Launch Widget</button>

    <!-- Paste the widget snippet here -->

    <!-- AppSensei Widget Code for ... -->
    <div id="appsensei-widget" app-id=APP_ID></div>
    <script type="module" src="src"></script>

    <!-- The rest of your HTML content -->
</body>
</html>

In this example, the <button> element with the id="appsensei-launchtour-ui" attribute serves as the custom trigger for launching the widget.

Now, when users click the custom button, they will launch the AppSensei widget.

{success} Click here to learn how to create a tour and publish it

Get Started