Deskbell setup guide: connect your Chatbase agent to Framer

Deskbell is a free Framer component that puts your Chatbase AI agent in the corner of your site. This guide takes about ten minutes. Open the live demo to see the launcher and the setup card it shows before an agent is connected.

1. Create a Chatbase agent

Chatbase is a paid service: plans start at $40 a month, with a 7-day trial. Check their pricing before you start.

• Create an account and a new agent.
• Train it on your content: add your website URL, upload docs, or paste text and Q&As.
• Make sure the agent is public, so it can be embedded on your site.

Try Chatbase

Some links on this page are affiliate links. If you sign up, NS. Studio may earn a commission at no extra cost to you.

2. Copy the Agent ID

In Chatbase, open your agent and go to Deploy (or the agent's settings). Copy the Agent ID. You can also copy the whole iframe link; Deskbell picks the ID out of it.

3. Add Deskbell to your Framer site

• Open the remix link from the Deskbell page. The demo project is copied into your Framer account.
• Select the Deskbell layer on its page, copy it, and paste it into your own project.
• Place it at the top level of a page or of your layout, not inside a frame with scroll or appear effects. It positions itself in the corner.
• Paste your Agent ID into the Agent ID property. In Preview, tap the launcher and your agent answers.

Until an Agent ID is set, visitors see the setup card instead of a chat, so connect it before you publish.

4. Style it

• Launcher: icon or labelled pill, icon style, size, colours, left or right, and the offset from the corner.
• Teaser: a short bubble next to the launcher after a delay, for example "Questions about pricing? Ask here."
• Panel: title, width, height and corner radius. On phones the chat opens full screen.
• Open on load: open the chat by itself after a delay, once per visit.
• Chat language and font for the parts Deskbell draws itself.

The look of the chat inside the panel (colours, avatar, welcome message, suggested questions) is set in Chatbase, under your agent's chat interface settings.

Good to know

• Nothing loads from Chatbase until a visitor opens the chat, and Deskbell adds no scripts to your site.
• Every message a visitor sends uses your Chatbase message credits.
• Deskbell is made by NS. Studio and is not affiliated with or endorsed by Chatbase.