Appearance
Build a voice storefront (advanced)
A published shop page where a customer clicks Call, says "add two of the blue mug to my cart," and watches the basket fill itself — hands-free.
- What you'll have — A single-page storefront, live at your own
*.page.mychatbot.appaddress, with a product grid and a working cart. Embedded in it is a voice agent that visitors talk to out loud, and the agent can drive the page: add items, search, apply a discount code, and jump between products. It's a real, shareable page you built and published from inside MyChatBot. - Who it's for — A shop owner or maker who wants a novel, voice-first way to sell, and who is comfortable following a developer recipe (or briefing an agent to write the code). This is a build-it-yourself scenario, not a one-click template.
- Time & plan — About 45–90 minutes, mostly iterating on the page. You need any plan that includes an agents budget — in practice a Sales plan (Standard or above), or the free 3-day trial, since you'll use both the site-building agent and a voice-enabled sales assistant. There is no special "voice" add-on and no higher tier to buy; both the page-building and the voice calls simply draw from the balance your plan already includes.
This is an advanced, custom build
There is no prebuilt "storefront" template. The page — product grid, cart, and the wiring that lets the voice agent touch them — is hand-written for you by the Site Builder agent on request. Expect a few rounds of "change this, republish." If you can read a bit of HTML, you'll move faster; if not, you can steer the agent in plain English.
Ingredients
Two agents and one channel. You'll bounce between the Sales Platform (for the voice) and the Agents Platform (for the page).
| Switch on | Where | Why you need it |
|---|---|---|
| A voice-enabled sales assistant | Sales Platform → Quick start → "Create a voice agent for my website" | The voice that talks to visitors, plus the embed snippet you paste into your page |
| Web Voice channel (created for you above) | Comes with the quick-start above | Lets the page open a live voice call in the browser |
| Site Builder agent | Agents → Site Builder | Writes and publishes your single-page storefront to a live address |
| A product list | Your notes, a spreadsheet, or a feed URL | What the agent puts in the grid (names, prices, images) |
One balance for both
The site-building work and the voice calls draw from the same balance your plan already includes — page builds are billed like any agent run, and voice calls are billed as sales messages by call length. On the 3-day trial the agents budget is pinned low (about $1), which is enough to build a small page but tight for lots of iteration — build lean, or convert to a paid plan before you polish.
Steps
1. Create the voice agent + get its embed snippet
Start on the Sales side. Go to Quick start (app.mychatbot.app/quick-start) and choose "Create a voice agent for my website." Give it your site or product-feed URL and a short brief (what you sell, your tone).
This does two things at once: it sets up a sales assistant with a voice, and it creates a Web Voice channel for the browser. When it finishes, it hands you two things to copy:
- an agent ID (identifies your voice agent), and
- an embed snippet — a small
<script>block, ready to paste into a web page.
Copy both somewhere safe. You'll hand them to the Site Builder in step 3.
Read the snippet — it's a working example
The snippet MyChatBot gives you already shows the voice agent driving a storefront: sample actions like searchItem, navigateTo, addToCartById, and applyDiscountCode. That's your map for step 4 — those are the exact page actions you'll wire up.
2. Open the Site Builder agent
Now switch to the Agents Platform. Go to Agents (app.mychatbot.app/agents) and open the built-in Site Builder agent. This agent's whole job is to write a single self-contained web page and publish it live to a *.page.mychatbot.app address.
Two agents, two jobs — that's normal
The Site Builder builds and publishes the page but can't create the voice channel — that's why you did step 1 on the Sales side first. And the voice quick-start can't build your page. You switch between the two surfaces; that's the intended flow, not a mistake.
3. Brief it to build the storefront
Chat with the Site Builder like you'd brief a developer. Tell it:
- Your products — names, prices, a short line each, and image URLs if you have them. A tidy list (or a pasted spreadsheet) works well.
- Your brand — colors, a logo URL, the vibe.
- The layout you want — a product grid, a cart panel that shows items and a running total, and a Call button.
Ask it to build one self-contained page with a simple client-side cart (add, remove, quantity, total). It will write the HTML and show you the result. Iterate in plain English: "make the cart sticky on the right," "bigger product photos," "add a discount-code box."
The cart lives in the browser only
The published page is a single static page — there's no server behind it and no checkout. The cart is real, but it's client-side: great for browsing and building an order by voice, not for taking payment. To actually collect money, send the shopper to an external checkout link or payment page at the end (see Level it up).
4. Wire the voice to the page
This is the heart of the recipe, and it's the custom part. Ask the Site Builder to embed the voice agent into the page and connect its actions to your cart:
- Add the voice script from your step-1 snippet and start it with your agent ID.
- Give the voice agent a small set of page actions it's allowed to trigger, each pointing at your page's own cart/navigation functions. The canonical set is:
| Voice action | What it does on your page |
|---|---|
addToCartById | Adds a product to the cart by its ID |
searchItem | Filters the grid to matching products |
navigateTo | Jumps to a product or section |
applyDiscountCode | Applies a code to the cart total |
So when a visitor says "add two of the blue mug," the voice agent calls addToCartById, and the page runs your cart code — the basket updates in front of them.
Say the actual page functions out loud to the agent
Tell the Site Builder the exact names of the cart and navigation functions it wrote (e.g. "wire addToCartById to cart.addItem, and searchItem to my filterProducts"). The clearer you are about which action maps to which function, the fewer rounds you'll need. This wiring is bespoke code the agent writes for your page — there's no drag-and-drop for it.
5. Pick a subdomain and publish
When the page looks right, ask the Site Builder to publish it. Choose a subdomain, and it goes live at https://<your-name>.page.mychatbot.app — no DNS, no waiting. To change the page later, tell the agent what to fix and republish to the same subdomain; the live URL stays the same.
Iterate in versions
Have the agent keep a version of the HTML each time ("save this as v2, then publish"). If a change breaks the cart, you can ask it to go back to the last good version and republish.
Try it
Open your live *.page.mychatbot.app page in a browser (a laptop or phone with a mic). Click Call, allow microphone access, and say:
"Add two of the blue mug to my cart, then apply code WELCOME10."
Watch the cart fill and the total update as you speak. Then try "show me your ceramics" and see the grid filter. If an action doesn't fire, go back to the Site Builder and double-check that voice action is wired to the matching page function.
The voice call needs the page open + a mic
The web voice channel only works while the page is open and the visitor grants microphone permission. It can't call anyone — it answers when a visitor clicks Call on your page.
Level it up
- Add a real checkout. The on-page cart can't take payment. Add a "Checkout" button that sends the order to an external payment link (Stripe, a store checkout, or a form) so a browsing session turns into a paid order.
- Feed the agent your real catalog. Instead of pasting products by hand, load your inventory into the Knowledge base and let the sales assistant answer accurate stock, price, and detail questions during the call. → Getting inventory in
- Keep the leads. Because the caller is talking to a sales assistant, the conversation lands in your Chats and can create a lead — so a voice browse becomes a follow-up you can nurture. → Leads
- Match your brand end to end. Ask the Site Builder for a custom domain later, or refine colors, fonts, and copy in a few more rounds — it's all just "change this, republish."
See also
- Working with the Sales Platform — how the two platforms split the work (front office vs. back office)
- Website widget — the turnkey chat widget, if you want text chat instead of (or alongside) voice
- Getting inventory in — load your catalog so the agent answers accurately
- Leads and Chats — where voice conversations show up
- Usage & billing — how page builds and voice calls draw from your balance