←back to tutorials

How to embedding the ChatBotKit AI Widget in Fullscreen

Learn how to embed the ChatBotKit AI Widget in fullscreen mode using either the Widget SDK or an iframe.

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