How to Set Up Live Chat Customer Support on Your Website with Roomie

Step 2: Grab Your Publishable Key

Open the project settings (the gear icon). The first thing you need is the publishable API key - it looks like pk_live_...

This key is safe to put in your public website HTML. It only identifies your project; access is gated by the origin allow-list you set in the next step. If the key ever leaks somewhere you didn't intend, hit the rotate button and the old one dies instantly.

Step 3: Set Allowed Origins

Scroll down in settings to Allowed origins. Only the sites on this list may embed your widget - this is what makes the publishable key safe.

Add one origin per line:

• Your production site: https://shop.example.com
• All subdomains with a wildcard: https://*.example.com
• Your local dev server while building: http://localhost:3000

Step 4: Drop the Widget on Your Site

Paste this snippet just before the closing body tag of your website:

<script
 src="https://app.roomie.work/support-widget.js"
 data-api-key="pk_live_xxxxxxxxxxxxxxxx"
 data-position="bottom-right"
 data-accent="#4f46e5"
 async
></script>

That is the entire default setup. A floating chat launcher appears in the bottom-right corner of your site, in your accent color. Visitors fill in their name and email, tick the consent notice, and start chatting - no account needed.

Want to use your own "Chat with us" button instead of the default bubble, identify logged-in users automatically, or localize the widget? The widget ships with a full JavaScript API - we cover it in the companion API guide.

Step 5: Set Working Hours and Off-Hours Auto-Reply

Your team sleeps. Your website doesn't. In project settings, open Working hours & auto-reply.

Set the hours your team actually staffs the inbox, then turn on the off-hours auto-reply. When a guest starts or messages a chat outside those hours, they get your automatic message (sent at most once per 15 minutes, so nobody gets spammed). The editor supports full rich text - headings, lists, links - so the reply can point people to your help docs or promise a response time.

Step 6: Choose When the AI Answers

Now the interesting part. Open AI auto-reply and pick one of four modes:

• Off - humans only, no AI replies
• Always - AI answers every chat; guests can ask for a human anytime
• Outside working hours - humans by day, AI by night
• When no one's available - AI steps in only when no agent is around

Most teams start with "Outside working hours" and move to "Always" once they trust the answers. Either way, the guest can always press "Talk to a human," and the AI hands off cleanly with the full conversation intact.

Step 7: Train the AI on Your Own Docs

An AI assistant is only as good as what it knows. In the AI auto-reply section, you configure two things:

Assistant instructions - the persona, tone, and core policies. For example: "You are the support agent for Roomie Workspace. Answer questions about features, offerings, and pricing. Reply in the language the user writes in."

Knowledge base - upload PDFs or docs and Roomie indexes them into chunks the AI searches when answering. Upload your product overview, pricing sheet, FAQ, or policies, and the AI answers from your actual information instead of guessing.

There is also a toggle to let the assistant escalate on its own - when it can't help or senses the guest is frustrated, it hands off to a human without being asked. The "Talk to a human" button always works regardless.

Step 8: Brand Your Support Emails

When a conversation continues over email, those emails should look like your company. Open Email branding:

• Brand logo - shown at the top of guest emails
• Brand / company name - appears in the header, footer, and subject
• Email sender name - the "From" name guests see in their inbox

This matters most for agencies running support for clients: the client's customers see the client's brand, not yours and not Roomie's.

How Conversations Flow to Your Team

Once the widget is live, here is the lifecycle of every conversation:

1. A visitor opens the widget, fills in their details, and ticks the consent notice - every chat starts with explicit consent on record.
2. If AI auto-reply is on, the assistant answers immediately - in seconds, around the clock. It follows your assistant instructions and pulls answers from the knowledge base docs you uploaded, so it responds with your actual product information, not generic guesses. Simple questions often end right here, resolved before a human ever sees them.
3. The chat lands in your project inbox with a waiting status and a chat ref like CS-10. Conversations the AI is handling stay visible to your team the whole time.
4. An agent claims it - because the AI escalated on its own, the guest pressed "Talk to a human," or your team simply wants to jump in. From then on, alerts and unread badges for that chat go to the assignee, and it drops off other agents' "Mine & unclaimed" view - so two people never answer the same guest.
5. The agent resolves and closes. The guest can reopen the conversation anytime from their saved history.

When a human takes over from the AI, the entire AI exchange is right there in the thread - the agent picks up exactly where it left off, and the guest never repeats themselves.

Fifteen Minutes to Answered Customers

That is the whole setup: create a project, allow your origins, paste one script tag, and decide how much you want the AI to handle. No separate help desk subscription, no data syncing between tools - support lives in the same workspace as the rest of your company's work.

Get started with Roomie free for up to 3 users, or read more about what Roomie customer support can do. For custom triggers, user identification, and localization, continue to the widget API guide.