Embed & Integrate

With Tiny Talk, you can easily embed your chatbot as a widget on your website. It allows you to provide real-time assistance, engage with visitors, and off...

User Guide

September 2, 2023

Integrations

With Tiny Talk, you can easily embed your chatbot as a widget on your website. It allows you to provide real-time assistance, engage with visitors, and offer a seamless chatbot experience. Customize the widget's appearance and behavior to align with your brand (coming soon). Stay tuned for future integration updates, including support for platforms like Slack.

Embed on Website

You have two options to embed your chatbot on your website. You can either use the Tiny Talk Frame or the Tiny Talk Widget. The Widget is a small icon that opens the chatbot when clicked. The Frame is a full-screen chatbot that opens when your page loads.


Embed as Frame

Copy the following code and replace {BOT_ID} with your bot's ID. Then paste it into your website.

html

<iframe  src="https://dashboard.tinytalk.ai/bots/{BOT_ID}/chat"  width="100%"  height="660"  frameborder="0"></iframe>

Embed as Widget using Script Tag

You can embed the widget by adding a script tag to your HTML. Copy the following code and replace {BOT_ID} with your bot's ID. Then paste it into your website. This is all you need to do to embed a Tiny Bot, it will appear at the bottom right corner of your page.

html

<script  src="https://cdn.tinytalk.ai/latest/tiny-talk-sdk.min.umd.js"  data-tiny-bot-id="{BOT_ID}"  defer></script>

Embed as Widget using ES Module

One other way is to import the Tiny Talk SDK and create a Tiny Bot. Copy the following code and replace {BOT_ID} with your bot's ID. Then paste it into your website.

html

<script type="module">  import { createTinyBot } from 'https://cdn.tinytalk.ai/latest/tiny-talk-sdk.min.esm.js';  const options = {    botId: '{BOT_ID}',  };  createTinyBot(options);</script>

SDK Methods

Only the following method(s) are supported at the moment, more methods will be added soon. You can call these method(s) using window.tinytalk.

MethodDescription
toggleDisplays chat window if hidden, hides if visible

Find your Bot ID

You can find and copy your Bot ID in the Tiny Talk Dashboard under bot detail or overview page.