The widget is a powerful way to engage your website visitors without interrupting their browsing experience. It appears as a clickable icon on your site (e.g., in the bottom-right corner), which, when clicked, opens the campaign in a slide-out side panel. This guide covers how to create, customize, and install the widget.

Part 1: Finding the Widget Editor

1. First, create the campaign you wish to display in the widget.
2. Navigate to the Integrations tab of that campaign.
3. Select the "Create a widget to your website" option. This will open the main widget editor.

Part 2: Customizing Your Widget

The widget editor is organized into three main tabs: Styles, Settings, and Script.

Styles Tab (Visual Appearance)

This tab controls everything related to how the widget and its panel look on your site. The settings are grouped into two main areas.

Widget Panel Settings:

• Opened panel width: Use the slider to set the width of the side panel when it opens.
• Close icon background/color: Customize the colors of the 'X' button inside the opened panel.
• Radius: Adjust the roundness of the corners of the opened panel.
• Position: Choose which corner of the screen the widget icon should appear in (e.g., Bottom left, Bottom right).

Icon, Text, and Popup Styles:

These collapsible sections allow you to style the widget icon itself:

• Icon: Upload your own image for the widget icon and adjust its size.
• Text: Customize the short text label that can appear next to the icon.
• Popup: Style the appearance of any notification pop-up text associated with the widget.

Settings Tab (Display Rules)

This tab controls the display logic for your widget. Here you can create URL-based rules to either show or hide the widget on specific website pages.

When is the widget is hidden (Exclusion List)

Use this section to specify pages where the widget should not appear. Click 'Add new' and enter a part of a URL (e.g., entering "/help" would hide the widget on any page containing that path). By default, the widget is never hidden.

When is the widget shown (Inclusion List)

Use this section to specify the only pages where the widget should appear. If you add any URLs to this list, the widget will only be displayed on those specific pages and nowhere else.

Script Tab (Installation Code)

This tab contains the single line of code needed to make your widget appear on your website. Once you have finished configuring your styles and settings, this is the final step.

Part 3: Installing the Widget on Your Website

After finalizing your design and rules, you need to install the widget's script on your website. **You only need to do this once**, even if you have multiple widgets.

1. Navigate to the Script tab in the widget editor.
2. Copy the provided <script> tag.
3. Paste this script code anywhere before the closing </head> tag in your website's main HTML template.

Once the script is installed, your widget will automatically appear on your website according to the rules you configured in the 'Settings' tab.

Part 4: Passing the Customer ID (CID)

The widget uses the same underlying mechanism as the script + div embed method. The CID is passed as a cid attribute on the div element the widget script renders — note that, unlike other div attributes, this one does not use the adact- prefix.

<div
  id="adact-12345"
  adact-id="12345"
  cid="CUSTOMER_ID"
  adact-width="100%"
  adact-height="600px">
</div>

Set CUSTOMER_ID dynamically, either server-side or via JavaScript:

const widgetDiv = document.querySelector('[adact-id="12345"]');
widgetDiv.setAttribute('cid', getCurrentUserId()); // your own function