The initial step would be to make sure that Pico is properly installed on the website and is actively running on the pages that Coral would be utilized. Please see our main installation guide here:

Once installed on the page, you will need to add a DOM element that includes the "PicoSignal" class. This class will allow that element to receive data emitted from the Pico plugin.

The data that we will want to latch onto for this integration will be the data-pico-email variable. When a user logs into Pico, this data property will be updated with the user's email. Additional data that is emitted via Pico Signals can be seen here:

Once Pico is installed and running, a web developer will need to script a "Mutational Observer" function using Javascript in order to observe the DOM element configured with the PicoSignal. This Javascript function can be accomplished using JQuery, MutationalObserver, or many other open-source Javascript libraries.

The Mutational Observer function should be configured to observe the DOM element for the signals emitted by the Pico plugin when a user logs in. Once the data-pico-email value has updated with the user's email, the MutationObserver will respond to the login event, using that email value to make an XHR call to a backend server.

This backend server should process the email and return any additional information needed (unique identifier for the user on your system, expiry, domains permitted, etc.) to form a valid SSO claim to Coral back to the original Mutational Observer function. To see more about Coral's SSO implementation, please view their documentation here:

For more about tokens, please see

Once the claim has been properly formulated your Javascript can and the SSO login request has been sent to Coral by the Observer function, an authentication token will be returned by the Coral SSO server. which can then be used to seamlessly redirect to the remote site.

A visual representation of how this would be implemented can be seen below:

Did this answer your question?