How can we integrate pop up chatbots in website

Question

We already have a bot deployed in the Microsoft Teams channel and WebChat. Now, we want to integrate the same bot with full functionality into the customer website as a pop-up chatbot.

In WebChat, we have dependencies related to UI adjustments for rendering different Adaptive Cards, which we have already implemented in the Teams bot. To minimize UI work, can we use the pop-up chatbot option to integrate all Teams bot functionalities into it? Or do we need to handle Adaptive Card rendering separately such as disabling buttons after clicks, sending messages as post backs, and other UI behaviors?

Will the pop-up chatbot automatically render Adaptive Cards like in Teams, or do we need to manually implement these UI behaviors again?

Answer 1

Hi lakshmi!

Here is the answer to your queries.

1. You can use the same Adaptive card UI setting from webchat on website and use pop-up option to render adaptive cards, but it might require minor UI modification for seamless experience in website as there is a difference on Website and teams' environments.
2. You can use backchannel mechanism which is invisible to users for custom UI behavior.

Please check these samples from GitHub for UI customization reference.

https://github.com/microsoft/BotFramework-WebChat/blob/main/samples/README.md

Reference - Embed a bot in website

Thank you.

Answer 2

Hello lakshmi,

Welcome to the Microsoft Q&A and thank you for posting your questions here.

I understand that you have developed an Azure AI bot service that you would like to Integrate into a customer website as a pop-up chatbot.

To simplify the practical steps and guides, let me use your questions to give a proper direction on this:

Can we use the pop-up chatbot option to integrate all Teams bot functionalities into it?

Yes, you can integrate your Teams bot functionalities into a pop-up chatbot on your website. By using the Microsoft Bot Framework and the Web Chat control, you can ensure that the bot's core functionalities are preserved - https://learn.microsoft.com/en-us/azure/bot-service/bot-service-design-pattern-embed-web-site?view=azure-bot-service-4.0

Do we need to handle Adaptive Card rendering separately such as disabling buttons after clicks, sending messages as post backs, and other UI behaviors?

You might need to handle some aspects of Adaptive Card rendering separately. While the Web Chat control supports Adaptive Cards, you may need to implement specific UI behaviors, such as disabling buttons after clicks and handling post backs, to match the behavior in Teams - checkout these links: https://learn.microsoft.com/en-us/adaptive-cards/rendering-cards/getting-started and https://learn.microsoft.com/en-us/adaptive-cards/rendering-cards/actions

Will the pop-up chatbot automatically render Adaptive Cards like in Teams, or do we need to manually implement these UI behaviors again?

The pop-up chatbot will render Adaptive Cards, but you may need to customize certain UI behaviors to ensure consistency with Teams. The Adaptive Cards SDK provides tools to help you manage these customizations - as the links above stated: https://learn.microsoft.com/en-us/adaptive-cards/rendering-cards/getting-started and https://learn.microsoft.com/en-us/adaptive-cards/rendering-cards/actions

For your prima question: On how you can integrate Azure AI Bot Service as a pop-up chatbot in our website. You can use the Web Chat control provided by the Bot Framework. These are high level steps:

1. Create and configure your bot in the Azure portal.
2. Enable the Web Chat channel for your bot.
3. Embed the Web Chat control in your website using the provided embed code and secret key.

check out the links below:

https://learn.microsoft.com/en-us/azure/bot-service/bot-service-design-pattern-embed-web-site?view=azure-bot-service-4.0 and https://learn.microsoft.com/en-us/azure/bot-service/bot-service-channel-connect-webchat?view=azure-bot-service-4.0

Also, you can customize the Web Chat control to match your website's design and functionality requirements. You can get details guide here - https://learn.microsoft.com/en-us/azure/bot-service/bot-service-design-pattern-embed-web-site?view=azure-bot-service-4.0 on embedding a bot in a website using Azure AI Bot Service. - https://learn.microsoft.com/en-us/azure/bot-service/bot-service-design-pattern-embed-web-site?view=azure-bot-service-4.0

You can be sure, that this is a full practical task that this page cannot be able to entails. With above information and guides, you should be able to achieve your goal.

I hope this is helpful! Do not hesitate to let me know if you have any other questions.

---

Please don't forget to close up the thread here by upvoting and accept it as an answer if it is helpful.