> For the complete documentation index, see [llms.txt](https://docs.iadvize.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.iadvize.dev/use-cases/agent-workspace/custom-app-example-and-step-by-step-tutorial.md).

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