Intent / Trigger

In this part, you will learn how to receive and use the client's message. The purpose is to analyze what the client sends and identify key words for your app to use.

You will learn :

Introduction to Intents/Triggers

Intent

Intent happens at the launch of the custom app, the app sends every message the client sent to a server. Then this server sends some information to the custom app, like an action to do or data for the app to use. In our example, the server detects the name of every coffee, highlights them, and places a purple dot on them.

Trigger

When a word is detected by intent, a small icon appears next to the message it's in. When you click on it, the custom app can read highlighted words from the message and use them. In our example above, when you click on the icon, the app goes to the profile of the first named coffee

Intent: First, the desk receives the conversation, then it sends messages to the server. The server returns a list of commands for every message. After that, the desk highlights the text in the message, places the icon on the message and sends the list of commands to the Custom App. Trigger: When the user clicks on the icon, it loads the custom app and sends the list of strings returned by intent in this message to the Custom App.

Get the client's message

Create a server

To get a message from the client, you need to create a server. The desk will send every message to the server, it will them gives the instruction to your custom app using the message he got.

To learn more about it, feel free to check the API part of the tutorial. It's not mandatory to create the server.

First take your "5IntentTrigger" file and rename it "pages". If you check the api file you'll see the onMessage.tsx that wasn't here before. That's your server.

You need to tell the desk to call this server at launch and when you receive messages. To do that, go to the dev platform, in you app's parameters and go to "plugins". Update the settings of the custom app by adding the url of the server (https://url/api/onMessage) on the "onMessage trigger URL" field.

Get messages

When the desk is launched, all the previous messages are sent to this URL, when a customer writes a message, it is sent to this url.

When the link is called, it automatically calls the default exported function in onMessage.tsx. 

export default async function handler(req: NextApiRequest, res : NextApiResponse){
    //code
}

In order to use it, we need to import NextApiRequest and NextApiResponse from next : 

Import type { NextApiRequest, NextApiResponse } from ‘next’

Now, to access the messages, you need to use the req object. Req.body.messages contains a list of Message Objects : 

type  Message = {
	id : string,
	authorType: string,
	text: string
}

Using those messages

Create a command

Now that you have those messages, you need to send to the desk what you want to do for each of them. Those instructions will take the form of actions, you will link those actions to the message using commands

type Action = {
	“highlight”:string,
	“intent”:{
		“key”: string,
		“payload” : {
			any  : any
		}
	}
}

type Commande = {
	“type”: string,
	“messageId”: string,
	“actions”:Action[]
}

An action is composed of highlight and intent. Highlight is the part of the text that will be highlighted

Intent is the object you want to send to the custom app

Commande contains a type (usually “addMessageActions”), messageId (the id of your message) and actions (the action linked to the message).

You can only do mulitple Commande objects for one message.

Finish your handler by sending your array of Commande 

res.send({ “commands” : Commande[]})

Cors errors

You may encounter Cors errors : here's how you can fix them

First, in your terminal

npm install cors

Then in onMessage

import Cors from ‘cors’

Still in onMessage : create the const cors

const cors = Cors({
    methods: ['POST', 'GET', 'HEAD'],
})

After that, create a function runMiddleware that you will call at the start of your handler 

function runMiddleware(
 req: NextApiRequest,
 res: NextApiResponse,
 fn: Function
) {
 return new Promise((resolve, reject) => {
  fn(req, res, (result: any) => {
    if (result instanceof Error) {
      return reject(result)
    }
    return resolve(result)
   })
 })
}

Notice how the important text is highlighted and the inclusion of the small icon next to the message. I also replaced the "send all" button by a "Send suggestions" button. Let's see why he was made in the next part.

Get the messages we set up

Receive the messages

Go back to your index.tsx, that's where you will get the commands you sent from the server

We need to edit your init to add some parameters 

useEffect(()=>{
    instance.setVariable((window as any).idzCpa.init({
        onIntent : handleIntent, //a function that takes an array of Intent in parameter
        onTrigger : handleTrigger //a function that takes an array of string in parameter
    }))
})

Reminder : an Intent takes this form type Intent = { “key”: string,

“payload” : {

any : any

}

}

You should replace the “any : any” by “any : the type you passed into the payload.

For example, i passed a Product so i put

“payload”: {

any : Product

}

onIntent

This function is called at the opening of the Custom App and at every message sent. That’s where you get the payload you sent in the server. It takes a list of Intent in parameters, it's the list the server "onMessage" send 

function handleIntent(intents : Intent[]){
    setUsedWordsintents.map(intent=>{
        return(
            intent.payload.any.name
        )
    }))
}

In this example, i take the name of the coffee in my payload and put it in the usedWords list, which put a purple dot on the picture of the coffee. The button "Send suggestions" send a bundle of every highlighted coffee in the conversation

onTrigger

When the icon is pressed, this function will run. The strings array contains the words identified by the intent in this message

function handleTrigger(strings : string[]){
  const product = coffees.findLast((coffee)=>coffee.name == strings[0])
  if (typeof product != "undefined"){
      launchProduct(product.id)
  }
}
PreviousWork with the DeskNextJWT

Last updated