Embed book now in your Website

Modified on Thu, 1 May at 11:45 AM

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"

html
CopyEdit
<a href="https://corek9training.runloyal.com/book/" target="_blank" style="display: inline-block; background-color: #007BFF; color: white; padding: 12px 24px; text-decoration: none; border-radius: 5px; font-size: 16px;">Book Now</a>

Instructions:

  1. Copy the above HTML code.

  2. 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 and color to match your website's theme.

  • Styling: Adjust padding, border-radius, and font-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)

html
CopyEdit
<iframe src="https://corek9training.runloyal.com/book/" width="100%" height="800" style="border: none;"></iframe>

Instructions:

  1. Copy the above HTML code.

  2. 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

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article