Usetiful

https://help.usetiful.com/support/solutions
Admin
Usetiful is a digital adoption platform that enables businesses to create interactive product tours,...
Tokens:90,929
Snippets:171
Trust Score:8.2
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install Usetiful JavaScript Snippet

Source: https://help.usetiful.com/support/solutions/articles/77000197922-how-to-install-usetiful-and-start-using-tours

This JavaScript snippet is essential for Usetiful to function, enabling the display of interactive tours and other content on your web pages. It should be placed just before the closing `</body>` tag.

```javascript
// Example Usetiful JavaScript snippet (actual code to be provided by Usetiful)
// <script src="https://cdn.usetiful.com/script.js" data-project-id="YOUR_PROJECT_ID" async></script>
```

--------------------------------

### Install Usetiful using Google Tag Manager

Source: https://help.usetiful.com/support/solutions/folders/77000143252/page/1__gl=1%2A1fgeg9f%2A_gcl_aw%2AR0NMLjE3NDM2ODk5MjkuQ2p3S0NBanc0N2lfQmhCVEVpd0FhSmZQcGp0WjItNnRZcj_0c282d_zNZV1ZOMWgtdkZsSm1HSlkwVDE1SzNzY3RSb0NPdmNRQXZEX0J3RQ..%2A_gcl_au%2AMTMyODMwMDg3LjE3NDE1ODE2MDc.

This guide explains how to use Google Tag Manager (GTM) to install Usetiful on your website. GTM simplifies tag management, allowing for easier deployment of code snippets like the Usetiful tracking script.

```JavaScript
<!-- Google Tag Manager -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>
<!-- End Google Tag Manager -->

<!-- Usetiful Installation Snippet -->
<script type="text/javascript">
  (function(u,s,e,t,f,u,l,i) {
    if (!u[f]) {
      u[f] = {};
    }
    u[f][i] = {
      id: "YOUR_USETIFUL_ID",
      version: "1.0"
    };
    l = s.createElement(e);
    i = s.getElementsByTagName(e)[0];
    l.async = 1;
    l.src = t;
    l.onload = function() {
      // Optional: Callback after Usetiful is loaded
    };
    i.parentNode.insertBefore(l, i);
  })(window, document, "script", "https://cdn.usetiful.com/usetiful.js", "Usetiful", "Usetiful", "Usetiful");
</script>
```

--------------------------------

### Install Usetiful On-Premise Solution

Source: https://help.usetiful.com/support/solutions/articles/77000579660-on-premise-solution-maximum-control-and-security-for-your-business

Instructions for installing the Usetiful on-premise solution, available for the Enterprise-offline plan. This involves creating content, exporting an offline package, and following the readme.md file instructions.

```Markdown
1- **Creating content** - prepare your content using the Usetiful online platform.
2- Export the created content using _Download offline package_ button.
  
3- **Follow the instructions** in the readme.md file in the exported folder.
```

--------------------------------

### Install Usetiful Chrome Extension

Source: https://help.usetiful.com/support/solutions/articles/77000197926-preview-tours-with-usetiful-chrome-extension

Instructions for installing the Usetiful: Product Tours extension from the Google Chrome Web Store. This extension allows users to preview product tours without code changes.

```English
1. Go to Google Chrome Web Store and install the Usetiful: Product Tours extension.
2. When the plugin is successfully installed, the Usetiful icon will appear in the browser top bar with the following message.
3. Click on the Usetiful icon and log in using your Usetiful credentials. If you are currently logged in to Usetiful, the plugin will connect to your account automatically.
4. Go to the page where you want to preview your tour. The bottom panel indicates whether the selected tour is available.
5. When you update the content of your tour and save, the changes will be automatically reflected in the preview. Just refresh the page!
6. The other option of extension is preview tour in different languages. Once the tour is translated (see our tool localization to find out how to do it), you can preview the selected tour in any language you set.
```

--------------------------------

### Show Different Product Tours by User Segment

Source: https://help.usetiful.com/support/solutions/folders/77000323461

Discover how to segment users to display tailored product tours when installing Usetiful. This allows for personalized user experiences based on subscription levels or other criteria.

```text
When installing Usetiful, you can easily segment your users to display tailored product tours. For example, if your product supports different subscription ...
```

--------------------------------

### Targeting with ALL Conditions

Source: https://help.usetiful.com/support/solutions/articles/77000576443-combine-conditions-in-page-targeting

