---
schema_version: "1"
id: f9bbea9550da3bd207d272e0afd99b1cb42739360ebb422a1eba556b30f31976
title: Create a Custom Widget
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/mktg/264-0-0/dato_visualize_widgets_element_custom_create.md
canonical_url: https://help.salesforce.com/s/articleView?id=mktg.dato_visualize_widgets_element_custom_create.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 0c9bbb48311287d83492109625a5917ede6cebbd7e3a63053e6a088f1fef6e04
description: 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.
products:
  - Marketing
  - Marketing Cloud Intelligence
release: "264"
---
# 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.

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col style="width:50%">
          <col style="width:50%">
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="colgroup" class="slds-cell-wrap" colspan="2" style="vertical-align:top;" id="d26480e38">REQUIRED USER ROLE</th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="REQUIRED USER ROLE" class="slds-cell-wrap" style="vertical-align:top;" headers="d26480e38 ">To create a widget </td>

            <td class="slds-cell-wrap" style="vertical-align:top;" headers="d26480e38 ">Admin and Power User</td>

          </tr>
        </tbody>
      </table>

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.](https://help.salesforce.com/s/articleView?id=mktg.dato_mark_custom_widgets_install.htm&release=264.0.0&type=5 "Add functionality to your workspace’s dashboard pages with a custom widget. After the custom widget installs it appears in your Installed Solutions page, and also becomes available in the Visualize tab just like other widget types.")

1. Navigate to **Visualize**.
2. Select the dashboard and then the page you want to add a widget to.
3. To edit the selected page, click the pencil icon.
4. To add a new widget, click the **+** icon.
5. Under **Elements**, select **Custom**.
6. Classify your widget by selecting a widget type from the dropdown menu.
7. Click the **Custom Widget Editor** icon to open the custom widget editor dialog panel.
8. In the snippet library, click the **JavaScript** option.
9. 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:
    
    <table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small "><tbody><tr class=""><td class="slds-cell-wrap"><strong class="uicontrol">Set Custom Design</strong></td><td class="slds-cell-wrap">Populates the functions you want displayed in the design tab of your custom widget. To add functions to your widget, you must add the <strong class="uicontrol">Set Custom Design API</strong> first.</td></tr><tr class=""><td class="slds-cell-wrap"><strong class="uicontrol">Get Custom Design</strong></td><td class="slds-cell-wrap">Imports the design settings values from the panel into the custom widget, where they can be applied.</td></tr></tbody></table>
10. To add **Set Custom Design**, click the plus **+** icon.
11. 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:
    
    <table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small "><tbody><tr class=""><td class="slds-cell-wrap"><strong class="uicontrol">Input Field</strong></td><td class="slds-cell-wrap">Adds a text field.</td></tr><tr class=""><td class="slds-cell-wrap"><strong class="uicontrol">Checkbox</strong></td><td class="slds-cell-wrap">Adds checkboxes with multiple options to select.</td></tr><tr class=""><td class="slds-cell-wrap"><strong class="uicontrol">Radio</strong></td><td class="slds-cell-wrap">Adds a radio button, also known as an option button.</td></tr><tr class=""><td class="slds-cell-wrap"><strong class="uicontrol">Select</strong></td><td class="slds-cell-wrap">Adds a dropdown menu where you can select predefined options.</td></tr><tr class=""><td class="slds-cell-wrap"><strong class="uicontrol">Slider Field</strong></td><td class="slds-cell-wrap">Adds a slider field, which you can use to determine a color’s opacity, from transparent to opaque.</td></tr><tr class=""><td class="slds-cell-wrap"><strong class="uicontrol">Color Picker</strong></td><td class="slds-cell-wrap">Adds a color picker, which you can use to offer custom colors associated with your brand.</td></tr><tr class=""><td class="slds-cell-wrap"><strong class="uicontrol">Title</strong></td><td class="slds-cell-wrap">Adds a title, which you can use to organize or group sections in your widget.</td></tr><tr class=""><td class="slds-cell-wrap"><strong class="uicontrol">Separator</strong></td><td class="slds-cell-wrap">Adds a visual element that you can use to help organize your tab.</td></tr><tr class=""><td class="slds-cell-wrap"><strong class="uicontrol">Date Picker</strong></td><td class="slds-cell-wrap">Adds a date picker to the design tab, which you can use to exclude specific dates or drill down to a specific date.</td></tr></tbody></table>
    
    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
12. When you’re finished, click **Apply**.

- **[Add EMI APIs to Custom Widgets](https://help.salesforce.com/s/articleView?id=mktg.dato_visualize_widgets_element_custom_emi.htm&release=264.0.0&type=5)**  
    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.