It's very straightforward to embed products in your website particularly if you've created your website in a super user-friendly platform such as Webflow, Squarespace or WordPress and know the basics. If you have a website developer, it will just take them a few minutes to get your products and plans embedded.
​
Once you've done this, you'll have your own custom branded shopping cart and will be able to sell your workspace benefits directly:

When you've created a product or a plan and you're ready to go public with it, your can change the 'Availabilty' setting from 'Admin only' to 'Members and Admins' or 'Public'. If you want to make it fully accessible via your website you need to set it to 'Public'. This will create the foundations for integrating the product/plan in your website.

Once you've changed that setting you'll see an option that says 'Show code for'. When you click on 'Hosted product page' a URL will appear. When you click on 'Direct cart access' HTML code will appear (products only). These options create slightly different flows which we'll go into, but either way, the process is the same -  you need to copy and paste the URL or HTML into the button or link you'd like to connect:

You have a choice in user flow here; do you want to have an intermidiate, descriptive page before going to the checkout? Or do you want to send them directly to the checkout? This is the essential difference between the hosted product page (URL) and direct cart access (HTML) options

This is the hosted product page flow: website > product description > checkout

This is the direct cart access flow: website > checkout

There are good reasons for both. If you have fully described the product in your website, then you might not want to repeat the same information so you'd go direct.

If you provide a light product summary in your website, you might want to go into more depth in the product description and use the hosted product page option. 

If you've used a membership plan widget in your website, you'll most likely have to use the URL rather than the HTML option.
​
You also might want to make use of the ability to stylise your products within Habu using markdown formatting such as this:

Any which way, it's your call. Let's move on to the next step.
​

I'm going to show you how plan/products integrate into a Webflow designed website, as that is what we've built our website in. But the principle remains the same for non-developer websites such as Squarespace or WordPress, as well as custom websites too.

The design and layout in other website building platforms will certainly be different, but it will be straightforward 

Once you're happy with everything, simply go ahead and publish your updated website. If you've integrated with Stripe or Adyen you'll be up and running, and taking online payments in no time at all. And remember to modify your notification settings too in Habu if you want to be notified in-app and/or via email when a payment is made. 

Without a payment integration, the functionality of embedding products/plans in your website is much more limited as you can't take online payments through Habu. But there is still some useful functionality. 

For example if you embed a product/plan in your website as per the following steps, your prospective customer will be taken to a screen like this:

And when they click on the email link, a partially pre-filled email will be created in the prospective customers email:

Once an email like that is received, it's down to you follow up with the next steps according to your sales process. A good example of that is: