Direqt | Custom Elements¶
We offer a variety of custom elements that can be added to your website to enhance the user experience, all of which have different use cases.
Note
Custom Elements are meant to be used in conjunction with an embedded Direqt Webchat. If you haven't already embedded your chatbot, please refer to the Direqt Embed documentation.
Adding a Custom Element¶
Smart Prompt Custom Element¶
This custom element is designed for story pages. When added to a story page, it displays a list of smart prompt pill buttons related to the story. When clicked, these buttons will open the chatbox and instantly send the selected prompt to the chatbot.
Usage¶
You can place the custom element anywhere in your HTML file where you want the smart prompts to appear on your story page.
That's all you need to get started! The custom element will automatically fetch the smart prompts related to that story and display them as pill buttons.
Customization¶
You can customize the font size, font color, font family, and the number of smart prompt pills using specific style attributes.
For example:
<direqt-smart-prompt font-size="15px" font-family="Arial" font-color="red" limit="2"></direqt-smart-prompt>
Will change the text color to red, the font size to 15px, the font family to Arial and only show two smart prompts at a time.
Story Explore Custom Element¶
This custom element displays a list of recommended stories for the user. When the user clicks on a story, they will be navigated to the story page.
Usage¶
You can place the custom element anywhere in your HTML file where you want the story explore to appear on your story page.
That's all you need to get started! The custom element will automatically fetch the stories for the chatbot and display them as clickable elements.
Overlay lite Custom Element¶
Overlay-lite is a fixed floating icon used to trigger chat anywhere on your page. Place this element to the root of the body tag.
Usage¶
Customization¶
The custom element can be placed in any fixed location of the page by using the style attribute, and you can adjust the icon size with the size attribute.