←back to tutorials

How to embedding the ChatBotKit AI Widget in Fullscreen

Embedding the ChatBotKit AI Widget in fullscreen can be accomplished in two main ways: using the Widget SDK to instantiate a chatbotkit-widget element, or embedding the widget frame URL directly in an iframe. Both methods have their own advantages, which we'll discuss in this tutorial.

Using the Widget SDK

To create a fullscreen chatbot widget using the Widget SDK, follow these steps:

Step 1: Include the Widget SDK

Add the following script to your HTML to include the ChatBotKit Widget SDK:

<script src="<https://static.chatbotkit.com/integrations/widget/v2.js>"></script>

Step 2: Instantiate the chatbotkit-widget element

Create and configure the widget element in your HTML:

<chatbotkit-widget
    widget="YOUR_WIDGET_ID"
    layout="fullscreen"
    style="position:absolute; top:0; left:0; bottom:0; right:0; width:100%; height:100%;" />

Replace YOUR_WIDGET_ID with your actual widget ID. The style attribute ensures the widget takes up the entire screen.

Advantages of Using the Widget SDK

  • Flexibility and Customization: You can easily add or modify the widget's properties and behavior.
  • Access to Built-in Methods: Methods such as restartConversation(), sendMessage(), and others allow for more interactive and dynamic interactions.
  • Event Handling: You can subscribe to widget events like send and receive to react to user interactions programmatically.

Using an IFrame

To embed the ChatBotKit widget using an iframe, follow these steps:

Step 1: Create the iframe

Add the following code to your HTML to create an iframe that embeds the widget:

<iframe
  src="<https://static.chatbotkit.com/integrations/widget/YOUR_WIDGET_ID/frame>"
  style="position:absolute; top:0; left:0; bottom:0; right:0; width:100%; height:100%;">
</iframe>

Replace YOUR_WIDGET_ID with your actual widget ID. The style attribute ensures the iframe takes up the entire screen.

Advantages of Using Iframe

  • Simplicity: Setting up an iframe is straightforward and requires minimal configuration.
  • Quick Deployment: Embedding via iframe can be the fastest way to add the widget to your site.

Comparing the Two Methods

Using the Widget SDK:

  • Offers more control and customization.
  • Allows integration with existing JavaScript logic and additional ChatBotKit SDK features.
  • Provides access to methods and events for enhanced interaction.

Using an Iframe:

  • Easier to set up and requires less code.
  • Ideal for quick or temporary integrations.
  • The URL can be modified to control layout and other basic settings.

Centered Layout

If you prefer a centered layout instead of fullscreen, you can modify the URL by adding the layout=center parameter. Here is how to do it with the Widget SDK:

<chatbotkit-widget
    widget="YOUR_WIDGET_ID"
    layout="center"
    style="position:absolute; top:0; left:0; bottom:0; right:0; width:100%; height:100%;" />

and this is how to use it with the iframe:

<iframe
  src="<https://static.chatbotkit.com/integrations/widget/YOUR_WIDGET_ID/frame?layout=center>"
  style="position:absolute; top:0; left:0; bottom:0; right:0; width:100%; height:100%;">
</iframe>

Conclusion

If you seek a highly customizable and extensible solution, using the Widget SDK is the best approach. It provides more power and flexibility to interact with the widget. However, if you need a quick and simple integration, embedding the widget via an iframe is a suitable choice. Either way, the ChatBotKit Widget can be easily embedded in fullscreen to provide a seamless chat experience for your users.

chat widgetwidgetAItutorialux