Not update email chat flow

[GC5]

For this script that allow me to load chat on website

Code:

import React, { FunctionComponent, ScriptHTMLAttributes } from 'react';

const w: any = window;
// eslint-disable-next-line no-underscore-dangle, no-multi-assign
const _hsp = (w._hsp = w._hsp || []);
// eslint-disable-next-line no-underscore-dangle, no-multi-assign
const _hsq = (w._hsq = w._hsq || []);

const HubSpotPortalId = '1111'; //Add your portal-id
const HubSpotElementId = 'hs-script-loader';

const startsWith = (str1: string) => (str2: string) => str1.startsWith(str2);
const createScriptNode = (
  props: ScriptHTMLAttributes<HTMLScriptElement> = {}
): HTMLElement => {
  const scriptNode: HTMLScriptElement = document.createElement('script');
  scriptNode.type = 'text/javascript';
  Object.keys(props).forEach((key) => {
    const keyName = key;
    // TODO: fix to proper typing
    (scriptNode as any)[keyName] = (props as any)[keyName];
  });
  return scriptNode;
};

const setQueryStringParameter = (
  name: string,
  value: string,
  append = false
) => {
  const url = new URL(window.document.URL);
  // Delete name to avoid duplicate entries
  url.searchParams.delete(name);
  if (append) url.searchParams.append(name, value);
  else url.searchParams.set(name, value);
  window.history.replaceState(null, '', url.toString());
};

const HubSpot = {
  execute: (action: () => void) => {
    // If external API methods are already available, use them.
    if (w.HubSpotConversations) {
      action();
      return;
    }
    /*
      Otherwise, callbacks can be added to the hsConversationsOnReady on the window object.
      These callbacks will be called once the external API has been initialized.
    */
    w.hsConversationsOnReady = w.hsConversationsOnReady || [];
    w.hsConversationsOnReady.push(action);
  },
  // On logout clear cookies so we can work on different chatflows
  resetWidget: () => {
    const status = w.HubSpotConversations?.widget.status();
    if (status?.loaded) {
      _hsp.push(['revokeCookieConsent']);
      w.HubSpotConversations.clear({ resetWidget: true });
    }
  },
  loadWidget: () => {
    const status = w.HubSpotConversations?.widget.status();
    if (status?.loaded) {
      w.HubSpotConversations.widget.refresh({ openToNewThread: true });
    } else {
      w.HubSpotConversations.widget.load({ widgetOpen: true });
    }
  },
  setUserIdentity: ({
    email,
    accountId,
  }: {
    email: string;
    accountId: string;
  }) => {
    // Identify current user on chat
    _hsq.push([
      'identify',
      {
        email,
        accountId,
      },
    ]);
  },
  setChatflow: ({
    isTrialUser,
    locale,
  }: {
    locale: string;
    isTrialUser?: boolean;
  }) => {
    const chatflowUser = isTrialUser ? 'trial' : 'paid';
    const chatflowLocale = ['en', 'es', 'de'].some(startsWith(locale))
      ? locale.slice(0, 2)
      : 'zu';
    const chatFlow = `abc_${chatflowUser}_${chatflowLocale}`;
    setQueryStringParameter('chatflow', chatFlow, true);
  },
};

type HubSpotWidgetProps = {
  email?: string;
  locale: string;
  accountId?: string;
  isTrialUser?: boolean;
};
const HubSpotWidget: FunctionComponent<HubSpotWidgetProps> = ({
  email,
  locale,
  accountId,
  isTrialUser,
}) => {
  const onConversationsAPIReady = () => {
    if (email && accountId) {
      HubSpot.setUserIdentity({ email, accountId });
      HubSpot.setChatflow({ locale, isTrialUser });
      HubSpot.loadWidget();
    }
    return HubSpot.loadWidget();
  };

  React.useEffect(() => {
    w.hsConversationsSettings = { loadImmediately: false };
    const script = document.getElementById(HubSpotElementId);

    if (!script) {
      const scriptNode = createScriptNode({
        src: `//js.hs-scripts.com/${HubSpotPortalId}.js`,
        id: HubSpotElementId,
        async: true,
        defer: true,
      });
      document.body.appendChild(scriptNode);
    }
    
    // Load Widget when ready
    HubSpot.execute(onConversationsAPIReady);

    return () => {
      if (email && w.HubSpotConversations && w.HubSpotConversations.resetAndReloadWidget) {
        w.HubSpotConversations.resetAndReloadWidget();
      }
    }

  }, [email]);

  return null;
};

export {  HubSpotWidget };

<HubSpotWidget
  email="test@test.com"
  locale="de"
  accountId="122344"
  isTrialUser={false}
/>;

I have these problems, how can i afford it?

• If you have loaded a specific chatflow and then performed login or logout operation it doesn't refresh to new chatflow which means if it's loaded as an unknown user it stays like that and vice versa.
• I see a weird warning in the console when the widget is loaded.

Thanks,
GC

[Jaycee_Lewis]

Hi, @GC5. Thanks for reaching out. Can you share the error body you are receiving? Additionally, without a link, the community may not be able to diagnose possible causes.

Thanks for the additional information.

Best,

Jaycee