Dialog SDK

Dialog

Dialog is an AI assistant designed to boost e-commerce sales by providing intelligent product recommendations and seamless customer interactions.

Visit our website: Dialog AI Assistant

Description

Dialog SDK is a powerful TypeScript library that seamlessly integrates the Dialog AI assistant into your applications. It provides a comprehensive set of tools for managing assistant interactions, handling e-commerce operations like product fetching and cart management, and customizing the assistant's appearance to match your brand.

Get started

Prerequisites

Before using the Dialog SDK, you need:

An active API Key, you can retrieve your api key in your organization settings

Installation

npm install @dialog/dialog-sdk
# or
pnpm add @dialog/dialog-sdk
# or
yarn add @dialog/dialog-sdk

Instantiate the client

import { Dialog } from '@dialog/dialog-sdk';

const client = new Dialog({
  apiKey: 'YOUR_API_KEY', // required
  locale: 'TARGETED_LOCALE', // required
  callbacks: {
    addToCart: () => Promise<void>, // required
    getProduct: () => Promise<Product>, // required
  },
});

The apiKey is required to authenticate with our API and interact with our assistant. The locale specifies the language you want to use. The addToCart function is triggered when a user clicks the AddToCart button. The getProduct function is used to display product information in the assistant.

When the client is instantiated, it will automatically insert in the DOM the Dialog Assistant script, so you can interact with the assistant with sendProductMessage and sendGenericMessage.

Getters

apiKey
theme
userId
locale

Features

Send a message with context

 client.sendProductMessage({
    question: 'YOUR_QUESTION', // required
    productId: 'PRODUCT_ID', // required
    productTitle: 'PRODUCT_TITLE', // required
    answer: '', // Optional
    selectedVariantId?: 'CURRENT_VARIANT_ID', // Optional
 })

Send message without context

client.sendGenericMessage({
  question: 'YOUR_QUESTION', // required
});

Get locale information

const localizationInfos = await client.getLocalizationInformations();

/*
Example of expected result when locale: 'en'
{
  countryCode: "US",
  formatted: "en-US",
  language: "English",
  locale: "en"
}
*/

Get suggestion questions

You can use this query to make your own integration and trigger sendProductMessage or sendGenericMessage on user click.

const suggestions = await client.getSuggestions(productId);

/*
Example of expected result:
{
    "questions": [
        {
            "question": "What is the formula used in this repairing gel to soothe the skin after sun exposure?"
        },
        {
            "question": "How does this gel relieve sunburn and reduce pain?"
        },
        {
            "question": "What are the benefits for the skin after using this product following excessive exposure to UV rays?"
        }
    ],
    "assistantName": "Your expert",
    "inputPlaceholder": "Ask any question...",
    "description": "Ask any question about this product"
}
*/

Handler for fetch product

const client = new Dialog({
    ...,
    callbacks: {
        getProduct: () => {
            // Call your api to retrieve product information
            const response = await fetch('....');
            const data = await response.json();
            // To define
            return {};
        }
    },
});

Handler for add to cart

const client = new Dialog({
    ...,
    callbacks: {
        addToCart: () => {
            // Call your api to trigger addToCart
            const response = await fetch('....');

            // Trigger other stuff like confirmation modal
            return;
        }
    },
});

Theming (Still in construction)

We are currently working on the theming part so you may find some issues. Contact us if you need more customisation.

⚠️ Title, description and content properties are used only to theme the vue component for the moment.

const client = new Dialog({
  ...,
  theme: {
    backgroundColor?: string;
    primaryColor?: string;
    ctaTextColor?: string;
    ctaBorderType?: 'straight' | 'rounded';
    capitalizeCtas?: boolean;
    fontFamily?: string;
    highlightProductName?: boolean;
    title?: { // Used in Vue component only
        fontSize?: string;
        color?: string;
    }
    description?: { // Used in Vue component only
        fontSize?: string;
        color?: string;
    }
    content?: { // Used in Vue component only
        fontSize?: string;
        color?: string;
    }
  }
});

@askdialog/dialog-sdk

Package Exports

Readme