Embedding a Widget in Your Page

This guide will show you how to embed a widget into your page, including how to handle the widget's positioning and loading indicator. This process can be applied to both normal HTML files and Single Page Applications (SPA) like React.js.

Step 1: Create a Container for the Widget

The container is an HTML element that holds the widget on your page. You can optionally include a loading indicator, and both the container and the loader can be customized to position the widget correctly within your page.

For Normal HTML File

<div
  class="my-widget"
  data-prop-name="cm-widget1"
  data-prop-withlogo="true"
  data-props-responsive="true"
>
  <div class="loader">LOADING...</div>
</div>

For SPA (e.g. Reactjs)

<div
  className="my-widget"
  data-prop-name="cm-widget1"
  data-prop-withlogo="true"
  data-props-responsive="true"
>
  <div className="loader">LOADING...</div>
</div>

Attributes Explanation

class (required): This must be unique and will be used to tell the script where to mount the widget.
data-prop-name (required): This is a unique name that we provide.
data-prop-withlogo (optional): Pass true if you want to display the logo at the top.
data-prop-responsive (optional): Pass true if the widget is responsive based on the wrapper/container width.

Step 2: Inject the Widget Script

The widget script can be injected into the header or footer, or programmatically inside a specific component for single-page applications.

For Normal HTML File

<script
  async
  src="https://widget.crediblemind.com/bundle.js"
  data-mount-in=".my-widget"
></script>

For SPA (e.g. Reactjs)

useEffect(() => {
  const script = document.createElement("script");
  script.src = "https://widget.crediblemind.com/bundle.js";
  script.async = true;
  script.dataset.mountIn = ".my-widget";
  document.body.appendChild(script);
}, []);

Note: data-mount-in attribute should match the unique class attribute value set in Step 1.

With these two steps, your widget will be embedded into your page properly. Remember to check and ensure that the class names and attribute values are correctly matched between the container and the script.

Introduction HTML Example