Custom Apps Guidelines

1. Why to build an app for the iAdvize desk and mobile applications (iAdvize and/or ibbü)

Extend the capabilities of your respondents for your specific use cases

We offer a powerful way for you to integrate an application of your own directly in the iAdvize desk or mobile apps (ibbü or iAdvize) so that your respondents can address your specific business and strategic use-cases as close as possible to the conversation, in a seamless way.
Whether you want to implement : 
  • a delivery tracking solution
  • an access to a product catalog
  • a way for your respondents to access knowledge base articles
  • a solution to qualify leads or access your CRM tools

It is now possible with a Custom App, accessible within your Desk.

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

General principles

NB: dedicated documentation is accessible to developers in our Developer platform

2.1 Within the desk

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

2.2 Within iAdvize and ibbü mobile apps

Your application will be available by clicking on a button next to the compose zone in the conversation screen. It will be displayed in a webview (see the video below for illustration). The respondent will have the possibility to navigate between all of the applications thanks to a menu at the bottom of the Applications screen.

It will be possible to trigger actions from your application to populate the compose zone in the conversation screen.(see the section
“Interactions with the desk and iadvize mobile applications” for more details).

For ease of use, it will also be possible to navigate between the conversation and your applications with a simple swipe gesture.

Make sure that your applications are responsive in order to adapt to all mobile devices.

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

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 Custom App.

Following those guidelines will also ensure consistency of the UI and UX between your application and the iAdvize Desk and mobile applications. 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 (or a webview on mobile) 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.

  • You need to make sure your app is usable on mobile devices as well (for the iAdvize mobile applications)

  • Remember that on mobile applications, the keyboard of the device will take screen space when typing in an input for exemple, your layout must remain usable in that case. 

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 for mobiles

  • Make sure to use the correct tags for your UI components so that mobile devices behave in the best way (right type of inputs to display right type of keyboards as an example.)

  • Remember that hover interactions are not available on mobile devices, therefore you need to make sure the UX of your application is not dependent on hover interactions for mobile use. Your users should still be able to access all the content and perform all tasks. 

3.4 Interactions with the desk and iAdvize mobile applications

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 Custom 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 Custom 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
custom app library.

5.1 How to use the CSS

In order to be able to use these variables, you need to rely on the custom 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="">

Or as a top-level import inside a preprocessed-stylesheet:
@import '';

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

Variables details :
Variable Name
400 1.5rem/140% Proxima Nova;
600 1.5rem/140% Proxima Nova;
600 1.3rem/140% Proxima Nova;
400 1.3rem/140% Proxima Nova;
400 1.7rem/140% Proxima Nova;
600 1.7rem/140% Proxima Nova;
600 1.9rem/140% Proxima Nova, Helvetica, Arial, sans-serif;
0rem 0.5rem 2.2rem rgba(5,20,97,0.14);
0rem 0.2rem 0.9rem rgba(5,20,97,0.12);
0rem 0.9rem 3rem rgba(5,20,97,0.23)

6. Example of a Custom App using the CSS 

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