Adding the modal (Pop-up) to Word Press sites

Created by Paul Sherry, Modified on Tue, Jun 18, 2024 at 11:58 PM by Paul Sherry

Getting Started

The following is an example of the HTML code that needs to be installed on your website in order for your "Book Now" buttons to open as modals rather than a redirect or new browser window. This is important in order to build trust with your online customer so that they never leave your website and maybe more importantly the modal has been specifically designed for presentation to the customer in this format.

<body>



<link rel="stylesheet" href="https://axearcadedemo.beta.poweredbyaxearcade.com/assets/css/modal.css?v=2" />



<button class="pbax-button" data-pbax url="https://axearcadedemo.beta.poweredbyaxearcade.com/packages/8abe32f4e914998eb5226746710ce8/bookings/new?embed=true&xem=b3b6b27429e5863b1d7888ae40cceb185fa01555">Book Now</button>
<script src="https://axearcadedemo.beta.poweredbyaxearcade.com/assets/js/modal.js"></script>

</body>

The example code above can be found by selecting the "Embed Modal" button found next to each package and can be used to take the online customer directly to that specific package. Book Now buttons that take the customer directly to a specific, single package are great for internal pages of your website where the customer knows what they are looking for. For example, if the customer is on the League Registration page of your website, you may want to send them directly to the League Registration package if they select the Book Now button located on that page.

Conversely, you could choose to embed a "Package Group" by navigating to the package groups page and selecting the "Embed Modal" button found next to a package group. Package Groups are typically best to be used on home pages where the customer has not yet narrowed down their search and you, the venue, want to present multiple options to choose from when the "Book Now" button is selected by the customer. Another nice benefit of Package Groups is that you can add and remove packages from the group and the packages presented in the Package Group modal on your website will automatically update without having to make any updates to the HTML code. Below is an example of a Package Group booking modal.

Now that you know where to find the embed code and you've decided which package or package group you need to add it to your website.

WordPress Installation Instructions (Beaver Builder)

To setup the code for RKd Solutions begin by navigating to your admin panel and logging into your site. Go to the Page section of the dashboard. For our example we will be creating a new page:

Add your title and click the launch beaver builder button.

Add an HTML element and paste code in. Button will appear.

Save module, save and publish page.

WordPress Installation Instructions (WP Bakery Page Builder)

Begin by going to the dashboard and logging in. Navigate to the page section. For our example we will be creating a new page.

Name the page and click add element. Select Raw HTML as the new element.

Add the html code and click save.

Then save and publish the page.