Video conferencing

White-Label Emotion AI Video Conferencing for B2B SaaS

Equip your platform with emotional videoconferencing under your brand

The White Label version of MorphCast Emotion AI Video Conference 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, it’s 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.

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:

<!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 to different screen sizes -->
  <title>Emotion AI Videoconference</title> <!-- Page title -->
  <link rel="icon" type="image/x-icon" href="https://www.mydomain.com/…/icon.png">
  <style>
    /* Styles for full-page iframe with no margins */
    html, body {
      margin: 0;
      height: 100%;
      overflow: hidden; /* Disables scrollbars */
    }
    iframe {
      border: none; /* Removes iframe borders */
      width: 100%; /* Makes iframe take the full width */
      height: 100%; /* Makes iframe take the full height */
      overflow: hidden; /* Disables scrollbars */
    }
  </style>
</head>
<body>
  <!-- Iframe with specific 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>
    // This field contains a URL pointing to the MorphCast Meet app (this URL is mandatory):
    const baseUrl = "https://meet.morphcast.com/app"; // mandatory. Not to be changed
    // Parent information to be sent to the iframe when requested (you can change all or part of them into your URLs
    const parentInfo = {
      'hostname': window.location.hostname, // mandatory not to be changed
      'domain' : "https://meet.mydomain.com/", // must be replaced with the exact path of the added index.html file. Ensure that the path ends with a slash (/).
      'logo_url': "https://meet.mydomain.com/…/logo-for-mydomain.png", // mandatory
      'name': "mydomain", //mandatory
      "meetings": "true", // mandatory
      "analytics": "true", // mandatory
      "settings": "true", //optional, can be removed
      "pricing_url": "https://www.mydomain.com/pricing/",  //optional, can be removed
      "faq_url": "https://www.mydomain.com/faq",  //optional, can be removed
      "support_url": "https://www.mydomain.com/support",  //optional, can be removed
      "editHostPrivacy": "true",  // mandatory for privacy law (if applicable)
      "usage": "true",  //optional, can be removed
      "alerts": undefined,  //optional, can be removed
      "privacy_url": "https://www.mydomain.com/privacy", // mandatory for privacy law (if applicable)
      "tou_url": "https://www.mydomain.com/tou/",  //mandatory for local law (if applicable)
      "dpa_url": "https://www.mydomain.com/dpa/",  //mandatory for privacy law (if applicable)
      "feedback_url": "https://www.mydomain.com/feedback",  //optional, can be removed
      "report_abuse_url": "https://www.mydomain.com/report-abuse"  //optional, can be removed
    };

    // Function to handle messages sent from the iframe
    const handlePostMessage = (event) => {

      // Checks if the message is requesting the parent domain information
      if (event.data === 'getParentInfo') {
        // Responds by sending back the parent info object
        event.source.postMessage({
          type: 'parentInfo',
          info: parentInfo, // Sends 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 listen for messages from the iframe
    window.addEventListener('message', handlePostMessage);

    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 encode(string) {
      try {
        return encodeURIComponent(string);
      } catch (error) {
        console.error("Error while encoding URL:", error);
        return null;
      }
    }

    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() {
      // Gets the parent page URL
      const parentUrl = window.location.href;
      // Extracts the 'url_param' from the parent URL
      const url = new URL(parentUrl);
      const urlParam = url.searchParams.get('url_param');
      // Checks if 'url_param' exists
      if (urlParam) {
        // Constructs the iframe URL using the 'url_param' and the base URL
        console.log(baseUrl + decode(urlParam));
        document.getElementById('myIframe').src = baseUrl + decode(urlParam);
      } else {
        // Loads the iframe with just the base URL if no parameter is found
        document.getElementById('myIframe').src = baseUrl;
      }
    }
  </script>
</body>
</html>

Note: For security reasons, to prevent unauthorized users from accessing your branded videoconference as hosts, we maintain a whitelist of email addresses on our system. Please contact us to provide the list of authorized users, if applicable.