Chat UI Integration

There are two options to embed the chat UI into your application:

1. Embed via iFrame

   You can embed the chat using an iFrame. Here is a sample iFrame embed code:

   <iframe src="<your-oak-url>/embed/first-agent" width="100%" height="100%"></iframe>

2. Embed via Script Tag

   Alternatively, you can embed the chat using a script tag. The embedding scripts can be found in the settings of the agent. Here is a sample script embed code:

   
   <!-- Add the stylesheet to the head of the document. -->
   <link rel="stylesheet" href="<your-oak-url>/embed/core.css">
   
   <!-- Add the container where you want to render the agent. -->
   <div id="chat-container"></div>
   
   <!-- Add the script to load the agent. -->
   <script src="<your-oak-url>/embed/chat.bundle.umd.js"></script>
   
   <!-- Add the script to initialize the chat component. -->
   <script>
     // Initialize the chat component
     ChatComponent.renderChatComponent('chat-container', {
       agentId: "first-agent",
       apiUrl: "<your-oak-url>"
     });
   </script>

   In the settings tab of the agent in the admin interface, specific chat configurations can be set, such as the default message and suggested questions. Additionally, the allowed URLs have to be set in the settings of the agent to avoid CORS issues.

   Note: Replace <your-oak-url> with the actual URL of your OAK instance. This is the address where your OAK service is hosted.