> 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/webengage/tooltip-guide.md).

# Multi-Step Tooltip Guide

This guide walks you through creating a **multi-step tooltip Guide**, connecting it to **WebEngage**, and testing it on a device. By the end, you should have a Guide campaign, a list of anchor keys, a WebEngage campaign that points to the Guide, and a test device where you can verify every step.

A Guide is an anchored experience. Use tooltip Guides to explain specific UI elements in context, such as a new filter, cart button, checkout step, or profile tab.

{% 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** created with **WebEngage** as the CEP integration.
* Access to the matching **WebEngage project**.
* Your app must already be integrated with Digia Engage and WebEngage. Share the [WebEngage developer integration guide](/digia-engage/developer-guides/webengage.md) with your app team if this setup is not complete yet.
* The audience and trigger event decided in WebEngage.
* A test profile or test segment in WebEngage so you can verify the campaign before launch.
* Your app team must have registered the target UI elements with Digia anchors.
* The available **anchor keys** shared by your app team.

{% hint style="info" %}
This guide is written for product managers and marketers. Developer-only setup is linked above so you know what must already be complete before campaign testing.
{% endhint %}

### 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.

| 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        |

{% hint style="info" %}
For developer setup details, see the Guide anchor section in the [WebEngage developer integration guide](/digia-engage/developer-guides/webengage.md). 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 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/EjoY4D1cwGKDoClwFVIy" 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

Use **Target screens** only if the Guide should run on specific app screens. Variables are optional; add them only if tooltip copy uses dynamic values.

<figure><img src="/files/oPnlXMdHNckNbiveQeAA" alt="Digia Engage Setup step with campaign key, target screens, and variables highlighted"><figcaption><p>Confirm the campaign key, optional screen targeting, and 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 short title/subtitle copy, check the preview, and set the button action. Earlier steps usually use **Next step**; the final step usually uses **Dismiss**.

<figure><img src="/files/4caFt88FWR3UXAFVPczJ" 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>

| 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 WebEngage setup.
{% endhint %}

***

## 4. Set Delivery Rules in Digia

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/Gf8hSaQ69ZQtQeqOuU3A" 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>

***

## 5. Review and Copy WebEngage Config

Check the campaign name, type, UI type, anchor keys, and frequency cap. You can save as draft while WebEngage setup is pending, or activate when the Guide is ready.

<figure><img src="/files/qjGEIxFiGQAEsxmGsGgZ" 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>

Copy the Digia campaign key from the WebEngage setup section in Digia. If the Guide uses variables, copy the variables config too.

***

## 6. Create the WebEngage In-App Custom HTML Campaign

Create a WebEngage In-App campaign and use Custom HTML for the content step. WebEngage decides the audience, trigger event, schedule, and priority. Digia decides what renders after the campaign fires.

Start with the audience step. Name the campaign, choose the segment, and continue through the trigger and scheduling choices that match your launch plan.

<figure><img src="/files/xymUDbtGtDzFa5kXEUvJ" alt="WebEngage Audience step for the Feature Discovery Tooltip Tour"><figcaption><p>Name the WebEngage campaign and choose the audience that should see the Guide.</p></figcaption></figure>

Choose **Classic Modal** as the In-App layout. Then use Custom HTML for the message content.

<figure><img src="/files/NLI00j5wv2LjmTgYHdgu" alt="WebEngage Select a Layout modal with Classic Modal highlighted"><figcaption><p>Select <strong>Classic Modal</strong> before opening the Custom HTML editor.</p></figcaption></figure>

***

## 7. Link WebEngage to the Digia Guide

In the Custom HTML editor, add a `digia-config` block. The `digia_campaign_key` meta tag is required. Add more meta tags only for variables used by your Digia UI.

```html
<template id="digia-config">
  <meta name="digia_campaign_key" content="feature_discovery_tooltip_tour_july">
  <meta name="first_name" content="Aarav">
</template>
```

Use the exact variable names declared in Digia. Keep the Guide steps, copy, and anchor keys in Digia.

<figure><img src="/files/QQf9pve3f2upheiGFsQI" alt="WebEngage Custom HTML editor with Digia Guide campaign key and variables"><figcaption><p>Add the Guide campaign key and variable meta tags inside the Custom HTML editor.</p></figcaption></figure>

***

## 8. Test the Guide End to End

1. Use a test audience in WebEngage.
2. Activate or preview the WebEngage campaign for that audience.
3. Open the app screen that contains the first anchor key.
4. Trigger the 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.

<figure><img src="/files/FNvG1TxzV17HUr2cFciG" alt="WebEngage Test Campaign step"><figcaption><p>Use WebEngage's Test Campaign step to send the Guide to a test segment before launch.</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                            |
| `digia_campaign_key` matches exactly               | The key is case-sensitive                                  |
| The WebEngage campaign uses **In-App Custom HTML** | The Digia plugin only receives the expected payload format |
| 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" %}
WebEngage can sometimes take time to start delivering a newly activated campaign. If the campaign still does not appear after your usual campaign propagation window, reach out to Digia support.
{% endhint %}

***

## Launch Checklist

* Digia Guide campaign is active.
* WebEngage campaign uses **In-App Custom HTML**.
* `digia_campaign_key` matches the Digia campaign key.
* Every Guide step has a valid anchor key.
* The first anchor is present when the trigger fires.
* Audience and trigger rules are correct in WebEngage.
* The Guide was tested on at least one real device.