SDK Reference

Embedding Chatbots

There are two ways to embed a chatbot:

1. Declarative (HTML)

Add a div with the class querlo and the necessary data attributes. The SDK will automatically find and initialize it.

html

<div class="querlo"
     data-id="YOUR_CHATBOT_ID"
     data-template="esd"
     data-embed-type="popup"
     data-main-color="#ff0000"
     data-debug="true">
</div>

2. Programmatic (JavaScript)

Use the Querlo.embed() method to create an instance dynamically.

javascript

const myChat = Querlo.embed({
    id: 'YOUR_CHATBOT_ID',
    template: 'esd',
    embedType: 'popup',        // 'popup' | 'inpage' | 'inpage_popup'
    container: '#chat-container', // Required for inpage / inpage_popup
    mainColor: 'rgb(253, 168, 176)',
    debug: true
});

Available Options

Option	Type	Description
`id`	`string`	Required. The ID of the chatbot to embed.
`template`	`string`	The visual template to use (see [Templates & Variants](/docs/sdk-templates)). Defaults to `esd`.
`embedType`	`string`	How the chatbot is embedded in the page. Defaults to `popup`. See [Embed Types](/docs/sdk-embed-types).
`variant`	`string`	Applies a specific color scheme variant for supported templates (e.g., `sunset`, `ocean`, `dark`, `cyberpunk`).
`container`	`string`\|`HTMLElement`	Selector or element where the chatbot should be rendered. Required for `inpage` and `inpage_popup` embed types.
`width`	`string`	Width of the chatbot (e.g., `'100%'`, `'400px'`).
`height`	`string`	Height of the chatbot (e.g., `'500px'`).
`posX`	`string`	Horizontal position for `popup` type (`'left'` or `'right'`). Defaults to `'right'`.
`posY`	`string`	Vertical position for `popup` type (`'top'` or `'bottom'`). Defaults to `'bottom'`.
`mainColor`	`string`	Primary color for the chatbot UI (CSS color string).
`speakerImg`	`string`	URL for the speaker's avatar image.
`speakerName`	`string`	Name of the speaker displayed in the UI.
`introTxt`	`string`	Introductory text shown in the trigger before the chat opens.
`debug`	`boolean`	If `true`, appends `debug=1` to the chatbot URL.