The Client Portal Integration allows you to seamlessly add your RunLoyal booking system to your website, enabling customers to book services, view schedules, and manage appointments without leaving your site. The integration supports multiple implementation methods including floating buttons, custom triggers, and embedded iframes to match your website's design and user experience requirements.

Client Portal Integration can be viewed in the following areas:

• Your website as a floating booking button
• Your website as a custom button with popup modal
• Your website as an embedded iframe booking page.

TABLE OF CONTENTS

• Overview
  • How to Find Your Tenant Name
  • How to Add a Floating Booking Button
    • HTML Website Implementation
    • Customize Button Color
  • How to Add a Custom Button with Popup Modal
    • HTML Website Implementation
    • WordPress Elementor Implementation
  • How to Embed the Booking Page as an Iframe
    • HTML Website Implementation
    • WordPress Gutenberg Block Editor Implementation
    • WordPress Elementor Implementation
  • How to Set Up Integration in WordPress
    • Method 1: Using Insert Headers and Footers Plugin
    • Method 2: Using WPCode Plugin
    • Method 3: Direct Theme File Editing

How to Find Your Tenant Name

1. Log in to your RunLoyal account and navigate to any page within your portal.
2. Look at the URL in your browser's address bar.
3. Identify the subdomain portion of the URL that appears before .runloyal.com.
4. Copy this subdomain, which is your tenant name. For example, if your URL is https://thefurseasons.runloyal.com, your tenant name is thefurseasons.
5. Save this tenant name, as you will need to replace YOUR_TENANT_NAME with this value in all integration code examples throughout this guide.

How to Add a Floating Booking Button

The floating booking button appears as a fixed element on your website that opens your booking page in a popup when clicked. This is the simplest integration method and works on any website.

HTML Website Implementation

1. Open your website's HTML file in a text editor or access your website's code through your hosting provider's file manager.
2. Scroll to the bottom of the HTML file and locate the closing </body> tag.
3. Paste the following script immediately before the closing </body> tag, replacing YOUR_TENANT_NAMEwith your actual tenant name:
   <script src="https://www.runloyal.com/new-runloyal-embed.js?customer=YOUR_TENANT_NAME"></script>
4. Save the HTML file and upload it to your web server if necessary.
5. Clear your browser cache and visit your website to verify the floating booking button appears in the bottom corner of the page.

Customize Button Color

1. To change the button color, add the color parameter to the script URL.
2. Use a HEX color code, but replace the # symbol with %23 for proper URL encoding.
3. Example script with custom purple color:
   <script src="https://www.runloyal.com/new-runloyal-embed.js?customer=YOUR_TENANT_NAME&color=%239679D2"></script>
