Introduction

Widgets can add dynamic features and functionality to your site, making it more engaging and personalized. This user guide will walk you through the simple process of installing Hapana’s widgets on your Wix website.

Before You Begin

• Ensure that you have an active Wix account with an active domain.
• Log in to https://core.hapana.com/ and navigate to Core> Edit profile> Website Embed and Identify the specific widgets you want to install on your website:
• • Classes
  • Packages
  • Privates
  • Workshops
  • Gift Cards
  • Dashboard
  • Standalone Login
    

Step 1: Log in to Your Wix Account

• Visit https://manage.wix.com/ and log in to your account.
• Once logged in, navigate to your website dashboard and click on "Edit Site" to access the Wix Editor.
  

Step 2: Add a New Element

Let’s take as our first example the Classes widget. On a different tab, make sure to navigate to  https://core.hapana.com/ : Core> Edit profile> Website Embed and click on the tab labeled classes to display the information for the Classes widget:

 

After opening it, go back to the wix editor and find the website page that you wish to add a widget to, in our example that will be the page classes from our website.  

1. In the Wix Editor, click on the "+ Add Elements" button on the left-hand side of the screen.
2. Add a blank strip to the website where you wish to add the widget to.
3. Go to +Add Elements again to add a embeded element
4. Select "Embed code" from the list of elements.
5. Choose "Custom element."

 

 

After clicking Custom element, a new Custom element will be displayed and ready to edit.

Attach the Custom element to the blank strip created previously. It should be displayed like the image below:

 

Step 4: Configure the Widget

1. After adding a Custom element, make sure it is selected so 2 buttons are displayed on the top.
2. Click the button Choose Source.
   1. A dialog with 3 fields will open named Element Attribute.
   2. The first field is “Add your script file with: “. Make sure that the selected option is Server URL.
      1. The widget information inside core will have a section like the example: <script src="https://widget.hapana.com/hapana_widget.js">. The server URL between quotation marks is what you will copy and paste to the wix website editor on the Server URL field.
      2. Click the update button after pasting the server url.
         
          
      3. Scroll down to make the third field visible. The field Tag name should always be filled in with the tag hapana-widget. Don’t forget to hit enter after typing the tag name in the field
         • 

 

3. Click the button Set Attributes to open a new dialog where we will configure 3 attributes for the Element:

 

     a.  Click the button Set Attributes to open the set attributes dialog to enter the attribute name and the attribute value.

 

1. Attribute 1: The name of the first attribute will always be be data-type.
   1. The attribute value will come from the widget information inside core. The first section will be displayed like the example: <hapana-widget data-type="classes". The attribute value will be the value between quotation marks and that is what you will copy and paste to the wix website editor on the field:
      
      2. Click Set to save the first Attribute

  

2.Attribute 2: The name of the second attribute will always be be data-site.

1. The attribute value will always be wix:
   • 
   1. Click set to save the second Attribute

 

3. Attribute 3: The name of the Third attribute will always be widget-id.

1. The attribute value will come from the widget information inside core. The section will be displayed like the example: widget-id="K0VwRW0zZnJyTFdBRUhYRkZ3WloyUT09”. The attribute value will be the value between quotation marks and that is what you will copy and paste to the wix website editor on the field:
   • 
   1. Click Set to save the first Attribute

 

 

After setting the 3 Element Attributes, your widget should be displayed inside the wix editor like in the example below:

 

Step 5: Adjust Widget Placement

• Once added, you can click and drag the widget to the desired location on your website and you may also size it as desired.
   

Step 6:  Preview and Publish

1. Click "Preview" on the top navigation menu to see how the widget appears on your website.
2. If satisfied, click "Publish" to make the changes live.
3. After publishing, your clients will be able to view and interact with the widget.
   • 

Tips and Troubleshooting

• If the widget doesn't appear as expected, double-check the embed code and make sure it's correct.