时间戳

首页 > 解决方案 > 如何在 gatsby 的特定页面上实现 zendesk Web 小部件

reactjs - 如何在 gatsby 的特定页面上实现 zendesk Web 小部件

问题描述

将 zendesk 安装脚本添加到html.js文件中按预期工作，并且小部件显示在所有页面上。

我想在特定页面上显示它，例如about-us页面。我试过这个

render() {
return (
<>
<script
    id="ze-snippet"
    src="https://static.zdassets.com/ekr/snippet.js?key=xxx-xxxxx"
>
</script>
...
</>

但它不起作用。任何想法？

标签： reactjsgatsbyzendesk

解决方案

在 index.html 文件中

<html>
    <body>
        <!-- your scripts -->

        <script id="ze-snippet" src="https://static.zdassets.com/ekr/snippet.js?key={YOUR_KEY}"> </script>
        <!-- Hide de widget by default -->
        <script>zE('webWidget', 'hide')</script>
    </body>
</html>

在您的组件中显示

import React from 'react'

class MyComponent extends React.Component {

    constructor (props) {
        super(props)
    }

    componentDidMount () {
        // show widget on mount component
        zE('webWidget', 'show')
    }

    componentDidUnmount () {
        // hide widget on unmount component
        zE('webWidget', 'hide')
    }

    render () {
        // your render
        return (
            <div>Hello World</div>
        )
    }
}

在其他组件中无需执行任何操作

推荐阅读