Prerequisites

This guide assumes you already have:

• A Help Genie account with at least one active voice genie
• Your company logo file (PNG, JPG, WebP, or SVG)
• Your brand colors (hex codes like #4E9CFF)

---

Your voice genie needs to go where your customers are. Some will call a phone number. Others will visit your website. Some will scan a QR code on a business card or flyer. Help Genie gives you a branded agent page for each genie plus multiple ways to embed it across your digital and print presence.

A well-branded agent page builds trust before the conversation starts. When a caller lands on a page with your logo, your colors, and a clear welcome message, they know they’re in the right place.

Step 1: Brand Your Agent Page

Every voice genie gets an automatically generated public page at helpgenie.ai/live-agent/[your-url-name]. Out of the box, it works. But it looks generic. Branding it takes about five minutes and makes a real difference.

What to do:

1. Open your genie’s settings and go to the Distribution Panel tab
2. Set your URL name (this becomes your public link, so keep it clean: your-company-name or your-company-support)
3. Upload your company logo (200x80px recommended for best display)
4. Upload a genie avatar (200x200px, displayed as a circle, replace the default avatar with your brand mascot or team photo)
5. Set your brand color using your company’s primary hex code
6. Write a welcome message that tells visitors what your genie can help with

Brand color tips:

• Use your primary brand color, not a secondary accent
• Help Genie automatically generates complementary gradients from your chosen color
• Dark colors work better for text-heavy interfaces, bright colors work for accent elements
• Test on mobile since most visitors will interact from their phones

Welcome message examples by industry:

Industry	Example Welcome Message
Trades	”Need a plumber, electrician, or HVAC tech? Tell me what’s going on and I’ll get you scheduled.”
Real Estate	”Looking for your next home? I can answer questions about our listings and schedule showings.”
Hotels	”Welcome to [Hotel Name]. I can help with reservations, amenities, local recommendations, and more.”
Automotive	”Interested in a vehicle or need service? I’m here to help with inventory, test drives, and appointments.”

Step 2: Add Product Images and Meta Tags

Beyond the basics, your agent page supports additional elements that make it feel like a real page on your website, not a third-party tool.

What to do:

1. Upload a product image that represents your business (a photo of your storefront, your team, or your product)
2. Set your page title for browser tabs and search results
3. Write a meta description for SEO (this shows in Google results if someone searches for your agent page)
4. Add your Google Analytics ID if you want to track page visits alongside your main website analytics
5. Configure a redirect URL if you want a “Visit Our Website” link on the page

What this looks like in practice:

• The product image appears on your agent page as a visual header
• Meta tags help your agent page rank when people search for your business + “call” or “contact”
• Google Analytics tracking lets you see how many visitors interact with your genie from this page vs. your main site

Step 3: Embed on Your Website with the JavaScript Widget

The JavaScript widget adds a floating button to your website. Click it and your voice genie opens in an expandable chat interface. This is the recommended embed method for most websites.

What to do:

1. In the Distribution Panel, find the JavaScript Widget section
2. Copy the embed code snippet
3. Paste it into your website’s HTML, just before the closing </body> tag
4. Configure the widget options:

Widget configuration options:

Setting	Options	Default
Position	bottom-right, bottom-left, top-right, top-left	bottom-right
Primary Color	Any hex color	Your brand color
Button Color	Any hex color	Matches primary
Button Size	Pixel value	60px
Offset X	Pixels from edge	20px
Offset Y	Pixels from edge	20px

The widget works on any website platform: WordPress, Squarespace, Wix, Shopify, custom HTML, React, or any site where you can add a script tag. No dependencies, no framework conflicts.

What to do after pasting:

1. Load your website and verify the floating button appears
2. Click it and test a conversation
3. Check that your brand colors show correctly
4. Test on mobile (the widget is responsive and touch-optimized)
5. Verify microphone permissions work (the browser will prompt for access)

Step 4: Alternative Embed with iFrame

If you want your voice genie embedded directly in a page section rather than as a floating button, use the iframe embed. This works well for dedicated “Contact Us” pages or landing pages where the genie is the primary interaction.

What to do:

1. In the Distribution Panel, find the HTML iFrame section
2. Copy the iframe code
3. Paste it into the page where you want the genie to appear
4. Adjust width and height to fit your layout

iframe embed example:

<iframe
  src="https://helpgenie.ai/embed/your-genie-url"
  width="100%"
  height="600"
  allow="microphone"
  style="border: none; border-radius: 12px;"
></iframe>

Important: The allow="microphone" attribute is required for voice interactions. Without it, visitors can only use text chat.

When to use iframe vs. widget:

Use iFrame	Use Widget
Dedicated contact page	Every page on your site
Landing pages	General website presence
Embedded in a specific section	Floating, always-available access
You control exact placement and size	You want minimal page changes

Step 5: Generate and Style QR Codes

QR codes let you put your voice genie on physical materials: business cards, flyers, in-store signage, vehicle wraps, trade show banners. Scan the code and the caller lands on your branded agent page.

What to do:

1. In the Distribution Panel, find the QR Code section
2. Your QR code is auto-generated pointing to your agent page URL
3. Customize the styling:

QR code styling options:

Setting	What It Does
Foreground color	The color of the QR code dots (default: black)
Background color	The background behind the dots (default: white)
Corner style	Square, rounded, or dots
Center logo	Embed your company logo in the center of the QR code
Logo size	30-70% of the QR code center area

4. Download the QR code as a PNG file
5. Test it with your phone camera before printing anything

QR code placement ideas:

• Business cards — Back of card with “Talk to our AI assistant” text
• Service vehicles — Side panel with “Scan to schedule service”
• Storefront window — “Scan for instant help, 24/7”
• Trade show booth — Large format banner with QR code
• Invoices and estimates — “Questions? Scan to talk with us”
• Email signatures — Small QR code linking to your agent page

Sharing Your Agent Page Link Directly

Not everything needs an embed or QR code. Sometimes a direct link works best.

Your agent page URL (helpgenie.ai/live-agent/your-company-name) can be shared:

• In email signatures
• In social media bios
• In SMS and WhatsApp messages to customers
• In Google Business Profile as a contact link
• In automated email responses (“Have a question? Talk to our AI assistant: [link]”)

The link works on any device with a browser. No app download required. Mobile visitors get a touch-optimized interface with a large microphone button for easy voice interaction.

Your voice genie is ready. Now put it everywhere your customers are. Set up your agent page in Help Genie and start getting conversations from your website, print materials, and direct links.