How to start with Orioly?

Add the “Book Now” button to your Wix page

This article explains how to add the Book Now button from Orioly to your Wix website.

Note: If you plan to add custom CSS to your Book Now buttons please refer to the second part of this article.

To get started log in to your Wix.com account and follow these steps to navigate to the Wix editor where you will be able to add the Book Now buttons:

  • Click on the Edit site button located on the lower left-hand side of the web page
  • In the newly opened tab hover over the Site menu located on the upper right side of the web page, and click on the Open Editor button located at the bottom of the dropdown list. A pop-up message will appear from where you will need to click on the Go to Wix Editor button.

To add the Book Now button, first you need to copy the HTML code located on your Orioly account:

  • Click on the Activities section and navigate to the activity for which you want to get the HTML code for by clicking the Edit button.
  • Once you have done that go to the 4th step labeled Book Now and all you need to do from there is click on the button Copy HTML to the Clipboard.

Once you have done that go back to the Wix editor page that you have navigated to previously, and follow these steps:

  • Click on the + icon located on the left side navigation.
  • Move your mouse to the More section located at the bottom of the list.
  • Click on the HTML iframe.
  • Position the iframe on the web page where you want the Book Now button to be located at.
  • Click on the Enter Code button which you can see once you click on the iframe that you have previously positioned on your page.
  • Paste the code for the Book Now button by clicking the CTRL+V combination on your keyboard or right clicking on the “HTTPS only…” section and selecting the paste option.
  • Click the Apply button to add the Book Now button on to your page.

NOTE: You can test the Book Now button by clicking on the Preview button located on the upper right of the Wix page.

After you have added the first button, and you do not want to add any custom CSS to the buttons, you can repeat the steps to add the rest of the buttons. If you want to add custom CSS, after you have added the first button:

Add custom CSS to your buttons

  • add the data-button-do-not-style attribute to the buttons HTML code you have previously added to your page
  • optionally remove the inline CSS from the button if you wish to add the color text and background color with the rest of your code.
  • below the button code, add the <style> element with your custom CSS.
  • duplicate the button you have created with the new CSS styles by right-clicking on the iframe and selecting the duplicate option.

Note: Since you duplicated the same button on your Wix page you will need to change the data attribute on the rest of the buttons to match your activities. To do so, follow these steps:

  • Click on the Activities section and navigate to the activity for which you want to get the Data code for by clicking the Edit button.
  • Once you have done that go to the 4th step labeled Book Now and all you need to do from there is click on the button Copy data code to the Clipboard.
  • Replace the data on the duplicated Book Now button with the new data that you have copied from your account.

Once you have replaced all the data for all of the buttons, we suggest that you test each of the buttons to make sure that the data has been copied properly.

NOTE: You can test the Book Now button by clicking on the Preview button located on the upper right of the Wix page.

Was this article helpful?

Related Articles

Orioly referal tracker