Custom Code Component

Custom Code Component is a component you can add in your campaigns. It is available in all Professional-plans.

Some things you can do

Anything! 🙂

Guidelines for CSS

To help you select specific elements in the widget you can add an ID to the component:

which can then be used like this:

div[data-external-id="headline"]  div.actual-element
{
  border-bottom:1px dashed #dedede;
}

Guidelines for JavaScript

Examples

In the scope of your code you have access to the widget with the "widget"-object. You can select HTML objects in your widget using for example this code, which would select an HTML object with the html-id of "myButton":

    const couponCodes = widget.querySelector('#myButton]');

If you want to select objects created in the Designer, such as Deadline campaign or specific form elements, you can make use of the External ID-property, which is available on all components in the Designer.

const couponComponent = widget.querySelector('[data-external-id="couponCodes"]');
const winLabel = widget.querySelector('[data-external-id="winnerLabel"]');