Header Widgets

The header is used to display inline information, to add drop-down menus, and so on. As the header container has limited vertical space, the overall header height is only 64 pixels. For more information on the layout alignment, see the layout property section.

Example:

"header":{
   "id":"header",
   "widgets":{
      "head1":{
         "comp":"header-widget-one",
         "script":"https://my-cdn.com/dynamic-widgets/header-widget-one.js",
      },
      "head2":{
         "comp":"header-widget-two",
         "script":"https://my-cdn.com/dynamic-widgets/header-widget-two.js",
      }
   },
   "layout":{
      "areas":[[ "head1", "head2" ]], 
      "size": { "cols": [1, 1], "rows": [1] } 
      } 
}

To add a tooltip for a header widget, wrap the component with md-tooltip. Enter tooltip information in the message property.

Example:

"header": {
    "id": "dw-header",
    "widgets": {
        "head1": {
            "comp": "md-tooltip",
            "attributes": {
                "message": "Netlify"
            },
            "children": [{
                "comp": "agentx-wc-iframe",
                "attributes": {
                    "src": "https://keen-jackson-8d352f.netlify.app"
                }
            }]
        },

    },
}

You must add the style attributes display and height to configure any widgets through iFrame in the customizable widget area in the header. The best fit value of the height attribute is 64 pixels.

Note	Ensure that you add the style attributes to the existing header widgets for them to load as expected within the iFrame.

Example:

"head1": {
    "comp": "agentx-wc-iframe",
    "attributes": {
        "src": "https://widget-kad.s3.amazonaws.com/Headers/Timer/Timer.htm",
        "style": "height:64px;display:flex;"
    }


},

Note	We recommend that you use only a single row with multiple columns for the header because the header height is only 64 pixels. For more information on the alignment, see the layout property section.