You can customize the widget title, position and color with a few simple clicks in the Site’s settings. However, you can also use CSS to change the widget’s shape. In this article, we’ll present two popular examples for how to customize the widget. Feel free to use these templates and modify them as you wish.


First, we will customize the widget to look like this:



This will gently remind the user of additional support - a simple question mark wrapped in a blue bubble with a white border.


  1. Change the widget title - Within Inline Manual portal, go to Sites -> choose the desired site -> go to the Settings tab -> choose Player languages in the left side menu -> change the Trigger title to ? (See this article for detailed instructions.)



  1. Add CSS - After changing the title, you can now add the CSS code. While in the site’s Settings tab -> choose Player appearance from the left side menu -> go to the CSS tab -> paste the code and confirm with the Save button.



In our example we used this code:


.inmplayer-trigger {
   padding: 0;
   font-size: 32px;
   width: 40px;
   height: 40px;
   border: solid;
   border-width: 3px;
   border-radius: 50%;
   box-shadow: 1px 2px 6px 0px rgba(0,0,0,0.4);
   text-align: center;
}

Done!


Custom CSS styles don’t appear in the live preview.


In our second example, we will customize the widget to appear like this:



It features smooth, rounded corners and an azure blue background, with a short question that grabs the users' attention.


We will follow the same method outlined above in the first example:


  1. Change the widget title (Site > Settings > Player Languages) and replace the Trigger title with "Need Help?"
  2. Add CSS by accessing (Settings > Player Appearance > CSS tab.) We will paste the following code into the Custom CSS box and confirm by clicking the Save button:


.inmplayer-trigger {
    border-radius: 50px;
    border: none;
    width: 130px;
    height: 30px;
    font-size: 20px;
    line-height: 9px;
    text-align: center;
    padding-top: 10px;
    background-color: #0180ff;
}


Please note that in the example above, the font-family for our application is sans-serif. Different font-families on your application may interfere with the size of this widget. However you can make some small adjustments to fix this.

For example, if your application has monospace (the family-font in this box), you will need to adjust the font-size to 18px.

If you're unsure of anything, get in touch with our support team and we can help you with a custom solution.


Finished!


How to change the widget width

We will follow the same method outlined above in the first example:

The default width of the widget when expanded is 350px. In the example below we will change it to 450px.


  1. Add CSS by accessing (Settings > Player Appearance > CSS tab.) We will paste the following code into the Custom CSS box and confirm by clicking the Save button:


div.inmplayer-general div.inmplayer-panel {
  width: 450px;
}

Save your changes and wait till the changes propagate to the Player.

And that is it.


Related articles