To embed the RunLoyal booking page (https://Your runloyal url/book/) into your website (your website url), you can create a "Book Now" button that opens the booking page in a new tab. Here's how you can implement this:
Option 1: "Book Now" Button Opening in a New Tab
This method adds a button to your website that, when clicked, opens the RunLoyal booking page in a new browser tab.
HTML Code: Example "do not use exact below"
Instructions:
Copy the above HTML code.
Paste it into the HTML of your website where you want the "Book Now" button to appear.Setmore+1Lodgify+1
Customization:
Button Text: Change
"Book Now"
to any text you prefer.Colors: Modify
background-color
andcolor
to match your website's theme.Styling: Adjust
padding
,border-radius
, andfont-size
as needed.
Option 2: Embedding the Booking Page Using an Iframe
If you prefer to embed the booking page directly into your website so that users can book without leaving your site, you can use an iframe.
HTML Code: (example, do not use)
Instructions:
Copy the above HTML code.
Paste it into the HTML of the page where you want the booking interface to appear.
Note: Ensure that the RunLoyal booking page allows embedding via iframes. Some websites have security settings (like X-Frame-Options
) that prevent their pages from being embedded. If the booking page doesn't display correctly, you'll need to use Option 1.
Additional Tips
Responsive Design: Ensure that the iframe or button is responsive and looks good on all devices. You might need to add media queries or additional CSS for better responsiveness.
Accessibility: Add appropriate
aria
labels or roles to enhance accessibility for users relying on assistive technologies.Testing: After embedding, test the functionality on different browsers and devices to ensure compatibility.
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article