Embedding your bot using Shadow DOM

Starting in Bot Libre 8.5 we now use shadow DOM in the generated embed code. This ensures that the user interface of the bot is not affect by CSS styles in your page.

The embed code sets 2 style sheet URLs on the WebChatbotListener, one for the button style, and one for the chat style. If you want to make any other style changes to the interface you need to create your own style sheet file on your website (or Bot Libre scripts) by copying one of our existing style sheets, and making your changes.

This will not affect old embed code. Old embed code will not use shadow DOM, as the version set in the embed code is less than 8.5.

What is a Shadow DOM?

Shadow DOM’s allow you to hidden subtree’s to elements in the regular DOM tree. This means you can isolate code encapsulated inside an element, like a div, from external Java Script and CSS. Currently, Shadow DOM’s are incorporated into embedded bots, live chats, and web avatars.

To embed your own bots, live chats, or web avatars visit botlibre.biz or botlibre.com.

How to create a Shadow DOM

Initially you need an element to encapsulate your code. In this case thats a div called “holder”. You can attach Shadow DOM's to things like divs, spans, headers, bodies, and autonomous custom elements with valid names; Note that not all elements can have Shadow Dom’s attached.

var holder = document.createElement(“div”);

Let root = holder.attachShadow({mode: ‘open’});

The above “holder.attachShadow({mode: ‘open’});” attaches the shadow to holder.

“mode: ‘open’” returns a shadow root object which is useful dynamic changes, while “mode: ‘closed’” would return null.

Working with a Shadow DOM

To update the html within the holder, one option is to edit holder.innerHTML. You can also append elements created by the document as follows (utilizing holder and root from above):

var spanExample = document.createElement('span');

root.appendChild(spanEample);

Elements in the root can be accessed via root.getElementById() or created with root.createElement(). You will not be able to access elements inside the Shadow DOM via document.getElementById().

Browser compatibility

Shadow DOM's are compatible with nearly all modern desktop browsers, with the exception of Internet Explorer. They are also compatible with all major mobile browsers.