将Salesforce在线客服聊天添加到React Js

问题描述

我正在尝试嵌入由Salesforce生成的一些javascript代码，以实现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>

我需要将此代码嵌入div id = livechat的以下组件的react应用中

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>
  );
};

。我已经创建了这个组件，并尝试使用id = livechat

将其嵌入到上面代码中的div中

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;

但是它什么也没显示。我是新来的反应。任何想法将不胜感激。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）