# Work with the Desk

In this section, you will learn

* [How to call the client](#call-the-client)
* [How to store the client](#store-the-client)
* [How to put text in the compose box](#send-text)
* [How to send a card](#send-cards)
* [How to send a card bundle](#send-card-bundle)

{% hint style="danger" %}
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”
{% endhint %}

### 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 : 

```html
<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.tsx`of `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`).

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

{% hint style="info" %}
The client is a Promise, you need to do a client.then() to use the following commands.
{% endhint %}

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

### 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 :&#x20;

```typescript
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<br>

Add this at the top of `index.tsx`

```typescript
import Singleton from "./designpattern/singleton"

const instance = Singleton.getInstance()
```

Update your client call

```typescript
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 :&#x20;

```typescript
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.tsx`and add the following code

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

<figure><img src="https://76519009-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dwvuSeenw12Wd9Vfpf%2Fuploads%2FvWLPIr4Fj6YlVfgiFpKS%2FCapture%20d%E2%80%99e%CC%81cran%202023-06-16%20a%CC%80%2010.09.59.png?alt=media&#x26;token=938fd750-8786-488d-8396-dd6cd666a16c" alt=""><figcaption><p>A screenshot of the profile of a coffee, now with a "send link" button</p></figcaption></figure>

### 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.&#x20;

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

```typescript
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 :&#x20;

```typescript
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)

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

<figure><img src="https://76519009-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dwvuSeenw12Wd9Vfpf%2Fuploads%2FXVQU5R8RbuzSUYs5zHbg%2FCapture%20d%E2%80%99e%CC%81cran%202023-06-16%20a%CC%80%2010.10.18.png?alt=media&#x26;token=8a841f34-f509-46f5-bb0c-578090640bb7" alt=""><figcaption><p>The screenshot of the profile of the coffee, now with a "send card" button</p></figcaption></figure>

### 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.

```typescript
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)

```typescript
carousel.cards.push(card)
```

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

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

<figure><img src="https://76519009-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3dwvuSeenw12Wd9Vfpf%2Fuploads%2FSUPy1kgYVLaZMKUlILkN%2FCapture%20d%E2%80%99e%CC%81cran%202023-06-16%20a%CC%80%2010.11.42.png?alt=media&#x26;token=2b3cf0d4-3da9-4a80-ae3b-ee45bc82b587" alt=""><figcaption><p>The screenshot of the coffee app, now with a "send all" and a "send discounted" button</p></figcaption></figure>

## Next steps ?&#x20;

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 &#x20;