Add prescription verification using Custom Code and HTML embeds
Best for simple stores with a few Rx products. No coding needed.
EasiestFor dynamic product pages. Automatically shows the gate based on product data.
AdvancedIn your Wix dashboard, go to Settings > Custom Code > + Add Custom Code.
<!-- Add via Wix Custom Code -->
<!-- Settings > Custom Code > Add Custom Code -->
<!-- Name: RxCompliant Widget -->
<!-- Place code in: Body - End -->
<!-- Apply to: All Pages -->
<script src="https://rxcompliant.com/widget/rxcompliant.js"
data-api-key="YOUR_API_KEY"
data-color="#DC2626">
</script>In the Wix Editor, navigate to the product page. Click Add (+) > Embed Code > Custom HTML. Place it above the Add to Cart button.
<!-- Add as an HTML embed (Custom Element) on product pages -->
<!-- In Wix Editor: Add > Embed Code > Custom HTML -->
<div data-requires-rx
data-product-id="YOUR_PRODUCT_ID"
data-product-title="Your Product Name"
data-platform="wix">
</div>Note: Replace YOUR_PRODUCT_ID and Your Product Name with the actual product details. You'll need to add a separate HTML embed for each product that requires a prescription.
Click Publish in the Wix Editor. Visit the product page to verify the prescription widget appears.
If you have many prescription products and use Wix Stores, Velo lets you dynamically show the widget based on product data.
In the Wix Editor, click Dev Mode > Turn on Dev Mode.
In Wix Stores, go to each prescription product and add a Custom Text Field named requires_prescription.
Add an HTML embed element to your product page in the editor. Set its ID to #rxcompliantEmbed. Paste this HTML:
<!-- HTML for the Wix HTML embed element (#rxcompliantEmbed) -->
<!DOCTYPE html>
<html>
<head>
<style>
body { margin: 0; padding: 0; font-family: system-ui, sans-serif; }
</style>
</head>
<body>
<div id="rx-container"></div>
<script>
window.addEventListener('message', function(event) {
if (event.data.type === 'init') {
var container = document.getElementById('rx-container');
container.innerHTML = '<div data-requires-rx ' +
'data-product-id="' + event.data.productId + '" ' +
'data-product-title="' + event.data.productTitle + '" ' +
'data-platform="wix"></div>';
// Load the widget
if (!document.getElementById('rxc-script')) {
var script = document.createElement('script');
script.id = 'rxc-script';
script.src = 'https://rxcompliant.com/widget/rxcompliant.js';
script.setAttribute('data-api-key', 'YOUR_API_KEY');
document.body.appendChild(script);
} else {
window.RxCompliant && window.RxCompliant.init();
}
}
});
</script>
</body>
</html>In the code panel for the product page, add:
// Using Wix Velo for dynamic product pages
// Enable Developer Mode in Wix Editor
import wixWindow from 'wix-window';
import wixLocation from 'wix-location';
$w.onReady(async function () {
const product = await $w('#productPage1').getProduct();
// Check if product has a custom text field for prescription
const requiresRx = product.customTextFields?.some(
field => field.title === 'requires_prescription'
);
if (requiresRx) {
// Show the prescription container (an HTML embed element)
$w('#rxcompliantEmbed').show();
// Set the HTML content with product details
$w('#rxcompliantEmbed').postMessage({
type: 'init',
productId: product._id,
productTitle: product.name
});
} else {
$w('#rxcompliantEmbed').hide();
}
});Sign up for free and add prescription verification to your Wix store.