image_guitar.jpg

Widget Integration Overview

Our widget is supported by several web platforms such as Static website, WordPress, Wix, Squarespace and more. In general, the integration code should be the same for all of them. In particular cases, developers should consider manually initializing our widget (example: One single page application, React apps, etc).

Scroll down to find the section relevant to your website. Each section describes the step-by-step process of adding the Yervana widget to the following platforms:

  • Wix

  • Wordpress

  • Squarespace

Widget Types

Our Widget has two different displays: "Book Now Button" and "Embedded". The Book Now Button will display a button with the text ‘Book now’, when customers click this, the Widget will open up in a window on the page. "The Embedded Option" will display the Widget and its content within the main body of your webpage.

Book Now Button Example

Embedded Example

Yervana Widget Generator - on the Yervana Platform.

Before editing your website, you’ll need to generate the code for the widget that you want to add. Through the Yervana platform, you can select the adventures you want to display within your Widget. Select one or more adventures per widget and generate as many widget versions as you need.

Step 1

Log in into your Yervana account, switch to your Local Profile and the click ‘Edit Widget’ (see image 1).

Step 2

In the Edit Widget page, you will find the screen below.

1. Select integration type - here you’ll find two options: Book now button and Embedded. Select the one that fits your needs (see Widget Types above). Then select one or more adventures from the list below. If no adventures are selected, the panel to the right will display the message: "You need to select at least one adventure."

Step 3

Once you select one or more adventures, click the button "Apply Changes" to update the Preview area. Here, if you have the Book Now Button selected you will see a Book Now button in the Preview area. Click this to test your settings and see how the widget will behave on your own website. If you want to add more adventures follow the same process. Click Apply Changes to update the Preview area.

Click Book now to test your settings

Integrating the Yervana Widget into a Wix Website

  1. Create a new page

  2. Select "Add Page" button

  3. Now you need to select a template. In this example we’ve used Grid from General

  4. Double click to update the page’s name

  5. Once the page is created updating the URL might be useful. Click the three dots and select Settings. ON the panel select SEO Basics, then change the URL name

  6. In the template select the area where you want the widget to go and add an Embed HTML component. Click + button, then Embed Code, then Embed HTML

  7. Once the Embed component is added, a modal window will show up. In the text area paste the injection code generated in your dashboard at yervana.com. Refer to the "Yervana Widget Generator" section above.

  8. After copy and pasting the code, click the Update button. The widget should be displayed

  9. The Embed component will look smaller. Use the handlers to adjust the size of the widget.

  10. After resizing the component, the widget should start looking like the image below.

  11. When the installation of the widget is working, publish the changes by clicking the Publish button and click View Site link

Integrating the Widget into a Wordpress Website

  1. Create/Edit a post or a page. Click the "Text" tab.

  2. In the text area paste the code generated in your dashboard at yervana.com. Refer to the "Yervana Widget Generator" section above.

  3. After copy and pasting the code, click the "Update" button.

  4. To preview click the "View Post" link.

Integrating the Yervana Widget into a Squarespace Website

  1. Login into your account

  2. Select the page where you want to install the Widget

  3. Click "Edit" button

  4. Click "Add Section" button

  5. After adding a new section you should see it like the image below. Click the "Add Block" button.

  6. From the list, select "Code"

  7. The block will add a blue outlined square. Click the pen icon.

  8. A modal window will open up. In the text area paste the code generated in your dashboard at yervana.com. Refer to the "Yervana Widget Generator" section above.

  9. To change the width of the widget, drag and drop the controller to adjust it like in the image below.

  10. To save your changes click the "Save" button.

  11. To preview the widget, click the top right arrow.

  12. If the installation worked, you should see Yervana’s Widget like in the image below (with your own adventures)

If you have any questions or need assistance adding the widget to your website, please reach out to us at support@yervana.com or 855-403-8808.

Did this answer your question?