--- schema_version: "1" id: 2ad49285642683fdf82f9ce7ca8df3ced0255fcbf37192c7f2bdafbdf5c63cae title: Create a Headers 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_headers_create.md canonical_url: https://help.salesforce.com/s/articleView?id=mktg.dato_visualize_widgets_element_headers_create.htm&release=264.0.0&type=5 source_site: help.salesforce.com content_type: documentation content_hash: 2d8e01cf2d6e6086dd7e35c4ead3eb95c3c93c934392fc5b308098dd8fde1265 description: A headers widget is a preconfigured custom widget that allows you to quickly and easily insert a header on your page. The header can contain a logo and links to specific widgets on the page, links within Marketing Cloud Intelligence, or links to external web pages. Use a headers widget to introduce the content displayed on the page, to brand the page, to insert links to other pages, or to scroll to specific areas on the page. products: - Marketing - Marketing Cloud Intelligence release: "264" --- # Create a Headers Widget A headers widget is a preconfigured custom widget that allows you to quickly and easily insert a header on your page. The header can contain a logo and links to specific widgets on the page, links within Marketing Cloud Intelligence, or links to external web pages. Use a headers widget to introduce the content displayed on the page, to brand the page, to insert links to other pages, or to scroll to specific areas on the page.
REQUIRED USER ROLE
To create a widget Admin and Power User
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. Scroll down to the **Elements** section, and click **Headers**. A new headers widget is added to your page. These editing options are available in the **Data** tab: - **Name** — Name your widgets so that you can easily find your widget when using other features in the system, such as Advanced Export. You can click the eye icon next to the widget name to hide your widget title from displaying on the page. - Select the type of header you want to use. To see additional options, click **More**. Each header type has slightly different configurations. - To open the editor window, click the pencil icon next to **Custom Widget Editor**. From here you can further customize the information displayed in the widget. The editor window has a predefined configuration already set up within the Server-Side JavaScript (JS) box so you can easily configure the widget. The areas to edit are either colored in brown or blue. These options are available: - **Gradient colors** — Input the color hex code for the color you want to use for the gradient color of the widget. For example: `const firstGradientColor = '#243B55';` ![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-mktg-salesforce_datorama-264-0-0-production-enus/d38a342d-dd4a-4af8-8343-f372280a75dd/images/icon_note.png) Note Use the colors from your page’s InstaBrand theme by copying the hex numbers within the Color Palette section within the Design tab when editing the page. Click the color you want to use and copy the hex number. - When using the **Photo** header type, you can change the background image instead of the gradient colors and then customize the background size, position and repeat. Insert the URL of the image you want to use as your background image . For example: `const backgroundImage = 'https://datorama—public—resources.s3.amazonaws.com/photo—header—background.png'` - **Logo** — Insert the URL of the image you want to use as your logo. For example: `const logoImageSrc = 'https://datorama—public—resources.s3.amazonaws.com/logo.svg'` If you don’t want a logo in the header, delete this code from the JS editor window: `// Logo image source address const logoImageSrc = 'https://datorama—public—resources.s3.amazonaws.com/logo.svg';` - **Links** — You can add a link in your header to an external URL or to a widget on the page. The code is divided into three areas, which you can customize according to your needs: - The destination link: To link to a URL, add the URL between the quotation marks. For example: `'https://salesforce.com'` To link to a widget on the page, insert the widget ID instead of the word ‘null. For example: `scrollToWidget: 123456` ![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-mktg-salesforce_datorama-264-0-0-production-enus/d38a342d-dd4a-4af8-8343-f372280a75dd/images/icon_note.png) Note To find the widget ID, click the relevant widget’s options menu marked by the three dots in the top-right corner of the widget, and select Info. To copy the widget’s ID, click the copy icon. - The display title: Insert the name of choice between the quotation marks. For example: `title: 'Salesforce'` - The display color: Inset the hex color code between the quotation marks, after the #. For example: `color: '#000'` - You can then enter the relevant codes for the next two links. The next two links contain the same code as the first link, just without the descriptions. If you don’t want links in your header, delete this code from the JS editor window: ``` // Change this array to add or update links const links = [ { href: '#', // The link URL to be navigated on click scrollToWidget: null, // Insert the widget ID title: '01 | Link 1', // The name of the link color: '#FFF' // The color of the link }, { href: '#', scrollToWidget: null, title: '02 | Link 2', color: '#FFF' }, { href: '#', scrollToWidget: null, title: '03 | Link 3', color: '#FFF' } ``` If you want just one link, delete the code for the other two links: ``` { href: '#', scrollToWidget: null, title: '02 | Link 2', color: '#FFF' }, { href: '#', scrollToWidget: null, title: '03 | Link 3', color: '#FFF' } ``` ![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-mktg-salesforce_datorama-264-0-0-production-enus/d38a342d-dd4a-4af8-8343-f372280a75dd/images/icon_note.png) Note If you want to add more links, copy and paste the previous code within the same section, and change accordingly. - After you insert all the required sections, click **Apply**, and then save your page. The rest of the widget settings are the same as a custom widget. #### See Also - [Create a Custom Widget](https://help.salesforce.com/s/articleView?id=mktg.dato_visualize_widgets_element_custom_create.htm&release=264.0.0&type=5 "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.")