Skip to main content

Installation

1. Include the widget script​

Important: Place the script inside the <body>, preferably at the bottom.

<script>
  (function (L, l, a, p, r, o) {
    L.LlaProSdk =
      L.LlaProSdk ||
      function () {
        (L.LlaProSdk.q = L.LlaProSdk.q || []).push(arguments);
      };
    L._LlaProSettings = { integrationId: p };
    r = l.getElementsByTagName("head")[0];
    o = l.createElement("script");
    o.id = p;
    o.async = 1;
    o.src = a;
    r.appendChild(o);
  })(
    window,
    document,
    "https://widget.llamadapro.app/widgetsdk.umd.js",
    "llapro-id"
  );
</script>

2. Initialize the SDK​

window.LlaProSdk("initPhoneWidgetSdk", "llapro-widget-id");

3. Create the widget​

window.LlaProSdk("createWidget", {
  widgetContainerId: "custom-container-id", // Optional
  widgetContainerStyle: { bottom: "20px", right: "20px" }, // Optional
  widgetId: "custom-widget-id", // Optional
  widgetStyle: { width: "300px", height: "400px" }, // Optional
});

Full Code Example​

<html>
  <head>
    ...
  </head>
  <body>
    <div>LlamadaPro Widget</div>

    <!-- Include the LlamadaPro widget script -->
    <script>
      (function (L, l, a, p, r, o) {
        L.LlaProSdk =
          L.LlaProSdk ||
          function () {
            (L.LlaProSdk.q = L.LlaProSdk.q || []).push(arguments);
          };
        L._LlaProSettings = { integrationId: p };
        r = l.getElementsByTagName("head")[0];
        o = l.createElement("script");
        o.id = p;
        o.async = 1;
        o.src = a;
        r.appendChild(o);
      })(
        window,
        document,
        "https://widget.llamadapro.app/widgetsdk.umd.js",
        "llapro-id"
      );

      // Initialize the SDK with your unique ID
      window.LlaProSdk("initPhoneWidgetSdk", "llapro-widget-id");
      // Create the widget
      window.LlaProSdk("createWidget");
    </script>
  </body>
</html>

Important Consideration​

All styles for the LlamadaPro widget are scoped to a container with the class llapro-app. This ensures that the widget's installation does not interfere with the styles of the site where it is being integrated. By scoping styles in this manner, you can confidently add the widget to your application without worrying about unintended style conflicts.