Work with the Desk

This tutorial explain how to interact and make actions with the desk.

In this section, you will learn

• How to call the client

• How to store the client

• How to put text in the compose box

• How to send a card

• How to send a card bundle

If you work locally, the desk won’t like it. You need to go to the desk, inspect (f12), go to “application”, local storage, ha and add a key “localCpaDev” and put it to “true”

Call the client

To interact with the desk, we need some commands, let's install the bundle that contains them. Go into src/pages/_document.tsx and add to the body :

<script src="https://static.iadvize.com/conversation-panel-app-lib/2.9.0/idzcpa.umd.production.min.js"></script>

Now if you go in the index.tsxof 1Getstarted, you should be able to call the client in the main function.

Since NextJS uses server-side rendering, the window object we use to call the client isn't loaded at the start. You need to wait until it's loaded. The useEffect function trigger when the component is loaded/changed so that's where you're going to put the call of the client (line 77 of index.tsx).

useEffect(() =>{
    const client = (window as any).idz.init()
    
    //some code
})

The client is a Promise, you need to do a client.then() to use the following commands.

However, we want to call the client once, not every time useEffect is called. To solve that, we’re going to create a Singleton.

Store the client

A singleton is a design pattern that permits the creation of only one instance of an object. Go to file named singleton.tsx in your designpattern folder and create your singleton :

export default class Singleton {
   private static instance: Singleton = new Singleton;
   private variable : any;
   public static getInstance(): Singleton {
       return Singleton.instance;
   }
   public setVariable(obj : any){
       if (!this.variable){
           this.variable = obj
       }
   }
   public getVariable() : any{
       return this.variable
   }
}

Then, back in index.tsx, we import Singleton and use it to store our client. And instead of creating a client variable, we use setVariable of the singleton

Add this at the top of index.tsx

import Singleton from "./designpattern/singleton"

const instance = Singleton.getInstance()

Update your client call

useEffect(() =>{
    instance.setVariable((window as any).idzCpa.init())
})

Now to access your client, you just have to do instance.getVariable(), it'll return the Promise

Send text

You can put any text you want in the text bar, ready to send. You just need to input the command :

client.insertTextInComposeBox(yourString).

Go to your 2SendText repository and rename it pages

I added a "Send link" button in the Profile, when it's clicked, it launch the function "insert text" with the link of the coffee page in the website. Find insertText at line 94 of index.tsxand add the following code

instance.getVariable().then((client : any)=>{. //get the client
    client.insertTextInComposeBox(text) //use the client to insert text
})

A screenshot of the profile of a coffee, now with a "send link" button

Send cards

You have the possibility to send cards with a text, a picture and an action when you click on it.

I created a “products” API where I can get the name, the description, the picture and the website of my different products. The goal is to send a card of my products.

First, let’s define the “Card” object and the “Action” object

type Card = { 
	title?: string;
	text?: string; 
	actions: Action[]; 
	image?: {  
	 	url: string;     
		description: string; 
	}
};

type Action = {
	type: “LINK”;
	title: string;
	url: string
}

I want you to rename 3SendCards to pages and work on it. You'll add Card and Action in the index.tsx outside the components (line 20/22)

Once you created your card, you can send it using the command :

client.pushCardInConversationThread(Card)

I created a button "Send Card" that run the function insertCard(product : Product). The goal is to send a card of the product when the button is pressed, the card is already created, just un-comment the "card" type at the creation of the constant (line 109). Call the client and push the card at the end of the insertCard function (line 125)

instance.getVariable().then((client : any)=>{
    client.pushCardInConversationThread(card)
})

The screenshot of the profile of the coffee, now with a "send card" button

Send card bundle

You can send multiple cards in a single message. If you successfully sent a card, this one is going to be very easy. To send a card bundle, you need to create a Carousel. A Carousel is just an array of Card with a title.

type Carousel = {
	title?:string;
	cards: Card[]
}

Change your 4SendCardBundle to "pages" and add the type Carousel to index.tsx (line 36)

Some coffees are on discount now ! I created a button that sends all discounted coffee and a button that sends all coffees in a bundle. They both run the insertBundle(number[]) that takes a list of coffee ids to send a card bundle

Push the card into the carousel using this command, put it in your index.tsx (line 170)

carousel.cards.push(card)

Once your Carousel is created, just run this command (line 174)

    instance.getVariable().then((client : any)=>{
      client.pushCardBundleInConversationThread(carousel)
    })

The screenshot of the coffee app, now with a "send all" and a "send discounted" button

Next steps ?

Now, you know how to send informations to the desk, the next things to learn is how to get informations from the desk. Check the Intent/trigger to know how to do it.

You can also check the JWT tutorial to learn how to secure your API calls