Why is Repositioning essential to boost your Airim experience?

Airim Features

Written by:

Key take aways (in case TL;DR)

  1. You need optimized positioning of Airim to ensure awesome user experience on your website
  2. Repositioning enhances mobile experience and removes any conflict with website design and CTAs (Call To Action)
  3. You can easily reposition Airim

Every time a prospective customer visits your website, she comes with an opportunity. An opportunity to create a first impression, be engaging and earn her trust. Thereby, you need to make sure that the communication tool you use is not spoiling your brand’s online experience for your user. Whether you’re using a Live Chat, a Chatbot or Airim, the bottom-right corner of your website was the usual abode used for placing icons of your website communication tools.

But it did not take us much time to figure out the nuances caused by this positioning. Based on review from our customers, 3 problems became evident. Here’s an account of case studies from our current customers and how did re-positioning of Airim’s icon solve them:

1. Optimizing Mobile Experience:

Problem:

Our customer wanted to ensure that the mobile experience of their website is engaging for the website visitor. Although mobile devices have extremely limited space to fit in all elements. While the website itself was designed to give an amazing experience, the widget was hindering the view of some essential elements on mobile devices. The users were not able to access all the elements of website which had an impact on user experience.

Solution:

Once we identified the problem, we started looking for a perfect spot for Airim on a mobile device. It turned out that the perfect spot was on the left side of the menu icon which was optimal for Airim. Our customer shifted the widget to that position and avoided any overlap with the mobile view of the website.

Implementation:

As always, we came up with a solution that is easiest to implement. To optimize the user-experience for a mobile device, Airim’s position was changed to top-right corner. For this, the customer had to make changes in both the coordinates. So, the customer copied the code snippet (in addition to Airim’s installation code) below to achieve the desired result:

For left side positioning (X-axis):

window.airimSettings = {

position : {

left: ’10px’

}

}

For vertical positioning (Y-axis):

window.airimSettings = {

position : {

bottom: ‘-100px’

}

}

2. Un-hiding Call-To-Action (CTAs):

Problem:

Website was designed with certain CTAs on the right side. Our customer wished to direct more users to their dedicated landing pages using them. Their team has spent hours, if not days, to create a flow which is seamless for their customers. Our analytics team discovered that something was still missing? But what could it be?

Well…while scrolling through the website, the CTAs are hidden by Airim’s icon. The hidden CTA was extremely relevant which was supposed to take website visitors to the pricing page. Airim’s icon was hiding the CTA which  hampered the user experience. It also affected user’s willingness to click on the CTA.

Solution:

To avoid this scenario, it is a good practice to ensure that your Airim icon is not coming in the way of your CTAs. Our customer solved this by shifting the position of the Airim’s icon towards the right of the CTA. This helped them to ensure that their CTAs are not getting affected and the user is getting the best of both worlds.

Implementation:

The customer just had to copy and paste a code snippet (along with Airim installation code) to shift the widget towards right where it no longer overlapped. Even while scrolling through, all CTAs were visible to the user. The code snippet to be copies for implementing this is given below:

For right side positioning (X-axis):

window.airimSettings = {

position : {

right: ’10px’

}

}

3. Perfecting Design Fit:

Problem:

The website design had elements that require some space at the bottom-right corner. The creative head wanted to keep the specific design suited by her style and vision of the company. The bottom-right corner had to be occupied by other important elements of customers’ website. The designer has taken her call. They needed a new position for Airim.

Solution:

To avoid this conflict, our customer started using Airim on the bottom left corner of their website. The website design was kept intact while Airim could still be used to enhance the user experience.

Implementation:

In this case, Airim was required to be moved to the left side of the website. Our customer copied the code snippet given below to bring it to life.

For left side positioning (X-axis):

window.airimSettings = {

position : {

left: ‘100px’

}

}

 

Leave a Reply

Your email address will not be published.