Блог

Главная - Вопросы по программированию - Добавление чата salesforce live Agent в React Js

Добавление чата salesforce live Agent в React Js

#reactjs #salesforce #livechat

#reactjs #salesforce #чат в реальном времени

Вопрос:

Я пытаюсь внедрить некоторый код javascript, сгенерированный Salesforce, для реализации кнопки чата для salesforce live agent. Я сохранил этот код в HTML-файле для чтения iframe и отображения.

Код выглядит следующим образом (это код, сгенерированный 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>

Мне нужно встроить этот код в приложение react в следующем компоненте с идентификатором div = 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 amp; 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>
  );
};

. Я создал этот компонент и попытался внедрить его в div в приведенном выше коде с 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;

Но он ничего не показывает. Я новичок в react. Любые мысли будут высоко оценены.