Getting Started

Installation with NPM:

npm install @puzzlelabs/puzzle-glossary

Installation with CDN:

<script
  type="module"
  src="https://unpkg.com/@puzzlelabs/puzzle-glossary/dist/puzzle-glossary/puzzle-glossary.esm.js"
></script>

Highlight Widget Configuration

document.addEventListener('highlightWidgetReady', function() {
  highlightWidgetManager.config = {
    // It needs to select specific parts of page:
    selectors: ['body'],
    // It needs to mark words one time:
    hasMarkAll: false,
    // It needs to hide Puzzle Labs logo in widget:
    puzzleBranding: false,
    // It needs not to mark hyperlinks:
    hasMarkHyperlink: false,
    // It needs to add CTA (Call to action):
    callToAction: {
      text: 'CTA',
      link: 'https://puzzlelabs.ai',
    },
  };

  highlightWidgetManager.handlers = {
    onCopyClick: (event) => {
      console.log(event.type); // event.type === "onCopyClick"
      console.log(event.details.concept); // Concept
      console.log(event.details.marker); // Marker element
    },
    onMarkerHover: (event) => {
      console.log(event.type); // event.type === "onMarkerHover"
      console.log(event.details); // details === Concept
    },
    onCtaClick: (event) => {
      console.log(event.type); // event.type === "onCtaClick"
      console.log(event.details); // details === Concept
    },
    onResourceClick: (event) => {
      console.log(event.type); // event.type === "onResourceClick"
      console.log(event.details.concept); // Concept
      console.log(event.details.marker); // Marker element
      console.log(event.details.resource); // Resource
    },
    onEvent: (event) => {
      console.log(event.type); // One of the available events types
      console.log(event.details) // One of the available events
    },
  };

  highlightWidgetManager.theme = {
    // It needs to change mode (dark/light):
    mode: 'light',
    // It needs to change font (make sure this is added to website):
    fontFamily: 'Times New Roman',
    // It needs to change style and type (highlight/underline) of marker:
    marker: {
      color: '#E7FF57',
      type: 'highlight',
    },
    // It needs to change style of resources: 
    resource: {
      color: args['theme.resource.color'],
    },
    // It needs to change style of CTA (Call to action):
    callToAction: {
      color: '#fff',
      backgroundColor: '#000',
    },
    // It needs to change style of widget modal:
    modal: {
      primaryColor: '#000',
      secondaryColor: '#74747F',
      backgroundColor: '#E7E8FE',
    },
  };

  // first argument is glosary id, { mark: true } say manager after initialization highlight concept automaticaly
  highlightWidgetManager.init('6437d691b3c98451b429460f', { mark: true });
  // Or you can mark separetly
  // highlightWidgetManager.init('6437d691b3c98451b429460f').then(() => {
  //    highlightWidgetManager.mark();
  // });
})

Page Widget Configuration

<page-widget api-key="6437d691b3c98451b429460f"/>