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