Onsite Campaigns: How to create an Embedded Widget

Embedded widgets are injected on to your site rather than laying on top like popups or panels, to enhance the feeling of the widget being a part of the editorial content. The widget is rendered on your site through a simple <div> element that you implement on your site where you want the widget to show (method 1), or rendered in a predefined element placeholder of your choosing (method 2).


Method 1 - Triggerbee generated snippet

  1. Start by creating a new campaign and select to show "all templates".
  2. Now you have two options. To make a widget embedded, you select the placement Embedded, which is found for all Panels and Callouts.
    There are also some pre-made Embedded Templates.
    A. Filter by Other --> Embedded (video below).
    B. Filter by Layout --> Callout or Panel.
  3. Select the template you want to build your widget based on. Either a pre-made or a blank canvas. Click "Use this template" to select your template. 
  4. Select the placement for your widget. You will find the Embedded placement at the bottom.

    Note: If you don't see the Embedded option, you need to change your template. 

  5. Now you will see the widget in the editor. Take your time to design and edit your widget to your desired look. Then move on to Campaign Settings. Name your campaign and add settings for the audience, triggers and any other campaign settings you want to have.
  6. Under Embedded Settings, you will find your <div> element to implement on your webpage. With this snippet on your site, Triggerbee will render your widget at that spot. 
  7. Implement the code and publish your campaign, then you're done!

Note: Embedded widgets can not be previewed from the "preview"-button in the Editor.

It is however possible to preview by adding the preview-link to the page where you have your snippet:  ?dev=true&tb-widget-preview=1234&tb-nocache=true, where 1234 is changed to your widget ID, which can be found in the URL of the editor: https://app.triggerbee.com/campaigns/5678/widgets/1234/editor.


Method 2 - Triggerbee generated snippet

  1. Navigate to Settings --> Customization. Scroll down to "Your Embedded Campaign Placeholders" and press +New Placeholder.
  2. Define your placeholder by the following values:
    - Name: Give your placeholder a unique name. This will be used for selecting placeholder in your campaign.
    - Selector: The CSS-selector of your element where you want the campaign. 
    - Embed method: Select "Append Child" to render your campaign below your specified placeholder, and "Replace" to replace your placeholder with the campaign.  
  3. Save your placeholder by clicking Create. Then navigate to Onsite Campaigns to create your campaign. 
  4. Click +New campaign and select to show "all templates".
  5. Now you have two options. To make a widget embedded, you select the placement Embedded, which is found for all Panels and Callouts.
    There are also some pre-made Embedded Templates.
    A. Filter by Other --> Embedded (video below).
    B. Filter by Layout --> Callout or Panel.
  6. Select the template you want to build your widget based on. Either a pre-made or a blank canvas. Click "Use this template" to select your template. 
  7. Select the placement for your widget. You will find the Embedded placement at the bottom.

    Note: If you don't see the Embedded option, you need to change your template. 

  8. Now you will see the widget in the editor. Take your time to design and edit your widget to your desired look. Then move on to Campaign Settings. Name your campaign and add settings for the audience, triggers, and any other campaign settings you want to have.
  9. Under Embedded Settings, you will find a list of your created placeholders. Select the one you want to add the campaign to.
  10. Publish your campaign to render it on your website.

Note: Embedded widgets can not be previewed from the "preview"-button in the Editor.

It is however possible to preview by adding the preview-link to the page where you have your placeholder:  ?dev=true&tb-widget-preview=1234&tb-nocache=true, where 1234 is changed to your widget ID, which can be found in the URL of the editor: https://app.triggerbee.com/campaigns/5678/widgets/1234/editor.

Did this answer your question? Thanks for the feedback! Please reach out to [email protected] if there's anything you'd like to add. There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us