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.
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. Choose your embed option
A popup window will open. At the top menu, click on Add to website. You'll see three embedding options that you can choose:
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
3. Customize your form appearance
After selecting your embed type, you can customize the form:
Background color: The form's background color
Text color: Color of the text in the form
Primary color: Color of buttons and interactive elements
Add text: available for button popup button and popup text
Choose colors that match your website's design for a cohesive look.
Once you're satisfied with your customization, click the Copy button to copy the embed code.
4. 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
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
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?
Return to the embed settings in Zeeg and update your color choices
Copy the new code and replace the old code on your website