The Moovs customer portal is available for all versions. To add the code to your Moovs website please follow the instructions.
Moovs also offers flexible options to integrate the customer portal on your website, including iframe embedding and direct linking. This guide will help you choose the best approach for your needs.
Embedding the Moovs Customer Portal into your website requires using iframe technology, which is widely utilized for embedding external functionalities seamlessly.
However, iframe embedding is just one of several integration methods offered by Moovs, including direct linking and widget customization.
Navigate to the Customer Portal Settings page, click here.
Copy the iFrame code
Go to Your Moovs Website editor and add the iFrame Code
Publish your website, and you will have the iFrame embedded
Pro Tip: Ensure that your iframe integrates seamlessly with responsive design principles and optimizes for user experience. Follow these guidelines:
Responsive Design: Set the
widthattribute to100%for a flexible layout that fits different screen sizes.Height Adjustment: Modify the
heightvalue to ensure the full portal content displays without scrollbars. Start with a base height (e.g., 600px) and adjust incrementally as needed.Troubleshooting Overlaps: Ensure widgets like "Book Now" or other elements on your website don’t overlap with the iframe; adjust parent container padding or margins as required. For example, use this iframe code:
<iframe src="https://customer.moovs.app/{your_slug}/iframe" title="Moovs App" width="100%" height="600"></iframe>
How to Customize and Integrate the Moovs Booking Widget
Moovs provides flexible options for integrating and customizing its booking widget or customer portal on your website. This guide explains the default features, customization methods, and how to choose the best integration approach for your needs.
Platform-Specific Embedding Methods (e.g., Squarespace)
Default Behavior of the Moovs Booking Widget
By default, the "Book Now" widget appears as a floating button in the bottom-right corner of your website. This widget is an easy and user-friendly way for your customers to start the booking process directly from any page on your site. However, if you wish to place the booking option in a different location or use the portal in a different way, Moovs offers alternative methods for customization.
Alternative Integration Methods
Using the Customer Portal Iframe
The customer portal can be embedded directly into your website using an iframe. This option provides a seamless embedded booking experience for users who prefer to remain on your site during the entire booking process. To implement this:
Obtain the iframe embed code or the customer portal URL from your Moovs account.
Paste the embed code or URL into the desired location within your website's HTML.
Using a Direct Link to the Customer Portal
Another approach is to use a direct link to the customer portal. This link can be placed behind a "Book Now" or "Get a Quote" button on your website. When users click on this button, they are redirected to the full customer portal hosted externally. This method offers a modern and visually updated booking experience. To implement this:
Create or edit a "Book Now" or similar action button on your website.
Set the button's target URL to the customer portal link provided by Moovs.
Choosing Between Iframe Embed or Direct Link
The choice between iframe and direct link depends on your website's design and user experience preferences:
Use iframe embedding if you want to maintain a continuous on-site experience for your customers.
Use the direct link method if you prefer to showcase a newer and more visually enhanced booking interface.
For popular website platforms like Squarespace, follow these steps:
Open your website editor and add a new HTML block to the desired page.
Paste the iframe code into the block:
<iframe src="https://customer.moovs.app/reserve-black/iframe/iframe" title="Moovs App" width="100%" height="600"></iframe>
Preview your website and modify the iframe dimensions if needed to optimize visibility and layout. These steps can be adapted for platforms that support custom HTML code.
Summary
Moovs offers versatile options to integrate its booking system into your website, whether as a floating widget, an iframe embed, or a direct portal link. Tailor the experience to best suit your website's layout and your customers' needs. For additional help, refer to the Moovs support documentation or contact customer support.
