Equip your platform with emotional videoconferencing under your brand
The White-Label Emotion AI Video Conferencing for B2B SaaS is designed for seamless integration into your branded environment / platform.
This option empowers you to maintain full control over the look and feel, ensuring that advanced Emotion AI technology serves as an extension of your brand identity. With customizable features, secure data management, and real-time emotion analysis, this White-Label Emotion AI Video Conferencing is an ideal choice for companies wanting to elevate their user engagement without compromising brand consistency.
It is easy to set up: simply embed it on your website by hosting a single HTML file and customize key parameters, such as your logo, URLs for privacy and legal information, and personalized menu items.
Seamless Authentication for Your Users: For an even smoother user experience, you can enable automatic authentication for users of your platform in our video conference. This eliminates the need for a separate login, ensuring a seamless and uninterrupted access flow.
Discover the full potential of MorphCast Emotion AI Video Conference—explore its features and transformative capabilities on our dedicated page.
Istructions:
1. Hosting the following index.html file on your domain
To host the index.html file:
- Create the index.html provided content to the root or a subdirectory of your domain.
- Ensure that the file is accessible from your desired URL, e.g. https://meet.mydomain.com/index.html.
2. Customizing the file using parameters
The index.html file is designed to dynamically load content based on URL parameters. Here’s how you can customize the content:
- Base URL: https://meet.morphcast.com/app. This URL should never be changed.
- Parent Domain, called “mydomain” in the index.html file provided: should be replaced to reflect your domain.
- Other URLs: Replace with your domain URLs.
Meetings, Analytics, Settings, Usage, Alerts, EditHostPrivacy: These features can be toggled by replacing the corresponding values (“true”or undefined).
File index.html v.1.3:
<!-- Emotion AI White Label Videoconference Index.html – Version 1.0 – March 27, 2025 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <!-- Character encoding is set to UTF-8 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Ensures the page is responsive on various devices -->
<title>Emotion AI Videoconference</title> <!-- Page title -->
<link rel="icon" type="image/x-icon" href="https://example.com/…/icon.png">
<style>
/* Styles for a full-page iframe with no margins or scrollbars */
html, body {
margin: 0;
height: 100%;
overflow: hidden; /* Disables scrollbars */
}
iframe {
border: none; /* Removes iframe borders */
width: 100%; /* Sets iframe width to full page width */
height: 100%; /* Sets iframe height to full page height */
overflow: hidden; /* Disables iframe scrollbars */
}
</style>
</head>
<body>
<!-- Iframe with specified permissions (camera, microphone, etc.) and no initial source URL -->
<iframe id="myIframe" src="" allow="camera; microphone; geolocation; fullscreen; clipboard-read; clipboard-write; display-capture"></iframe>
<script>
// -----------------------------------------------------------------
// START OF PARAMS CONFIGURATION
//
// You can change some or all of the following values according
// to your website structure and needs.
// -----------------------------------------------------------------
const parentInfo = {
// ----------------------------------------------
// MANDATORY
// The following lines are mandatory.
// ----------------------------------------------
/***
* Replace this value with the exact URL where your index.html is hosted on your web server.
* Make sure the URL ends with a trailing slash (/) to avoid path resolution issues.
*/
'index_url' : "https://example.com/meet/",
/***
* URL to your logo image.
*/
'logo_url': "https://example.com/…/my-logo.png",
/***
* Other mandatory parameters.
*/
'name': "example.com", // Your domain name.
"meetings": "true", // Enable the meetings menu voice.
"analytics": "true", // Enable the analytics menu voice.
"editHostPrivacy": "true", // Required for privacy compliance.
"privacy_url": "https://example.com/privacy", // URL to your privacy policy.
// ------------------------------------------------------
// OPTIONAL
// The following lines are optional. They can be set or removed.
// Removing a line typically means the corresponding menu voice will not be shown.
// ------------------------------------------------------
/***
* If your platform already has logged-in users and you use an automatic login process
* for the white-label tool, you might want to hide the user account menu.
*/
'hide_account_menu': "true", // If set to "true", the videoconference account menu is hidden. Remove this line to display it.
/***
* Other optional parameters.
*/
"openMeetingInSameTab": "false", // "true" o "false".
"tou_url": "https://example.com/tou/", // URL to your Terms of Use.
"dpa_url": "https://example.com/dpa/", // URL to your Data Processor Agreement.
"settings": "true",
"pricing_url": "https://example.com/pricing/",
"faq_url": "https://example.com/faq",
"support_url": "https://example.com/support",
"usage": "true",
"alerts": undefined, // System alerts (e.g., due payments) based on white list configuration in your MorphCast console.
"feedback_url": "https://example.com/feedback", // Optional: URL for feedback.
"report_abuse_url": "https://example.com/report-abuse", // Optional: URL to report abuse.
};
// -----------------------------------------------------------------
// END OF CONFIGURATION
// -----------------------------------------------------------------
// *************************************************************
// ----------------------------------------------
// WARNING
// DO NOT CHANGE ANYTHING BELOW THIS LINE!!
// ----------------------------------------------
const baseUrl = "https://meet.morphcast.com/app";
parentInfo.hostname = window.location.hostname;
parentInfo.wUrl = `${window.location.origin}${window.location.pathname}`;
// Function to handle messages sent from the iframe.
const handlePostMessage = (event) => {
// If the message requests the parent domain information...
if (event.data === 'getParentInfo') {
event.source.postMessage({ // ...respond by sending back the parent information object.
type: 'parentInfo',
info: parentInfo, // The parent information object.
}, event.origin);
}
if (event.data.type === 'urlChanged') {
const fullUrl = event.data.url;
const relativeUrl = fullUrl.replace(baseUrl, '');
updateUrlParam('url_param', relativeUrl);
}
};
// Adds an event listener to receive messages from the iframe.
window.addEventListener('message', handlePostMessage);
// Function to update a URL parameter in the browser's address bar.
function updateUrlParam(param, value) {
const currentUrl = new URL(window.location);
const encodedValue = encode(value);
if (encodedValue) {
currentUrl.searchParams.set(param, encodedValue);
window.history.replaceState({}, '', currentUrl);
}
}
// Function to safely encode a string using encodeURIComponent.
function encode(string) {
try {
return encodeURIComponent(string);
} catch (error) {
console.error("Error while encoding URL:", error);
return null;
}
}
// Function to safely decode a string using decodeURIComponent.
function decode(string) {
try {
return decodeURIComponent(string);
} catch (error) {
console.error("Error while decoding URL:", error);
return null;
}
}
// Function executed when the page finishes loading.
window.onload = function() {
// Retrieve the current page URL.
const parentUrl = window.location.href;
// Create a URL object from the current URL.
const url = new URL(parentUrl);
// Get the 'url_param' parameter from the current URL.
const urlParam = url.searchParams.get('url_param');
// If the 'url_param' exists...
if (urlParam) {
// Construct the iframe URL using the decoded 'url_param' and the base URL.
const iframeUrl = new URL(baseUrl + decode(urlParam));
// Get all the other URL parameters from the parent URL
url.searchParams.forEach((value, key) => {
if (key !== 'url_param') {
iframeUrl.searchParams.set(key, value);
}
});
document.getElementById('myIframe').src = iframeUrl.toString();
} else {
// Otherwise, load the iframe with just the base URL.
document.getElementById('myIframe').src = baseUrl;
}
}
</script>
</body>
</html>
Important Notes:
- For security reasons, to prevent unauthorized users from accessing your branded videoconference as hosts, we maintain a whitelist of email addresses on our system. If applicable, you can provide us with a list of authorized users or, if preferred, declare the whitelist open to anyone who logs in.
- Alternatively, you can enable automatic authentication for users of your platform in our video conference. Contact us to receive a server-side code example for implementation.