Adding salesforce live agent chat to React Js

Question

I am trying to embed some javascript code generated by Salesforce to implement a chat button for salesforce live agent. I have saved this code in an html file to be read by an iframe and get displayed.

The code looks like this (this is the code generated by Salesforce)

<!-- Button code-->
    <img id="liveagent_button_online_5733I0000008OQi" style="display: none; width: 80px; border: 0px none; cursor: pointer" onclick="liveagent.startChat('5733I0000008OQi')" src="https://xxxxx-xxxx.cs123.force.com/chat/resource/1522296071000/OnlineChat2018" /><img id="liveagent_button_offline_5733I0000008OQi" style="display: none; width: 80px; border: 0px none; " src="https://xxxx-xxxxx.cs123.force.com/chat/resource/1518832820000/OfflineChat2018" />
    <script type="text/javascript">
    if (!window._laq) { window._laq = []; }
    window._laq.push(function(){liveagent.showWhenOnline('5733I0000008OQi', document.getElementById('liveagent_button_online_5733I0000008OQi'));
    liveagent.showWhenOffline('5733I0000008OQi', document.getElementById('liveagent_button_offline_5733I0000008OQi'));
    });</script>
    
    <!-- Deployment code-->
    <script type='text/javascript' src='https://c.la1-c1cs-ia4.salesforceliveagent.com/content/g/js/49.0/deployment.js'></script>
    <script type='text/javascript'>
    liveagent.init('https://d.la1-c1cs-ia4.salesforceliveagent.com/chat', '572340000008OaS', '00D3I0000000OKa');
    </script>

I need to embed this code in a react app in the following component at the div id= livechat

import React from 'react';
import { RouterProps } from 'react-router';
import styles from '../assets/styles/AppHeader.scss';
import { Logo } from '../Logo';
import { HeaderAvatarPopover } from '../HeaderAvatarPopover';

export interface HeaderMenuProps {
  label: string;
  path: string;
  isExternal?: boolean;
}

export interface AppHeaderProps {
  enableAvatarPopover?: boolean;
  menu: HeaderMenuProps[];
  history: RouterProps['history'];
}

const Menu = (props: AppHeaderProps) => {
  const isActive = (path: string): boolean => {
    return props.history.location.pathname.startsWith(path);
  };

  const goTo = (path: string, isExternal: boolean) => {
    if (isExternal) {
      window.location.href = path;
    } else {
      props.history.push(path);
    }
  };

  return (
    <Tabs>
      {props.menu.map((m) => {
        return (
          <Tabs.Tab
            key={m.label}
            active={isActive(m.path)}
            className={styles.navLink}
          >
            <Tabs.Link onClick={() => goTo(m.path, Boolean(m.isExternal))}>
              {m.label}
            </Tabs.Link>
          </Tabs.Tab>
        );
      })}
    </Tabs>
  );
};

export const AppHeader = (props: AppHeaderProps) => {
  // const helpTooltipCopy: string = 'Support & Feedback';

  return (
      <header className={styles.appHeader}>
          <Logo className={styles.logo} />
          <div className={styles.menu}>
            <Menu {...props} />
          </div>
          <div id="livechat" />
          <HeaderAvatarPopover
            enableAvatarPopover={props.enableAvatarPopover || false}
          />
      </header>
  );
};

. I have created this component and tried embedding it in the div in the code above with id= livechat

import React from 'react';
import ReactDOM from 'react-dom';

function iframe() {
  return {
    __html:
      '<iframe src="./public/salesforce-livechat.html" width="140px" height="80px"></iframe>',
  };
}

const LiveChat = () => {
  const element = (
    <div>
      <div dangerouslySetInnerHTML={iframe()} />
    </div>
  );

  ReactDOM.render(element, document.getElementById('livechat'));
};

export default LiveChat;

But it's not showing anything. I am new to react. Any thoughts will be greatly appreciated.

Adding salesforce live agent chat to React Js

0 Answers0