## Objectives

Your end users will communicate with your Conversational AI application in a fronted: a web widget, a mobile application, via voice over the phone... In this section you will learn how Teneo communicates with your chosen front end. 

At the end of this section you will:

- Understand what the Teneo Engine API is and how it allows you to communicate with a front end
- Know what the Teneo Web Chat front end is
- Know how to send and receive additional parameters between the Teneo Engine and the front end

Objectives - How does Teneo Communicate with a Front End?  - Advanced

Objectives

Deploy - Engine API

Engine API

Communicate with the Teneo Engine

Teneo Web Chat

Introduction to Teneo Web Chat

Besides the natural language inputs of the user, client applications can also include input parameters in their requests to Teneo. The values of these input parameters can then be stored in e.g. global variables, so that they can be used by flows, integrations, etc.

!!! More details on how client applications can interact with Teneo can be found on the [Teneo Engine client API](/article/deploy/engine-api) page in [Deploy your bot](/article/deploy).

In this example, we will assume that requests from the client application can include an input parameter called __discountParameter__ that we want to store in a global variable. To store it, we need to do two things:

1.  Create a global variable to store the value of the input parameter.
2.  Populate the global variable.

## Create a global variable

To create the global variable to store the discount code of the user, proceed as follows:

1.  Open the 'SOLUTION' tab in the solution's window.
2.  Select 'Globals', and then select 'Variables'.
3.  Click 'Add'. Give the variable the name: `discountCode`, and set its initial value to the empty string: `""`.
4.  Click 'Save'.

