Skip to main content
On the Publish pane, the Embed into site tab displays code that can be inserted in the <body> of your HTML to interact with your flow. The chat widget is implemented as a web component called llmc-chat and is loaded from a CDN. The following example includes the minimum required inputs, called props in React, for using the chat widget in your HTML code, which are host_url and flow_id. The host_url value must be HTTPS, and may not include a / after the URL. The flow_id value is found in your LLM Controls URL. For an LLM Controls server running the Basic prompting flow at https://c822-73-64-93-151.ngrok-free.app/flow/dcbed533-859f-4b99-b1f5-16fce884f28f, your chat widget code is similar to the following: 

<script src="https://cdn.jsdelivr.net/gh/llm-controls/[email protected]/dist/build/static/js/bundle.min.js"></script>
 <llmc-chat chat_inputs='{"message":"your_message_value"}' chat_input_field="message" 
flow_id="dcbed533-859f-4b99-b1f5-16fce884f28f"
host_url="https://c822-73-64-93-151.ngrok-free.app"> </llmc-chat>
When this code is embedded within HTML, it becomes a responsive chatbot, powered by the basic prompting flow. Chat Pn To configure your chat widget further, include additional props. To add some styling to the chat widget, customize its elements with JSON: To add a custom session ID value and an API key for authentication to your LLM Controls server: The chat widget requires your flow to contain Chat Input and Chat Output components for the widget to communicate with it. Sending a message to LLM Controls that, without a Chat Input, still triggers the flow, but the LLM warns you that the message is empty. Text Input and Text Output components can send and receive messages with LLM Controls, but without the ongoing LLM “chat” context.

​
Embed the chat widget with React

To use the chat widget in your React application, create a component that loads the widget script and renders the chat interface:
  1. Declare your web component and encapsulate it in a React component.
  2. Place the component anywhere in your code to display the chat widget. For example, in this docset, the React widget component is located at docs > src > components > ChatWidget > index.tsx. index.tsx includes a script to load the chat widget code from CDN and initialize the ChatWidget component with props pointing to a LLM Controls server.
  3. To import the component to your page, add this to your site.
  4. To add the widget to your page, include <ChatWidget className="my-chat-widget" />.

​
Embed the chat widget with Angular

To use the chat widget in your Angular application, create a component that loads the widget script and renders the chat interface. Angular requires you to explicitly allow custom web components like llmc-chat in components, so you must add the <llmc-chat> element to your Angular template and configure Angular to recognize it. Add CUSTOM_ELEMENTS_SCHEMA to your module’s configuration to enable this. To add CUSTOM_ELEMENTS_SCHEMA to your module’s configuration, do the following:
  1. Open the module file .module.ts where you want to add the llmc-chat web component.
  2. Import CUSTOM_ELEMENTS_SCHEMA at the top of the .module.ts file:
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
  1. Add CUSTOM_ELEMENTS_SCHEMA to the schemas array inside the @NgModule decorator:
  2. Add the chat widget to your component’s template by including the llmc-chat element in your component’s .component.ts file: For style properties that accept JSON objects like chat_window_style and bot_message_style, use Angular’s property binding syntax [propertyName] to pass them as JavaScript objects.

​
Chat widget configuration

Props with the type JSON need to be passed as stringified JSON (i.e., '{"key":"value"}').
PropTypeDescription
flow_idStringRequired. The flow’s unique ID.
host_urlStringRequired. Base URL of LLM Controls server (HTTPS, no trailing /)
api_keyStringOptional API key for auth.
session_idStringCustom session ID.
additional_headersJSONExtra HTTP headers.
height, widthNumberDimensions of the widget.
chat_positionStringtop-left, bottom-right, etc.
start_openBooleanWhether the chat window opens automatically.
chat_window_styleJSONFull widget styling.
chat_trigger_styleJSONTrigger button styling.
bot_message_styleJSONBot message appearance.
user_message_styleJSONUser message appearance.
error_message_styleJSONError styling.
input_styleJSONChat input box.
input_container_styleJSONChat input container.
send_button_styleJSONSend button.
send_icon_styleJSONIcon for send button.
window_titleStringWidget header title.
placeholderStringInput placeholder.
placeholder_sendingStringPlaceholder while sending.
onlineBooleanToggle online state.
online_messageStringMessage shown when online.
input_typeStringChat input type.
output_typeStringChat output type.
output_componentStringWhich component to route output to.
chat_output_keyStringOutput key to render.
tweaksJSONCustom tweaks for flow.