Advanced Styling of your Embedded Agent

Modified on Tue, 18 Mar at 5:01 PM

When you embed the Tmpt.me Embedded Agent in your webpage using these instructions, the Javascript you embed will render a button in the bottom right of the page. Clicking the button will open an IFRAME in the bottom right of the page to render the Tmpt.me Embedded Agent. While the standard embedding instructions provide some customization options, you can further modify the appearance of the Tmpt.me Embedded Agent as follows.

Please note that these styling instructions work only for the preferred case where you have full control of the HTML source for a page. For an Agent embedded using the "fallback" IFRAME approach, consult your authoring platform documentation for available styling options.

Style the "Open Agent" Button

The TEA Javascript creates a button to open the assistant with the CSS class of tea-button. To customize the appearance of the button, you can define a CSS style in either an externally loaded CSS or inline in your page. For example:

<html>
<head>
...
    <style>
        .tea-button {
            background-color: yellow !important;
            color: black;
            font-style: italic;
        }
    </style>
</head>
...

(Note that the !important modifier is needed to override the default background color, because that style attribute gets set inline on the button itself to match the data-tea-color parameter)

Change the "Open Agent" Button

The color and text of the button are configurable via properties in the referenced instructions, however, you can also use your own button.

Rather than embedding the DIV element as per the instructions, simply attach an id="tmpt.embedded.assistant" and associated data properties to any non-DIV element that supports a click action. Instead of rendering the default button, the script will attach a click handler to the element which will launch the IFRAME when clicked. For example:

<script src="/tea.js"></script>
<button type="button" id="tmpt.embedded.assistant"
        data-tea-buttonLabel="Ask a Question"
        data-tea-hubId="1234ABCD"
        data-tea-color="126b56"
        data-tea-title="Tmpt.me Agent"
        data-tea-showSources="true"
        data-tea-showCopy="true"
        data-tea-showRequestReview="true"
        data-tea-showFeedback="true">Click me!
</button>

Create a Close Button

The click handler added to your custom button will only open the agent, but not close it. To close the agent, you can use another component or click handler to change the visibility of the Agent's IFRAME.

The Agent IFRAME has the class tea-iframe. To close the IFRAME, create a click handler on another component that does the following:

document.querySelector(".tea-iframe").style.display = "none";

You can thus toggle the IFRAME open and closed by toggling the style.display attribute of the IFRAME between values block and none.

Controlling Position and Other Styles

The Tmpt.me Embedded Assistant is styled via the CSS https://tmpt.app/tea/tea.css, which is injected into the host webpage via the tea.js script. You can use the "cascading" capability of CSS to override the styles defined in this file by adding a <style> tag just above the HTML </head> tag. Within the style tag you can override any of the styles. For example, to position the Agent IFRAME on the left side of the page instead of the right, you can use the following style:

<head>
...
 <style>
        .tea-iframe {
            left: 20px;
            right: unset;
        }
    </style>
</head>