This example demonstrates how to set up page targeting rules where all specified conditions must be met for the content to display. It requires the page URL to contain a specific domain and a particular element selector to be present on the page.

```N/A
Page URL contains "domain.com"
Page contains an element with the selector "#element-1"
```

--------------------------------

### Start Tour from Specific URL and Step

Source: https://help.usetiful.com/support/solutions/articles/77000530650-how-to-start-a-tour-on-a-specified-url-and-how-to-start-a-tour-from-a-specific-step

This snippet demonstrates how to construct a URL to initiate a Usetiful tour. It shows how to specify the tour to be launched using `showProductTour` and how to begin the tour at a particular step with `productTourStep`. The `productTourStep` parameter is zero-indexed.

```URL
https://www.bestonboarding.com/?showProductTour=12884&productTourStep=2
```

```URL
https://www.bestonboarding.com/?showProductTour=12884
```

--------------------------------

### Regex: Exact URL Match

Source: https://help.usetiful.com/support/solutions/articles/77000488288-how-to-target-using-regular-expression-

This example demonstrates how to create a regular expression for an exact match of a specific URL. It uses anchors to signify the start and end of the string.

```regex
^www\.examplepage\.com$
```

--------------------------------

### Install Usetiful Extension on Microsoft Edge

Source: https://help.usetiful.com/support/solutions/articles/77000197926-preview-tours-with-usetiful-chrome-extension

Steps to install the Usetiful Chrome Extension on Microsoft Edge. This involves enabling extensions from other stores and adding the extension.

```English
1- In Microsoft Edge, go to the Chrome Web Store.
2- Select Allow extensions from other stores in the banner at the top of the page, then select Allow to confirm.
3- Select the Usetiful extension and select Add.
```

--------------------------------

### Create Slack-like Welcome Message HTML for Usetiful Tour

Source: https://help.usetiful.com/support/solutions/articles/77000499042-welcome-new-users-like-slack

This HTML code creates a welcome message step for a Usetiful product tour, styled to resemble Slack's onboarding. It includes a background image, centered text with specific font sizes, and a maximum width for paragraphs to ensure readability.

```HTML
<div style="min-width: 500px; background-image: url('https://cdn.usetiful.com/prod/2474/slack-bg-60ba1f61221df.png'); background-size: contain; background-repeat: no-repeat;"><p style="text-align: center;"><strong><span style="font-size: 18pt;">Meet <a href="#">#user-oboarding</a>, your <br />team's first channel<br /></span></strong></p>  
<p style="text-align: center; max-width: 400px; margin: auto;"><br />Channels keep your work focused, by giving <br />each topic, project, or team its own space.</p>  
</div>
```

--------------------------------

### Start Usetiful Checklist by ID

Source: https://help.usetiful.com/support/solutions/articles/77000516156-fe-api-checklist-functions

Starts a published Usetiful checklist using its unique ID. The checklist will display immediately on the current page, overriding any targeting rules.

```JavaScript
window.USETIFUL.checklist.start("01FTGJSQZQD5M0QQ34QTYE1276");
```

--------------------------------

### Start Usetiful Tour by ID

Source: https://help.usetiful.com/support/solutions/articles/77000514758-fe-api-product-tour-functions

Starts a published Usetiful tour using its unique ID. The tour will display immediately on the current page, overriding any targeting rules.

```JavaScript
window.USETIFUL.tour.start(tourId)
```

--------------------------------

### Usetiful Frontend API: Product Tour Functions

Source: https://help.usetiful.com/support/solutions/support/home

This documentation covers the frontend API functions provided by Usetiful for managing product tours. These functions allow developers to programmatically control tour behavior, such as starting, stopping, and navigating through tour steps.

```JavaScript
Usetiful.ProductTour.start('tour-id');
Usetiful.ProductTour.stop();
Usetiful.ProductTour.nextStep();
Usetiful.ProductTour.prevStep();
```

--------------------------------

### Configure Content Security Policies (CSP) for Usetiful Installation

Source: https://help.usetiful.com/support/solutions/index

This section details how to configure Content Security Policies (CSP) on your server to ensure Usetiful integrates correctly and securely. Proper CSP configuration is crucial for preventing security vulnerabilities and ensuring the smooth operation of Usetiful features.

```Nginx
add_header Content-Security-Policy "script-src 'self' 'unsafe-inline' https://cdn.usetiful.com;";
add_header Content-Security-Policy "style-src 'self' 'unsafe-inline' https://cdn.usetiful.com;";
```

