Embed customer portal within a store using an iFrame
You can embed the Recharge customer portal within a BigCommerce store, allowing customers to remain on the same URL while managing their subscriptions. Embedding the portal creates a seamless user experience, versus redirecting the customer to Recharge, where the customer portal is hosted.
1. Add iFrame to store
First create the iFrame HTML element containing the Customer Portal and add it to the store.
Example iFrame element
<iframe id="rcPortal" src="#" width=100% height=1200px style="display: none;"></iframe>
You can do this one of two ways:
- Add the element to a custom Stencil template file using the Stencil CLI. Then, create a store web page using the custom template.
- Add the element to a store page by entering raw HTML.
2. Store customer data using Recharge front-end objects
You'll need the following data to generate the customer portal.
- Store hash
- Customer email
- Platform ID (to identify whether the customer is using BigCommerce, Shopify, etc.)
Access and store this information using the recharge_store_objects
object, which is available via the front-end.
Example code storing variables
const store_hash = window.RCA_store_objects.store_hash
const email = window.RCA_store_objects.customer.email
const platform_id = window.RCA_store_objects.customer.id
3. Generate the customer portal
You have access to JavaScript methods on the front-end that let you perform various tasks.
Use the getCustomerData
method to generate the customer portal, passing in the data stored in the previous step. The following script demonstrates retrieving the portal URL, passing the customer portal URL to the iFrame element, and unhiding the element.
Example code generating customer portal
RCAInterface.account.getCustomerData(store_hash, {email, platform_id}).then((data) => {
const src = data?.recharge?.portal_url || "#"
const element = document.querySelector("#rcPortal")
element.setAttribute("src", src)
element.setAttribute("style", undefined)
})
Example response
{
email: "[email protected]",
name: "Thomas Flynn",
platform_id: "5",
recharge: {
expires_at: "2021-09-23T14:31:58.690395",
hash: "987xyz",
id: 1,
portal_url: "https://admin.rechargeapps.com/portal/456def/schedule?token=123abc",
temp_token: "123abc",
}
}
Below is an example of the final script performing all the steps above:
Example script
<script>
const store_hash = window.RCA_store_objects.store_hash
const email = window.RCA_store_objects.customer.email
const platform_id = window.RCA_store_objects.customer.id
RCAInterface.account.getCustomerData(store_hash, {email, platform_id}).then((data) => {
const src = data?.recharge?.portal_url || "#"
const element = document.querySelector("#rcPortal")
element.setAttribute("src", src)
element.setAttribute("style", undefined)
})
</script>
- Adding the code to the store
You can add this script to the store using Scripts Manager.
Resources
Updated almost 2 years ago