> For the complete documentation index, see [llms.txt](https://docs.digia.tech/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.digia.tech/digia-engage/user-guides/clevertap/tooltip-guide.md).

# Multi-Step Tooltip Guide

This guide walks you through creating a **multi-step tooltip Guide** in the Digia Engage Dashboard, connecting it to **CleverTap**, and testing it on a device. By the end, you should have:

* a tooltip Guide designed and saved or active in Digia Engage
* a list of anchor keys used by each Guide step
* a CleverTap In-App campaign that points to the Digia Guide campaign
* a test device where you can trigger and verify the tour

A Guide is an anchored experience. Use a tooltip Guide when you want to explain specific UI elements in context, such as:

* introducing a new filter, cart, or profile control
* walking new users through a checkout flow
* explaining account, wallet, rewards, or profile features
* onboarding users to a redesigned screen

{% hint style="info" %}
Prefer a quick visual walkthrough first? Watch [Creating Engaging Tooltip Guides with Native Experiences](https://www.youtube.com/watch?v=8pPEc128npI).
{% endhint %}

***

## Before You Start

Make sure you have:

* Access to the correct **Digia Engage project**.
* Access to the matching **CleverTap project**.
* Your app must already be integrated with Digia Engage and CleverTap. Share the [CleverTap developer integration guide](/digia-engage/developer-guides/clevertap.md) with your app team if this setup is not complete yet.
* Your app team must have added `DigiaHost` and registered the target UI elements with `DigiaAnchor` or `DigiaAnchorView`.
* The available **anchor keys** shared by your app team.
* The audience and trigger event decided in CleverTap, for example `App Launched`, `Product Viewed`, or `Checkout Started`.
* A test profile or test segment in CleverTap so you can verify the Guide before launch.

### Anchor keys

An **anchor key** is the name your app team gives to a targetable UI element. When a Guide step runs, Digia looks for that exact key on the current screen and places the tooltip beside that element.

For example, your app team might share:

| Anchor key      | What it points to                           |
| --------------- | ------------------------------------------- |
| `filter_button` | Filter button on the product listing screen |
| `cart_button`   | Cart icon in the header                     |
| `profile_tab`   | Profile tab in the bottom navigation        |

The anchor key in Digia must match the app implementation exactly. If the anchor is not on screen when the campaign runs, that Guide step cannot attach to the UI element.

{% hint style="info" %}
For developer setup details, see [Setting Up Guide Anchors](/digia-engage/developer-guides/clevertap.md#8-setting-up-guide-anchors). After anchors are synced, review usable pages and anchors in [Component Registry](/digia-engage/user-guides/component-registry.md) before building the campaign.
{% endhint %}

***

## 1. Create a New Guide Campaign

Go to **Campaigns** and choose **New Campaign**.

Use a name that your team can recognize later, such as:

```
Feature Discovery Tooltip Tour - July
```

On the **Basics** step, enter the campaign name, select **Guide**, choose **Tooltip**, and continue.

<figure><img src="/files/HjowhdmyVrYdrZVPIeCH" alt="Digia Engage Basics step with Guide and Tooltip selected"><figcaption><p>Select <strong>Guide</strong> and choose <strong>Tooltip</strong> as the UI type.</p></figcaption></figure>

***

## 2. Confirm Setup Values

The **Setup** step shows the campaign key and optional targeting/variables.

Use **Target screens** only if the Guide should run on specific app screens. This can reduce failed anchors because the campaign fires only when Digia has reported a matching screen name.

Variables are optional. Add them only if the tooltip title, subtitle, or button copy uses dynamic values.

<figure><img src="/files/3AFYaUgUKLA0vmAkzuEC" alt="Digia Engage Setup step with campaign key, target screens, and variables highlighted"><figcaption><p>Confirm the campaign key, optional screen targeting, and any variables before opening the Guide builder.</p></figcaption></figure>

***

## 3. Design the Tooltip Steps

In the Guide builder, the left panel lists the steps in the tour. Each step needs an **anchor key**.

For each step:

* Enter the anchor key provided by your app team.
* Add a short title and subtitle.
* Check the preview.
* Set the button action. Earlier steps usually use **Next step**; the final step usually uses **Dismiss**.

Keep each tooltip short. Users should understand the message without losing context on the screen behind it.

<figure><img src="/files/hDoNnaffDhDopvBh4cm3" alt="Digia Engage Guide builder with steps, preview, and action controls highlighted"><figcaption><p>Add each tooltip step, map it to an anchor key, and configure the step button behavior.</p></figcaption></figure>

Example step plan:

| Step | Anchor key      | Tooltip copy            |
| ---- | --------------- | ----------------------- |
| 1    | `filter_button` | Narrow the product list |
| 2    | `cart_button`   | Review your cart        |
| 3    | `profile_tab`   | Manage your account     |

{% hint style="info" %}
Once the Guide UI is saved, use [Live Testing Campaigns](/digia-engage/user-guides/live-testing.md) to send it to a connected debug device and confirm the tooltip copy, anchor keys, and step order before moving into delivery, review, and CleverTap setup.
{% endhint %}

***

## 4. Set Delivery Rules in Digia

On the **Delivery** step, choose how often Digia is allowed to show this Guide to the same user.

For onboarding tours, **Until completed** is usually a good starting point. It lets the Guide show again in a later session until the user finishes all steps.

<figure><img src="/files/ASDbt4JMZZMSuksQA117" alt="Digia Engage Delivery step with Until completed highlighted"><figcaption><p>Use a frequency cap that prevents the tour from repeating after completion.</p></figcaption></figure>

Common choices:

| Frequency cap        | When to use it                             |
| -------------------- | ------------------------------------------ |
| **Until completed**  | Multi-step onboarding or feature tours     |
| **Once ever**        | One-time announcements                     |
| **Once per session** | Repeated contextual education              |
| **Once per day**     | Reminders that should not appear too often |

CleverTap controls who qualifies and when the trigger happens. Digia controls whether the Guide should still render after CleverTap fires.

***

## 5. Review and Copy CleverTap Config

On the **Review** step, check:

* The campaign name is correct.
* The campaign type is **Guide**.
* The UI type is **Tooltip**.
* Every step has an anchor key.
* The frequency cap matches your campaign plan.

You can save as draft while CleverTap setup is still pending, or activate when the Guide is ready. Nothing shows to your users until the CleverTap campaign is configured and live.

<figure><img src="/files/wQAYQtIc1DOrqjSZE9zl" alt="Digia Engage Review step for a tooltip Guide"><figcaption><p>Review the campaign summary and readiness checks before saving or activating.</p></figcaption></figure>

After reviewing, scroll to **Set up your CleverTap In-App campaign**. Copy the campaign key and variables config from that section. You will paste those values into the CleverTap `DigiaTemplate`.

<figure><img src="/files/WIlPISk7rLbJ5Db9KFr8" alt="Digia Engage CleverTap setup section with campaign key and variables highlighted"><figcaption><p>Copy the campaign key and variables config from the CleverTap setup section.</p></figcaption></figure>

***

## 6. Create the CleverTap In-App Campaign

Now switch to CleverTap. This is where you decide who should see the Guide and when it should appear.

Create an **In-App** campaign. Configure the audience, trigger, schedule, and priority as you normally would in CleverTap. For the first test, keep the audience narrow so only your test users qualify.

<figure><img src="/files/XAbCzdWUyNkSK4xrx9b4" alt="CleverTap In-App campaign setup screen with Single Message selected"><figcaption><p>Create a Single Message In-App campaign and go to the editor.</p></figcaption></figure>

In CleverTap's **What** section, keep the message type set to **Single Message** and select **Go To Editor**. In the editor, switch to **Custom Code Templates** and choose **DigiaTemplate**.

<figure><img src="/files/IVT3pvbJeOmyfkOMcBWG" alt="CleverTap template picker showing available In-App templates"><figcaption><p>Use the template picker to move from the default templates to custom code templates.</p></figcaption></figure>

<figure><img src="/files/DmUcgL41aKYwr2Vm137m" alt="CleverTap Custom Code Templates tab showing DigiaTemplate"><figcaption><p>Select <strong>DigiaTemplate</strong>.</p></figcaption></figure>

{% hint style="info" %}
If you do not see **DigiaTemplate**, your developer team has not completed the one-time CleverTap template setup. Share the [CleverTap developer integration guide](/digia-engage/developer-guides/clevertap.md) with them before continuing.
{% endhint %}

***

## 7. Link CleverTap to the Digia Guide

In the CleverTap campaign message/template step, set the Digia campaign key.

Add:

| Field                | Value                              |
| -------------------- | ---------------------------------- |
| `digia_campaign_key` | The campaign key copied from Digia |

If your Guide uses variables, also pass them from CleverTap.

Use the variables config copied from Digia as the starting point. Replace profile paths only if your CleverTap project stores these values under different user properties.

```json
{}
```

If your Guide has variables, the JSON may look like:

```json
{
  "first_name": "{{Profile.first_name | default:'there'}}"
}
```

<figure><img src="/files/nyJhHymRfK1V15wx7FpT" alt="CleverTap DigiaTemplate with tooltip Guide campaign key and variables filled"><figcaption><p>Paste the Guide campaign key and variables config into <strong>DigiaTemplate</strong>.</p></figcaption></figure>

Keep the Guide steps, copy, and anchor keys in Digia. CleverTap should only carry the campaign key and optional variables.

***

## 8. Test the Guide End to End

Before launching to a real audience, test the full path from CleverTap trigger to Digia render:

1. Use a test audience in CleverTap.
2. Activate or preview the CleverTap campaign for that test audience.
3. Open the app screen that contains the first anchor key.
4. Trigger the CleverTap event from a test device.
5. Confirm the first tooltip attaches to the correct UI element.
6. Move through all steps and confirm each one anchors correctly.
7. Complete or dismiss the Guide and confirm the frequency cap behaves as expected.

<figure><img src="/files/V551PGsuYu0IAXvBK5Gv" alt="CleverTap Preview and Test modal for an In-App campaign"><figcaption><p>Use Preview &#x26; Test with a test profile or device token before launching.</p></figcaption></figure>

### If the Guide does not appear, check:

| What to check                               | Why it matters                                       |
| ------------------------------------------- | ---------------------------------------------------- |
| The Digia campaign is active                | Draft campaigns will not render for users            |
| `digia_campaign_key` matches exactly        | The key is case-sensitive                            |
| **DigiaTemplate** is available in CleverTap | The In-App campaign must use the registered template |
| The user qualifies in CleverTap             | CleverTap owns audience and trigger rules            |
| The trigger event fired                     | CleverTap only sends the campaign after its trigger  |
| The first anchor key is on screen           | Guides need the target UI element to be mounted      |
| Anchor keys match exactly                   | A typo prevents the tooltip from attaching           |
| Frequency cap has not already been reached  | Digia may suppress repeat renders                    |

{% hint style="info" %}
CleverTap can sometimes take up to an hour to start delivering a new campaign. If the campaign still does not appear after that, reach out to Digia support.
{% endhint %}

***

## Launch Checklist

Before going live, confirm:

* Digia campaign is active.
* CleverTap campaign uses **DigiaTemplate**.
* `digia_campaign_key` matches the Digia campaign key.
* Every Guide step has a valid anchor key.
* The first anchor is present when the CleverTap trigger fires.
* Variables are valid JSON, if used.
* Audience and trigger rules are correct in CleverTap.
* Frequency cap is set in Digia.
* The campaign was tested on at least one real device.

Once these are complete, schedule or activate the CleverTap campaign for the intended audience.

***

## Recap

1. Create a **Guide** campaign in Digia.
2. Choose **Tooltip** as the UI type.
3. Add one step per tooltip and map every step to an anchor key.
4. Set delivery rules, usually **Until completed** for tours.
5. Copy the campaign key and variables config from Digia.
6. Create a CleverTap **In-App** campaign using `DigiaTemplate`.
7. Paste the key as `digia_campaign_key`.
8. Test on a real device before launch.

For the technical mapping between Digia and CleverTap, see [How Digia Maps to CleverTap Campaigns](/digia-engage/developer-guides/clevertap.md#4-how-digia-maps-to-clevertap-campaigns).