Building Advanced Launchers

Updated on October 22, 2020 Download PDFDownload as PDF
Download PDF

Brief Overview

Become an expert DAP builder and meet the building requirements that you desire. The following article explains how to accomplish the top three most requested Launcher building options.

How to create a Blinking Launcher

  1. Click “Customize”
  2. Click on the “CSS” tab
  3. Paste the following text into the bottom of your CSS panel and replace the x’s with the ID of your Launcher.  You can find this by hovering over the 3 vertical dots next to your Launcher and clicking on “copy ID”
    .walkme-launcher-id-xxxxxx .walkme-launcher-image-div {
         animation: scale-pulse 1.75s cubic-bezier(.39,.58,.38,.75) normal infinite forwards;
    }
    
    @keyframes scale-pulse {
      from {
        transform: scale(1.0);
                opacity: 1;
         }
      to {
        transform: scale(1.5);
            opacity: 1;
        }
    }

How to create an Invisible Launcher

Use Cases:

  • Start a process once the user clicks on an existing element on your site
  • Stop an existing element on your site from being clicked
  • Block a button in order to prevent an action

Steps for creating an Invisible Launcher:

  1. Click on the Launcher that you want to be invisible
  2. Click on the “Change Launcher” button in the Interaction tab
  3. Click “Customize” and create/edit one of the Launcher designs
  4. Simply click on “No Fill” when editing a new launcher design:

How to Turn Off the Widget and use a Launcher Instead

  1. Turn off the Widget by going to Customize > Customize Player > Widget and set the display to None: 
  2. Next, you’ll want to make a Launcher to open the Menu. To do this, you can open the Launcher app in the Editor and attach the Launcher to where you want it to appear in your application.
  3. Additionally, you can choose what you want your Menu Launchers by going to Launcher Options -> Interaction -> Change Launcher. From here you can choose from the default Launcher images, upload your own image, or create a Launcher image within the Editor.
  4. Lastly, in the Interaction tab, be sure to configure the action to Open Menu. You can also choose which tab you want to be visible when your users first open the Menu:

How to Turn a Launcher Into an Image

Add the following CSS to your Global CSS in the Editor:

.walkme-launcher-id-xxxxx {

background-image: url(url.png) !important;

padding-top: 24px;

padding-right: 2px;

padding-bottom: 18px;

padding-left: 1px;

}

See the image below for an example.

Make sure to replace the URL with the image of your choice and the xxx’s with your Launcher ID.  Follow these steps to find the Launcher’s unique ID:

  1. Hover over the 3 vertical dots to the right of the Launcher 
  2. Click “Copy ID” from the dropdown.

 

Was this article helpful?

Related Articles