Salesforce Docs Portal

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
      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
      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
    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