Creating a Widget: The complete guide
IMPORTANT: This article applies to our old Widget product, which will be phased out during 2020 in favor of our new and improved widget tool Onsite Campaigns. Read more, and learn about the Onsite Campaign Product here.
How to create a widget
This guide will show you how to create a basic popup-widget. Advanced settings and specific how-to's can be found in the Widget section of the Docs. Simply search for your desired feature. If you can not find what you are looking for, feel free to contact our support.
Note: If you haven't already, please read this introduction to widgets before creating your first widget.
1. Basic setup (layout and template)
- Navigate to Widgets in your Triggerbee account. Click Create New.
Select a layout for the widget, your options are:
- Popup: Will display on top of your website's content, in the middle of the screen.
- Callout: Will display at the bottom right corner of your website, on top of the content.
- Fullscreen: Will display full screen (100% width) above your content.
- Embedded: Can be inserted into your website, eg. in the middle of an article or right below your content.
- Sidebar: Will display as a sidebar, which can be placed at the top, bottom or any of the sides of your webpage.
For this guide, we'll pick Popup.
- Select a template. The templates are somewhat editable in the coming steps, but if you want an image in your widget, please select a template having that.
Start by giving your widget a descriptive name
Right: "Newsletter signup - 10 percent off women's clothing"
Wrong: "Widget 1"
Next up, is editing the text content of the widget. Type your content into the text area and edit however you like with the formatting options in the menu. You can also add spacing and word wrapping the in the text area and it will change in the widget.
A: Text area
B: Text formatting
C: Text aligning
G: Micro conversion
H: Source code
I: Font-size and button adding
Remember: The widget will inherit styling from the webpage when published, for example, the font-family.
Thus, the preview in the widget-editor is not 100% accurate.
- Select if you want your widget to minimize instead of closing when dismissing the widget. If you do, the close button in the widget will change to a minimize button, which will allow the widget to stay on the website, reminding the visitor of the offer. Choose what text you want to have in the minimizer, along with the color of the text and button.
The next step will decide if the widget will have a form or not.
- Entire Widget is a link: Enter the URL you want the widget to link to. Triggerbee will only count Click-through-Rate for this type of widget.
- Widget has a form: If you want your widget to have a form, you will be able to edit the form itself, and what should happen after form submission.
- Edit form: Turn On/Off fields, edit the placeholder of the field, and choose whether to have it required or not. Here's also where you edit the text and color of the submit button.
- Form Submission: Select whether to only dismiss the widget on submit, redirect to another URL, or to show a thank-you text. If you choose the latter, a text area will show where you can edit your thank you text.
Tip! Use a thank-you text to display the discount code directly in the widget after form submission.
- If you have the add-on for Triggerbee Consent, this option will be checked automatically. If you don't, or still want to link to your own policy, check option number 2. This will add a default text, which you can edit if you like.
There's also the possibility to "require user to accept with checkbox".
- The first step of the Appearance of the widget is to select the background. Choose a color, or upload an image.
Then choose your text- and button text color.
- Since we chose a widget template with an image, we will also have to select that. Upload a new image, or pick a previous one from the gallery.
- Select a close button from the gallery, or upload your own.
- We have a variety of Entry animations, pick your favorite!
If you know your way around CSS, here's where you can shine. Feel free to add any custom CSS as you like.
Tip! If you want some inspiration for what can be done with CSS Customizing, take a look at this library.
4. When to Show
The first step of
When to Show, is to choose where to display the widget.
- Only display widget on certain pages: allows you to display the widget on one or several specific paths on your webpage, instead of everywhere.
- The visitor must have visited a certain page..: creates a funnel, in which the user must have visited a specific path before seeing the widget.
- Show widget after X number of pageviews: decides on what page view the widget will show. Setting 1 will display the widget on the first pageview.
- Continue to display widget..: If the visitor doesn't dismiss the widget, the widget will continue to be displayed on every following pageview.
Note: Live-preview of the widget is only possible when the widget is published.
If you want to try your widget before going live "for real", target the widget to a test page.
Select your display rules:
- Show immediately: displays the widget right away, on page load.
- Show when the visitor has scrolled down: displays the widget after a certain percentage of scroll (editable when selected).
- Show on exit intent: displays the widget when Triggerbee senses that the visitor is on their way out of the webpage, i.e. moves the cursor to the URL-field, the close button in the browser, or clicking "back" in their mobile devices.
- Show widget after X number of seconds: Can not be used in combination with Show widget after X number of pageviews
Select any exceptions if you need it.
- Don't show my widget at these pages: Instead of selecting specific pages to display the widget (step 1), you can select to display the widget on the whole webpage except the pages you specify here.
- Show only on specific domain: If you have more than one domain in your account, you can specify which one you want the widget on here.
- Hide on mobile devices: Check this one if you want to hide the widget on mobile devices.
- Hide on desktop: Check this one if you want to hide the widget on desktop.
- If you want to repeat the display of your widget, check the "Repeat" box, and select what should happen on dismissal and at the next page view if no interaction.
- The first step of choosing your audience is to choose whether to display your widget to all your visitors, or a specific audience.
If you select to display your widget for a specific audience, a range of options will appear. Start by selecting you main audience, known or unknown visitors. Then add conditions to build your audience.
A: Target visitors with a specific interest profile, eg. "women's clothing"
B: Target visitors with or without fulfilled goals, eg. "has added a product to cart, but not completed purchase"
C: Target visitors with or without certain labels
D: Target visitors coming from/not from certain campaigns. This selection is based on the parameter utm_campaign and will display options what Triggerbee has picked up from your traffic. If you're setting up a widget for a future utm_campaign, please use the option E.
E: Target visitors based on their query string, eg. utm_source=facebook, utm_campaign=summer2019
Tip! Use Querystring to create very narrow targeting, or even displaying widgets to single users by targeting their emails. For instance,
Querystring = utm_custom[email][email protected]
- The final step of creating your widget is to Publish it. Select to Publish it right away, or to Save without publishing for further edits or later publishing.
- Congratulations! Now you have completed the setup of your widget!
Important! If you want to collect any data from the widget and add to your email marketing tool or CRM, please make sure you have an Automation set up before going live with the widget.