Embedding
Components
Properties Glossary

Properties Glossary: Description of Embedded Javascript Options

Below is a description of the options available in the embedded JavaScript code.

  • client (required): This represents the client brand associated with the specific site. This information will be provided by your customer success manager. For testing purposes you can use client='benovo' to embed content from our demo site, https://benovo.crediblemind.com (opens in a new tab)

  • env (optional): This property specifies the application environment. It can be either "demo" or "production".

    • "demo": Use this during the testing phase, as it includes the latest code and options.
    • "production": Use this once the website is launched, as it employs stable and tested code.
    • Note: If not specified, env defaults to "production".

  • type (optional): This property, usually set to "bare", helps eliminate all CredibleMind headers, footers, and primary navigation. However, you can opt for a complete embedding of CredibleMind, inclusive of its navigation, header, and footer, which is the default setting if type is not specified.

  • components (optional): This is the default component to be loaded if there is no cm_page= parameter in the parent URL.

  • parent (required): This is an internal CredibleMind property and should always be set to "window.location" unless our tech team advises otherwise.

  • styles (optional): This property customizes the appearance of the embedded application. Currently, the styles object can include the following sub-properties:

    backgroundColor

    The backgroundColor sub-property is a string that specifies the background color of the embedded CredibleMind pages. This value should be a valid hexadecimal color code. If the provided hexadecimal code is not valid, or if backgroundColor is not provided, the background color will default to white.

    Here's an example of how to use styles and backgroundColor in the embed configuration:

    styles: {
  backgroundColor: "#FAFAFA", // A light gray color
}

    containerPadding

    The containerPadding sub-property allows you to adjust the padding around the embedded CredibleMind content. This value should be a valid CSS padding style. By setting this property, you can override the default padding of the embedded content.

    Here's an example of how to use styles and containerPadding in the embed configuration:

    styles: {
  containerPadding: "20px 15px"; // Sets top/bottom padding to 20px and left/right padding to 15px
}

  • controls (optional): This property is an optional object that you can include in the embed configuration. When provided, it allows you to control certain aspects of the embedded CredibleMind content's appearance. Currently, the controls object can include the following sub-properties:

    hideHeader

    The hideHeader sub-property is a boolean (true or false) that controls the visibility of the headers on specific CredibleMind pages. When set to true, the header sections on the /topics, /news, /assessments, and /blogs pages will be hidden. When set to false or left out, these headers will be visible as usual. Here's an example of how to use controls and hideHeader in the embed configuration:

    controls: {
  hideHeader: true,
}
    hideSidebar

    The hideSidebar sub-property is a boolean (true or false) that controls the visibility of the sidebar on topics and resources. When set to true, the sidebar section on the topics and resources page will be hidden, only the primary content is shown. When set to false or left out, these sidebar will be visible as usual. Here's an example of how to use controls and hideSidebar in the embed configuration:

    controls: {
  hideSidebar: true,
}

  • redirect and onRouteChange (required): These properties determine how CredibleMind embedding is set up. There are two options:

    1. Users stay fully embedded on the parent site when clicking an embedded link.

      onRouteChange: (route) => {
  var page = window.location.pathname;
  if (route.length > 1) {
    page = "?cm_page=" + route;
  }
  history.replaceState(null, null, page);
  if (!route) window.location.reload();
};

    2. Users are taken to a standalone CredibleMind site in a new window or tab when clicking a link.

      redirect: "new_tab",
onRouteChange: function() {
    return true;
}

  • setIframeHeight (required): This function listens to a child iframe and dynamically adjusts the height of the iframe container within the parent site. If no height is passed, a default minimum height of 200px is used.

    setIframeHeight: (height) => {
  var min_height = 200;
  var final_height = height || min_height;
  var element = document.getElementById("cm-embed-container");
  if (element) {
    element.firstElementChild.setAttribute(
      "style",
      "height:" + final_height + "px"
    );
  }
};

  • onModalOpen (required): The function should be passed as a prop to the modal component and is invoked when the modal is about to open. It calculates the offsets from the top (topOffset) and left (leftOffset) of the window's scroll position, ensuring that the modal appears in the correct position relative to the viewport.

    onModalOpen: () => {
  const topOffset = window.top.scrollY;
  const leftOffset = window.top.scrollX;
  return { top: topOffset, left: leftOffset };
};

  • onScrollTo (required): This function should be passed as a prop for navigating within the app. It ensures the window smoothly scrolls to the specified position.

     onScrollTo: position => {
  window.scrollTo({
    top: position,
    behavior: 'smooth',
  });
},
FAQsFunctional Example