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:
<script src="https://platform.billgang.com/embed.js"></script>
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">
<script src="https://platform.billgang.com/embed.js"></script>
</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.