4. Replace %239679D2 with your preferred color code (remember to use %23 instead of #).
5. Save the file and refresh your website to see the new button color.

How to Add a Custom Button with Popup Modal

This method allows you to use your own existing button design to trigger the RunLoyal booking popup, providing complete control over the button's appearance and placement.

HTML Website Implementation

1. Add the RunLoyal script to your HTML file before the closing </body>tag:
   <script src="https://www.runloyal.com/new-runloyal-embed-button.js?customer=YOUR_TENANT_NAME"></script>
2. Replace YOUR_TENANT_NAME with your actual tenant name.
3. Locate the button element in your HTML that you want to use for opening the booking popup.
4. Add the onclick attribute to your button with the value Runloyal.open():
   <button onclick="Runloyal.open()">Book Now</button>
5. If you are using an anchor link instead of a button, use this format:
   <a href="#" onclick="Runloyal.open(); return false;">Book Now</a>
6. Save your HTML file and test the button to confirm it opens the booking popup.

WordPress Elementor Implementation

1. First, add the RunLoyal script to your WordPress site footer using the WPCode plugin or Insert Headers and Footers plugin.
2. In the Footer Scripts section, paste the script and replace YOUR_TENANT_NAME:
   <script src="https://www.runloyal.com/new-runloyal-embed-button.js?customer=YOUR_TENANT_NAME"></script>
3. Save the footer script settings.
4. Open the page in Elementor where you want to add the booking button.
5. Select your existing button widget or add a new Button widget to the page.
6. In the button widget settings, click on the Advanced tab.
7. Scroll to the Attributes section and click to expand it.
8. Add a new custom attribute with the following values:
   • Attribute Name: onclick
   • Attribute Value: Runloyal.open()
9. Update the page and test the button to ensure it opens the booking popup.

How to Embed the Booking Page as an Iframe

The embedded iframe displays your complete RunLoyal booking interface directly within your website page, allowing customers to book without any popups or external redirects.

HTML Website Implementation

1. Navigate to the page on your website where you want to embed the booking system.
2. Decide where on the page you want the booking interface to appear.
3. Insert the following iframe code at that location in your HTML:
   <iframe src="https://YOUR_TENANT_NAME.runloyal.com/booking" width="100%" height="850" frameborder="0" style="border: none;"> </iframe>
4. Replace YOUR_TENANT_NAME with your actual tenant name in the src attribute.
5. Adjust the height value based on your booking flow complexity (recommended range: 800 to 1000 pixels).
6. If you want to constrain the iframe width, change width="100%" to a specific pixel value such as width="800".
7. Save your HTML file and refresh the page to view the embedded booking system.

WordPress Gutenberg Block Editor Implementation

1. Open the page or post where you want to embed the booking system in the WordPress editor.
2. Click the plus icon to add a new block.
3. Search for and select the Custom HTML block.
4. Paste the iframe code into the Custom HTML block, making sure to replace YOUR_TENANT_NAME.
5. Preview the page to ensure the booking system displays correctly.
6. Adjust the height value if the iframe content appears cut off or has excessive white space.
7. Publish or update the page when satisfied with the appearance.

WordPress Elementor Implementation

1. Edit the page in Elementor where you want to add the booking system.
2. Drag and drop an HTML widget to the desired location on your page.
3. Paste the iframe code into the HTML widget content area.
4. Replace YOUR_TENANT_NAME with your actual tenant name.
5. Adjust the iframe height as needed to fit your page layout.
6. Preview the page in Elementor to verify the booking system displays properly.
7. Update the page to publish your changes.

How to Set Up Integration in WordPress

WordPress users have several options for adding the RunLoyal integration scripts to their website, depending on their preferred workflow and available plugins.

Method 1: Using Insert Headers and Footers Plugin

1. From your WordPress admin dashboard, navigate to Plugins › Add New.
2. Search for "Insert Headers and Footers" in the plugin search box.
3. Click Install Now on the Insert Headers and Footers plugin by WPBeginner.
4. After installation completes, click Activate.
5. Navigate to Settings › Insert Headers and Footers from the WordPress admin menu.
6. Scroll to the Scripts in Footer section.
7. Paste your RunLoyal script code (either the floating button or custom button script) into the footer text area.
8. Replace YOUR_TENANT_NAME with your actual tenant name.
9. Click Save to apply the changes.
10. Visit your website to verify the script is loading correctly.

Method 2: Using WPCode Plugin

1. Install and activate the WPCode plugin from Plugins › Add New.
2. Navigate to Code Snippets › Add Snippet from the WordPress admin menu.
3. Choose "Add Your Custom Code" and select JavaScript Snippet as the code type.
4. Give your snippet a descriptive title such as "RunLoyal Booking Integration".
5. Paste your RunLoyal script code into the code editor, replacing YOUR_TENANT_NAME.
6. In the Insertion section, select Site Wide Footer from the location dropdown.
7. Toggle the snippet status to Active.
8. Click Save Snippet to apply the changes.
9. Clear your website cache if you are using a caching plugin.
10. Visit your site to confirm the integration is working.

Method 3: Direct Theme File Editing

1. Navigate to Appearance › Theme File Editor in your WordPress admin dashboard.
2. If prompted with a warning about editing theme files, review and acknowledge the notice.
3. In the right sidebar, locate and click on footer.php to open the footer template file.
4. Scroll to the bottom of the file and locate the closing </body> tag.
5. Paste your RunLoyal script code immediately before the </body> tag.
6. Replace YOUR_TENANT_NAME with your actual tenant name.
7. Click Update File to save your changes.
8. Clear your site cache and visit your website to test the integration.