How to embed the qr2order.net Reservation System into Your Website

 

Embedding the qr2order.net Reservation System into Your Website

This tutorial will guide you through the process of integrating the qr2order.net reservation system into your existing website using a simple script injection. This method allows you to trigger the reservation interface when a user clicks on a designated button(s) on your site.

Prerequisites:

  • You have an existing website with access to its HTML or content management system (CMS) where you can edit the code.
  • You have a qr2order.net account and have configured your restaurant/business details within our platform.
  • You have identified the button(s) on your website that you want to use to open the reservation system.

Steps:

1. Locate the Target Button(s) on Your Website:

  • Identify the specific button(s) on your website that you want to trigger the qr2order.net reservation system when clicked.

  • You'll need to know the identifier of these button(s). This can be either:

    • A CSS Class: If your button has a specific class attribute (e.g. <button class="book-now-button">Book a table</button> . You might have multiple buttons with the same class.
    • A CSS ID: If your button has a unique id attribute (e.g. <button id="book-now-button">Book a table</button> ). IDs are unique within a single HTML page.
    • If they don't have an identifier you'll need to create one for them!

    How to find the identifier:

    • Using your browser's Developer Tools (Recommended):
      1. Open your website in a web browser (Chrome, Firefox, Safari, etc.).
      2. Right-click on the button you want to use for reservations.
      3. Select "Inspect" or "Inspect Element" from the context menu. This will open the Developer Tools panel.
      4. In the "Elements" tab, you'll see the HTML code for the button. Look for the class or id attribute.
      5. For a CSS Class: Note the value of the class attribute, including the leading dot (.) when you use it in the script. For example, if the button's code is
        Book now
        , the identifier is .book-table-button.
      6. For a CSS ID: Note the value of the id attribute, including the leading hash symbol (#) when you use it in the script. For example, if the button's code is
        Book now
        , the identifier is #reservation-trigger.
      7. If you want to target multiple buttons with the same class, you'll use the class identifier.

2. Inject the qr2order.net Script into Your Website:

  • You need to add the provided script tag to the HTML of your website. The best place to put this script is usually before the </body> closing tag of your main website template or the specific page where you want the reservation button(s) to function.

  • The Script:

    <script src="https://demo-restaurant.qr2order.net/assets/modules/qr-2-menu/js/booking-embedded.js?target=.open-reservation">script>

  • Modifying the Script:

    • Subdomain demo-restaurant: Replace "demo-restaurant" with your actual business identifier chosen on qr2order.net. This is crucial for the reservation system to be linked to your account.
    • target=.open-reservation: Replace ".open-reservation" with the CSS identifier(s) of the button(s) you identified in Step 1.
      • For a single button with a class: Use a dot (.) followed by the class name (e.g., .book-now).
      • For a single button with an ID: Use a hash symbol (#) followed by the ID (e.g., #book-table).
      • For multiple buttons (with the same class): Use the dot (.) followed by the class name (e.g., .open-reservation). The script will automatically attach the reservation functionality to all elements with that class.

  • Example Script Modifications:

    • If your button has the class book-table-button and your business ID is demo-restaurant:

      <script src="https://demo-restaurant.qr2order.net/assets/modules/qr-2-menu/js/booking-embedded.js?target=.book-table-button"></script>

    • If your button has the ID make-reservation and your business ID is demo-restaurant:

      <script src="https://demo-restaurant.qr2order.net/assets/modules/qr-2-menu/js/booking-embedded.js?target=#make-reservation"></script>

3. Implement the Script on Your Website:

  • Access your website's files or CMS: Log in to your website's hosting control panel, FTP client, or your CMS administration area (e.g., WordPress, Shopify, etc.).
  • Locate the relevant HTML file(s):
    • For a sitewide implementation (recommended for a consistent user experience), find your main website template file (often named header.php, footer.php, default.html, index.html, etc., depending on your platform). Look for the </body> tag.
    • If you only want the reservation functionality on a specific page, locate the HTML file for that page.
  • Paste the modified script: Paste the <script> tag (with your correct business ID and target identifier(s)) just before the closing </body> tag.
  • Save your changes: Save the modified HTML file(s).
  • Publish or upload the changes: If you're using a CMS, ensure you publish the updated page or template. If you're using FTP, upload the saved HTML file to your web server.

4. Test the Integration:

  • Open your website in a web browser.
  • Navigate to the page(s) where you've implemented the script.
  • Click on the button(s) you targeted in the script.
  • The qr2order.net reservation interface should appear, allowing users to make a booking.
  • Thoroughly test the reservation process to ensure it's working correctly and that the bookings are being registered in your qr2order.net dashboard.

Troubleshooting:

  • The reservation system doesn't appear when clicking the button:
    • Double-check that you have correctly replaced "demo-restaurant" with your actual business ID.
    • Verify that the target parameter in the script accurately matches the CSS class or ID of your button(s), including the leading . for classes and # for IDs.
    • Ensure the script tag is placed correctly before the closing </body> tag.
    • Check your browser's developer console (usually by pressing F12) for any JavaScript errors that might be preventing the script from running.
    • Clear your browser's cache and cookies and try again.
  • Bookings are not being registered:
    • Double-check your business ID in the script.
    • Ensure your qr2order.net account is active and properly configured.
    • Review your qr2order.net dashboard for any error messages or configuration issues.

By following these steps, you should be able to successfully integrate the qr2order.net reservation system into your existing website, providing a seamless booking experience for your customers. Remember to replace the placeholder business ID and target identifier with your actual information.

Need help? Our support team is ready to assist you. Contact us anytime via chat, WhatsApp, or Instagram for quick solutions.