Launcher customization

Location: 
Sites > Site > Player appearance

Whether you’re building a walkthrough, a new feature announcement, a list of articles or a launcher, it should look and feel like part of your own application. Consistency is critical as it truly helps with building brand recognition.

You can customize launchers to suit your needs. Without coding you can:

· Change the style of your launcher in the Launcher panel,
· Change the text for each launcher in the Launcher panel,
· Customize the default look in your Site’s settings.

In this article, we’ll show you how you can customize the look of your launchers.

By default, a launcher will appear as a question mark in a red circle. There are 4 launcher styles that work right out of the box, without coding.

Available styles:

Tooltip - a static icon with a question mark (default).

Hotspot - a pulsing icon.

Text - a short text.

Long text - a longer text.

To change the style of a launcher:

  1. While adding/editing a step or a topic, open the Launcher panel.

  2. In Style section, choose a desired style from a drop-down menu.

In the Launcher panel, you can also change the default icon (question mark) or text of your launcher. The default launcher is a circle (tooltip style), which suits single letters, symbols, or emoji. Therefore if you want to use a longer word, you should use styles such as text or longer text.

To change the default icon/text:

  1. While adding/editing a step or a topic, open the Launcher panel.

  2. In Content section, change the content of the launcher, for example, instead of a question mark, you can use a small “i”.

For each Launcher, you can assign a custom CSS class for advanced customization.

You can change the default look of the launcher in your Site’s settings.

You can set your custom style including:

· Background color
· Text color
· Border color
· Border width
· Border radius

To change the default look of a launcher:

  1. Login to the Inline Manual portal with your email and password.

  2. Go to Sites and choose &the site* you want to edit settings for.

  1. In Player appearance section, open Launchers tab.

  1. Now you can adjust the settings.

Adding a text to a launcher with CSS

If you want to, you can use a custom CSS to add a text and change the look globally.

This example CSS code will add the text "TAKE A TOUR" and then change the style to accommodate a longer string of text.

.inmplayer-launcher::before {
      content: "TAKE A TOUR";
      top: 0;
      left: 0;
      color: #000;
      display: block;
      height: 20px;
      width: 100px;
      text-indent: 0;
    }
    .inmplayer-launcher {
      text-indent: -9999px;
      overflow: hidden;
      width: 100px !important;
      border-radius: 2px !important;
      height: 20px;
    }

Add this code to CSS tab in Player Appearance settings.

Changing the size of a launcher with CSS

If you want to make a launcher smaller, you can use the below code.

.inmplayer-launcher{
width: 15px;
height: 15px;
line-height: 15px;
}

Add this code to CSS tab in Player Appearance settings.

Pulsing launchers with CSS

In some cases, you may way to add an animated hotspot to draw attention to a new opportunity or important feature in your application. You can choose the "Hotspot" style for your launcher, but if you want to have a text/symbol inside the pulsing icon, use the CSS code to change the appearance of your launcher.

The code provided below is an example of what you can do.

.inmplayer-launcher:after {
 content: " ";
 margin: 0 auto;
 border-radius: 100px;
 position: absolute;
 right: -14px;
 top: -14px;
 z-index: 10;
 background-color: transparent;
 opacity: 0.1;
 width: 48px;
 height: 48px;
 border: 2px solid rgba(0,128,64,1);
 -webkit-border-radius: 100px;
 -moz-border-radius: 100px;
 -o-border-radius: 100px;
 -ms-border-radius: 100px;
 border-radius: 100px;
 -webkit-animation: pulse 2s linear infinite;
 -moz-animation: pulse 2s linear infinite;
 border-image: initial;
}
 
@-webkit-keyframes pulse {
 0% {-webkit-transform: scale(0); opacity: 0;}
 8% {-webkit-transform: scale(0); opacity: 0;}
 15% {-webkit-transform: scale(0.1); opacity: 1;}
 30% {-webkit-transform: scale(0.5); opacity: 1;}
 100% {opacity: 0; -webkit-transform: scale(1);}
}
 
@-moz-keyframes pulse { 
 0% {-moz-transform: scale(0); opacity: 0;}
 8% {-moz-transform: scale(0); opacity: 0;}
 15% {-moz-transform: scale(0.1); opacity: 1;}
 30% {-moz-transform: scale(0.5); opacity: 1;}
 100% {opacity: 0; -moz-transform: scale(1);}
}

Add this code to CSS tab in Player Appearance settings.

Was this article helpful?