@askdialog/dialog-vue 1.0.0 → 1.0.2

package/README.md

@@ -1,5 +1,106 @@
-# Vue 3 + TypeScript + Vite
+# Dialog SDK
 
-This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+## Dialog
 
-Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
+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](https://www.askdialog.com/)
+
+Need to see it in action? [Request one here](https://w1rsh3lwqfo.typeform.com/to/VxHL0RBR?typeform-source=dialog-sdk)
+
+## Description
+
+Dialog vue is a component library designed to be used with he progressive javascript framework VueJs.
+
+## Get started
+
+### Prerequisites
+
+Before using the Dialog Vue, you need:
+
+- Our [Dialog SDK](https://www.npmjs.com/package/@askdialog/dialog-sdk) installed.
+- An active API Key, you can retrieve your api key in your [organization settings](https://app.askdialog.com/settings)
+
+### Installation
+
+```bash
+npm install @askdialog/dialog-vue
+# or
+pnpm add @askdialog/dialog-vue
+# or
+yarn add @askdialog/dialog-vue
+```
+
+### DialogBlockProduct
+
+#### Instantiate the client
+
+```typescript
+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
+  },
+});
+```
+
+#### Use DialogProductBlock component
+
+````html
+<DialogProductBlock
+  :client="client"
+  product-id="7899322908810"
+  product-title="Product Title"
+  selected-variant-id="1234567890"
+/>
+``` ### Features - Send a message with context ```typescript
+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
+
+```typescript
+client.sendGenericMessage({
+  question: 'YOUR_QUESTION', // required
+});
+```
+
+- Handler for fetch product
+
+```typescript
+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
+
+```typescript
+const client = new Dialog({
+    ...,
+    callbacks: {
+        addToCart: () => {
+            // Call your api to trigger addToCart
+            const response = await fetch('....');
+
+            // Trigger other stuff like confirmation modal
+            return;
+        }
+    },
+});
+```

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@askdialog/dialog-vue",
   "private": false,
-  "version": "1.0.0",
+  "version": "1.0.2",
   "type": "module",
   "main": "./dist/dialog-vue.umd.js",
   "module": "./dist/dialog-vue.js",
@@ -45,6 +45,12 @@
   "publishConfig": {
     "access": "public"
   },
+  "keywords": [
+    "dialog",
+    "dialog-vue",
+    "dialog-sdk",
+    "vue components"
+  ],
   "scripts": {
     "dev": "vite",
     "clean": "rm -rf dist",