Highlight specific Packages/Memberships on your website by adding them as widgets!
To seamlessly integrate specific packages or memberships into a page on your website, you can embed them as widgets. This allows your clients and members to make direct purchases without the need to navigate through a list of packages.

Setup Guide:

Step 1: Log in to https://core.hapana.com/ and navigate to Core > Edit profile > Website Embed and make sure to click on the packages tab. All of your packages and memberships will be listed under the tab 'Packages.'
 

Step 2: When clicking the packages dropdown, you will be able to view the list of packages your location has configured inside Core. Select one package to view the embed code.
 

Step 3: After selecting a package or membership, a new dropdown field will appear to allow you to select the type of view for the widget. There are two available view types: Pageview and Modalview.
 

Pageview:
In the page view, the embedded content appears directly within the webpage where the widget is placed. It seamlessly integrates with the rest of the page's content, providing a cohesive user experience. Users can interact with the embedded content without any interruption to their browsing experience.

• After selecting the desired package or membership and selecting Pageview, the system will display a code with the widget ID which can be copied to your website builder, as displayed below:
• Note: the code will dynamically change when a different package is selected.
  

The below image shows what the widget will look like, live on your website. 

Modalview:
The modal view presents the embedded content within a pop-up window or modal dialog that overlays the current webpage. When users click on a designated area or button, the modal window appears, showcasing the embedded content. When selecting modalview, there will be a new dropdown with five different types of HTML elements available. After selecting an element, the system will display the code with the widget id that you will copy to your website builder as displayed below:
 

• Button element(<button>): The <button> element is used to create clickable buttons on a webpage, so with this code, you will add a button on the page that will require the user to click it and then open a modal overlay to display the package.
   
• Span element(<span>): The <span> element is an inline-level HTML element used to group and style inline elements or text within a larger block of content.
   
• Div element(<div>) : The <div> element is a block-level container used to group and organize content within a webpage.
  • <div> elements are often styled using CSS to control their appearance, positioning, and behavior.
     
• Anchor element(<a>) : The <a> element, also known as the anchor element, is used to create hyperlinks to other webpages, files, or specific locations within the same webpage.<a> elements typically include an href attribute specifying the URL or destination of the link.
   
• Paragraph element(<p>) :The <p> element is used to define paragraphs of text within a webpage.
  • It automatically adds spacing before and after the paragraph, creating a visual separation from surrounding content
  • <p> elements are commonly used for structuring textual content, such as articles, blog posts, or product descriptions.