Direqt | UI Components

This guide will show you how to embed one of Direqt's pre-built UI components onto your site. All of these components are designed to drive user engagement with a pre-existing Direqt project.

Note

UI components are meant to be used in conjunction with an embedded Direqt project. If you haven't already embedded your project onto your site, please refer to the Search or Chat implementation guide to get started.

Related Questions

A list of questions related to the current page displayed as pill buttons. When clicked, the buttons will open Direqt and instantly send the selected question on the user's behalf.

Usage

Place the element below in your HTML file where you want related questions to appear on your page.

<direqt-related-questions></direqt-related-questions>

That's all you need to get started! The custom element will automatically fetch questions related to the page and display them as pill buttons.

Customization

You can customize the font size, font color, font family, and the number of related questions pills using specific style attributes.

For example:

<direqt-related-questions font-size="15px" font-family="Arial" font-color="red" limit="2"></direqt-related-questions>

will change the text color to red, the font size to 15px, the font family to Arial and only show two questions at a time.

AI Recommendations

A carousel of recommended pages for the user. When the user clicks on a recommendation, they will be navigated to that page.

Usage

Place the element below in your HTML file where you want AI recommendations to appear on your page.

<direqt-recommendations></direqt-recommendations>

That's all you need to get started! The custom element will automatically fetch the recommendations and display them as clickable elements.

Text Button

A simple text button that reads 'Chat with YOUR_BOT_NAME' and opens Direqt when clicked.

Usage

Place the element below in your HTML file where you want the text prompt to appear on your page.

<direqt-text-button></direqt-text-button>

Floating Button

A floating circular icon anchored to the corner of your page that opens Direqt when clicked. Displays your bot's logo.

Usage

Place this element to the root of the body tag.

<direqt-floating-button></direqt-floating-button>

Customization

You can place the icon in any fixed location of the page using the style attribute and adjust the icon size using the size attribute.

For example:

<direqt-floating-button style="bottom: 15px; right: 15px;" size='60'></direqt-floating-button>

will place a floating icon of size 60 px in the bottom right corner of your page.