1. Why to build an app for the iAdvize desk and mobile applications
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 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?
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 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.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 guides 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 example, 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 information 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:
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.
Examples of tab and dropdown menus:
Provide a way for the user to know where theyare 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. For example, with one click in your app, your agent can insert text in the composition area (a coupon code, a link). Your app can also send a card or a carousel of cards directly in the conversation. This is not available on some channels, including Instagram and conversations from a mobile app (SDK). Your app can also get a JWT to authenticate its calls.
Consider implementing those interactions if it saves actions to your user.
4. 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.
4.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.
It contains a library of CSS variables for font, colors and other design staples. The text variables use the Open Sans font. The stylesheet does not load this font. Load it in your app, otherwise the browser displays Helvetica, Arial or a sans-serif font.
