Embed Your Chatbot
Click the "Embed" option to get embedding codes for your website chat widget or window. Options include:
A chatbot on this platform serves as an interactive assistant for users visiting your website. To create one:
- Chat Widget embedding for any kind of websites. HTML and NEXt.JS codes for Chat Widget embedding.
<iframe
src="https://app.todvob.com/embed/[your-chatbot-id]/button"
id="todvob-chatbot-button-iframe"
style="
position: fixed;
bottom: 0;
right: 0;
margin-bottom: 16px;
z-index: 50;
align-items: end;
display: inline-block;
margin-right: 16px;
width: 56px;
height: 56px;
border: 1px solid rgb(209, 213, 219);
border-radius: 99999px;
"
></iframe>
<!-- window -->
<iframe
src="https://app.todvob.com/embed/[your-chatbot-id]/button-chatbot"
id="todvob-chatbot-iframe"
style="
margin-right: 1rem;
margin-bottom: 6rem;
display: none;
position: fixed;
right: 0;
bottom: 0;
pointer-events: none;
overflow: hidden;
height: 65vh;
border: 2px solid #e2e8f0;
border-radius: 0.375rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
width: 30rem;
"
></iframe>
<script>
window.addEventListener("message", function (event) {
var chatIframe = document.getElementById("todvob-chatbot-iframe");
var buttonIframe = document.getElementById(
"todvob-chatbot-button-iframe"
);
if (event.data === "openChat") {
if (chatIframe && buttonIframe) {
chatIframe.contentWindow.postMessage("openChat", "*");
buttonIframe.contentWindow.postMessage("openChat", "*");
chatIframe.style.pointerEvents = "auto";
chatIframe.style.display = "block";
if (window.innerWidth < 640) {
chatIframe.style.position = "fixed";
chatIframe.style.width = "100%";
chatIframe.style.height = "88%";
chatIframe.style.top = "0";
chatIframe.style.left = "0";
chatIframe.style.zIndex = "9999";
} else {
chatIframe.style.position = "fixed";
chatIframe.style.width = "30rem";
chatIframe.style.height = "65vh";
chatIframe.style.bottom = "0";
chatIframe.style.right = "0";
chatIframe.style.top = "";
chatIframe.style.left = "";
}
} else {
console.error("Iframe not found");
}
}
if (event.data === "closeChat" && chatIframe && buttonIframe) {
chatIframe.style.display = "none";
chatIframe.style.pointerEvents = "none";
chatIframe.contentWindow.postMessage("closeChat", "*");
buttonIframe.contentWindow.postMessage("closeChat", "*");
}
});
</script>- Chat Window to embed anywhere at your websote. HTML, NEXt.JS, and REACT.JS codes for Chat Window embedding.
<iframe
src="https://app.todvob.com/embed/[your-chatbot-id]/window"
style="overflow: hidden; height: 80vh; border: 0 none; width: 480px; bottom: -30px;"
allowFullScreen
allow="clipboard-read; clipboard-write"
></iframe>-
Shareable Link: Copy and share the link which acts as your Vcard.
https://app.todvob.com/share/your-username/ (opens in a new tab)