New Browsealoud Launchpad and Mobile Toolbar

There is a new launchpad experience for Browsealoud for all customers. 

Existing customers will need to upgrade their integration to see the new launchpad. The new launchpad will not appear automatically because you need to make a modification to your website template.

There is also a completely redesigned toolbar for users of mobile devices, which all of your mobile website users will see straight away when you update your Browsealoud.

                 Browsealoud Mobile Toolbar

                             Browsealoud Mobile Settings

What has changed?

You can put the launchpad at a specific location on your page which you can choose to best suit your design. This applies to both desktop and mobile views of your website.

Although the launchpad can be placed at a specific location on your page, the new mobile toolbar will be docked to the bottom of the screen. A new settings panel is available where users can:

  • Choose voice speed

  • Choose toolbar colour

  • Choose your translation language (where applicable) 

The new Launchpad will look like this:

Browsealoud Launchpad

What if I don’t want to use the new launchpad?

We always recommend running the most recent version of Browsealoud on your website. You can update to Browsealoud V3 by going to the Get Browsealoud website and retain the existing floating launchpads if you do not wish to use the new launchpad.

How do I integrate Browsealoud?

You can get the Browsealoud code from our Get Browsealoud website or your Browsealoud Portal login.

There are now two parts to the code:

  1. A placeholder that you position on your webpage template at the exact location where you want the Browsealoud Launchpad to appear

  2. The standard Browsealoud code snippet that goes at the end of your page html, just before the closing </body> tag.

If you are an existing customer with a custom integration, you will need to remove the custom integration placeholder:

    <div id="__ba_panel"></div>

You then replace it with the new “part 1” from above placeholder from the get Browsealoud page or Browsealoud portal page.

Part 2 of the Browsealoud code (at the bottom of your html) should be replaced with the new version from the pages above. E.g. <div id="__ba_launchpad"></div>

How do I customise the appearance?

  • You can still use a custom graphic or text link for the launchpad using the portal as before.

  • You can also specify your preferred toolbar colour scheme via the portal. End users can change this using the settings icon if they wish.

Browsealoud Mobile Themes

Remember to copy the new code to your page after you customise appearance.

How do I change the launchpad language?

The new Browsealoud launchpad will auto detect the language on your webpage and change its text accordingly. So for example if you had language code the Launchpad will appear like:


Browsealoud Launchpad Spanish


 Browsealoud Launchpad Swedish


Browsealoud Launchpad French

Please note:  You need to have the page language code specified correctly in your page header for this to work. So for example:

<html lang="en-GB" ...>

If you do not specify a language code, the launchpad will display in English.