Overview

We are excited to release the new Hapana Embed Widgets (version 2) for brands to integrate into websites for access to client portals. These new Embedded Widgets are script based and no longer iFrames so as to give them more of a look and feel as part of your own web solution. We have remodelled the widgets to look and work much the same as our Branded App experience. This should provide congruency in your member and client experiences there by reducing friction and increasing overall user satisfaction.

 

As we roll out components of the new V2 Widgets, we will be revising the modules presented in the first version iFrames such as Class Listing and Bookings, Package purchases, Client sign up and Log In, Booking Privates and Gift Card sales. While we are not reengineering the aggregate Dashboard view, we will be offering new embedded solutions that allow pre-filtering to individual instructor’s class listings as well as filtering by session types so that you can place these specific lists in the dedicated pages of your website and online portals.
 

This release includes the following widgets:

• Classes
• Packages
• Private
• Standalone package widgets
• Gift cards
• Workshops
• Login / sign up widget
• Client dashboard
• Forgot password
• Dynamic Theming and Site Configurations, Custom CSS

 

 

Instructions for use

Configuration

To reveal your new Embedded Widgets, simply navigate from the Business Dashboard to Edit Profile > Website Embed.

Under Option 2 – Website Embed you will see the new Embed options to include Classes, Packages, Privates, Workshops, Gift Cards, Dashboard and Standalone Login

 

 

Please share with your web development resources these new code scripts so they may place them in your website.

 

Classes

The classes option comes with filters for Sessions and Instructors. As to be expected, if All Sessions and All Instructors are left in the filter then all sessions will be displayed on your website using the default widget code.

 

When you select one of the Session types from the drop-down you will then see the widget code alters to include only those Session types in the web display.  This could be a way for you to call attention to specific program offerings on a portion of your site.

 

 

Similarly, if you preselect an instructor, then the available widget code can be copied into a dedicated page about your instructor, displaying their own classes:

Your Classes will present in your website with your own configured colors as well for congruency to your branding.  Here is a sneak peak at the Classes listing:

 

The bookings process is as expected with Clicking the booking button and seeing the details page,

 

Selecting a spot if configured,

 

Package selection or purchasing as required for the access to the class

 

 

And a system acknowledgement of booking completion

 

 

Packages

The Packages widget code also includes by default all packages and an option to alter the view as Page or Model view when a package is selected.

 

If for instance, you wish to select a specific package for advertisement in a special area of your site, then the model view may be an option to promote the immediate purchase of that offering:

 

Here is a sneak peek at the Package listings Page in your web browser:

 

Package purchases have all the necessary steps you would expect such as details page,

Agreement review with Signature capturing,

 

Payment type capture with processing.

 

Stand Alone Packages. 

Use Case:

“As a business user, I want to share a direct link on my website to a specific package or membership, so that my clients and members may purchase directly without having to select from a list. "

 

V2 Package Widget feature where by you may link directly to a page or modal view a Stand Alone package. 

Navigate to Edit Profile > Website Embed > toggle ON the Try Beta Widget Code > select Packages and then choose either the Page or Model view before copying the code to your website builder. 

 

Privates

Privates have a standard code offering for accessing and booking from all of your instructors available for Private session types. It also includes a filter for optional single-instructor schedule displays.

 

Here is a sneak peek at the Privates listing page in your web browser and the work flow to book.

 

 

New Client Sign Up

Included in the web widgets are Sign Up and Login workflows. 

 

Gift Cards

Gift Card web widgets configuration code can be found here among the other Beta Widgets: 

Dashboard > Edit Profile > Website Embed > Try Beta Widget Code

 

 

Add this code to your website and the following screens will be available:

Your configured Gift Cards will appear for selection and sale:

 

 

Clients are expected to select their gift card and enter the recipient email and name as well as their own information for receipt and card delivery. 

 

 

Workshops

The Workshop web widgets configuration code can be found here among the other Beta Widgets: 

Dashboard > Edit Profile>  Website Embed > Try Beta Widget Code-

Add this code to your website and the following screens will be available:

Like Classes, your client simply needs to click on the Book button and follow the prompts to complete their booking or buy a package, if they do not have the appropriate credits already available on their account.    

 

 

 

Stand Alone Login or Sign Up Widget

When you use the Stand Alone Login Widget found here among the other Beta Widgets:

You may display a login UI tool anywhere on your webpage. As your clients log in to this tool, they will be logged into all widgets on your website. 

Use the widget code displayed above to place the following tool on your website:

When your client clicks on this graphic, they will be presented with the following Login or Sign up widget:
 

 

Client Dashboard

Use Case:

“As a business user, I want my clients and members to be able to log in and manage portions of their profile and perform actions relevant to our business."
 

We have released the updated V2 Dashboard Widget feature that you may embed directly in your webpage. This client dashboard will allow your clients and member, after logging in, to perform the following actions. 
 

• See Failed payments alerts,
• Retry Failed payments,
• Edit Profile,
• Review My Packages,
• Redeem Gift Cards,
• Review Visit History,
• Review Billing Information,
• Change their password, and
• Review My Bookings. 
   

Directions for use:

In the Business Dashboard, please navigate to Edit Profile > Business Profile > Website Embed section. 

Locate the Try Beta Widget Code toggle and position it to ON. 
 

Add this code to your website where you wish your clients and members to be able to Log In and manage their account.
 

You may select yes or no to Directly Display the edit profile dialog when the user logs in to the dashboard. If "yes" is selected, this could be a way for you to force the user to update their profile when accessing the dashboard. If "no" is selected, the user will land on the dashboard home page after login.

 

Your embedded Dashboard code will reveal itself in the following manner directing your clients to log in. 
 

 

Upon a successful Login, your clients will see the My Bookings and Stats as the landing page. Any payment alerts they may have will be displayed here until resolved. 

 

Your clients may click on the View failed payments button for more details.
 

Clients may Retry Payments right from this screen by clicking the Retry payment button. 
 

 

Clicking on one of the My Bookings items will provide a more detailed view of the session and an opportunity for the client to cancel should you have it configured. 
 

 

Clients may navigate through the remaining buttons on the left to reveal the following actions:

 

Edit Profile

 

 

 

My Packages

 

 

 

Redeem Gift Card:

 

 

 

View Visit History:

 

 

 

 

Change Password: