Programmatic Display of Springtime

Overview

A global function is exposed to the parent site at large to enable opening the toolbar from anywhere on the page. The exposed function is called "displayConsentToolbar" and can be called from the window context. As this is just a javascript function, it can be used in any way you can use a javascript function in your project.

Examples

The following examples are not exhaustive, but rather representative of some of the different ways you can use the provided javascript function to display the consent toolbar.

Required

It is required that the <cmp-toolbar> web component be added to the page. This means that you must either utilize one of our default placement implementations. Once you’ve done this, the provided function will be accessible on the window. The following examples assume this has been done and are specific to the new functionality.

Button example

<button onclick="window.displayConsentToolbar()">

  Click Here to display the toolbar from a remote and unrelated HTML Element.

</button>

The above example shows a simple button definition within HTML with a javascript onclick. This can be added one or multiple times in order to fill your design and implementation needs.

Class selector example

<script>

  document.addEventListener("click", (event) => {

    if (event.target.matches(".spConsentClick")) {

      window.displayConsentToolbar();

    }

  });

</script>

The above example here applies a click event listener to the document that listens for a specific CSS class select `.spConsentClick`, and calls the displayConsentToolbar function whenever a click event is received from a component with that className. It’s important to note that the CSS selector can be any valid CSS selector, but we just used the `.spConsentClick` as an example