In order to add a Hapana Embed Widget to your Wix site, you will need to utilize the Wix custom element. 

To ensure that it is added correctly to your page, please make sure to attach the element to your page or a strip.  Certain methods of adding the element to the page will create an iFrame which will not work across all browsers.

Depending on your design, you can often add a strip element and then the Custom Element to the strip.  First add the strip to the page, then add the custom element.  You can “attach” the custom element to the strip by dragging it over the strip until you are prompted to attach. (https://support.wix.com/en/article/wix-editor-attaching-elements-to-strips-and-columns)

In order to get the embed details for the widget to insert, in Hapana Core, select Edit Profile from the drop down menu under your name in the top right.  Select Website Embeded.  Choose the type of widget you would like to embed and copy the needed attributes for that widget (for example widget-id="WThMdleRZ0Rxxxxxxxxxxxxxxxxxxxxxx" data-type=”classes”).  We will use these later to configure the attributes in the Wix custom element.

 

To Add an Embed Widget

  1. Open the page you are interested in adding the widget to in the Wix editor
  2. Add a strip to your page if not already present or attach direct to the page
  3. Select add icon > Embed > Custom Embeds > Custom element
  4. Attach the element to your strip
  5. Configure the Custom Element with the information below

Source

Click on Choose Source

  1. Server URL is the the hapana_widget.js url https://widget.hapana.com/hapana_widget.js
  2. Tag Name as hapana-widget.

blobid0.png

Attributes

Then select Set Attributes

  1. Set the data-type attribute:
    1. Attribute name is data-type and value will depend on the widget you are trying to insert:
      • classes
      • packages
      • privates
      • workshop
      • giftCards
      • dashboard
    2. Set the widget-id attribute:
      1. Attribute name is widget-id and value is the id value from the Hapana Core – Edit Profile - Website Embed [WThMdleRZ0Rxxxxxxxxxxxxxxxxxxxxxx]
    3. Add a final attribute, the data-site-type attribute:
      1. Attribute name is data-site-type and value should be wix

* Please note that this attribute is required for the widgets to function on wix correctly

 

Optional

Optional attributes can be added to filter some widgets based on the instructor or session type (attributes instructor-id and session-type).  See the documentation in Hapana Core – Edit Profile – Website Embed for details on each widget.

 

 

 

 

Have more questions? Submit a request

Comments