# Widget Editor Overview

Your Advocate program offers a pick-and-plop editor that allows you to customize the look and contents of the widgets presented to your customer advocates.

#### Widget editor interface

The self-serve widget editor has four main areas:

<div data-with-frame="true"><figure><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-f343272a45c0ebe8a90036c489173dbdc96cb155%2F692288b3de9942b25196de77402f176c0b491974bcb06f24239e69499e3dca88.jpg?alt=media" alt=""><figcaption></figcaption></figure></div>

{% tabs %}
{% tab title="Top menu bar" %}
The menu bar at the top of the page is where you can undo actions, view the HTML code, and preview the finished widget. Use the desktop, tablet, or mobile icons to see how your widget will appear on devices with different screen sizes.
{% endtab %}

{% tab title="Canvas" %}
The canvas shows all of the components that make up your widget. You can select individual components to edit them, or add new ones and see at a glance how they’ll show up for your participants.
{% endtab %}

{% tab title="Left slideout" %}
The left slideout settings menu is a collapsible panel to the left of the canvas. Here, you can select **Layers** to see a detailed view of all of the components in your widget, or select **Templates** to use one of our pre-made widgets. The **Settings** button takes you to the package installation sub-menu.

For even further styling on a branding level, select the Widget Style option. View [Customize Widgets and Microsites with the Content Editor](https://help.impact.com/brand/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/customize-widgets-and-microsites-with-the-content-editor) for more information on the styling options available to you.
{% endtab %}

{% tab title="Component" %}
The component menu is a panel to the right of the canvas. Use the **Add** tab to insert new components into the canvas, and use the **Edit** tab to make adjustments to what’s already there.
{% endtab %}
{% endtabs %}

#### Troubleshooting

The widget has two layers of validation to check for errors in component placement and component properties. Common reasons for receiving an error message include:

* Missing a required field
* Choosing an invalid color
* Entering an invalid URL

When you have unresolved errors, a warning message displays at the top right of the canvas that notifies you of how many errors were found.

<div data-with-frame="true"><figure><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-511216419b1ffaa7cf19cda9c94f06eedbbdaabc%2Fb0790ca38faffb4d36e8ed5d551995d0231df77a9958ffb98e857740cd207626.jpg?alt=media" alt=""><figcaption></figcaption></figure></div>

Learn more about [Customizing Program Widgets](https://help.impact.com/brand/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-experiences/customize-program-widgets).

**View unresolved error details**

1. Select **Details** on the warning message for a brief explanation of what went wrong.
2. Go to the component with the error by either:
   * Selecting **Open Layers**
   * Selecting the error explanation message
3. Find the component with the error. It will be marked with a red exclamation mark icon.
4. Select the component to open the properties in the **Edit** bar.
5. Make the required changes.