Installation of WaveRez Booking Portal Lightframe with Wordpress
In order to install the WaveRez lightframe on a Wordpress website, you can follow the instructions below.
In order to get the code unique to your WaveRez booking portal you'll need access to https://admin.waverez.com/login as an admin.
After you've logged in, go to Settings > System Setup > Configurations > Booking Portal Lightframe.
You'll see:
The header script indicated by "<head></head>" This script needs to be injected into your header or footer code. More often then not, the footer is the best place for this code. If you're experiencing issues with buttons loading the page instead of opening the pop up, please change the script to the footer. If all else fails, you can inject this script by adding it to the HTML button element.
The body script indicated by "<body></body>" This script needs to be injected into your body code.
And you'll also see code for a trigger button and to the right of that is the extra information for creating a button linked to specific trip directly.
For Wordpress, I recommend using WP Code to inject these scripts into your body and header.
For the buttons, Wordpress offers a variety of different builders and depending on what builder you're using the instructions can differ wildly. In all builders, you should have the ability to add HTML, so for the purpose of providing general instructions to all, I will assume this as the method of implementation.
If you're not familiar or comfortable with using HTML you can use ChatGPT or a free service like this https://codebeautify.org/html-button-generator to create an HTML button with CSS (Styling) specific to your needs while still following the example code below.
I've created a rounded button as an example:
If the above code is not working with your builder, please refer to the next button code below:
In this code there is "CUSTOM_URL" and "ACCOUNT_ID".
- The URL unique to your account is the URL when you click on "Booking Portal" from the menu in your WaveRez dashboard. This is the live URL for your booking portal.
- The account ID is found on the same Booking Portal Lightframe settings page we navigated to previously. It will be the number shown as data-waverez-id.
- You'll need to replace both of these values with the data that is specific to your account.
I'm using the same basic blue rounded button from the previous example but linking directly to a trip page instead:
If the above code is not working with your builder, please refer to the next button code below:
In this code there is "TRIP_ID" and "ACCOUNT_ID".
- The URL can be found when you click on "Booking Portal" from the menu in your WaveRez dashboard and navigate to the trip page. It should look something like this https://reservations.waverez.com/luthers/details/63/ It will have your unique URL as the other button code, but will also contain /details/TRIPID to link directly to the trip page.
- The account ID is found on the same Booking Portal Lightframe settings page we navigated to previously. It will be the number shown as data-waverez-id.
- You'll need to replace both of these values with the data that is specific to your account.
In both examples, the button text shown is "BOOK NOW" this can be changed as well but just changing this text in the code.
If you need any help with implementation of the booking portal lightframe, please don't hesitate to contact support@waverez.com.
In order to get the code unique to your WaveRez booking portal you'll need access to https://admin.waverez.com/login as an admin.
Settings in WaveRez
After you've logged in, go to Settings > System Setup > Configurations > Booking Portal Lightframe.
You'll see:
The header script indicated by "<head></head>" This script needs to be injected into your header or footer code. More often then not, the footer is the best place for this code. If you're experiencing issues with buttons loading the page instead of opening the pop up, please change the script to the footer. If all else fails, you can inject this script by adding it to the HTML button element.
The body script indicated by "<body></body>" This script needs to be injected into your body code.
And you'll also see code for a trigger button and to the right of that is the extra information for creating a button linked to specific trip directly.
For Wordpress, I recommend using WP Code to inject these scripts into your body and header.
Buttons
For the buttons, Wordpress offers a variety of different builders and depending on what builder you're using the instructions can differ wildly. In all builders, you should have the ability to add HTML, so for the purpose of providing general instructions to all, I will assume this as the method of implementation.
If you're not familiar or comfortable with using HTML you can use ChatGPT or a free service like this https://codebeautify.org/html-button-generator to create an HTML button with CSS (Styling) specific to your needs while still following the example code below.
Example Button for linking to the Booking Portal landing page:
I've created a rounded button as an example:
<a data-waverez-id="ACCOUNT_ID"
onclick="openWaverezPopup(event, this)"
style="color: #fff; background: linear-gradient(89deg, #2EDFF1 2.57%, #13BAEB 99.28%); font-size: 18px; border: none; border-radius: 35px; padding: 15px 50px; cursor: pointer; display: inline-block; text-align: center; text-decoration: none; font-family: 'Montserrat', Arial, sans-serif; line-height: 1.4; box-shadow: 0 8px 16px 0 rgba(29, 203, 192, 0.06), 0 13px 28px 0 rgba(29, 203, 192, 0.2); transition: background-color 0.3s ease;">
BOOK NOW
</a>If the above code is not working with your builder, please refer to the next button code below:
<a href="https://reservations.waverez.com/CUSTOM_URL" data-waverez-id="ACCOUNT_ID">
<button type="button" onclick="openWaverezPopup(event, this)" style="color: #fff; background: linear-gradient(89deg, #2EDFF1 2.57%, #13BAEB 99.28%); font-size: 18px; border: none; border-radius: 35px; padding: 15px 50px; cursor: pointer; display: inline-block; text-align: center; text-decoration: none; font-family: 'Montserrat', Arial, sans-serif; line-height: 1.4; box-shadow: 0 8px 16px 0 rgba(29, 203, 192, 0.06), 0 13px 28px 0 rgba(29, 203, 192, 0.2); transition: background-color 0.3s ease;">BOOK NOW</button>
</a>In this code there is "CUSTOM_URL" and "ACCOUNT_ID".
- The URL unique to your account is the URL when you click on "Booking Portal" from the menu in your WaveRez dashboard. This is the live URL for your booking portal.
- The account ID is found on the same Booking Portal Lightframe settings page we navigated to previously. It will be the number shown as data-waverez-id.
- You'll need to replace both of these values with the data that is specific to your account.
Example Button for linking directly to a trip page:
I'm using the same basic blue rounded button from the previous example but linking directly to a trip page instead:
<a data-waverez-id="ACCOUNT_ID"
data-waverez-trip="TRIP_ID"
onclick="openWaverezPopup(event, this)"
style="color: #fff; background: linear-gradient(89deg, #2EDFF1 2.57%, #13BAEB 99.28%); font-size: 18px; border: none; border-radius: 35px; padding: 15px 50px; cursor: pointer; display: inline-block; text-align: center; text-decoration: none; font-family: 'Montserrat', Arial, sans-serif; line-height: 1.4; box-shadow: 0 8px 16px 0 rgba(29, 203, 192, 0.06), 0 13px 28px 0 rgba(29, 203, 192, 0.2); transition: background-color 0.3s ease;">
BOOK NOW
</a>If the above code is not working with your builder, please refer to the next button code below:
<a data-waverez-id="ACCOUNT_ID" data-waverez-trip="5360" href="TRIP_ID">
<button type="button" onclick="openWaverezPopup(event, this)" style="color: #fff; background: linear-gradient(89deg, #2EDFF1 2.57%, #13BAEB 99.28%); font-size: 18px; border: none; border-radius: 35px; padding: 15px 50px; cursor: pointer; display: inline-block; text-align: center; text-decoration: none; font-family: 'Montserrat', Arial, sans-serif; line-height: 1.4; box-shadow: 0 8px 16px 0 rgba(29, 203, 192, 0.06), 0 13px 28px 0 rgba(29, 203, 192, 0.2); transition: background-color 0.3s ease;">BOOK NOW</button>
</a>In this code there is "TRIP_ID" and "ACCOUNT_ID".
- The URL can be found when you click on "Booking Portal" from the menu in your WaveRez dashboard and navigate to the trip page. It should look something like this https://reservations.waverez.com/luthers/details/63/ It will have your unique URL as the other button code, but will also contain /details/TRIPID to link directly to the trip page.
- The account ID is found on the same Booking Portal Lightframe settings page we navigated to previously. It will be the number shown as data-waverez-id.
- You'll need to replace both of these values with the data that is specific to your account.
In both examples, the button text shown is "BOOK NOW" this can be changed as well but just changing this text in the code.
If you need any help with implementation of the booking portal lightframe, please don't hesitate to contact support@waverez.com.
Updated on: 12/04/2025
Thank you!