```Apache
Header set Content-Security-Policy "script-src 'self' 'unsafe-inline' https://cdn.usetiful.com;"
Header set Content-Security-Policy "style-src 'self' 'unsafe-inline' https://cdn.usetiful.com;"
```

--------------------------------

### Install Usetiful Script in Shopify Theme

Source: https://help.usetiful.com/support/solutions/articles/77000537486-how-to-install-usetiful-on-shopify

This snippet demonstrates where to place the Usetiful script within the theme.liquid file in Shopify. The script should be inserted immediately before the closing </body> tag to ensure proper functionality.

```html
<!-- Find </body> section. -->
<!-- Copy your Usetiful script. You can find it on the Overview page after login and add the Usetiful script immediately before the <body/> element. -->
</body>
```

--------------------------------

### Example Tag Storage with Usage

Source: https://help.usetiful.com/support/solutions/articles/77000539298-customize-storing-responses-from-forms-to-tags

Illustrates how a single select question's answer is stored in the 'usage' tag. The example shows the JavaScript object format when a specific option is chosen.

```JavaScript
window.usetifulTags {
      usage: "enterprise",
      }
```

--------------------------------

### Usetiful Frontend API: Product Tour Functions

Source: https://help.usetiful.com/support/solutions/index

This documentation outlines the Frontend API functions available for interacting with Product Tours in Usetiful. These functions allow developers to programmatically control tour behavior, such as starting, stopping, and navigating through tour steps, directly from their web application.

```JavaScript
usetiful.productTour.start('tour-id');
usetiful.productTour.nextStep();
usetiful.productTour.prevStep();
usetiful.productTour.stop();
```

--------------------------------

### Example Tag Storage with Rating and Feedback

Source: https://help.usetiful.com/support/solutions/articles/77000539298-customize-storing-responses-from-forms-to-tags

Demonstrates how Usetiful stores responses from a form into 'rating' and 'feedback' tags. The example shows the expected JavaScript object structure after a user submits the form.

```JavaScript
window.usetifulTags {
      rating: "4",
      feedback: "overall, I am satisfied",
      }
```

--------------------------------

### Manual Step: Point to Page Element

Source: https://help.usetiful.com/support/solutions/articles/77000197863-creating-a-product-tour

This manual step type uses a tooltip that points to a specific element on the page, providing contextual guidance.

```Usetiful
Manual Step Type: Pointer
Description: A tooltip that points to the selected page element.
```

--------------------------------

### Add Button to Freshdesk Article

Source: https://help.usetiful.com/support/solutions/articles/77000509820-launch-usetiful-walkthroughs-from-freshdesk

This HTML code creates a styled button that can be embedded in a Freshdesk article. The button links to a Usetiful product tour, providing a more visually engaging way for users to access help compared to a simple text link. Ensure the '#' placeholder is replaced with the actual tour sharing link.

```HTML
<html>

<head>

<style>

.button {

  background-color: #4CAF50;

  border: none;

  color: white;

  padding: 15px 32px;

  text-align: center;

  text-decoration: none;

  display: inline-block;

  font-size: 16px;

  margin: 4px 2px;

  cursor: pointer;

  border-radius: 7px;

}

</style>

</head>

<body>

<a href="#" class="button">Guide me</a>

</body>

</html>
```

--------------------------------

### Start Usetiful Assistant by ID

Source: https://help.usetiful.com/support/solutions/articles/77000584934-fe-api-assistant-functions

Starts a specific published Usetiful assistant using its unique ID. The assistant will launch immediately on the current page, overriding any targeting settings. The assistant ID can be found in the assistant editor URL.

```JavaScript
window.USETIFUL.assistant.start("01FTGJSQZQD5M0QQ34QTYE1276");
```

--------------------------------

### Upload Azure Metadata to Usetiful

Source: https://help.usetiful.com/support/solutions/articles/77000559771-enhance-the-security-of-your-usetiful-account-by-setting-up-single-sign-on-sso-through-azure

The final step involves downloading the Federation Metadata XML from Azure and uploading it back into your Usetiful account to finalize the SSO configuration.

```Usetiful API/UI
# Log in to Usetiful account
# Navigate to Space management
# Upload the Federation Metadata XML downloaded from Azure
# Complete the SSO setup process
```

--------------------------------

### Integrate Usetiful with Mailchimp

