Overview

In many cases, you'd want to include relevant dynamic content to the end-user, such as a user's first name. This can be very beneficial in making the user journey feel more personal and can significantly increase engagement.

In this article, we explain how you can add dynamic text in a Guide or Hotspot.

Sending Variables with Custom Attributes

You can achieve personalization by defining custom attributes and inserting them into your content. For instance, you might pass the user's first name as a variable by creating a custom attribute. You can send any form of attribute that fits your case.

How can I personalize the Welcome Guide on my website?

Let's say you want to welcome your users with their first name. To do this, you should go to your Panel, navigate to Segments, and select Custom Attributes.

Creating Custom Attribute with Text Format

  • Click on New Attribute.

  • Write a custom attribute identifier (variable name). It will be the key field in your event layer (custom user property data you will send).

  • Choose the data format as Text since the value of your user segment is in text form.

  • We recommend choosing UserGuiding as the data source. This way, the tracking snippet will receive the data you send and pass it to the container code.

Tracking snippet

When you click on Save, you will see a tracking snippet. You can either put it into the source code or use it inside a tag you have in Google Tag Manager. This snippet will allow you to send custom user properties to UserGuiding code through the ‘track’ method.

The code should change with respect to the first name of the current user:

userGuiding.track("segment", {first_name: "Efehan"});

Adding Dynamic Text in the Guide & Hotspot Components

After creating a custom attribute, open your guide in Chrome extension. Follow the steps below to achieve personalization:

Text Component

  • Select the personalization toolbar of the text component.

  • Select your attribute, and click Insert.

  • Create a fallback text in case of a missing attribute for a specific user.

Finally, Save your work, go back to Panel, and Publish Changes. The result will be something like this:

Hero & Button Components

  • Insert the name of the custom attribute in between double curly braces manually. (e.g {{first_name}})

  • To add a fallback value, use the pipe character “|” and insert a fallback text before closing the braces. (Ex. {{first_name | there}})

⚠️ Dynamic texts you send to Hero & Button components will only be displayed on the live (published) version of your UserGuiding content.

Finally, Save your work, go back to Panel, and Publish Changes.

Related Articles:

Custom Attributes When Data Source is the Browser Local Storage

Sample Use-case for the Custom Attribute

Did this answer your question?