➕ Add an AI Chatbot to Your Website with IFRAME: It's Like Magic! ✨

Learn how to seamlessly integrate Embdabl AI chatbots into your website using IFRAME tags. It's like adding a sprinkle of AI magic dust 🪄 to improve user experience and provide personalized assistance.

Embedding a chatbot is a one-way street 🛣️, and that street is paved with IFRAME tags in HTML. You can find the code to add to your website by clicking on a chatbot's options.

Important Note: 📝 When adding a chatbot, make sure it's placed at the root of the <body> tags and not inside any <div> with custom CSS. Otherwise, it might break the chatbot, and nobody wants that! 😭

Parameters: Let's Get Fancy! 🎩

Client-Side Prompt:

We offer some cool features when embedding a chatbot, like client-side prompts. It's like giving your users a remote control 🕹️ for the chatbot!

Adding a client-side prompt override makes the chatbot more user-friendly and flexible. Users can temporarily tweak how the chatbot behaves and responds to better fit their needs. This customization happens on the user's side and doesn't mess with the chatbot's main settings on the server. It's like giving the chatbot a temporary disguise! 🥸

Here's how it works (it's like a secret code! 🤫):

<iframe src="https://www.embdabl.io/embed/1234123/window?chatbox=false&clientSidePrompt=You%20are%20currently%20talking%20to%20%7BUser%20X%7D%20help%20him%20to%20understand%20the%20book%20%7BBook%20Name%20X%7D."
    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;"
    allowfullscreen id="embdabl-chatbot-iframe"></iframe>

Important Security Note: This is more for user convenience. This feature is not for user authentication. It doesn't provide any security since anyone can change the prompt on the client-side. It's like a fun costume, not a suit of armor! 🛡️

Default Message:

Default messages are like pre-written conversation starters 🗨️. They can be added to the user input field, saving users from typing everything manually. These messages are set within the IFRAME URL, making them dynamic and customizable via JavaScript. It is like presetting a question.

Here's how it works:

<iframe src="https://www.embdabl.io/embed/1234123/window?chatbox=false&defaultMessage=How%20many%20chatbot%20can%20I%20create%20for%20free%3F"
    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;"
    allowfullscreen id="embdabl-chatbot-iframe"></iframe>

Encoding Note: You need to add %20 for every space and encode any other special characters for the best results. It's like speaking the language of URLs! 🌐

How to add to your site