How to use Contextual Actions in Screeb Messages

Contextual Actions allow you to make your in-app messages more interactive.
Instead of only displaying information, you can use a message to guide users through your product, move them to the right place, highlight an element, wait for the interface to load, trigger Screeb events, or interact with other tools on your website.
They are especially useful for onboarding flows, feature discovery, product tours, activation journeys, and contextual support experiences.

What are Contextual Actions?

Contextual Actions are actions triggered from a Screeb message.
They help you control what happens when a user interacts with a message, for example when they click a button, continue a step, or follow a guided journey.
With Contextual Actions, you can:

• Move the user within the page
• Highlight or modify an element
• Wait until an element is available
• Trigger Screeb campaigns, events, or properties
• Copy text to the clipboard
• Dispatch custom events to your own product or third-party tools

This makes it easier to create messages that do more than inform users: they actively guide them toward the right action.

When should you use Contextual Actions?

Use Contextual Actions when your message needs to interact with the user interface or trigger something beyond the message itself.
For example, you can use them to:

• Guide a new user to an important feature
• Highlight a button during onboarding
• Track clicks on a call-to-action
• Start a follow-up survey after a first answer
• Update a user property once a product tour has been completed
• Open your own support widget from a Screeb message
• Copy a referral code or promo code automatically

Before you start

Before using Contextual Actions, make sure that:

• The Screeb tag is installed on the page where the message will be displayed
• The message is created and editable from the Screeb builder
• The page or element you want to target is available to Screeb
• If you target a specific element, the selector is stable enough to be reused
• If you want to start another Screeb campaign, that campaign already exists

For product tours and popovers, we recommend asking your technical team to add clear and stable CSS IDs to the elements you want to target. This makes the experience more reliable, especially on modern web apps where generated class names can change over time.

Move the user within the page

Some Contextual Actions help users reach the right place without having to search by themselves.

Scroll to position

Use Scroll to position to automatically scroll the page to a specific area.
This is useful when the element you want to show is lower on the page or outside the current viewport.
Example: in a guided tour, you can scroll the user directly to the “Export” button instead of asking them to find it manually.
Recommended use cases:

• Product tours
• Feature discovery
• Long pages with several sections
• Onboarding flows where the next action is not visible immediately

Reload page

Use Reload page to refresh the current page.
This can be useful after a user activates an option or changes a setting from a message, and the interface needs to reload before the change becomes visible.
Example: after enabling a new feature from an in-app message, reload the page so the updated interface appears immediately.
Recommended use cases:

• Feature activation
• Settings updates
• Interfaces that need a refresh to display changes
• Technical flows where the page state must be updated

Go back

Use Go back to send the user back to the previous page in their browser history.
Example: add a button such as “Cancel and go back” in a guided journey.
Recommended use cases:

• Cancellation flows
• Guided navigation
• Multi-page onboarding
• Help messages where the user may want to return to the previous screen

Highlight or modify an element

Some Contextual Actions help you draw attention to an element or change how it behaves visually.

Highlight element

Use Highlight element to visually emphasize a specific element on the page.
This helps users immediately understand where they need to look or click.
Example: during onboarding, you can highlight the “Create project” button so the user knows exactly what to do next.
Recommended use cases:

• New feature announcements
• Product tours
• Onboarding checklists
• Feature adoption campaigns
• Support guidance inside the product

Set element attribute

Use Set element attribute to add or update an attribute on a page element.
This can be used to visually or functionally modify an element, depending on how your application handles that attribute.
Example: you can disable a button until a condition is met, mark a field as required, or change an element state during a guided experience.
Recommended use cases:

• Guided forms
• Progressive onboarding
• Step-by-step activation flows
• Product experiences that require specific conditions before continuing

This action may require coordination with your technical team, especially if your application needs to react to a specific attribute.

Wait for the right moment

Modern web applications often load content asynchronously. This means that an element may not be available immediately when the page appears.

Wait for element

Use Wait for element to wait until a specific element appears before continuing the action sequence.
This prevents Screeb from trying to point to, highlight, or interact with an element that has not loaded yet.
Example: in an app where the dashboard loads after a few seconds, you can wait for the “Create report” button to appear before highlighting it.
Recommended use cases:

• Single-page applications
• Dashboards with delayed loading
• Dynamic content
• Product tours that depend on elements loaded after navigation
• Pages where data appears after an API call

This action is especially useful when combined with actions such as Highlight element, Scroll to position, or actions placed after a navigation step.

Trigger Screeb actions from a message

