Event handlers don't function as expected

[abohannon]

Because the event handlers are being added as script tags, they don't retain their component scope.

Example:

const DriftWrapper = props => {
  const isOpen = useSelector(({ drift }) => drift.isOpen)

 const world = 'world'
 
  const eventHandlers = [
    {
      event: 'conversation:playbookClicked',
      function: () => console.log('hello', world), // won't log anything
    },
  ]

  return <Drift eventHandlers={eventHandlers} {...props} />
}

When the playbook widget is clicked, nothing is logged. I presume because their script has some error handling that catches the undefined world variable. Remove world and just leave console.log('hello'), it will log fine.

This is an issue because it's likely users will have more complex usecases around event handlers than simple console logs or functions which contain all the logic they need scoped to the immediate block.

A solution is to build out a more thorough API that makes use of drift.api. Either we could add props like open and onClick but since there are so many various click events handled by the widget, we may want to keep the existing interface and change how it's processed. We could map the events to their analogous api methods. I'm not entirely sure if 100% of the events will map, but it's worth a shot since the existing solution doesn't appear to quite work as one might expect.

I can submit a PR when I find some time, but wanted to open an issue in case anyone else feels ambitious.