!!! Since this is a global variable, it can be used by any flow and it can also be used to assign [variable-based context restrictions](/studio/conversations/concepts/context#variable-based-context-restrictions).

## Read the input parameter

Now that we have a global variable __discountCode__, we can populate it with the value of the input parameter __discountParameter__. For this, we need to use the [Engine Scripting API](/studio/reference/engine-scripting-api), specifically the __getParameter()__ method that is available in the __EngineEnvironment__ class. The code to store the parameter looks as follows:

```groovy
if (engineEnvironment.getParameter('discountParameter')) {
	discountCode = engineEnvironment.getParameter('discountParameter')
}
```

This code will make sure that the global variable __discountCode__ will be populated only if the input parameter is found, and that the global variable will not be cleared if the input parameter is not included in requests anymore.

We will store this code in a [global script](/article/build/scripting/concepts/scripts). Which global script to use depends on when you expect to receive the input parameter. The most common places are:

**Pre-processing**  
In many cases, you won't know exactly in which request the input parameter will be present (could be at the start, could be in the middle of the session). Or perhaps the value of the input parameter can change throughout the session. In that case, it is best to store the code above in the global [Pre-processing](/article/build/scripting/concepts/scripts#global-scripts_session_pre-processing) script. Pre-processing scripts will be executed on every incoming request before Teneo does any processing of the input.

**Begin dialog**  
If you are certain that the input parameter will be included in the first request **and will not change throughout the session**, you can use the global [Begin dialog](/article/build/scripting/concepts/scripts#global-scripts_session_begin-dialog) script. This is slightly more efficient, because the script will only be executed once at the start of the session and not for every request.

In this example we will store the script in Pre-processing:
1. Open the 'SOLUTION' tab in the solution's window (if you're not there already).
2. Select 'Globals'  and then select 'Scripts'.
3. Select the 'Pre-processing' where you want to store your code ('Pre-processing' or 'Begin dialog') and choose 'Edit'.
4. Paste the script:
	```groovy
    if (engineEnvironment.getParameter('discountParameter')) {
        discountCode = engineEnvironment.getParameter('discountParameter')
    }
    ```
5. Give your script a name like, `Grab discount code` and click 'Save'.

The end result should look like this:

![script-name-sd](//images.ctfassets.net/2vbtnveccz5s/2DLEsx2064U5sI4KJpjdkN/b6dd0d16e70e17be1565a0feb655baac/script-name-sd.png)

## Testing input parameters

We can simulate input parameters by adding them to the Inputs panel in the main window of Teneo:  

!!! Input Parameters, in Tryout, are reviewed to ensure correct handling of these based on casing (upper/lower case) and to not allow duplicated parameter names; for example, Tryout will accept __PARAM1__, __param1__ and __PAraM1__ as different parameter names since the casing is different while __PARAM2__ and __PARAM2__ will raise a warning as the name is duplicated (i.e. identical in wording and case). Also note that parameter names are always required and the field cannot be left empty.

![Discount parameter](//images.ctfassets.net/2vbtnveccz5s/3KQQjwkhZL5HMnh56wC1QA/f8b37a76fbf72167f94480c86232b92d/discountparameter-psd.png)

1. Select the 'Tryout' button located in the top left corner. This will open a new detailed Tryout window.
2. Select 'Add Parameter' located above the box where you write.
3. Add a parameter and name it: `discountParameter` (above).
4. Add the parameter's value which is the discount code: `CyberMon` (under).

To see if the global variable ’discountCode’ got populated as intended, open the Tryout panel and give any input. Then open the Response info panel and inspect the global variables. You should see the global variable ‘discountCode’ populated with ‘CyberMon’.

![Inspecting global variable 'discountCode'](//images.ctfassets.net/2vbtnveccz5s/6wSxIRvcECSVVgCj97qalA/7bf18c9d268f4e47c7fc52f7c2ad02c2/finale.PNG)

Store input parameters

Along with the answer text, you can add additional data to an output by populating [output parameters](https://www.next.teneo.ai/article/build/flows/concepts/outputs?client=studioDesktop#output-parameters). For example, you can use them to add attachments to messages for Teneo Web Chat.

## Adding an output parameter
We can add output parameters in the ‘Output Parameters’ panel of an output.

![add output parameters](//images.ctfassets.net/2vbtnveccz5s/Cw0gjYftdGfKUtBoCdzal/aef6be71787a752430aa496c18f79758/add_output_parameters.png)

Output parameters have two fields: __Name__ and __Value__. The name field should contain the name you want to give to the output parameter (without spaces). In the value field you can enter the value directly (for static values), but you can also use variables (or scripts) by enclosing them in __${__ and __}__, for example `${myFlowVariable}`.

## Adding JSON to an output parameter
Often you will want to include JSON in an output parameter, especially when you want to provide structured data that is rendered by a client application. Let’s look at an example of how to populate an output parameter with the JSON needed to attach an image in Teneo Web Chat. 

If we look at Teneo Web Chat's message type specification of an [image](/resource/channels/teneo-web-chat#message-types_image), the JSON to attach an image to a message needs to look like this:
```groovy
{
    "type": "image",
    "image_url": "https://url.to/an/image.png",
    "alt": "This is an image"
}
```

We can use Groovy's [JsonOutput](http://docs.groovy-lang.org/latest/html/gapi/groovy/json/JsonOutput.html) to produce this JSON by adding the following script to a [script node](/studio/flows/how-to/add-a-script-to-your-flow#add-a-script-node) in a flow:

```groovy
// create object that contains the image details
def image = [:]

// add details to the object
image.type = "image"
image.image_url = "https://url.to/an/image.png"
image.alt = "This is an image"

// convert object to JSON and store the result in a flow variable
JSON = new groovy.json.JsonOutput().toJson(image)
```

The last line of the scripts stores the resulting JSON as a String in a [(flow) variable](/studio/flows/concepts/variables) called __JSON__. We can now use this variable to populate an output parameter by setting the value to `${JSON}`.

When using [Teneo Web Chat](/resource/channels/teneo-web-chat) you need give the output parameter the name `teneowebclient`. The result then looks like this:

![output parameters](//images.ctfassets.net/2vbtnveccz5s/3MYCJTkX9gRRlJj6DWkszX/48d80fea58997456f1dd6887a01d4317/output_parameters.png)

Once the bot has published, the image will then be visible in Teneo Web Chat:

![image in twc](//images.ctfassets.net/2vbtnveccz5s/3qPHPBpe8fwHoFBNnm9D9F/175871cf7aabd3a50340185e2e05d29c/image_in_twc.png?classes=w40)

!!! For more example connectors and the output parameters they use for attachments, please refer to [Channels](/resource/channels) in the [Deploy your bot](/engine/) section.

How does Teneo Communicate with a Front End?

Resources

Next page