Example: Embedding a Widget in HTML

This example demonstrates how to embed a widget into a simple HTML page. It uses the steps described earlier in this documentation: creating a unique container for the widget, and injecting the widget script into the header.

Here's the complete HTML code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
    <!-- Embed the widget script in the header, making sure to replace the
         data-mount-in attribute with the classname of the container you will
         create for the widget. -->
    <script
      async
      src="https://widget.crediblemind.com/bundle.js"
      data-mount-in=".my-widget"
    ></script>
 
    <title>Widget Example</title>
 
    <!-- Add any necessary styles for your widget. -->
    <style>
      .my-widget {
        width: 100%;
        max-width: 1100px;
        margin: 80px auto;
        display: flex;
        justify-content: center;
        border: 1px dashed rgba(0, 0, 0, 0.2);
        padding: 5px;
        position: relative;
      }
 
      .my-widget::before {
        content: "Example Widget";
        position: absolute;
        display: block;
        top: -18px;
        font-size: 11px;
        color: rgba(0, 0, 0, 0.5);
      }
    </style>
  </head>
 
  <body>
    <!-- Create a unique container for the widget, making sure to replace
         data-prop-name with the unique name provided by CredibleMind. -->
    <div class="my-widget" data-prop-name="cm-widget1" />
  </body>
</html>

This HTML code defines a simple page with the widget script included in the <head> section. The script is configured to attach the widget to an element with the class .my-widget, which is defined in the <body> section. The .my-widget element also has a data-prop-name attribute with the value cm-widget1, as required by CredibleMind.

The <style> section contains some basic CSS to style the .my-widget element, including positioning it in the center of the page, adding a dashed border, and displaying the text 'Example Widget' above the widget. These styles can be customized as necessary to fit the look and feel of your specific site.

Usage React Example