Nudges and Product Tours are built using the Sticky layout in Triggerbee. The Sticky layout allows your campaign to attach directly to an element on your website, such as a button, form, or navigation link.
What is the Sticky layout?
The Sticky layout works just like any other campaign in Triggerbee, but with one key difference: Instead of appearing as an overlay, it’s attached to an element on your website and is more similar to a tooltip.
You can create a Sticky campaign from the Placement and Size menu in the editor by selecting Sticky. You can also select from one of our templates using Sticky layout.
How to set up a Sticky campaign
Setting up a Sticky campaign follows the same workflow as any other Triggerbee campaign. You can add components, adjust appearance settings, and customize targeting as usual.
1. Select the sticky layout
In the editor, go to Placement and Size and select the Sticky layout.
2. Adjust the Sticky layout settings
When using the Sticky layout, you’ll see an additional settings panel. These options control the positioning and appearance of your Sticky element:
2.1) Select placement (and HUD Settings)
When you click on Select placement, you will be redirected to your website where you can select any element to attach your Sticky campaign.
When you are on your website, you can use the HUD to adjust the position, offset, alignment and distance. Click Save & Close to save your changes, and go back to the editor.
2.2) Position and Distance
The position decides where your campaign appears in relation to the selected element (top, right, bottom, or left).
2.3) Alignment and Offset
The alignment lets you decide which edge of the html element your Sticky will align to. Fine-tune it using the offset setting.
2.4) Connector and Target Color
The Connector adds a visual connector, with or without a line, between your campaign and the element it points to.
The Target Color adjusts the color of the connector and the border of the target element (if you selected a connector that highlights the element) for visibility.
2.5) Backdrop Filter
Optionally blur, brighten, or grayscale everything except your element and the campaign, to draw attention to the highlighted area. Adjust the slider to set the intensity (0% = No effect, 100% = Max effect)
Using the point-and-click HUD
The Triggerbee HUD (Heads-Up Display) is a point-and-click tool that helps you visually position, align, and connect your nudge or product tour to real elements like buttons, images, or links.
When the HUD is open, you can:
Select an element by clicking it on your site. Triggerbee automatically detects and fills in the correct CSS selector.
Preview the tour position in real time (top, bottom, left, or right).
Adjust distance and offset using sliders for pixel-perfect placement.
Align your message vertically (start, center, or end) depending on the element’s shape and location.
Add a connector line between your message and the target element.
Copy or refine the CSS selector manually if needed.
Once you’re happy with the position, click Save & Close.
The HUD will store and apply your settings in the editor, and save the selected element’s CSS path automatically.
The difference between Nudges and Product Tours
Both campaign types use the same layout, but there are some slight differences.
Nudges
Nudges are single-step campaigns using a Sticky layout, designed to draw attention to a single, specific element or action on the website.
Examples of when to use nudge campaigns:
Log-in reminders
Product launch announcements
New feature highlight
Nudges are meant to grab attention without interrupting the visitor experience.
Product Tours
A Product Tour is a multi-step campaign using a Sticky layout, that guides your visitors or users through a series of steps.
Examples of when to use product tours:
New member onboarding
Feature discovery
Specific processes
Each step highlights a different element on your site and includes short copy to help users understand what to do next.
Both formats use the same layout and tools, the difference lies in how many steps you create and how you choose to use them.
Bonus: Use ChatGPT to generate copy
Need help writing the text for your Nudges or Product Tours? Use the pre-made ChatGPT prompt below to generate it automatically.
Pre-written prompt:
You are a copywriting assistant for me, a Triggerbee user. Your job is to help create short, engaging copy for a Product Tour campaign built in Triggerbee.
Start by asking the user: 1) Which language they prefer, 2) Their goal in one sentence, and 3) How many steps the tour contains.
For each step, write short and action-oriented copy that helps the visitor understand what to do next. Each step should guide the user toward completing a goal (for example, signing up, discovering a new feature, or activating a setting).
Keep the tone friendly and helpful. When you finish, format the result so it’s easy to copy into Triggerbee’s campaign editor.
Reference this guide for more details: [Sticky Layout: How to create Nudges and Product Tours](https://help.triggerbee.com/en/articles/nudges-and-product-tours).