The Custom code widget is part of the Promotional Content widget category. For more information on the widgets, please refer to Widgets configuration in the visual editor.
Introduction
The Custom Code widget gives you the flexibility to create any type of content by using HTML, CSS, and JavaScript, combined with the native widget options, such as layout, style, and condition settings. The Custom Code widget combines control of a standard widget with the flexibility of custom code.
You can use this widget to write your own code while still taking advantage of the existing native options in AB Tasty widgets. By default, the widget includes pre-written code (HTML, CSS, and JS) that generates a basic pop-in with a title, text, and two buttons, which you can easily customize or replace with your own code.
Advantages of the custom code widget
- Full Customization: Tailor the widget precisely to your needs. Whether it's a simple pop-in or a complex interactive element like a carousel, form, or dynamic feature, you have the freedom to create it with custom code.
- Utility Functions: Take advantage of built-in utility functions (such as UTILS.setValidationRecurrence(), UTILS.hideWidget(), etc.) to simplify tasks like tracking user interactions, managing closing behavior, and handling validation. These utilities streamline the creation of interactive experiences while maintaining consistency within the platform.
- Collaboration-Friendly: The widget supports collaboration between tech and non-tech users, allowing both to work together on the same widget efficiently.
Configuration
Below are the configuration options for the Custom code Widget.
Layout tab
The available layouts for the widget are:
• Modal
• Top banner
• Bottom banner
• Free placement: This option lets you position the widget relative to an existing element on the page (e.g., <div>, <p>, <h2>, <section>).
If you choose the modal layout, you can position it on the page by selecting a spot on the grid. You can also specify whether the widget’s width should adjust automatically based on its content or set a fixed width.
For modal or top/bottom banner layouts, you’ll have the option to select a z-index value for the widget. By default, widgets with these layouts are added to the DOM at the same level as the <body> element, meaning they inherit the same z-index value.
However, you can choose a different z-index from the available options:
Content tab
The content tab includes the following areas:
- HTML
- CSS
- JavaScript
HTML
This section allows you to customize your widget’s content. The example shows a pop-in with a title, text, and two buttons, but you can add any HTML code you want. As you edit, you can preview your changes in real time directly within the editor interface.
CSS
This section lets you customize the style of your widget (e.g., colors, fonts, spacing, etc.). The default styles are linked to the basic pop-in, but if you modify the default HTML, you’ll need to adjust the CSS accordingly.
The widget container is created with a unique CSS class customcodewidget_container_{{UNIQUE_ID}}. This allows you to target styles specifically for the widget by building your CSS selectors based on this class (as shown in the example).
You can also customize your widget’s style using the Style tab. However, any code in the CSS box will take precedence, as it applies an overlay of custom code.
JAVASCRIPT
This section allows you to customize your widget’s behavior. The code entered here will run when the widget is about to appear on the page, but it can't be previewed in the editor. You'll need to thoroughly QA the widget to test and view this JavaScript code.
You can use built-in variables:
- contentElement: Refers to the HTML part of your widget.
- UTILS: Offers useful functions, such as hiding the widget after a certain time.
Placeholders like {{UNIQUE_ID}} and {{TEST_ID}} make your widget adaptable:
- {{UNIQUE_ID}}: A unique identifier for your widget.
- {{TEST_ID}}: The current campaign ID.
These placeholders ensure your widget functions correctly, even when multiple widgets are on the same page.
You can also customize your widget's behavior in the Conditions tab, but any code in the JavaScript box will take precedence, as it applies an overlay of custom code.
Customization
For more customization options, go to the general widget configuration article.