An HTML API for inserting a custom element anywhere on your site.

Example

<elevio-element data-type="search"></elevio-element>
<elevio-element data-type="article" data-id="1234"></elevio-element>

Signature

<elevio-element data-type="type" data-id="id"></elevio-element>

data-type (required)

  • addon
    Requires data-id option set to module ID of addon.
    See styling in notes below.
  • article
    Requires data-id option set to article ID. Optional data-hide-title, data-hide-kblink, data-hide-featured-imagand data-prevent-interlink-click attributes.
    The data-hide-featured-image option defaults to true. To display featured images simply set this to false.
    The data-prevent-interlink-click option defaults to false. You can separately subscribe to the on event to determine whether to act on interlink clicks. 
  • article-feedback
    Requires data-id option set to article ID.
  • article-related
    Requires data-id option set to article ID.
    Optionally if you wish to prevent the opening of an article in the assistant you can set data-prevent-open-assistant="true". You can also set data-source-name, this allows you to get notified whenever a user clicks on an article link and where the click came from: see the On article for more details.
  • category
    Requires data-id option set to category ID, use the id of 'root' to get the top level category.
    Optionally if you wish to prevent the opening of an article in the assistant you can set data-prevent-open-assistant="true". You can also set data-source-name, this allows you to get notified whenever a user clicks on an article and where the click came from: see the On article for more details.
  • iframe
    Requires data-id option set to module ID of iframe.
    See styling in notes below.
  • menu
  • search
    Optionally if you wish to prevent the opening of an article in the assistant you can set data-prevent-open-assistant="true". You can also set data-source-name, this allows you to get notified whenever a user clicks on an article and where the click came from: see the On article for more details.
  • suggestions
    Optionally if you wish to prevent the opening of an article in the assistant you can set data-prevent-open-assistant="true". You can also set data-source-name, this allows you to get notified whenever a user clicks on an article and where the click came from: see the On article for more details.

data-id

Some types require an associated ID. See above.


Notes

  • Changing the data-type attribute will not cause an update, but changing data-id will.
  • Styling options are limited for now. You can use the CSS classes at your own risk; they may change over time.
    • addon and iframetypes require a parent element with height and width. For example:
      • <div style="width: 500px; height: 500px;"><elevio-element data-type="addon" data-id="1234"></elevio-element></div>
  • This API has the same result as component (a custom element DOM node). Note that neither are specification compliant.
If you use this API or have suggestions for it’s improvement please get in touch about your experience.

See also

  • component
  • popupComponent
  • buttonComponent