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.
#Coupon
COUPON, DOLLAR, PERCENTAGE, TICKETS
#Qualify lead
STAMP
#Segmentation
TARGET, CARD
#Delivery
DELIVERY, PACKAGE
#Orders
ORDER, BOXES
#Stock
STOCK, WAREHOUSE
#Knowledge base
RECOMMENDATION, FILES, FOLDERS, SEARCH
#User account
PROFILE, TARGETING, PROFILECARDS
#Invoicing
INVOICING
#Payment
PAYMENT
#Shopping cart
SHOPPINGCART, SEARCHSHOPPINGCART
#Product availability
BAGQUESTION, BAGSEARCH, PACKAGESEARCH
#Stores
STORE
#Location
LOCATION, POSITION, LOCATIONPIN
#Assistance
TOOLS, TOOLING, HELP
#Note
NOTE
#Booking
BOOKING
#Tags
TAG
#Hotels & Services
HOTELS, HOTELOFFER, SERVICES
#Generic/Random
NOTEBOOK, DIAMOND, BOUSSOLE, SHIRT, GEAR, FRAME45, TARGETING
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 !
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)
npm run dev
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.
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.
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
in the developer platform
Create the rule
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
Screenshot of the coffee app in the desk
Screenshot of the profile of the coffee app

Next steps ?

Since you have your website ready, you can go to the next step and start working with the desk