WIDGETS | Embed V2 Widgets into Your Website

May 14, 2025

Overview

The V2 Hapana Embed Widgets allow your business to integrate various client-facing features directly into your website. These script-based widgets provide a seamless user experience that matches the look and feel of your branded app. Unlike the older iFrame versions, these updated widgets support dynamic filtering, improved styling, and direct interaction for everything from class bookings to gift card sales.

By embedding these tools directly into specific pages of your website, you’ll improve client engagement, reduce friction, and centralize services under one cohesive user experience.

Prerequisites

Admin access to Edit Profile > Website Embed

Basic familiarity with embedding HTML/script code into your website

The Try Beta Widget Code toggle must be enabled

Tip: Collaborate with your web developer to copy and paste the widget code into the right sections of your site for best layout integration.

Step-by-Step Instructions

Step 1: Access the Widgets in Core

Click your profile initials in the top-right

Select Edit Profile

Navigate to the Website Embed section

1. Classes

Choose to filter classes by session type or instructor

Copy and paste the widget script into your desired web page section

Visitors will be able to book sessions, select spots (if configured), and pay using packages

Tip: Create dedicated landing pages for yoga, CrossFit, or personal training instructors using filtered widgets.

2. Packages

Embed all packages or highlight a specific package

Choose between Pageview (inline) or Modalview (pop-up)

Modalview offers multiple HTML element styles: <button>, <a>, <div>, <p>, or <span>

Tip: Use Standalone Packages to promote special offers without sending clients to your full package list.

3. Privates

Embed all available private sessions

Optionally filter by instructor to show availability on their personal profile pages

4. Workshops

Embed a list of available workshops

Clients can view, book, and pay for a workshop directly from your website

5. Gift Cards

Add gift card widgets to any sales or promotions page

Clients select a card design, enter recipient details, and complete payment—all from your site

Embed a standalone login/sign-up tool anywhere on your site

Once logged in, users will remain authenticated across all other widgets (e.g., Classes, Packages)

7. Client Dashboard

Provides clients with direct access to:
- View and retry failed payments
- Edit profile and password
- See booking history
- Manage packages
- Redeem gift cards

Choose whether the client should land on Edit Profile or Dashboard Home after login

Tip: Enable Directly Display Edit Profile if you want to prompt clients to complete their profile during the first login.

Expected Outcome

Once embedded:

Your clients can interact with classes, packages, gift cards, workshops, privates, and account tools directly from your website

All embedded elements adopt your branded theme for seamless user experience

Clients stay logged in across widgets using a single session

FAQs

Q: Can I embed multiple widget types on a single page?
Yes. You can embed any combination of widgets on the same or different pages.

Q: Will my website colors match the widgets?
Yes. The widgets use dynamic theming based on your Core color configuration.

Q: What happens if I disable the Try Beta Widget toggle?
You’ll revert back to the legacy iFrame version of widgets.

Need help?
Reach out to our support team via [email protected]