Embeddable Chat SDK
The Ema Chatbot SDK empowers you to create branded, embedded chat experiences for Conversational AI Employees using just a few lines of code. Whether you are developing a customer support assistant, a sales concierge, an onboarding helper, or an internal team assistant, you have complete control over its appearance and behavior to align with your product's style and tone.
Use Cases
- Brand customization -- Tailor the chatbot with your company's logo and color scheme.
- Personalized greetings -- Set a custom title and welcome message to greet users effectively.
- Source transparency -- Configure whether the AI Employee should publish its sources for responses.
- Domain security -- Whitelist specific domains where the chatbot is permitted to load.
- Website integration -- Embed a fully configured chatbot onto your website for enhanced user support or as a sales concierge.
Configuring Your Chatbot
Setting up your chatbot is a straightforward process. Define your branding, whitelist domains, generate your configuration snippet, and embed it into your website.
1. Define Your Branding
Customize your chatbot's appearance and welcome behavior to align with your brand. You can also configure whether sources used to answer user queries are displayed.
| Configuration | Description | Example |
|---|---|---|
| Logo | URL of the logo displayed in the chat header | https://www.example.com/logo.jpg |
| Title | Title that appears at the top of the chat window | AI Assistant |
| Primary Color | The primary theme color for buttons and accents | #0a430d |
| Welcome Message | A personalized message displayed when a user opens the chat | "Hi there! How can I help you today?" |
showPoweredBy | Show "Powered by Ema" branding | true |
theme.baseFontSize | Base font size for the chat widget | "14px" |
theme.fontFamily | Font family for the chat widget | "inherit" |
You can also configure the option to "Hide sources from response", which determines whether the sources used to answer user queries are returned in addition to the response.
2. Whitelist Your Domains
Specify the domains where your chatbot will be deployed. This ensures that only whitelisted domains are authorized to load the Conversational AI Employee SDK, enforced via Cloudflare Content-Security-Policy (CSP) rules. You can add multiple domains as needed.
- Click Add domain, enter the base URL (for example,
www.example.com), and click Add. - The new domain appears in the whitelist table with options to remove it if needed.
- Click Save to persist changes to the configuration and update Cloudflare rules.
3. Generate Your Embed Snippet
Once your configuration is complete, you can embed the chatbot on your site with a single script tag. From "Add integration snippet to your website", click copy and paste the snippet into your HTML, ideally just before the closing </body> tag.
Example snippet:
(function (window, document, scriptTag, objectName, scriptSrc, scriptElement, firstScriptTag) {
window[objectName] = function () {
(window[objectName].q = window[objectName].q || []).push(arguments)
}
scriptElement = document.createElement(scriptTag)
firstScriptTag = document.getElementsByTagName(scriptTag)[0];
scriptElement.id = "EmaChat";
scriptElement.src = scriptSrc;
scriptElement.async = 1;
scriptElement.type = "module";
firstScriptTag.parentNode.insertBefore(scriptElement, firstScriptTag);
})(window, document, "script", "EmaChat", "https://chatbot.ema.co/sdk/widget.js");
window.EmaChat("init", {
"projectId": "your-project-id",
"personaId": "your-persona-id",
"defaultOpen": false
});4. Build and Iterate
You can continuously refine your chatbot's appearance and behavior by updating configuration values or adding advanced options. Experiment with variations of your welcome message, test different AI Employees, and match the color palette to your brand identity. These updates automatically reflect on the deployed chatbot.