Skip to main content
All CollectionsWebsite Builder
How to Embed products on your own site?
How to Embed products on your own site?

Your website and our platform together define unstoppable growth

Updated over 3 weeks ago

Take full control of the customer experience from start to finish with embedded products.

If a Billgang-powered storefront doesn't suit your needs, you can leverage our products directly on your own website. From payments to automated product delivery and customer insights, you get everything Billgang has to offer.

Let's get started!

Embedding Javascript

The first step is to add the following snippet of code to the <head> section of your website. This code will load the necessary scripts for the embedded products to function:

Purchase Button

Add this button code to your website. When a user clicks this button, an embedded interface will appear to guide them through the payment process:

<button

data-billgang-product-path="SEO_PATH"

data-billgang-domain="domain.bgng.io"

>

Purchase

</button>

Replacing Variables for Product

  • SEO_PATH: Replace this with your product's path. This can be found in the SEO section of your product edit page or by the product name.

  • domain.bgng.io: Replace this with your Billgang-provided domain (e.g., demo.bgng.io), or your custom domain (e.g., demo.com).

Example HTML Page

For clarity, here's a full example of an HTML page that includes all the necessary code for embedding a product:

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body>

<button data-billgang-product-path="SEO_PATH" data-billgang-domain="domain.bgng.io">Purchase</button>

</body>

</html>

Embedding a Group

If you need to embed a group of products rather than a single product, you can use the following method. This allows you to redirect users to a page containing multiple products in a group:

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script src="https://platform.billgang.com/embed.js"></script>

</head>

<body>

<button onclick="window.location.href='https://domain.bgng.io?group=GROUP_SEO_PATH'">Purchase</button>

</body>

</html>

Replacing Variables for Groups

  • GROUP_SEO_PATH: Replace with your specific group identifier (Slug URL).

  • domain.bgng.io: Replace this with your Billgang-provided domain (e.g., demo.bgng.io), or your custom domain (e.g., demo.com).

Conclusion

If you have any questions or issues with setting up the product embedding, our support team is always ready to assist you. Please contact us through the Billgang live chat in your dashboard.

Did this answer your question?