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/5941343-installing-the-self-booking-overlay-wordpress https://support.boulevard.io/en/articles/5941527-self-booking-link-to-specific-items-or-categories

The code given by our booking platform is:

Button:

<a href="blvd.openBookingWidget({urlParams: { locationId: b9fc1320-5250-4464-8
159…s d7f5ff9e-5159-43a8-ab63-c3343c022330',_visitType: 'SELF VISIT' }});">

The Widget 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

<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

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 8 months, 1 week ago by jimmyygee.

The page I need help with: [log in to see the link]