Multi-Step Tooltip Guide with WebEngage

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.

info

Prefer a quick visual walkthrough first? Watch Creating Engaging Tooltip Guides with Native Experiences.

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

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.

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

info

For developer setup details, see the Guide anchor section in the WebEngage developer integration guide. After anchors are synced, review usable pages and anchors in Component Registry before building the campaign.

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.

Select Guide and choose Tooltip as the UI type.

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.

Confirm the campaign key, optional screen targeting, and variables before opening the Guide builder.

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.

Add each tooltip step, map it to an anchor key, and configure the step button behavior.

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

info

Once the Guide UI is saved, use Live Testing Campaigns 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.

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.

Use a frequency cap that prevents the tour from repeating after completion.

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.

Review the campaign summary and readiness checks before saving or activating.

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

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.

Name the WebEngage campaign and choose the audience that should see the Guide.

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

Select Classic Modal before opening the Custom HTML editor.

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.

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

Add the Guide campaign key and variable meta tags inside the Custom HTML editor.

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.

Use WebEngage's Test Campaign step to send the Guide to a test segment before launch.

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

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.

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.