Title: Javascript OnClick Button to Trigger Booking Overlay on WordPress
Last modified: March 17, 2024

---

# Javascript OnClick Button to Trigger Booking Overlay on WordPress

 *  Resolved [jimmyygee](https://wordpress.org/support/users/jimmyygee/)
 * (@jimmyygee)
 * [2 years, 2 months ago](https://wordpress.org/support/topic/javascript-onclick-button-to-trigger-booking-overlay-on-wordpress/)
 * I’ve been trying for weeks and simply can’t find a solution at all.
 * I’m using ACF for our landing page templates, we have 50 location pages all with
   the same design and everything works great except for this booking button issue.
 * Currently the booking button is clickable and will open the slide out booking
   overlay, but I can’t figure out how to edit the code for the OnClick, each location
   has a unique code to direct visitors to book at their location, but currently
   it opens to the page showing all of them.
 * You can see the live setup on the link attached above, that is one of the 50 
   locations.
 * These are the support links they gave me, if they could help explain: [https://support.boulevard.io/en/articles/6720249-slide-out-self-booking-overlay-deep-linking-buttons](https://support.boulevard.io/en/articles/6720249-slide-out-self-booking-overlay-deep-linking-buttons)
   [https://support.boulevard.io/en/articles/5941343-installing-the-self-booking-overlay-wordpress](https://support.boulevard.io/en/articles/5941343-installing-the-self-booking-overlay-wordpress)
   [https://support.boulevard.io/en/articles/5941527-self-booking-link-to-specific-items-or-categories](https://support.boulevard.io/en/articles/5941527-self-booking-link-to-specific-items-or-categories)
 * The code given by our booking platform is:
 * Button:
 *     ```wp-block-code
       <a href="blvd.openBookingWidget({urlParams: { locationId: b9fc1320-5250-4464-8
       159…s d7f5ff9e-5159-43a8-ab63-c3343c022330',_visitType: 'SELF VISIT' }});">
       ```
   
 * The Widget Code:
 *     ```wp-block-code
       <!-- Boulevard Booking Widget -->
       <script>
        (function (a) {
        var b = {
        businessId: 'BUSINESS ID',
        urlParams: {
        location_wl: ['LOCATION ID']
        }
        };
        var c = a.createElement('script');
        var d = a.querySelector('script');
        c.src = 'https://static.joinboulevard.com/injector.min.js';
        c.async = true;
        c.onload = function () {
        blvd.init(b);
        };
        d.parentNode.insertBefore(c, d);
        })(document);
       </script>
       <!-- End Boulevard Booking Widget -->
       ```
   
 * I’ve tried a few things:
    - Adding a URL/link field to ACF like with our referral button next to the booking
      button, but it won’t allow me to save the link since its not a normal link.
    - Adding the OnClick code directly to the WordPress Page Template, also didn’t
      work and wouldn’t solve the issue since each location needs a unique overlay.
    - Adding the code to WYSIWYG and placing it next to the buttons, but it won’t
      display properly. If I paste the code to WYSIWYG on another part of the page
      then drag it to the area next to the Referral button, it works fine. This 
      is the code I pasted into the WYSIWYG field
 *     ```wp-block-code
       <div class="bookbtn-test"><a class="btn btn-outline-light text-uppercase fs-4 me-3" title="BOOK NOW" href="#book-now" rel="noopener noreferrer">BOOK NOW</a></div>
       ```
   
 * When I asked again for support they said to follow this, but it doesnt seem to
   help: [https://wordpress.stackexchange.com/questions/343771/how-do-i-add-this-onclick-event-script-to-a-custom-button-i-ve-created](https://wordpress.stackexchange.com/questions/343771/how-do-i-add-this-onclick-event-script-to-a-custom-button-i-ve-created)
 * The Javascript is working since the button opens the booking overlay, but the
   issue is adding the link/code to each button.
 * Since the OnClick function works and #Book-Now opens the overlay on all the pages,
   is there a way to have #book-now open the location according to the page its 
   on? Such as 
   website.com/location1/#Book-Now for each location
 * To summarize, I need each location page to have a booking button that’s unique
   and fires the OnClick to open to its section.
 * Hopefully I explained this well enough, thank you!
    -  This topic was modified 2 years, 2 months ago by [jimmyygee](https://wordpress.org/support/users/jimmyygee/).
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fjavascript-onclick-button-to-trigger-booking-overlay-on-wordpress%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

The topic ‘Javascript OnClick Button to Trigger Booking Overlay on WordPress’ is
closed to new replies.

 * ![](https://ps.w.org/advanced-custom-fields/assets/icon.svg?rev=3207824)
 * [Advanced Custom Fields (ACF®)](https://wordpress.org/plugins/advanced-custom-fields/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/advanced-custom-fields/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/advanced-custom-fields/)
 * [Active Topics](https://wordpress.org/support/plugin/advanced-custom-fields/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/advanced-custom-fields/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/advanced-custom-fields/reviews/)

## Tags

 * [ACF](https://wordpress.org/support/topic-tag/acf/)
 * [html](https://wordpress.org/support/topic-tag/html/)
 * [javascript](https://wordpress.org/support/topic-tag/javascript/)
 * [js](https://wordpress.org/support/topic-tag/js/)

 * 0 replies
 * 1 participant
 * Last reply from: [jimmyygee](https://wordpress.org/support/users/jimmyygee/)
 * Last activity: [2 years, 2 months ago](https://wordpress.org/support/topic/javascript-onclick-button-to-trigger-booking-overlay-on-wordpress/)
 * Status: resolved