How do I add the Chrome Extension sidebar to my web application?

Developers can follow these steps to easily add Crystal integration to any web app.

Integrating Crystal’s Chrome Extension with your product allows Crystal users to view personality information directly within your UI. 

This integration will enable our Chrome Extension to place a "View Personality" button in your product that will open the Crystal sidebar and predict the contact's personality. Here is an example of the integration in Hubspot:

Screen Shot 2019-06-10 at 1.27.18 PM (1)

When a user clicks the button, the Crystal Chrome Extension sidebar will slide in from the right side of the page, like this:


In order to integrate your CRM to Crystal you’ll need to do the following:

  1. Send us the URLs for the pages that the extension should open in (e.g.
  2. Add class names to relevant elements on your contact record page that contain the following data points:
    • NAME_SELECTOR = '.crystalknows-name' (e.g. Jack Smith)
    • EMAIL_SELECTOR = '.crystalknows-email' (e.g.
    • JOB_TITLE_SELECTOR = '.crystalknows-job-title' (e.g. VP of Marketing)
    • COMPANY_SELECTOR = '.crystalknows-company' (e.g. Cisco Systems)
    • LOCATION_SELECTOR = '.crystalknows-location' (e.g. New York, NY)
    • TOGGLE_BUTTON_APPEND_AREA = '.crystalknows-button-container' (this is the <div> container that the "View Personality" button should appear in)

Once these are done, please let us know by emailing and we can activate your CRM as an option in the Crystal Chrome Extension.