@websolutespa/ask-dececco

v1.0.7

Published

a day ago

Ask De Cecco plugin

0High
0Medium
0Low

@websolutespa/ask-dececco

Ask De Cecco plugin module of the Ask Repository by websolute.

Docs

This guide shows how to embed Ask Dececco into a web page using the browser bundle.

The integration has five steps:

Include the browser JavaScript bundle.
Prepare the plugin options.
Initialize the plugin instance.
Create the web component element.
Append the element to the page.

Basic Integration

<!DOCTYPE html>
<html lang="it">
  <head>
    <meta charset="utf-8" />
    <script type="module" src="https://cdn.jsdelivr.net/npm/@websolutespa/ask-dececco/dist/browser.js"></script>
  </head>
  <body>
    <div class="ask-dececco"></div>

    <script type="module">
      const mount = () => {
        const target = document.querySelector('.ask-dececco');
        if (!target || !window.askDececco) {
          return;
        }

        const searchParams = new URLSearchParams(window.location.search);
        const options = {
          appKey: 'ask-dececco',
          apiKey: 'YOUR_API_KEY',
          endpoint: 'https://ask.websolute.ai',
          styles: 'https://cdn.jsdelivr.net/npm/@websolutespa/ask-dececco/dist/styles.css',
          threadId: searchParams.get('threadId') || undefined,
        };

        const instance = window.askDececco(options);
        if (!instance) {
          return;
        }

        const element = document.createElement('ask-dececco');
        element.style.display = 'contents';
        target.appendChild(element);
      };

      if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', mount, { once: true });
      } else {
        mount();
      }
    </script>
  </body>
</html>

Step By Step

1. Include the Browser JS

Load the browser entrypoint with a module script:

<script type="module" src="https://cdn.jsdelivr.net/npm/@websolutespa/ask-dececco/dist/browser.js"></script>

This bundle exposes the askDececco(...) initializer on window.

2. Configure the Options

Create an options object before initializing the plugin.

Common example:

const options = {
  appKey: 'ask-dececco',
  apiKey: 'YOUR_API_KEY',
  endpoint: 'https://ask.websolute.ai',
  styles: 'https://cdn.jsdelivr.net/npm/@websolutespa/ask-dececco/dist/styles.css',
  threadId: new URLSearchParams(window.location.search).get('threadId') || undefined,
};

3. Initialize the Instance

Call the browser initializer with the options object:

const instance = window.askDececco(options);

The initializer returns a plugin instance when creation succeeds.

Available instance methods:

opened() returns the current open state.
setOpened(boolean) explicitly opens or closes the widget.
toggle() toggles the widget state.
send(message) sends a message programmatically.
clear() clears the current conversation state.
create(target?) creates or mounts the plugin programmatically.

4. Create the Web Component Element

Create the custom element used by the UI:

const element = document.createElement('ask-dececco');
element.style.display = 'contents';

Using display: contents keeps the wrapper element visually neutral when the page layout should be controlled by the component content.

5. Append the Component to the Page

Append the element to a target container already present in the DOM:

const target = document.querySelector('.ask-dececco');
target.appendChild(element);

Supported Options

The published type declarations expose the following plugin options.

| Option | Type | Description | | --- | --- | --- | | apiKey | string | API key used by the plugin requests. | | appKey | string | Application identifier for the embedded experience. | | contexts | ChatUserContext[] | User context entries passed to the chat. | | draft | boolean | Enables draft mode when supported by the backend. | | embedded | boolean | Marks the plugin as embedded in an existing page. | | endpoint | string | Base API endpoint used by the widget. | | initialSpec | Spec \| null | Initial UI spec payload, if you want to preload a generated UI state. | | instance | PluginInstance | Existing instance reference, when reusing plugin state manually. | | mock | boolean \| object | Mock mode for local or controlled test data. | | preview | boolean | Enables preview behavior when supported. | | styles | string | URL of the stylesheet to load for the widget UI. | | threadId | string | Conversation thread identifier to resume an existing thread. | | userId | string | User identifier for session association or personalization. |

`contexts`

contexts accepts an array of objects with this shape:

const contexts = [
  {
    title: 'Customer',
    context: {
      id: '12345',
      market: 'it',
    },
  },
];

`mock`

mock can be a boolean or an object used for mocked data flows.

Supported mock payload fields from the published types:

contents
history
messages
stream

Clean Integration Pattern

For better readability and fewer global checks, keep the embed logic in a small initializer function:

<script type="module">
  const mount = () => {
    const target = document.querySelector('.ask-dececco');
    if (!target || !window.askDececco) {
      return;
    }

    const searchParams = new URLSearchParams(window.location.search);
    const options = {
      appKey: 'ask-dececco',
      apiKey: 'YOUR_API_KEY',
      endpoint: 'https://ask.websolute.ai',
      styles: 'https://cdn.jsdelivr.net/npm/@websolutespa/ask-dececco/dist/styles.css',
      threadId: searchParams.get('threadId') || undefined,
    };

    const instance = window.askDececco(options);
    if (!instance) {
      return;
    }

    const element = document.createElement('ask-dececco');
    element.style.display = 'contents';
    target.appendChild(element);
  };

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', mount, { once: true });
  } else {
    mount();
  }
</script>

Performance And Readability Notes

To keep the embed clean and efficient:

Load the browser bundle once with type="module".
Reuse a single mount container.
Resolve threadId only once during initialization.
Guard against missing target nodes or missing bundle globals.
Use DOMContentLoaded only when needed; if the document is already ready, initialize immediately.
Keep the stylesheet URL inside the options object so the component can manage its own styles consistently.

Hints

Replace YOUR_API_KEY with the correct key for the target environment before publishing.

Replace Dececco with the actual exported name of the Ask Plugin.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@websolutespa/ask-dececco

Docs

Basic Integration

Step By Step

1. Include the Browser JS

2. Configure the Options

3. Initialize the Instance

4. Create the Web Component Element

5. Append the Component to the Page

Supported Options

contexts

mock

Clean Integration Pattern

Performance And Readability Notes

Hints

this library is for internal usage and not production ready

`contexts`

`mock`