# Custom App example and step-by-step tutorial

## Overview

### Context

You will learn how to set up your environment to create a custom app and the tools to interact with the desk using NextJS.

A complete breakdown of our guidelines for Conversation Panel Apps can be found in [our knowledge base](https://help.iadvize.com/hc/en-gb/articles/4404351307026-Conversation-Panel-Apps-Guidelines).

Please note that one iframe is created per conversation in order to keep a context for an app for each conversation. It is recommended to keep the app very lightweight and avoid heavy processing or streaming updates.

### Objectives

You will learn the following things

* [How to create your custom app on the developer platform](/use-cases/agent-workspace/custom-app-example-and-step-by-step-tutorial/get-started.md#create-your-custom-app-on-the-developer-platform)
* [How to create your app repository](/use-cases/agent-workspace/custom-app-example-and-step-by-step-tutorial/get-started.md#create-your-app-repository)
* [How to launch your app](/use-cases/agent-workspace/custom-app-example-and-step-by-step-tutorial/get-started.md#launch-your-app)
* [How to link your app and the Custom Apps](/use-cases/agent-workspace/custom-app-example-and-step-by-step-tutorial/get-started.md#link-your-app-and-the-custom-app)
* [How to call the client](/use-cases/agent-workspace/custom-app-example-and-step-by-step-tutorial/work-with-the-desk.md#call-the-client)
* [How to store the client](/use-cases/agent-workspace/custom-app-example-and-step-by-step-tutorial/work-with-the-desk.md#store-the-client)
* [How to put text in the compose box](/use-cases/agent-workspace/custom-app-example-and-step-by-step-tutorial/work-with-the-desk.md#send-text)
* [How to send a card](/use-cases/agent-workspace/custom-app-example-and-step-by-step-tutorial/work-with-the-desk.md#send-cards)
* [How to send a card bundle](/use-cases/agent-workspace/custom-app-example-and-step-by-step-tutorial/work-with-the-desk.md#send-card-bundle)
* [How to get client's messages using a server](/use-cases/agent-workspace/custom-app-example-and-step-by-step-tutorial/intent-trigger.md#get-the-clients-message)
* [How to use those messages](/use-cases/agent-workspace/custom-app-example-and-step-by-step-tutorial/intent-trigger.md#using-those-messages)
* [How to transfer message from the server to the custom app](/use-cases/agent-workspace/custom-app-example-and-step-by-step-tutorial/intent-trigger.md)
* [How to get the JWT](/use-cases/agent-workspace/custom-app-example-and-step-by-step-tutorial/jwt.md#get-the-jwt)
* [How to use a Middleware](/use-cases/agent-workspace/custom-app-example-and-step-by-step-tutorial/jwt.md#how-to-use-a-middleware)

## Prerequisites

This tutorial was made using Node v14.21.3 and NextJS 13.3.1. Custom Apps available on the iAdvize iOS and Android apps must use the version 2.0.3 or greater.

## Steps to follow

This is a tutorial to learn how to install your application in the desk and make your app interact with it. If you want to start the tutoriel, go to [Get Started](https://github.com/iadvize/public-developers-documentation/blob/master/use-cases/agent-workspace/custom-app-example-and-step-by-step-tutorial/broken-reference/README.md), if you want to know how to make your app interact with the desk, you can find every commands in [References](https://github.com/iadvize/public-developers-documentation/blob/master/use-cases/agent-workspace/custom-app-example-and-step-by-step-tutorial/broken-reference/README.md)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.iadvize.dev/use-cases/agent-workspace/custom-app-example-and-step-by-step-tutorial.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.