Embedding Routing Forms on your website keeps visitors on your site while they answer qualification questions and book appointments. Instead of redirecting to Zeeg, the form appears directly on your webpage, providing a seamless booking experience that matches your brand.
Custom colors for embedded forms are only available on plans that include them. On other plans the color settings are locked, the embed uses the default colors, and an Upgrade button appears next to the settings.
Why embed Routing Forms on your website?
Embedding your Routing Form directly on your website offers several advantages:
Keep visitors on your site: No redirects to external pages means a smoother user experience
Maintain your branding: The form integrates seamlessly with your website design
Improve conversion rates: Visitors are more likely to complete booking when they stay on your site
Professional appearance: Embedded forms look native to your website rather than third-party
How to embed a Routing Form on your website
1. Access the right routing form
From your Zeeg dashboard, select Routing Forms from the left menu under the Engagement section.
Find the Routing Form you want to embed and click on the Share button.
2. Open the Website options
The Share window opens with your form's link and a row of buttons: Website, Email, QR Code, Link in bio and Socials. Click Website. The Add to website screen opens, with a Live preview of your form on a sample web page. Use the back arrow at the top left to return to the Share window.
3. Choose your embed option
At the top right of the Add to website screen, switch between the three embedding options. Inline Embed is selected first. The preview changes as you switch:
Inline Embed: Displays the form directly on your webpage
Popup Button: Shows a button that opens the form in a popup when clicked
Popup Text: Creates a text link that opens the form in a popup
4. Customize your form appearance
The settings are on the right side of the screen, and the Live preview updates as you change them:
Button (Popup Button only): Set the Button Text, the Button background color and the Button text color. The button text is "Open form" until you change it.
Link (Popup Text only): Set the Link Text that visitors click to open the form.
Colors: Set the Background color (the form's background), the Text color (color of the text in the form) and the Primary color (color of buttons and interactive elements).
Glass effect: Switch it on to make the form's background translucent with a frosted-glass blur, so your website shows through.
Choose colors that match your website's design for a cohesive look. If the color settings are locked, you will see an Upgrade button. Until you upgrade, the embed uses the default colors.
5. Copy the embed code
Once you're satisfied with your customization, click Copy at the bottom right of the screen. The button briefly changes to Copied. To read the code first, click Code at the bottom left: the embed code opens over the preview, with its own Copy button.
6. Add the code to your website
Now paste the copied code into your website:
Open your website builder or content management system (CMS)
Navigate to the page where you want the Routing Form to appear
Add a Custom HTML or Code element/block (the exact name varies by platform)
Paste the embed code you copied from Zeeg
Save and publish your page
Where exactly the code goes depends on the embed option: for Inline Embed, paste it where the form should appear on your page. For Popup Button and Popup Text, paste it before the closing body tag of your page.
Embed options explained
Inline Embed
The form displays directly within your webpage content, appearing as a natural part of the page. This is ideal for:
Dedicated landing pages
Contact pages
Service pages where you want immediate booking
Popup Button
A customizable button appears on your page. When visitors click it, the form opens in a popup overlay. Perfect for:
Adding booking to multiple pages without taking up space
Keeping your page layout clean
Giving visitors control over when to engage
Popup Text
Similar to Popup Button, but uses a text link instead. The form opens in a popup when the link is clicked. Great for:
Embedding within existing text content
Subtle call-to-action in paragraphs
Navigation menus or footers
Platform-specific instructions
WordPress
Add a Custom HTML block where you want the form
Paste the embed code
Preview and publish
Wix
Add an Embed Code element from the Add menu
Paste your code in the Code section
Adjust size and position as needed
Squarespace
Add a Code Block to your page
Paste the embed code
Save and publish
Webflow
Add an Embed element
Paste the code
Publish your site
Other platforms
Most website builders support custom HTML/code elements. Look for options like "Custom Code," "HTML Block," "Embed," or "Code Injection" in your editor.
Tips for successful embedding
Test on mobile: Always preview your embedded form on mobile devices to ensure it displays correctly
Match your brand: Choose colors that complement your website's color scheme
Strategic placement: Position the form where visitors naturally look for booking options
Clear context: Add a heading or description above the form explaining what visitors should do
Test the workflow: Book a test appointment to ensure the routing logic works correctly after embedding
Troubleshooting
Form not displaying?
Verify the code was pasted correctly without any missing characters
Check if your website builder allows custom HTML/JavaScript
Ensure there are no conflicts with other scripts on your page
Form appears too large or small?
Adjust the height and width values in the embed code
Most platforms allow you to resize embedded elements
Colors don't match my website?
Click Share on your Routing Form, then Website, and set your colors again
Copy the new code and replace the old code on your website
Frequently asked questions
Why are the color settings grayed out?
Custom colors for embedded forms are not part of every plan. When they are locked, the Colors section shows a message and an Upgrade button, and your embed uses the default colors. The embed code still works.
Are my color settings saved when I close the window?
No. The Add to website screen starts from the default colors every time you open it. Copy the code once you're happy with your settings. If you need a different look later, open Website again, set your colors and replace the code on your website.
Do I need to copy the code again after changing colors or text?
Yes. The colors and button or link text are part of the embed code, so copy the updated code and replace the old one on your website.