Skip to content
Bubblo Docs
English
English简体中文
Esc
↑↓navigate↵open⌘Jpreview

Appearance

On this page

Quick Start

Choose an organization, add Knowledge, install its widget, and handle your first conversation

This guide takes you from a new organization to a working Bubblo widget and your first Inbox conversation.

Before you start

You need:

  • Access to the Bubblo dashboard.
  • Content your organization’s AI can use, such as a help page, a PDF, or a short FAQ.
  • Access to your website’s HTML so you can add the widget script.

1. Sign in and choose an organization

Open the dashboard and sign in with Google, GitHub, or an email magic link. Select an existing organization from the sidebar, or choose Create organization from the organization switcher.

An organization owns its Knowledge, Actions, members, usage, Inbox conversations, and one Widget channel. Bubblo’s stateless AI runtime loads those organization-scoped resources for each turn; there is no separate AI resource to create. If you belong to more than one organization, select the one that should own this website’s resources.

2. Add a knowledge source

Open Harness → Knowledge and select Add source. Choose one of these options:

  • Upload file: PDF, DOCX, Markdown (.md or .markdown), or TXT, up to 20 MB.
  • Write manually: enter a title and content directly.
  • Crawl web page: enter a public page URL. A URL with a page path is fetched as one source; a site root can discover pages through its sitemap and internal links for you to review and fetch individually.

New sources are drafts and are not used by the organization’s AI until you index them.

3. Review and index the content

Select the source in the Knowledge list and review the extracted content.

  1. For a discovered web source, select Scrape to fetch its content.
  2. Select View / Edit if you need to correct the title or body.
  3. Select Index.
  4. Wait for the status to change from Indexing to Indexed.

If you edit or re-scrape an indexed source, it returns to Not indexed. Select Index again to make the updated content available to the organization’s AI.

4. Customize the widget

Open Integrations → Widget and scroll to the appearance form below the compact install section.

  1. Upload a support avatar if you want to replace the default bot icon.
  2. Choose a preset color and place the widget on the left or right.
  3. Edit the support name, greeting, suggested questions, and input placeholder.
  4. Keep English as the default language, and add Chinese or Spanish if needed. Each enabled language has its own copy.
  5. On Pro, turn off Show Bubblo badge if you do not want the badge displayed.
  6. Check the live preview.
  7. Select Save changes at the bottom of the form.

The avatar is saved as soon as its upload completes. The live preview updates while you edit the other appearance fields, but the website widget changes only after you select Save changes.

5. Install the widget

Open Integrations → Widget and copy the generated install code at the top of the page. It has this form:

<script src="https://cdn.bubblo.ai/widget.js" cid="YOUR_CHANNEL_ID"></script>

Paste it near the end of your website’s <body>, publish the page, and load the script only once. Replace YOUR_CHANNEL_ID with the displayed Widget CID if you are writing the snippet manually. This public cid identifies the organization’s only Widget channel; it is not an API credential.

After the script loads, your page can also control the widget:

window.Bubblo.open()
window.Bubblo.close()
window.Bubblo.identify({ userId: "u_123", email: "ada@acme.com", name: "Ada" })

identify is optional. It attaches the visitor context you provide to later visitor messages. These browser-supplied values are not verified and must not be used as authentication.

6. Test a conversation

Open the published page in a browser.

  1. Open the Bubblo widget.
  2. Send a question covered by the source you indexed.
  3. Confirm that the response arrives in the widget.
  4. Return to the dashboard and open Inbox in the same organization.

The conversation should appear in real time. If the answer does not use your latest content, return to Harness → Knowledge and confirm that the source is Indexed in the same organization.

7. Handle the conversation in Inbox

Select the conversation in Inbox. From there you can:

  • Search by conversation title or visitor code.
  • Filter All, Needs human, or Resolved conversations. Needs human includes both manual takeover and an AI incident that requires a person.
  • Turn on Take over and reply as a human.
  • Mark the conversation as resolved, or reopen it later.
  • Review the visitor’s page, referrer, browser and operating system, language, raw User-Agent, and activity details when available.
  • Review the generated summary after the conversation is resolved.

You now have a complete Bubblo flow: indexed knowledge, an installed widget, an AI conversation, and a human support handoff.

Next steps

Was this page helpful?