Widget Integration
Salad Africa widget API integration
We have put together a sample code that calls the Salad’s widget, with this you can easily copy and paste this code to any page that you require the widget to be used.
Loan Integration
Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Salad Widget</title>
</head>
<style>
body {
margin: 0;
}
.salad {
border: none;
height: 100%;
width: 100%;
}
</style>
<body>
<button type="button" onClick="openLoanWidget()" id="salad-loan-button">
Salad Loan Button
</button>
<script>
const loanwidgetUrl = 'https://saladafrica.com/widget/loan?key={{public_key}}';
window.addEventListener('message', function(event) {
if (event.data === 'close-widget') {
const iframe = document.getElementById('saladIframe');
if (iframe) {
iframe.remove();
}
}
});
function openLoanWidget() {
const buttonElement = document.getElementById("salad-loan-button");
if (buttonElement) {
let iframe = document.createElement("iframe");
iframe.setAttribute("class", "salad");
iframe.src = loanwidgetUrl;
iframe.id = "saladIframe";
iframe.style.position = "fixed";
iframe.style.top = "0";
iframe.style.left = "0";
iframe.style.width = "100%";
iframe.style.height = "100vh"; // Full viewport height
iframe.style.minHeight = "100vh"; // Ensure minimum height is 100vh
iframe.style.zIndex = "9999"; // Ensure it sits on top of other content
iframe.style.border = "none"; // Remove any default borders
document.body.appendChild(iframe);
} else {
console.error("Element with id 'salad-loan-button' not found.");
}
}
</script>
</body>
</html>
React App
import React, { useEffect } from 'react';
const SaladWidget = () => {
const loanWidgetUrl = 'https://saladafrica.com/widget/loan?key={{public_key}}';
useEffect(() => {
const handleMessage = (event) => {
if (event.data === 'close-widget') {
const iframe = document.getElementById('saladIframe');
if (iframe) {
iframe.remove();
}
}
};
window.addEventListener('message', handleMessage);
return () => {
window.removeEventListener('message', handleMessage);
};
}, []);
const openLoanWidget = () => {
let iframe = document.createElement("iframe");
iframe.setAttribute("class", "salad");
iframe.src = loanWidgetUrl;
iframe.id = "saladIframe";
iframe.style.position = "fixed";
iframe.style.top = "0";
iframe.style.left = "0";
iframe.style.width = "100%";
iframe.style.height = "100vh"; // Full viewport height
iframe.style.minHeight = "100vh"; // Ensure minimum height is 100vh
iframe.style.zIndex = "9999"; // Ensure it sits on top of other content
iframe.style.border = "none"; // Remove any default borders
document.body.appendChild(iframe);
};
return (
<div>
<button onClick={openLoanWidget} id="salad-loan-button">
Salad Loan Button
</button>
</div>
);
};
export default SaladWidget;
Invoice Integration
Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Salad Widget</title>
</head>
<style>
body {
margin: 0;
}
.salad {
border: none;
height: 100%;
width: 100%;
}
</style>
<body>
<button type="button" onClick="openInvoiceWidget()" id="salad-invoice-button">
Salad Invoice Button
</button>
<script>
const invoiceWidgetUrl = 'https://saladafrica.com/widget/loan?key={{public_key}}';
window.addEventListener('message', function(event) {
if (event.data === 'close-widget') {
const iframe = document.getElementById('saladIframe');
if (iframe) {
iframe.remove();
}
}
});
function openInvoiceWidget() {
const buttonElement = document.getElementById("salad-invoice-button");
if (buttonElement) {
let iframe = document.createElement("iframe");
iframe.setAttribute("class", "salad");
iframe.src = invoiceWidgetUrl;
iframe.id = "saladIframe";
iframe.style.position = "fixed";
iframe.style.top = "0";
iframe.style.left = "0";
iframe.style.width = "100%";
iframe.style.height = "100vh"; // Full viewport height
iframe.style.minHeight = "100vh"; // Ensure minimum height is 100vh
iframe.style.zIndex = "9999"; // Ensure it sits on top of other content
iframe.style.border = "none"; // Remove any default borders
document.body.appendChild(iframe);
} else {
console.error("Element with id 'salad-invoice-button' not found.");
}
}
</script>
</body>
</html>
React App
import React, { useEffect } from 'react';
const SaladWidget = () => {
const invoicewidgetUrl = 'https://saladafrica.com/widget/invoice?key={{public_key}}';
useEffect(() => {
const handleMessage = (event) => {
if (event.data === 'close-widget') {
const iframe = document.getElementById('saladIframe');
if (iframe) {
iframe.remove();
}
}
};
window.addEventListener('message', handleMessage);
return () => {
window.removeEventListener('message', handleMessage);
};
}, []);
const openInvoiceWidget = () => {
let iframe = document.createElement("iframe");
iframe.setAttribute("class", "salad");
iframe.src = invoicewidgetUrl;
iframe.id = "saladIframe";
iframe.style.position = "fixed";
iframe.style.top = "0";
iframe.style.left = "0";
iframe.style.width = "100%";
iframe.style.height = "100vh"; // Full viewport height
iframe.style.minHeight = "100vh"; // Ensure minimum height is 100vh
iframe.style.zIndex = "9999"; // Ensure it sits on top of other content
iframe.style.border = "none"; // Remove any default borders
document.body.appendChild(iframe);
};
return (
<div>
<button onClick={openInvoiceWidget} id="salad-invoice-button">
Salad Invoice Button
</button>
</div>
);
};
export default SaladWidget;
Last updated