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
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).
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 16 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 application)
-
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 whether 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 categories of content or functionalities, you can offer different kinds of navigation:
-
T, 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
An app can include it either in its HTML:
<link rel="stylesheet" src="https://static.iadvize.com/conversation-panel-app-lib/2.9.0/idzcpa.base.css">
Or as a top-level import inside a preprocessed-stylesheet:
@import 'https://static.iadvize.com/conversation-panel-app-lib/2.9.0/idzcpa.base.css';
It contains a library of CSS variables for font, colors and other design staples:
Variables details :
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.
