Embed your Tmpt.me AI Agent in your own website

Your AI Agent in Your Website

As an Expert, you can always send your Knowledge Seekers to Tmpt.me to access your AI Agent. That said, many of our Experts have their own websites, author platforms, or community management systems where they want to provide access to their 24x7 answers in a way that is seamless to the existing experience.

To help with this, the Tmpt.me Embedded Agent can be used to embed your AI Agent in nearly any website. As the Expert, you control the Agent title, color, and other attributes. You can also decide whether to let any visitor to your website access your assistant, or require them to login as a member of your Knowledge Hub first.

To see an example of how we use the Tmpt.me Embedded Agent ourselves, visit the Tmpt.me home page and click the "Ask a Question" button in the bottom right:

Here are instructions for embedding your Tmpt.me AI Agent in your own website or web application:

Before you begin

To use the Tmpt.me Embedded Agent:

• Your web hosting or author platform must allow you to modify the HTML and Javascript of any page where you intend to embed the Agent. Ideally you can insert arbitrary HTML, but at the very least you must be able to add an IFRAME element.
• You must have a Knowledge Hub on Tmpt.me for which you are the Expert
• You should feel comfortable editing HTML and CSS

Step 1. Enable the Embedded Agent

The Embedded Agent can be enabled in the Hub section of the Tmpt.me app, under the Web Embed tab. 

1. Sign in to Tmpt.me
2. Click Hub on the left navigation, and select the Web Embed tab
3. Make sure that Enable the Tmpt.me Embedded Agent for Web setting is active.

You can also choose whether to require that users are signed into Tmpt.me so that you can track them in your Hub, or allow anonymous access.

Step 2. Find your Hub ID

To find your Hub ID: 

1. Sign into Tmpt.me
2. Navigate to the Hub section
3. Select the Expertise tab. Your Hub ID is displayed in the middle of the Your Expertise module (see the image below). This text is selectable so that you can copy / paste into the HTML snippet in the next steps.

Step 3. Add the Agent HTML Code

If your web host or platform supports adding HTML code (preferred):

If your authoring platforms supports adding HTML code, identify the page where you want to add the Agent and edit the HTML source code for that page. Just before the closing </body> tag of your page (or somewhere near the bottom), insert the following HTML code:

<!-- Tmpt.me embedded agent -->
<script src="https://www.tmpt.app/tea/tea.js"></script>
<div id="tmpt.embedded.assistant"
     data-tea-buttonLabel="Ask a Question"
     data-tea-hubId="YOUR_HUB_ID"
     data-tea-color="HEADER_COLOR"
     data-tea-title="HEADER_TITLE"
     data-tea-showCopy="false"
     data-tea-showRequestReview="false"
     data-tea-showFeedback="true"
></div>

If your web host or platform does not support adding HTML code:

Some author platforms allow only limited forms of embedding code, for example adding an IFRAME embed for YouTube videos but not full HTML code as required above. In that case, your Agent can be embedded via an IFRAME, however be aware that the Agent will be "always on" (no open or close buttons) and you will need to use other mechanisms provided by your author platform if you want to dynamically show or hide the Agent.

To add the Agent via an IFRAME embed, insert this item into your page:

<iframe src="https://www.tmpt.app/tea/index.html?hubId=(your hub ID)"></iframe>

A few of the customization parameters from Step 4 below are available for the IFRAME mode of embedding the Agent, but without the "data-tea-" prefix. These are title, color, showCopy, showRequestReview, and showFeedback.

<iframe src="https://www.tmpt.app/tea/index.html?hubId=(your hub ID)&title=My Agent"></iframe>

Since the web authoring platform will control the layout of the page, you will have to use features of your platform to control the geometry of the IFRAME.

Step 4. Update the parameters in the code

Use the table below to update the default parameters above for your deployment

Step 5. Preview, test, and publish

Using your platform tools, preview the change above, and if it looks good, go ahead and publish to your website. As users visit your site and ask questions, you'll see them in your Answers section in the Tmpt.me app, and get notifications just as if the questions were submitted using the Tmpt.me application.

Advanced Styling

While the parameters above can be used to control basic styling, you can further modify appearance and behavior of the Tmpt.me Embedded Assistant using these instructions.