Documentation | Add Widgets to Wix Websites | Tour Resellers | Orioly

Add Widgets to Wix Websites

This article explains how to add widgets 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, sign in to your Wix account, and follow these steps to navigate to the editor where you will be able to add widgets:

  1. Click Edit site.
  2. On the newly opened tab, hover over the Site menu and click Open Editor.
  3. Click Go to Wix Editor from the pop-up message.

Book Now Button

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

  1. Sign in to your Orioly account.
  2. Access the Widgets & Plugins section.
  3. Under Book Now Button, click Generate button.
  4. Select the desired language.
  5. Choose the button type.
    • Simple button: A basic text button
    • Extended button: A more complete button containing extra information for the customer. It displays the price, type and duration of the product.
  6. Customize your Book Now button, change the text call-to-action and colors.

    Note 1: You can preview the button appearance in order to help you with the customization.

    Note 2: By changing the settings of your Book Now button, Orioly automatically generates a code that should be placed on your website. If necessary, contact your website developer.
  7. Click Copy HTML to clipboard.

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

  1. Click the icon +, located on the left side navigation.
  2. Move your cursor to the More section, located at the bottom of the list.
  3. Click HTML iframe.
  4. Position the iframe on the page where you want the Book Now button to be located.
  5. Click Enter Code, which you can see once you click on the iframe that you have previously positioned on your page.
  6. Paste the code for the Book Now button using CTRL+V or right-clicking HTTPS only… and selecting the paste option.
  7. Click Apply to add the Book Now button to your page.

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

After adding the first button and if you don’t want to add any custom CSS code, repeat the steps above to implement the rest of the buttons. Otherwise, read the next section.

Add custom CSS to your buttons

  1. Add the data-button-do-not-style attribute to the buttons HTML code you have previously added to your page
  2. Optionally remove the inline CSS from the button if you wish to add the color text and background color to the rest of your code.
  3. Below the button code, add the <style> element with your custom CSS.
  4. Duplicate the button you have created with the new CSS styles by right-clicking 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 products.
  5. Sign in to your Orioly account.
  6. Access the Widgets & Plugins section.
  7. Under Book Now Button, click Generate button.
  8. Choose the product for which you would like to generate a Book Now button.
  9. Customize your Book Now button.
  10. Click Copy HTML to clipboard.

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 Preview, located on the upper right of the Wix page.

Calendar

  1. Under Calendar click Generate calendar.
  2. Choose the product for which you would like to generate a Calendar.
  3. Select the desired language.

    Note: The list of available languages is based on the translations you have enabled in the Translations section.
  4. Customize the Text color and Background color.
  5. Click Copy HTML to clipboard.
  6. Once you have copied the HTML code, you can follow the steps described in the Book Now Button section of this article in order to add the Calendar widget to your website.

Congratulations! Your widgets are ready to be used. Now take a look at How to add a payment gateway and learn how to enable online payments for your customers.

Can’t find what you’re looking for?

Contact your support team.