Developer Platform
  • Home
  • Getting Started
    • General Information
    • Features Overview
    • Security
  • APPs
    • Public Apps
      • Shopify
      • Salesforce
      • Zendesk
      • Google Analytics
    • Build your App
      • Getting started
      • My Apps
      • App information
      • App Parameters
      • App Plugins
      • Add Webhooks
      • Submit your Apps
      • App security
      • Developer Policy
  • Use Cases
    • Copilots
      • Product Catalog sync through API
      • FAQ sync through API
    • Visitor experience
      • Integrating custom buttons into your site
      • Check availability before escalating to iAdvize
      • Authenticated Messaging
        • Introduction
        • Web client-side implementation
          • Authenticated Messaging overview
          • Brief timeline of the integration process
          • How to enable authenticated mode in the administration portal?
          • How to implement the customer authentication backend (token provider)?
          • How to authenticate with iAdvize in client's website?
          • How to deal with activation success or failure?
          • How to logout?
          • Compatibility with Mobile SDK
          • FAQ
        • Web backend implementation
          • Important information and recommendations
          • Signature and Encryption Detailed Process
          • Technical backend implementation
          • FAQ
      • Cross-domain Conversation Continuity
      • Customize replies with Markdown
    • Agent workspace
      • Custom App example and step-by-step tutorial
        • Get Started
        • Work with the Desk
        • Intent / Trigger
        • JWT
        • References
    • Administration
      • Users
        • SAML SSO Authentication - Implementation Guide
        • Create, update and delete users via API
        • Manage the availability of your users with the iAdvize API
        • Integrate the iAdvize conversation panel into an existing tool
    • Data & Analytics
      • Anonymize a conversation or visitor data
      • Create a custom dashboard
      • Find contact data using GraphQL
      • Retrieve conversations data
      • Retrieve messages exchanged within a conversation
  • Technologies
    • GraphQL API
      • Terminology
      • Reference
      • Authentication
      • Schema lifecycle
      • Error Management
      • Pagination
    • REST API (deprecated)
      • Statistic (deprecated)
      • Group (deprecated)
      • Call meeting (deprecated)
      • Operator (deprecated)
      • Skill (deprecated)
      • Transaction (deprecated)
      • Visitor (deprecated)
    • Webhooks
      • Reference
      • Guides
    • Desk events
      • Reference
    • Web & Mobile SDK
      • Javascript Web SDK
        • Reference
      • Javascript Callbacks
        • Reference
        • Guides
      • Mobile SDK
        • Fourme (latest)
        • Epoisses
        • Dauphin
        • Cantal
        • 🤝Support Policy
        • 🤔Frequently Asked Questions
    • Custom App
    • External Bot
      • Implementation
        • Configuration flow
        • Conversation flow
        • Conversation objects
      • Configuration
      • FAQ
      • Best practices
Powered by GitBook
On this page
  • Call the client
  • Store the client
  • Send text
  • Send cards
  • Send card bundle
  • Next steps ?

Was this helpful?

  1. Use Cases
  2. Agent workspace
  3. Custom App example and step-by-step tutorial

Work with the Desk

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

PreviousGet StartedNextIntent / Trigger

Last updated 1 year ago

Was this helpful?

In this section, you will learn

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
})

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)
})

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)
    })

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

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
A screenshot of the profile of a coffee, now with a "send link" button
The screenshot of the profile of the coffee, now with a "send card" button
The screenshot of the coffee app, now with a "send all" and a "send discounted" button