Website Integration Guide
Overview
The guide provides an overview of how to add Engaging Things to your website.
Adding the Hover Widget to the Site Template
To add the chat widget that hovers in the bottom-right corner of the screen, add the following meta tags and script tag to the HTML of your site template.
​
<head>
...
<meta name="et-account-id" content="<account ID>">
<meta name="et-service-id" content="<service ID>">
</head>
<body>
...
<script src="https://chat.engagingthings.ai/et-1.4.js" async></script>
</body>
Place the script tag before the closing tag for optimal performance.
​
Contact the Engaging Things team to find out what your account ID and service ID are.
​
Adding the Service Hub to the Support Page
First, add the Hover Widget to the page as per the above instructions.
Additionally, place the following div into the page where the Service Hub should appear:
<div id="et_service_hub"></div>
This div acts as a placeholder where your JavaScript code will render the service hub UI component.
Customising the Service Hub Styles
To apply your own styles to the Engaging Things UI, simply add a new stylesheet to your website template and override styles applied to the following CSS classes:
​
<div id="et-widget" class="et-widget-sh">
<div id="et-widget-title" class="et-widget-title-sh">How can we help you today?</div>
<div id="et-messages" class="et-messages-sh"></div>
<div id="et-text-input-container" class="et-text-input-container-sh">
<textarea id="et-text-input" class="et-text-input-sh" placeholder="Ask a question..."></textarea>
<div id="et-submit-icon-container" class="et-submit-icon-container-sh">
<img id="et-submit-icon" class="et-submit-icon-sh" src="/icons/submit-disabled.svg"/></div>
</div>
<div class="et-example-questions-scroller-sh">
<div class="et-example-questions-sh">
<div class="et-example-question-sh">Where can I find your store?</div>
</div>
</div>
<div id="et-logo-container" class="et-logo-container-sh">
<a href="https://engagingthings.ai" target="_blank" alt="Powered by Engaging Things" title="Powered by Engaging Things">
<img id="et-logo" class="et-logo-sh" src="/icons/logo.png">
</a>
</div>
</div>
Customising the Hover Widget Styles
To apply your own styles to the Engaging Things UI, simply add a new stylesheet to your website template and override styles applied to the following CSS classes:
​
<div id="et-widget" class="et-widget-hw">
<div id="et-widget-title" class="et-widget-title-hw">How can we help you today?</div>
<div id="et-messages" class="et-messages-hw"></div>
<div id="et-text-input-container" class="et-text-input-container-hw">
<textarea id="et-text-input" class="et-text-input-hw" placeholder="Ask a question..."></textarea>
<div id="et-submit-icon-container" class="et-submit-icon-container-hw">
<img id="et-submit-icon" class="et-submit-icon-hw" src="/icons/submit-disabled.svg"/></div>
</div>
<div id="et-logo-container" class="et-logo-container-hw">
<a href="https://engagingthings.ai" target="_blank" alt="Powered by Engaging Things" title="Powered by Engaging Things">
<img id="et-logo" class="et-logo-hw" src="/icons/logo.png">
</a>
</div>
</div>