Overview
How to Integrate Frontnow Advisor to Your Website: A Step-by-Step Guide
Get Access
The first step to integrating Frontnow Advisor to your website is to get access to the solution. Contact our sales representative at [email protected] to request access.
Initialization Code
Once you've been granted access, you can integrate Frontnow Advisor to your website using the following initialization code:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<!-- Your website content here -->
<div id="advisorContainer"></div>
<!-- Include Frontnow Advisor library at the end of <body> -->
<script src="https://cdn.frontnow.site/advisor.js"></script>
<script>
// Initialize Frontnow Advisor
const advisor = new Advisor({
name: "Frontnow Advisor",
subdomain: "YOUR_ADVISOR_SUBDOMAIN", // or: customDomain: "advisor.yourdomain.com"
mode: "embedded", // default: sidebar
target: "#advisorContainer",
language: "en",
colorScheme: {
primary: "#000000",
secondary: "#ffffff",
tertiary: "#ff0000"
}
});
// Handle events from the Frontnow Advisor
advisor.on("init", function () {
console.log("Advisor initialized");
});
</script>
</body>
</html>In this code, replace YOUR_ADVISOR_SUBDOMAIN with your Frontnow Advisor subdomain.
The mode parameter determines the Display Mode that Frontnow Advisor will use, and the target parameter specifies the selector of the HTML element that will contain the embedded Advisor. You can change these parameters to suit your needs.
Add HTML Element (Embedded Mode)
Add the following HTML element to your website to display Frontnow Advisor:
<div id="advisorContainer"></div>This code creates a container for the embedded Advisor to be displayed in. Make sure the target parameter in the initialization code matches the selector of the HTML element.
Loading Asynchronously
You can use the following script to load the advisor.js file asynchronously and call an initCallback function after the script has loaded successfully:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Async Advisor.js</title>
<script>
function loadAdvisorScript(initCallback) {
const script = document.createElement('script');
script.src = 'https://cdn.frontnow.site/advisor.js';
script.async = true;
// Callback function when the script has loaded successfully
script.onload = () => {
if (typeof initCallback === 'function') {
initCallback();
}
};
// Error handling
script.onerror = () => {
console.error('Error loading advisor.js');
};
document.head.appendChild(script);
}
function initCallback() {
// Initialize your Advisor instance here
// You may assign the Advisor instance to window.advisor if needed
const advisor = new Advisor(/* Your options here */);
console.log('Advisor.js loaded and callback executed');
}
// Load the advisor.js script and pass the initCallback function
loadAdvisorScript(initCallback);
</script>
</head>
<body>
<!-- Your HTML content -->
</body>
</html>
In this script, the loadAdvisorScript function creates a new script element, sets the src attribute to the advisor.js file, and sets the async attribute to true. The initCallback function is passed as an argument and will be called when the script has finished loading. If there's an error loading the script, an error message will be logged in the console. Finally, the script element is appended to the document head, which initiates the loading of the advisor.js file.
By following these steps, you can easily integrate Frontnow Advisor to your website and provide your visitors with personalized recommendations and guidance. If you have any questions or need assistance, please don't hesitate to contact us.
Was this helpful?