Conversation Panel Apps Guidelines

1. Why to build an app for the desk in iAdvize

Extend the desk capabilities for your specific use cases

We offer a powerful way for you to integrate an application of your own directly in the iAdvize desk so that your respondents can address your specific business and strategic use-cases as close as possible to the conversation, in iAdvize’s desk.

Whether you want to implement a delivery tracking solution, a way for your respondents to access knowledge base articles or a solution to qualify leads, it is made possible with a Conversation Panel App, accessible within your Desk.

2. How is your app integrated in the iAdvize desk?

General principles

Your app will be accessible in the desk via a button in the toolbar. This button will have an icon and a name of your choice (set up in the iAdvize Developer Platform).

With a click on the button, a panel will open on the side of the conversation. This panel is an iFrame within which your application will be loaded.
Like any other info accessible via the toolbar, an instance of your application will be loaded for the selected conversation of your Desk.

Please note that the dimensions of that Iframe will vary depending on different elements like the size of the screen, the view mode of the conversations etc. You should anticipate that the layout of your app adapts in all context
(more on that later).



3. Design principles to ensure a good experience of your app in the desk

To ensure a good user experience for your app within iAdvize, we defined a set of guidelines that will help you make decisions while designing and building your Conversation Panel App.
Following those guidelines will also ensure consistency of the UI and UX between your application and the iAdvize Desk. The objective of consistency is to respect a constant logic of use, both in the way commands are executed and in the representation of data: the graphics, the position of information, the vocabulary and the format of data must be consistent from one window to another.

3.1 Layout

Design a flexible layout that works within small spaces
As a general principle, remember that your app will be loaded within an iFrame with dimensions that can vary greatly. Managing Vertical and horizontal space in your layout is critical to ensure a good user experience. Your layout should then be fluid as much as possible.

We recommend that you start to build your layout for an iframe as small as 255x247px
(which correspond to the smallest dimensions possible) and apply a workflow of “progressive enhancement”, then focusing on the standard experience of 450x460px until the biggest possible dimensions of 584x1100px.

Applying that workflow while building your layout will ensure it will adapt to all contexts in the best manner.
Ensure readability
A good readability is really what will make your app usable. Consider that your app sits in an already occupied user interface (the desk) and therefore should be as light as possible in order to preserve cognitive load for your users.

You can ensure readability by being thoughtful with font sizes, color contrasts, amount of information displayed, and negative space.

It is also important to have a layout that easily guide the user’s focus on what’s important which can be achieved through visual hierarchy and composition. 
Side notes:
  • You need to add a padding of your own to your app as it is not provided in the iFrame panel. We recommend 16px top and 24 left and right to fit well within the rest of the interface.
  • You need to allow the scroll inside your app to make sure all of your content will be reachable in case the iframe is too small for the content.

3.2 Navigation

Depending on the complexity of your app, you may need to propose a navigation between different screens or sections. Having a clear navigation between those sections is key to enable your users to be productive while using your app and also to enjoy it overall. Especially since the users of the desk may perform tasks many times in a session of work.

Consider having a title and/or a header zone at the top of your layout
It will allow to clearly show what your application is about and provide key informations that might give interesting context to the respondent for the task he/she is performing.

Consider also w
hether or not this header should be static, for example if a long scroll is needed within the screen but the header information keeps being useful to look at. But keep in mind that vertical space is very limited and this could cost useful space for the scrollable content.

If you have a main navigation in your app between categor
ies of content or functionalities, you can offer different kinds of navigation:

  • Tab menus can be useful, just make sure that it will be usable horizontally, (plan for a horizontal scroll if necessary)

  • Dropdown menus can be very useful as well if you are concerned about the number of inputs in your app. 

Exemples of tab and dropdown menus:



Provide a way for the user to know where they are at all time, and how to come back to a previous screen.

We recommend that you use a back button in the title section to let the user go back to the previous screen. 

3.3 Interactions with the desk

Even though your app is loaded within an iFrame, it doesn’t mean it cannot interact with the rest of the desk’s User Interface. Interesting interaction patterns can be used, such as filling in the composition zone of the desk by the click of a button in your app, easily sending coupons (text only can be sent from the iFrame/app to the composition area) or links to your interlocutor.

Consider implementing those interactions if it saves actions to your user.

4. Examples of a Conversation Panel App

To illustrate what the user experience of a conversational could be like,  let see an example of an app meant to follow orders and track delivery.

5. How to easily style your Conversation Panel App for a consistent User Interface integration in the Desk ?

We’ve designed a subset of CSS variables derived from iAdvize’s Design System that will allow you to easily style your app in a consistent way with the existing Desk User Interface.

It comes in the form of a CSS File embedded in the
conversation panel app library.


5.1 How to use the CSS

In order to be able to use these variables, you need to rely on the conversation panel app library by calling the proper stylesheet URL in your html code.

An app can include it either in its HTML:
<link rel="stylesheet" src="https://static.iadvize.com/conversation-panel-app-lib/1.2.0/idzcpa.base.css">

Or as a top-level import inside a preprocessed-stylesheet:
@import 'https://static.iadvize.com/conversation-panel-app-lib/1.2.0/idzcpa.base.css';

It contains a library of CSS variables for font, colors and other design staples:

Variables details :
 
Variable Name
Value
Preview
--CPA-max-width
58.4rem;
584px
--CPA-min-width
25.5rem;
255px
--CPA-vertical-padding
1.6rem;
16px
--CPA-vertical-padding
2.4rem;
24px
     
--CPA-color-background
     
--CPA-button-size-L
4rem;
40px
--CPA-button-size-M
3.2rem;
32px
--CPA-button-size-S
2.4rem;
24px
     
--CPA-color-text-main
--CPA-color-text-secondary
--CPA-color-text-positive
--CPA-color-text-negative
--CPA-color-text-warning
--CPA-color-text-action
     
--CPA-color-action
--CPA-color-action-lighter
--CPA-color-action-darker
--CPA-color-negative
--CPA-color-negative-lighter
--CPA-color-negative-darker
--CPA-color-positive
--CPA-color-positive-lighter
--CPA-color-positive-darker
--CPA-color-warning
-CPA-color-warning-lighter
--CPA-color-warning-darker
-CPA-color-neutral-000
--CPA-color-neutral-200
--CPA-color-neutral-300
--CPA-color-neutral-400
--CPA-color-neutral-500
--CPA-color-neutral-600
--CPA-color-neutral-700
--CPA-color-neutral-800
--CPA-color-neutral-900
     
--CPA-text-default
400 1.5rem/140% Proxima Nova;
--CPA-text-default-bold
600 1.5rem/140% Proxima Nova;
--CPA-text-small-bold
600 1.3rem/140% Proxima Nova;
--CPA-text-small
400 1.3rem/140% Proxima Nova;
--CPA-text-large
400 1.7rem/140% Proxima Nova;
--CPA-text-large-bold
600 1.7rem/140% Proxima Nova;
--CPA-text-very-large-bold
600 1.9rem/140% Proxima Nova, Helvetica, Arial, sans-serif;
     
--CPA-shadow-default
0rem 0.5rem 2.2rem rgba(5,20,97,0.14);
--CPA-shadow-small
0rem 0.2rem 0.9rem rgba(5,20,97,0.12);
--CPA-shadow-large
0rem 0.9rem 3rem rgba(5,20,97,0.23)


6. Example of a Conversation Panel Application using the CSS 

If you want to get a sense of what a Conversation Panel  App could look like, you can have a look to this demo application.