Some Contextual Actions allow you to control Screeb directly from the message.

Start a campaign

Use Start a campaign to launch another Screeb campaign from the current message.
This is useful when you want to create a follow-up experience based on the user’s first interaction.
Example: after a first satisfaction question, you can automatically start a more detailed follow-up survey for users who gave a negative answer.
Recommended use cases:

• Multi-step feedback journeys
• Satisfaction follow-ups
• Onboarding sequences
• Conditional product tours
• Progressive discovery flows

Track an event

Use Track an event to send a Screeb event when the user interacts with the message.
This allows you to measure how users engage with a specific CTA or guided experience.
Example: track how many users click on the “Try feature X” button inside your message.
Recommended use cases:

• Measuring CTA clicks
• Tracking feature discovery
• Building segments based on message interactions
• Measuring onboarding completion
• Understanding engagement with product announcements

Once tracked, the event can be used for analysis, segmentation, or future targeting.

Set a property

Use Set a property to update a user property from the message.
This allows you to remember something about the user and reuse it later for targeting or segmentation.
Example: when a user completes a product tour, set a property such as has_seen_product_tour = true.
Recommended use cases:

• Avoid showing the same message again
• Segment users based on completed onboarding steps
• Store user preferences
• Mark users as exposed to a specific feature
• Build more personalized future campaigns

This is especially useful for onboarding and activation flows, where you want the experience to adapt based on what the user has already seen or done.

Use other helpful actions

Contextual Actions can also interact with the browser or with your own product ecosystem.

Copy to clipboard

Use Copy to clipboard to copy a predefined text automatically when the user clicks.
Example: add a button that copies the user’s referral code, promo code, or API key snippet.
Recommended use cases:

• Referral programs
• Promo codes
• Invite links
• Configuration snippets
• Support instructions

Make sure the message clearly tells the user what has been copied.

Dispatch custom event

Use Dispatch custom event to send a custom event to your website or application.
This creates a bridge between Screeb and your own tools, scripts, or third-party widgets.
Example: from a Screeb in-app message, dispatch a custom event that opens your Intercom, Crisp, or custom support chat.
Recommended use cases:

• Opening a support chat
• Triggering a custom modal
• Connecting Screeb with internal product logic
• Sending information to another frontend tool
• Creating advanced workflows with your technical team

This action usually requires technical setup on your side, because your application needs to listen to the custom event and decide what should happen when it is received.

Using actions after navigation

Contextual Actions can also be used after a navigation step.
For example, you can send a user to another page and then continue the flow by waiting for an element, scrolling to a section, or highlighting a button on the new page.
This is useful for multi-page product tours where the next step happens after the user has moved to another area of your product.
Example flow:

1. The user clicks “Show me how it works”
2. The message sends them to the relevant page
3. Screeb waits for the target element to appear
4. The page scrolls to the right section
5. The key button is highlighted

This makes guided journeys smoother, especially in complex products where users need to move across several pages.

Best practices

Use Contextual Actions to simplify the user journey, not to take control away from the user.
A good guided experience should feel helpful, clear, and easy to follow.
We recommend that you:

• Use clear CTA labels, such as “Show me”, “Try it now”, or “Continue”
• Keep each step focused on one action
• Avoid triggering too many actions at once
• Test the experience on the real target page before publishing
• Use stable CSS selectors when targeting page elements
• Add a fallback or skip option when possible
• Track key interactions to measure the impact of your message
• Use user properties to avoid displaying the same guidance repeatedly

Troubleshooting

The action does not trigger

Check that the message is live, that the user matches the targeting rules, and that the action is attached to the right step or CTA.
If the action depends on a page element, make sure the element exists when the action is triggered.

The targeted element is not found

The element may not be available yet, or the selector may not be stable.
Try using Wait for element before triggering the next action.
You can also ask your technical team to add a stable CSS ID to the element you want to target.

The action works in preview but not in production

Make sure the Screeb tag is installed on the production page and that the message targeting rules match the production environment.
Also check that the selected element exists in the same way in production as it does in your test environment.

The custom event does not do anything

If you use Dispatch custom event, your application must listen to that event and define what should happen when it is received.
Ask your technical team to confirm that the event listener is correctly implemented on the page.

Conclusion

Contextual Actions help you turn Screeb messages into interactive product experiences.
You can use them to guide users, highlight important elements, trigger Screeb campaigns, track interactions, update user properties, and connect your messages with your own product logic.
They are particularly useful when you want to help users take action directly inside your product, at the right time and in the right context.

Updated on: 09/07/2026