YOGO guide to setting up widgets on your website

Get started with integrating YOGO's widgets on your website

To complete the integration of widgets on your website, a small code snippet needs to be added to the <head></head> section of your site. Contact us to receive this code.

You are now ready to insert various widgets on your website.

Go to the page where you want something to appear, and insert the following HTML code on the pages where you want it to be displayed:

Calendar:

<div class="yogo-calendar"></div>

Prices:

<div class="yogo-prices"></div>

To display a specific price group:

<div class="yogo-prices" data-price-group="xxxx"></div>

('xxxx' should be replaced with the name of the price group).

The following additions can be applied to your price widget:

Field	Description
`data-show-prices-dropdown="true"`	It also displays a filter for the individual prices, with the first price in the list pre-selected.
`data-show-prices-all-option="true"`	If you have also set data-show-prices-dropdown, this field can be set if you want an "All" option at the filter level for the individual prices. "All" will be pre-selected.

Events:

<div class="yogo-events"></div>

To display a specific course group:

<div class="yogo-events" data-event-group="xxxx"></div>

('xxxx' should be replaced with the ID of the course group. This can be found in the administration panel, to the left of the course group name).

Log in:

You can also display a 'Log in' button in the menu. In this case, you can use this link:

https://xn--nameofyourstudio-pib.yogo.no/frontend/index.html#/my-profile

('nameofyourstudio' should be replaced with your YOGO client domain).

If your studio is located in Portugal, replace 'yogo.no' with 'yogobooking.pt.'

💡 You can also link directly to all sales, for example, if you want a custom setup on your website or if it needs to be linked from newsletters, Facebook, etc. See how here.