Skip to main content

Widget Setup Guide

The CRYMBO Widget allows you to easily initiate transactions by embedding a URL containing key parameters. This document describes how to dynamically generate and embed the widget on your platform.

🔐 URL Structure​

The widget URL must follow this format:

https://widget.{Platform URL}/widget/auth

For example, if your platform URL is dev.crymbo.link, then the complete widget URL would be:

https://widget.dev.crymbo.link/widget/auth

✅ Required URL Parameters​

ParameterDescription
consumerIDUnique ID of the merchant or user
transactionIDUnique ID for the transaction (timestamp recommended)
ratesOptional: set to true to display rates

📘 Example Full URL​

https://widget.dev.crymbo.link/widget/auth?consumerID=exampleID&transactionID=1750340448230&rates=true

🧱 HTML Example​

<div>
	<div id="crymboError" style="color: red;"></div>
	<button id="crymboButton">Click here to generate widget link</button>
	<div id="crymboMessage" style="margin-top: 10px;"></div>
</div>

⚙️ JavaScript Example​

const button = document.getElementById('crymboButton');
const error = document.getElementById('crymboError');
const message = document.getElementById('crymboMessage');
const basePlatformUrl = 'dev.crymbo.link'; // Replace with your actual platform domain
const baseUrl = `https://widget.${basePlatformUrl}/widget/auth`;
const consumerId = 'exampleMerchantId'; // Replace with actual CRYMBO merchant ID

button.addEventListener('click', () => {
	if (!consumerId) {
		error.innerText = 'Missing consumer ID.';
		return;
	}
	const transactionId = Date.now();
	const url = `${baseUrl}?consumerID=${consumerId}&transactionID=${transactionId}&rates=true`;
	console.log('Generated Widget URL:', url);
	navigator.clipboard
		.writeText(url)
		.then(() => {
			message.innerText = `Widget URL copied to clipboard:\n${url}`;
		})
		.catch(() => {
			message.innerText = `Widget URL:\n${url}`;
		});
});

By embedding and dynamically generating the CRYMBO Widget link, you provide a seamless experience for users to initiate and monitor compliant transactions.