Summary
Alta's Web Assistant is an embeddable widget you drop onto your marketing site or app. Visitors can either chat with an AI assistant or call it by voice — and conversations land in Alta with the same summarization, labeling, and routing as the rest of your inbound. This article walks through the full builder, end to end.
Who this is for: Anyone setting up an inbound capture surface in Alta — typically Marketing, RevOps, or whoever owns the website.
Before you start
You'll need permission to create assistants in your Alta workspace.
Have your site URL handy — the builder uses it to generate a starter prompt for you.
If you want a custom look, have your brand hex colors and (optionally) an avatar image (PNG, JPEG, or WebP) ready.
To install the widget, you'll need access to your site's HTML — directly, or via your CMS / tag manager.
Step 1 — Create a new Web Assistant
Go to Assistants in the Alta sidebar.
Create a new assistant. Give it a name in the top bar — heads up: the name in the header is used as assistantName in messages, so name it something a visitor would see comfortably (for example, "Alta Concierge", not "test-2").
Pick a widget type:
Voice Widget — "Reach out to prospects via voice call." Visitors click the launcher and start a voice conversation.
Chat Widget — "Reach out to prospects via chat." Visitors type in a chat panel.
Once you pick a type, Alta drops you into the five-step builder.
Step 2 — Walk through the five builder steps
Each step has a Save and a Save & Continue button in the top right. If you have unsaved changes and try to jump to a different step, Alta will warn you before discarding them. The stepper in the top bar lets you click between steps directly.
1. Call Flow / Chat Flow
"Use your site URL to generate a {chat/call} prompt, then refine opening line and instructions. Add knowledge base files to improve answers."
This is where you point Alta at your website and let it scaffold a prompt for you. From there, you refine the opening line (what the assistant says first), the instructions (how it should behave), and attach any knowledge base files you want it to draw from — product one-pagers, FAQs, sales decks, etc.
2. Configurations
"Voice, model, tools, voicemail behavior, and other runtime settings for the widget."
This is the runtime engine room. Voice Widget configurations include voice selection and voicemail behavior; Chat Widget configurations focus on the model and any tools the assistant can call during a conversation.
3. Call Outputs / Chat Outputs
"Configure how conversations are summarized and labeled when they end."
This is where you decide what Alta does with a finished conversation: how it gets summarized, what labels or outcomes get applied, and what shows up in your inbox.
4. Visual Style
"Set widget placement, colors, preview link, whether to skip email capture, and avatar images for the launcher and panel."
Two collapsible sections here.
Display Settings:
Display Mode — currently Floating Widget (the launcher sits on top of your page).
Position — pick where the launcher sits: Bottom Right (default), Bottom Left, Top Right, or Top Left.
Preview URL — a custom URL Alta opens when you click Preview on the assistant's dashboard card. Use a page on your own site so you can see the widget in its real context. Example:
https://yoursite.com/page.Primary Color — "Accent color for the widget chrome and primary actions."
Button Text — "Text color on primary buttons in the widget."
Background — "Main panel background for the widget."
Skip Email Screen — toggle to start call without collecting email. Turn this on for low-friction Voice Widgets; leave it off when you want lead capture before the conversation starts.
Avatar Images:
Widget Avatar — the avatar shown inside the open chat / call panel. Upload a PNG, JPEG, or WebP.
Launcher Avatar — the avatar on the closed launcher bubble that sits in the corner of your site. Upload a PNG, JPEG, or WebP.
5. Embed Code
"Add this snippet to your marketing site or app to load the assistant widget."
Final step: copy the embed snippet and paste it into your site's HTML (or your CMS / tag manager).
The snippet looks like this:
<script src="https://widget.altahq.com/simple-widget-loader.js" data-widget-id="YOUR_ASSISTANT_ID" async></script>
Click Copy embed code to grab the version with your real widget ID pre-filled. You'll see a "Embed code copied" confirmation toast.
Tips and common pitfalls
Pick the widget name carefully. The name in the top-bar header becomes
assistantNamein the prompt — visitors will see it.Set the Preview URL to a real page. The Preview button on the dashboard card uses whatever you put here. If you skip it, you won't be able to test the widget against a live page from inside Alta.
Colors must be valid hex. The color pickers expect a 6-digit hex value (for example,
#0066FF). If you paste an invalid value, Alta falls back to the default for that slot.Skip Email Screen trade-off. Turning it on lowers the bar to start a conversation but means you'll only have whatever the assistant captures inside the conversation itself. Leave it off if downstream routing needs a guaranteed email.
Avatar uploads only accept image files. PNG, JPEG, and WebP are supported. Other formats will be rejected by the upload dialog.
One
data-widget-idper page. If you embed multiple assistants on the same page, each one needs its own copy of the script tag with its own ID.The script is async. It loads alongside your page without blocking render — safe to drop in
<head>or right before</body>.Save before you jump. If you click a different builder step with unsaved changes, Alta opens the Leave Page confirmation dialog. Either save first or accept that your edits will be reset.
Related