You are here:
Create a Custom Widget
Custom widget is a complete development interface within Marketing Cloud Intelligence collections that allows nearly limitless dashboard page design and behavior. It includes HTML, CSS, and JavaScript coding environments, with access to a full library of functions that provide ready-to-use page visualization, navigation, and API solutions.
| REQUIRED USER ROLE | |
|---|---|
| To create a widget | Admin and Power User |
This functionality allows admins and power users to create and configure design options that otherwise wouldn’t be readily available in a custom widget. For example, you can add a color picker design setting, allowing the end user to select colors from a predefined color palette to match brand colors.
If you’re an admin, you can install preconfigured custom widgets from the Marketplace. For more information, see Install Custom Widgets.
- Navigate to Visualize.
- Select the dashboard and then the page you want to add a widget to.
- To edit the selected page, click the pencil icon.
- To add a new widget, click the + icon.
- Under Elements, select Custom.
- Classify your widget by selecting a widget type from the dropdown menu.
- Click the Custom Widget Editor icon to open the custom widget editor dialog panel.
- In the snippet library, click the JavaScript option.
-
Click Custom Design Settings to open the custom design settings
options panel. There are two main options that are crucial to creating your custom design
options:
Set Custom Design Populates the functions you want displayed in the design tab of your custom widget. To add functions to your widget, you must add the Set Custom Design API first. Get Custom Design Imports the design settings values from the panel into the custom widget, where they can be applied. - To add Set Custom Design, click the plus + icon.
-
Now you can add the desired field controls into the Set Custom Design as an array by
clicking the plus + icon next to the desired field. The input is
displayed in the Widget Design tab. These functions are available:
Input Field Adds a text field. Checkbox Adds checkboxes with multiple options to select. Radio Adds a radio button, also known as an option button. Select Adds a dropdown menu where you can select predefined options. Slider Field Adds a slider field, which you can use to determine a color’s opacity, from transparent to opaque. Color Picker Adds a color picker, which you can use to offer custom colors associated with your brand. Title Adds a title, which you can use to organize or group sections in your widget. Separator Adds a visual element that you can use to help organize your tab. Date Picker Adds a date picker to the design tab, which you can use to exclude specific dates or drill down to a specific date. The Get Custom Design setting is used to read the values the user configured in the design tab, which enables you to write code that reacts to these selections
- When you’re finished, click Apply.
- Add EMI APIs to Custom Widgets
Einstein Marketing Insights (EMI) is an insights discovery tool used to analyze a data set and uncover key highlights that affect your performance in a positive or negative manner. This tool enables you to become proactive with your marketing efforts. The EMI APIs allow you to pull your insight bots and insights into custom widgets.
