Introduction¶

By default, when PageAssist is activated it always appears on the website. This allows visitors to interact with it at any time. Other configurations are possible and PageAssist can be set up to behave differently.

This document gives instructions on how to configure the PageAssist widget to open or close when a visitor performs a specific action on the page, for example when the visitor clicks on a button or link.

Set an element to open PageAssist¶

Hide the PageAssist™ widget until a visitor performs an action on the page, for example when the visitor clicks on a button or link.

How to set it up:

1. Hide the PageAssist widget on the website with CSS:

   copy

   #monsido-pageassist {
   display: none !important;
   }

   For more information, see the user guide article:

   PageAssist CSS Selector Basics.

2. Select an element on the website to trigger PageAssist when the user clicks on it, and then assign it a unique ID. In this example, we assign the ID “open-page-assist” to a button element:

   copy

   ​​<button id="open-page-assist">Open PageAssist</button>

3. Add the following script:

   copy

   var openPageAssistButton = document.querySelector("#open-page-assist");
   openPageAssistButton.addEventListener("click", function() {
     monsidoPageAssist.openPageAssist();
   }); 

   Note

   When you implements the script on their website (admin user function), remember to replace 

   “#open-page-assist” with the ID of your target element.

Set an element to close PageAssist¶

It is also possible to close the PageAssist™ widget when a visitor performs a specific action on the page, for example, when the visitor clicks on a button or link.

Use the following method:

monsidoPageAssist.closePageAssist()

How to disable PageAssist hotkeys¶

<script type="text/javascript">

    window._monsido = window._monsido || {

        token: "dfgdfgdfgdfgnvbc",

        heatmap: {

            enabled: true,

        },

        pageAssistV2: {

            enabled: true,

            theme: "light",

            mainColor: "#783CE2",

            textColor: "#ffffff",

            linkColor: "#783CE2",

            buttonHoverColor: "#783CE2",

            mainDarkColor: "#052942",

            textDarkColor: "#ffffff",

            linkColorDark: "#FFCF4B",

            buttonHoverDarkColor: "#FFCF4B",

            greeting: "Discover your personalization options",

            direction: "leftbottom",

            coordinates: "undefined undefined undefined undefined",

            iconShape: "circle",

            title: "Personalization Options",

            titleText: "Welcome to PageAssist™ toolbar! Adjust the options below to cater the website to your accessibility needs.",

            iconPictureUrl: "logo",

            logoPictureUrl: "",

            logoPictureBase64: "",

            languages: [""],

            defaultLanguage: "",

            skipTo: false,

            alwaysOnTop: false,

            hotkeyEnabled: false,

        },