React – CredibleMind

Example: Embedding in React

The App component demonstrates how to integrate an external script, in this case, the CredibleMind's embedded component, into a React component.

Code

import React, { useEffect } from "react";
 
function App() {
  useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://widget.crediblemind.com/embed-dev.js";
    script.async = true;
    document.body.appendChild(script);
 
    script.onload = () => {
      // After the script is loaded, initialize the CMEmbed component
      if (window.CMEmbed) {
        const containerId = "cm-embed-container";
        CMEmbed.PageComponent({
          client: "{client identifier}",
          env: "demo",
          parent: window.location,
          onRouteChange: (route) => {
            let page = window.location.pathname;
            if (route.length > 1) {
              page = "?cm_page=" + route;
            }
            history.replaceState(null, null, page);
            if (!route) window.location.reload();
            const embedContainer = document.getElementById(containerId);
 
            if (embedContainer) {
              const embedContainerPosition =
                embedContainer.getBoundingClientRect().top;
              const scrollPosition =
                window.pageYOffset + embedContainerPosition;
              // Scroll to the target position
              window.scrollTo({
                top: scrollPosition,
                behavior: "smooth",
              });
            }
          },
          setIframeHeight: (height) => {
            const min_height = 200;
            const final_height = height || min_height;
            const element = document.getElementById(containerId);
            if (element) {
              element.firstElementChild.setAttribute(
                "style",
                "height:" + final_height + "px"
              );
            }
          },
          // optional properties
          type: "bare",
          components: ["topics"],
          styles: {
            backgroundColor: "#f7f7f7", // must be hexcode
          },
          controls: {
            hideHeader: true,
          },
        }).render("#" + containerId);
      }
    };
 
    return () => {
      document.body.removeChild(script);
    };
  }, []);
 
  return (
    <div>
      ...
      <div id="cm-embed-container"></div>
      ...
    </div>
  );
}
 
export default App;

Overview

When the App component is mounted, the useEffect hook:

Creates a new script element.
Sets the src attribute to point to the CredibleMind's widget URL.
Adds the script to the body of the document.
Defines an onload callback for the script to initialize the widget after it loads.
Cleans up by removing the script from the body when the component is unmounted.

Key Points

Loading the script: The embed's script is loaded asynchronously using the script.async = true; statement. This ensures the script does not block the page's rendering.
Initializing the embed component: Once the script is loaded, it checks for the CMEmbed object on the window. If found, it initializes the PageComponent of the CredibleMind's embedded with necessary configuration.
Dynamic Iframe Height: The setIframeHeight function is utilized to adjust the height of the embedded content dynamically. This ensures content from CredibleMind fits seamlessly within your app's UI.
Clean up: It's essential to clean up side effects in React components. The useEffect returns a function that removes the appended script from the body. This prevents potential issues if the component is unmounted and remounted.

Usage

Place the <div id="cm-embed-container"></div> in the desired location within your React component's render method. This div acts as a placeholder where the CredibleMind's widget will be rendered.

Playground

Functional Example Keyword