Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...


This documentation provides instructions on how to integrate Customer Alliance Widget JavaScript into your website. You can have a look at a real example of such a widget, which is used on http://www.customer-alliance.com website:

...

Generating widget code

You can generate your widget code yourself right on our platform. In the Styling Settings section look out for Certificate & Widget page. There should be a button available to generate widget code. If you can not find it, please reach out to our Customer Support.

Once you click that button, you should be able to see a similar window:

...

Embedding the widget

The widget is embedded via JavaScript, defining it in the <head> section of the html document. When loaded the widget appends html code to the html dom. The widget is placed in an absolute position. The placement and looks are determined by the configuration, given in the Customer Alliance application backend. The widget URL is specified in the backend widget settings section.

Code Block
languagehtml
<html>
    <head>
        <!-- .. -->
        <script src="//widget.customer-alliance.dev/reviews/js/standard/fyQs18VN3.js" async></script>
    </head>
    <body>
        <!-- .. -->
    </body>
</html>

Embedding the widget within a given container

It is possible to place the widget in a relative position. For this, a container with the id ca-widget-container needs to exist in the html dom.

...

Afterward, the widget loads the html into the container div. This enables a custom placement of the widget on the website.

Mobile version

The widget is responsive. Tor tablet and mobile screen sizes, the mobile version of the widget will be shown.

...