Source: https://help.usetiful.com/support/solutions/index

This guide explains how to integrate Usetiful with Mailchimp to synchronize user data and enhance marketing automation. By connecting these platforms, you can leverage Usetiful's user insights to create more targeted email campaigns within Mailchimp.

```API Configuration
# Mailchimp API Key
MAILCHIMP_API_KEY = "your_mailchimp_api_key"

# Usetiful Webhook URL for Mailchimp integration
USETIFUL_WEBHOOK_URL = "https://api.usetiful.com/v1/integrations/mailchimp/webhook"

# Example of sending user data to Mailchimp via Usetiful
# This would typically be triggered by an event in Usetiful
# usetiful.integrate.sendToMailchimp('user@example.com', { 'FNAME': 'John', 'LNAME': 'Doe' });
```

--------------------------------

### Set Up Usetiful User Tags in GoHighLevel

Source: https://help.usetiful.com/support/solutions/articles/77000518973-how-to-install-usetiful-on-gohighlevel-

This JavaScript snippet demonstrates how to define user-specific tags within the Usetiful script for GoHighLevel. These tags, such as userId, firstName, lastName, and email, are used to personalize user walkthroughs by passing contact information from GoHighLevel.

```JavaScript
<script>
window.usetifulTags = {      
     userId : "{{contact.id}}",  // Unique user ID 
     firstName : "{{contact.first_name}}",  // User’s first name
     lastName : "{{contact.last_name}}",  // User’s last name
     email : "{{contact.email}}"  // User’s email  
};
</script>
```

--------------------------------

### Example Tag Condition for Form Field

Source: https://help.usetiful.com/support/solutions/articles/77000569945-conditions-and-survey-responses

This snippet provides an example of a tag condition used in conjunction with form fields. It demonstrates how the configured form ID and specific values (e.g., 'pet_radio_value1') are used to create conditional logic within the Usetiful platform.

```text
Tag: pet_type
Value: pet_radio_value1
```

--------------------------------

### Install Usetiful via GTM (Custom HTML)

Source: https://help.usetiful.com/support/solutions/articles/77000576058-using-google-tag-manager-to-install-usetiful

This snippet demonstrates how to add the Usetiful script as a custom HTML tag within Google Tag Manager. It requires the Usetiful tracking script to be pasted into the HTML text area and configured with appropriate triggers.

```HTML
<script>
  // Your Usetiful tracking script here
</script>
```

--------------------------------

### Configure Content Security Policies (CSP) for Usetiful

Source: https://help.usetiful.com/support/solutions/support/home

This section details how to configure Content Security Policies (CSP) on your server to ensure Usetiful integrates correctly and securely. It is crucial for maintaining website security and proper application functionality.

```Nginx
add_header Content-Security-Policy "script-src 'self' 'unsafe-inline' https://cdn.usetiful.com;";
add_header Content-Security-Policy "style-src 'self' 'unsafe-inline' https://cdn.usetiful.com;";
add_header Content-Security-Policy "img-src 'self' data: https://cdn.usetiful.com;";
```

```Apache
<IfModule mod_headers.c>
    Header set Content-Security-Policy "script-src 'self' 'unsafe-inline' https://cdn.usetiful.com;"
    Header set Content-Security-Policy "style-src 'self' 'unsafe-inline' https://cdn.usetiful.com;"
    Header set Content-Security-Policy "img-src 'self' data: https://cdn.usetiful.com;"
</IfModule>
```

--------------------------------

### Integrate Usetiful with Mailchimp

Source: https://help.usetiful.com/support/solutions/support/home

This documentation provides instructions on integrating Usetiful with Mailchimp to collect leads and manage email lists. It outlines the steps for connecting the two platforms and syncing user data.

```Mailchimp API
POST /lists/{list_id}/members
Body: {"email_address": "user@example.com", "status": "subscribed", "merge_fields": {"FNAME": "User Name"}}
```

--------------------------------

### Identify Element Selectors with Usetiful Plugin

Source: https://help.usetiful.com/support/solutions/articles/77000197925-guide-to-finding-element-selectors-on-your-website-using-the-plugin

This guide explains how to use the Usetiful Chrome extension to find element selectors on a webpage. It covers both automatic selection during tour creation and manual selection via the plugin panel. The plugin helps in identifying unique identifiers like classes and IDs for precise element targeting.

```HTML
class="help-button"
id="login_bttn"
```
Tokens:
Raw