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.