With the Custom Script feature in Campaigns, you can do just about anything in your campaign or from your campaign. Even if the feature is called "scripts", you can actually add both CSS and JavaScript from it. Some common use cases:
Add a gradient background to buttons with CSS
Change the text in the campaign depending on what the visitor votes in your NPS
Push values from a form to the data layer
You can access the Custom Script feature from the left panel in the Campaign Editor.
The custom Script Feature is available from the PRO plan and up! 🚀
Custom CSS
The Triggerbee Campaign editor allows you to do almost any type of styling to your components. We have settings for sizes, position, margins and appearance - but there will still be scenarios where you want to add some CSS for that extra touch. Here's where the Custom CSS feature comes in handy.
You can use the Advanced ID setting to set an ID on your component to access it via CSS. The ID will be added as a data-external-ID to your component and can be accessed via: div[data-external-id="YOURID"]
Example use cases:
Adding a floating border to a button
Adding a gradient background to a button
Add a dotted border to a text element
Note: Custom CSS will not be rendered in the campaign editor, but you will see it upon previewing or going live.
Common Selectors
Here are some grab-n-go CSS selectors:
Canvas:
div.state.state-regular[data-state="step-id"]Regular button:
button:not(.has-height)Submit button:
button[data-action="SubmitForm"]Headline component:
h1, h2, h3or the level of headline you selectText (paragraph) component:
.text-content pInput fields:
.actual-element-wrapper input
Depending on how your campaign is built, you must sometimes add !important to your CSS for it to apply.
Custom Javascript
Just like the custom CSS, you might stumble upon scenarios where you want to add extra tracking or handle your campaigns in ways beyond our built-in support. Here, custom JavaScript is your friend.
In the Custom Javascript box - you will see a dropdown of some events, such as Widget Opened, Button Clicked, and Form Submitted. These are our Campaign events, which are used to decide when to trigger your custom JavaScript. For instance, adding confetti as entry animation is something you want to do on Widget Opened, while pushing data to the datalayer is more suitable for BeforeFormSubmission.
How to work with custom JavaScript
In the scope of your code, you have access to the widget with the "widget"-object. You can select HTML objects inside your widget using a querySelector on the widget object.
const myButton = widget.querySelector('YOUR SELECTOR');
To access your components in the campaign, you can either dig in to the HTML and find your selector or, in some cases, you can use the Advanced ID setting to set an ID on your component. The ID will be added as a data-external-ID to your component and can be accessed via: [data-external-id="YOURID"]
Common Selectors
Here are some grab-n-go JavaScript selectors:
Canvas:
div.state.state-regular[data-state="step-id"]You will find your step ID (also called state) at the end of the URL in the campaign editor, when switching between steps:
Component with an Advanced ID:
widget.querySelector('[data-external-id="yourID"]');
In our JavaScript library, we gathered some common JavaScript examples.