Welcome to the Website Plugin Page of RentalTide! This guide will help you navigate and utilize all the features available on the Website Plugin Page, ensuring efficient embedding of booking functionalities directly into your website to enhance customer engagement and streamline reservations.
Introduction
The Website Plugin Page is a crucial component of RentalTide's Point of Sale (POS) system, designed to empower authorized users to seamlessly integrate booking functionalities into any website. This integration allows customers to make reservations directly from your website, providing a smooth and efficient booking experience.
Key Features:
Boat Selection: Choose specific boats to embed booking functionality for.
Theme Customization: Personalize the booking interface with primary, background, and secondary colors to match your website’s branding.
iFrame Code Generation: Generate and copy iFrame code to embed booking functionality into your website.
URL Copying: Obtain and copy the direct URL for the booking interface.
Live Preview: Preview the embedded booking interface within the application before deploying it to your website.
Dashboard Overview
Upon accessing the Website Plugin Page, you'll encounter the following key components:
Dashboard Header:
Title: "Website Plugin"
Subtitle: "Embed booking functionality directly into any website."
Main Content Area:
Boat Selection Combobox:
Label: "Select Boat"
Functionality: Choose a specific boat to tailor the booking interface.
Theme Customization:
Primary Color Picker: Set the primary color of the booking interface.
Background Color Picker: Set the background color of the booking interface.
Secondary Color Picker: Set the secondary color of the booking interface.
iFrame Code Section:
Display: Shows the generated iFrame code.
Copy Button: Copies the iFrame code to the clipboard.
URL Copy Section:
Display: Shows the direct URL for the booking interface.
Copy Button: Copies the URL to the clipboard.
Preview Section:
iFrame Preview: Displays a live preview of the booking interface as it will appear on your website.
Notifications:
Snackbar Notifications: Provide real-time feedback on actions such as successful copies or error messages.
Loading Indicators:
CircularProgress: Indicates ongoing operations like data fetching or processing actions.
Managing Your Website Plugin
Efficiently embed and customize your booking functionalities with the intuitive features available on the Website Plugin Page. This section covers selecting boats, customizing themes, generating and copying iFrame codes and URLs, and previewing the booking interface.
1. Selecting a Boat
Purpose: Tailor the booking functionality to a specific boat, ensuring customers can book the desired vessel directly from your website.
Steps to Select a Boat:
Locate the Boat Selection Combobox:
Label: "Select Boat"
Location: Positioned under the "Select Options" section.
Choose a Boat:
Click on the combobox to view a list of available boats associated with your account.
Select the desired boat from the dropdown list.
Note: Selecting "All Boats" will generalize the booking interface, allowing customers to choose any available boat during the booking process.
Usage Tips:
Accurate Selection: Ensure you select the correct boat to prevent booking discrepancies.
Manage Boats: Regularly update your boat listings in the system to reflect availability and changes in your fleet.
2. Setting Your Theme
Purpose: Customize the appearance of the booking interface to align with your website’s branding, providing a cohesive and professional look.
Steps to Customize Theme Colors:
Primary Color:
Label: "Primary"
Functionality: Sets the primary color of the booking interface elements.
Action: Click on the color picker and select your desired color.
Background Color:
Label: "Background"
Functionality: Sets the background color of the booking interface.
Action: Click on the color picker and choose a color that complements your website’s design.
Secondary Color:
Label: "Secondary"
Functionality: Sets the secondary color used for accents and secondary elements within the booking interface.
Action: Click on the color picker and select a suitable color.
Usage Tips:
Brand Consistency: Use colors that match your website’s color scheme to maintain visual consistency.
Accessibility: Ensure sufficient contrast between primary and background colors for readability and accessibility.
Aesthetic Appeal: Choose harmonious color combinations to create an appealing and user-friendly booking interface.
3. Copying iFrame Code
Purpose: Generate and copy the iFrame code to embed the booking functionality directly into your website’s HTML.
Steps to Copy iFrame Code:
Locate the iFrame Code Section:
Label: "Copy iFrame Code"
View the iFrame Code:
A preformatted text block displays the generated iFrame code based on your selections.
Copy the Code:
Click on the Copy Icon (represented by the ContentCopy Icon) next to the code block.
A success snackbar notification will confirm the code has been copied to your clipboard.
Embed into Your Website:
Paste the copied iFrame code into the desired location within your website’s HTML where you want the booking interface to appear.
htmlCopy code<iframe src="YOUR_IFRAME_URL" style="width:100%; height:1300px; margin-top: 50px; border:none;"></iframe>
Usage Tips:
Placement: Embed the iFrame code in a section of your website where customers can easily access the booking functionality.
Responsive Design: Ensure the container where the iFrame is embedded is responsive to maintain usability across different devices.
Security: Validate the embedded content to prevent security vulnerabilities such as cross-site scripting (XSS).
4. Copying URL Only
Purpose: Obtain and copy the direct URL of the booking interface, which can be shared or linked directly without embedding.
Steps to Copy URL Only:
Locate the URL Copy Section:
Label: "Copy URL Only"
View the URL:
A preformatted text block displays the generated direct URL based on your selections.
Copy the URL:
Click on the Copy Icon (represented by the ContentCopy Icon) next to the URL block.
A success snackbar notification will confirm the URL has been copied to your clipboard.
Share or Use the URL:
Paste the copied URL into emails, messages, or any platform where you want to provide direct access to the booking interface.
rubyCopy codehttps://yourdomain.rentaltide.com/booking/customerId/CUSTOMER_ID?locationId=LOCATION_ID&boatId=BOAT_ID&primaryColor=PRIMARY_COLOR&backgroundColor=BACKGROUND_COLOR&secondaryColor=SECONDARY_COLOR
Usage Tips:
Direct Access: Share the URL on social media, newsletters, or other marketing channels to drive bookings.
Tracking: Use URL parameters to track the effectiveness of different marketing campaigns or channels.
Shortening URLs: Consider using URL shortening services for cleaner links when sharing on platforms with character limits.
5. Previewing the Booking Interface
Purpose: Visualize how the embedded booking interface will appear on your website, ensuring it aligns with your expectations before deploying.
Steps to Preview the Booking Interface:
Locate the Preview Section:
Label: "Preview"
View the iFrame Preview:
An embedded iFrame displays the booking interface as it will appear on your website based on your current selections and customizations.
Interact with the Preview:
Test the booking functionalities, color schemes, and overall appearance to ensure everything operates smoothly and aligns with your branding.
Usage Tips:
Functionality Testing: Use the preview to perform test bookings, ensuring that the booking process works correctly.
Visual Inspection: Check for any visual inconsistencies or alignment issues that need to be addressed.
Responsive Check: Resize the preview area or view it on different devices to ensure the booking interface is responsive and user-friendly.
Permissions and Access Control
Access to the Website Plugin Page is governed by a robust permissions system to ensure that only authorized users can view and manage booking integrations.
Key Permissions:
integration_access: Grants access to the Website Plugin Page and its functionalities.
Managing Permissions:
Role-Based Access: Permissions are typically assigned based on user roles within the organization (e.g., Admin, Operations Manager, Marketing Specialist).
Verification: The Website Plugin Page checks user permissions before rendering action buttons or enabling functionalities to prevent unauthorized access.
Usage Tips:
Ensure Proper Access: Verify that your user account has the necessary permissions to perform desired actions on the Website Plugin Page.
Requesting Access: If you lack certain permissions but require them for your role, contact your system administrator or support team to request access.
Error Handling and Notifications
The Website Plugin Page incorporates robust error handling and user-friendly notifications to keep you informed about the system's status and any issues that may arise.
Key Features:
Snackbar Notifications:
Provide real-time feedback on actions such as successful copies, uploads, and error messages when operations fail.
Loading Indicators:
CircularProgress: Indicates ongoing operations like data fetching, processing actions, and file uploads.
Dialogs and Alerts:
Confirmation Prompts: Ensure that critical actions like copying to clipboard are acknowledged.
Usage Tips:
Immediate Feedback: Pay attention to snackbar notifications for instant updates on your actions and system status.
Handle Errors Promptly: Address any error messages or alerts immediately to ensure smooth operations and accurate booking integration.
Maintain Connectivity: Ensure a stable internet connection to facilitate seamless data fetching and booking management.
Frequently Asked Questions (FAQs)
1. How do I embed the booking functionality into my website?
Answer:
Navigate to the Website Plugin Page within your RentalTide dashboard.
Select the desired boat from the Select Boat combobox.
Customize the booking interface colors using the color pickers.
Copy the generated iFrame code or URL using the respective copy buttons.
Paste the iFrame code into your website’s HTML where you want the booking interface to appear, or share the URL directly with customers.
2. Why is the "Copy to Clipboard" button not working for me?
Answer:
The "Copy to Clipboard" button may fail due to browser restrictions, lack of permissions, or JavaScript errors.
Solutions:
Ensure your browser allows clipboard access.
Try refreshing the page and attempting the copy action again.
Use a different browser to see if the issue persists.
If problems continue, manually select and copy the text from the iFrame code or URL section.
3. Can I customize the booking interface beyond color changes?
Answer:
Currently, the primary customization options available are color changes for the primary, background, and secondary elements.
For more advanced customizations such as layout changes or additional functionality, please contact RentalTide support or consult the Developer Documentation.
4. Why is my iFrame preview not loading correctly?
Answer:
Possible Causes:
Incorrect iFrame URL.
Network connectivity issues.
Browser restrictions or ad-blockers preventing the iFrame from loading.
Solutions:
Verify that the iFrame URL is correct and contains the necessary parameters.
Ensure your device is connected to the internet.
Disable any browser extensions that might block iFrame content and try reloading the page.
5. Is the booking data secure when embedded in my website?
Answer:
Yes, all booking data transmitted through the embedded iFrame is securely handled in compliance with data protection standards.
The booking interface operates over HTTPS to ensure encrypted data transmission between your website and RentalTide’s servers.
6. Can I use the Website Plugin with multiple boats?
Answer:
Yes, you can select different boats from the Select Boat combobox to generate unique iFrame codes and URLs for each boat, allowing you to embed booking functionalities for multiple boats on your website.
7. How do I update the theme colors after embedding the booking interface?
Answer:
Return to the Website Plugin Page, select the desired boat, and adjust the theme colors using the color pickers.
Copy the updated iFrame code or URL and replace the existing one on your website to reflect the changes.
Troubleshooting
Issue 1: iFrame Code Not Embedding Correctly
Possible Cause: Incorrect placement of the iFrame code within your website’s HTML, CSS conflicts, or missing parameters in the URL.
Solution:
Verify Code Placement: Ensure the iFrame code is placed within the
<body>section of your HTML where you want the booking interface to appear.Check for CSS Conflicts: Inspect your website’s CSS to ensure there are no conflicting styles that might affect the iFrame’s appearance.
Validate URL Parameters: Ensure all required parameters in the iFrame URL (e.g.,
customerId,locationId,boatId) are correctly set.Test in Isolation: Try embedding the iFrame code in a simple HTML page to determine if the issue is specific to your website’s setup.
Contact Support: If problems persist, reach out to RentalTide support with detailed information for further assistance.
Issue 2: Colors Not Reflecting in the Booking Interface
Possible Cause: Cached data preventing the latest color selections from updating, or incorrect color codes.
Solution:
Clear Browser Cache: Refresh your website and clear the browser cache to ensure the latest styles are loaded.
Verify Color Codes: Ensure that the selected color codes are correctly set in the color pickers.
Regenerate iFrame Code/URL: After adjusting colors, copy the updated iFrame code or URL and replace the existing one on your website.
Check CSS Overrides: Ensure that your website’s CSS is not overriding the styles set by the booking interface.
Contact Support: If the issue remains unresolved, contact support for further troubleshooting.
Issue 3: Booking Interface Not Responsive on Mobile Devices
Possible Cause: iFrame container not set to be responsive or conflicting styles on your website affecting responsiveness.
Solution:
Ensure Responsive Container: Make sure the container where the iFrame is embedded has responsive styling (e.g.,
width: 100%; height: auto;).Use Responsive iFrame Code: The provided iFrame code already includes
width:100%, but verify that the surrounding elements support responsiveness.Test Across Devices: Preview the booking interface on different devices to identify specific responsiveness issues.
Adjust CSS as Needed: Modify your website’s CSS to accommodate the responsive design of the booking interface.
Contact Support: If issues persist, consult RentalTide support for advanced assistance.
Issue 4: Unable to Select a Boat from the Combobox
Possible Cause: Data fetching issues, user permissions, or JavaScript errors preventing interaction.
Solution:
Check Permissions: Ensure your user account has the integration_access permission.
Verify Data Availability: Confirm that boats are correctly listed in the system and associated with your account.
Reload the Page: Refresh the Website Plugin Page to reinitialize data fetching.
Inspect Console for Errors: Open your browser’s developer console to check for JavaScript errors that may be preventing interaction.
Contact Support: If the combobox remains unresponsive, reach out to support with specific error details for assistance.
Issue 5: iFrame Preview Not Displaying Correctly
Possible Cause: Incorrect iFrame URL parameters, network issues, or browser restrictions.
Solution:
Validate URL Parameters: Ensure all necessary parameters (e.g.,
customerId,locationId,boatId) are correctly included in the iFrame URL.Check Network Connectivity: Make sure your device is connected to the internet.
Disable Browser Extensions: Some extensions might block iFrame content. Try disabling them and reload the preview.
Use Supported Browsers: Ensure you are using a browser that fully supports iFrame functionality.
Contact Support: If the preview still does not display correctly, contact RentalTide support with detailed information.