AI Chat Bot

How to create and customize an AI chat bubble on your website

What is an AI chat bot?

eesel AI can be added as a chat bot to your website, help center or other pages in different ways. It is a useful chat bot that helps to answer queries based on the knowledge you train it on.

You can customize it to answer in certain ways, create tickets in certain circumstances, deflect questions, escalate, and more.

An AI chatbot is useful for:

Ecommerce sales and product inquiries
Self-service of order inquiries or other questions from customers
As a guide for your help center and support questions

What implementation options are there for an AI chat bot?

eesel AI has our own options for creating a new chat bot for your sites or apps:

Chat bubble
1. This is a simple code snippet you can configure to add eesel to your site or help center.
Chat inline
1. This is an embedded version of the chat bot that you can add to your site.

Some helpdesk also have their own version of a chatbot/widget that you may be able to integrate eesel AI with. For example, Zendesk's messaging widget. For help integrating with an existing widget, reach out to support.

How to set up and customize your chat bubble

Log in to your eesel AI dashboard.
Choose or create a bot you want to power your chat bubble. We recommend having a specific bot for your chat bubble in order to have a unique prompt and knowledge that suits the intended audiance and medium.
Add knowledge sources such as your website product pages, Google Drive folders, or Notion pages. The AI will use these to find answers.
Navigate to the Integrations tab and search for Chat Bubble > click install/enable. This will add the integration to the left sidebar.
Configure basic appearance and greeting options in the "configure" menu.
1. Welcome message: this is the initial message that greets the user when they open the chat.
2. Title: The name of the chat bubble.
3. Image: the avatar the chat bubble has. It will display this icon at the bottom right of your site to click on. This image needs to be added via URL, so you can upload your desired image to a site like imgur, or find it on Google Images, open the image on a web page or right click and copy the image URL.
4. Colour: theme colour for the button and other components on the chat bubble.
5. Hide branding: for removing 'eesel AI' branding at the bottom.
6. Suggested questions: Leave blank to let the bot create its own, or specify what questions you want to appear by default upon opening the chat bubble.
Customize your chat bubble prompt and add actions. See the Shopify, Magento, or Picquer integration pages for platform specific actions, or helpdesk integration pages for escalating conversations via 'create ticket' actions.
Preview the chat bubble to make sure everything looks and works as expected.
Copy the code snippet and paste it into the <body> tag of your website.

Tips

Use clear instructions for tone and role: Example: “Respond concisely, stay friendly, and answer only based on verified sources.”
Include a transparent and easy way for customers to escalate. (See the relevant integration pages for the actions to escalate)

Important Notes

You need an active eesel AI account to access chat bubble setup.
Some customization options like branding removal may depend on your subscription tier.
Ensure your sources are well-structured and up to date to provide accurate responses.
For issues with embedding or design compatibility, reach out to eesel support for assistance.

Changing the position of the chat bubble

The Eesel AI widget is fully customizable in terms of position. You can adjust it using CSS or JavaScript to fit your layout or avoid overlapping with other elements.

🎨 Example 1: Move the widget with CSS

#eesel-oracle-widget > div {
   right: 40px;
   bottom: 80px; 
}

📱 Example 2: Responsive position with a media query

@media (max-width: 768px) { 
   #eesel-oracle-widget > div {
      right: 10px;
      bottom: 20px;
   }
}

🔧 Example 3: Adjust with JavaScript

document.querySelector("#eesel-oracle-widget > div").style.right = "40px"; document.querySelector("#eesel-oracle-widget > div").style.bottom = "80px";

You have full control — just target #eesel-oracle-widget > div in your styles or scripts.

Custom metadata

It is possible for you to pass in extra metadata for your chat bubble. Simply add EESEL_EXTRA_METADATA inside of EESEL_WIDGET_V2_CONFIG within the code snippet.

window.__EESEL_WIDGET_V2_CONFIG__={
  // ... the rest of the config
  EESEL_EXTRA_METADATA: {
    "custom_key_a": "value",
    "custom_key_b": "value",
  }
}

Note that we currently only support fixed values for the metadata.

PreviousAI Internal Chat NextZendesk

Last updated 26 days ago