Get Started
Welcome, in this documentation, you will learn how to setup your environment to create a custom app and some tools to send informations to the desk using NextJS.
This tutorial was made using Node v14.21.3 and NextJS 13.3.1
You will follow me through the creation of my app. The goal is to help the agent by giving him tools and informations about the coffee that he sells. I'm going to ask you to complete my code, you will find comments in it to know where to put the code
Here is what you will learn from this tutorial
How to create your custom app on the developer platform
How to create your app repository
How to launch your app
How to link your app and the Custom Apps
Create your custom app on the developer platform
To start a custom app, you need to create it. Go to the developer platform : https://developers.iadvize.com/
Go to "my apps" and click in the green "build" button in the left panel. Give it a name and accept the terms to build it
After that, you need to fill the description, the App icon (this one is my favorite https://developers.iadvize.com/bundles/devplatformapp/images/illustrations/app.svg), the dev contact in case your app has a problem and a Health check URL. Define if it's public or private then save the changes.
Now that you created your app, you need to define it as a custom app. Go to "plugins" in the left panel and select Conversation Panel App on the plugin list.
You can find your app at the bottom of "My Apps"
App name
This is the name that will show in the toolbar button that starts your app. The name must be provided as a json object that contains a default name and then names for each language the app needs to support. For instance {"default": "Orders", "EN": "Orders", "FR": "Commandes"}.
iFrame URL
iFrame URL is the URL of your app but we'll get to this later. Leave it blank for now Leave the onMessage trigger URL alone too
Icon name
The icon name refers to a set of predefined icons provided by iAdvize that will appear in the button that starts the app.
Here is the list of available options by domain - the name must be entered in upper case.
Enable for operators
Check this checkbox to make the app available for operators.
Enable for experts
Check this checkbox to make the app available for ibbü experts.
Use authentication
Check this checkbox if your app requires a proof that the CPA is loaded within the desk or if you want the ID of the operator, it may come in handy on the JWT section
And save !
Congratulation ! Your custom app is ready to be installed on a desk !
Create your app repository
If you want to create your app from the beginning, you can follow this tutorial https://nextjs.org/learn/basics/create-nextjs-app If you want to follow the tutorial, clone this repository and let me guide you !
https://github.com/iadvize/custom-app-demo
The repository i gave you contains the steps of the tutorial, the same coffee app but in differents states
NextJS always takes the "pages" file to execute index.tsx. To go from a version to another, you need to rename the concerned folder to "pages". If there already is a "pages" folder, rename it back to its previous name (if you don't remember it, there is a .txt file with its name in it)
I invite you to go to the "1GetStarted" folder and rename it "pages"
Launch your app
To run your website, you need to do the following command in your terminal at the root of the project (getStarted folder for us)
The website runs on localhost, it shows what is on src/pages/, which shows what is on src/pages/index.tsx in our case, the coffee app.
Link your app and the Custom App
Remember the "Iframe URL" field in the dev platform ? That's where you will put the url of your website.
However, the dev platform don't like when you put a localhost in this section. Let me show you how to get around it
Override your localhost
The dev platform don't like when you put a localhost in this section so if you're working on local, let me show you how to get around it.
You need to install the extension "Requestly" (https://requestly.io/) Install here https://chrome.google.com/webstore/detail/requestly-open-source-htt/mdnleldcmiljblolnjhpnblkcekpdkpa
It let you convert any url to another one to your client. The trick is to get a valid URL in the iframe URL (make sure it's not already taken) and override it locally with localhost.
Click on the Requestly icon to start the extension. Once you're in it, create a new rule -> redirect request
Don't forget to save and to make sure the rule and the group are on
Now that the custom app is ready, you can find it and add it to your project on Apps in the supervision panel. Now when you go to your desk, you should find the app
Next steps ?
Since you have your website ready, you can go to the next step and start working with the desk
Last updated
