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.


Styles of 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. This has limit of 11 characters.



Long text - a longer text. This has a limit of 22 characters.



Changing the style of a launcher

To change the style of a launcher:


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


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



Changing the default icon/text of a launcher

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), 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 the 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.


Changing the default look in the Site’s settings

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. Go to Sites and choose the site you want to edit settings for.



  1. In the Player appearance section, go to Launchers tab.


  1. Now you can adjust the settings.


Changing a launcher with CSS

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 the CSS tab in the Player Appearance settings.


Related articles