快速入门-动态更改Web小部件(经典)设置

1. 在<一个href＝＂https://support.zendesk.com/hc/en-us/articles/217743418">管理中心，转至渠道>经典>Web部件，选择定制页签，打开“联系人表单”、“聊天”和“帮助中心”。

   

2. 在您的网络浏览器中，转到<一个href＝＂https://codepen.io/pen/＂>https://codepen.io/pen/，并创建一个新笔。

3. 在HTML编辑器中，粘贴以下代码。取代{YOUR_KEY}中提供的小部件键支持>管理>渠道>小部件>设置选项卡。

             

              
<超文本标记语言><头><元字符集＝＂utf - 8＂>头><身体><！——动态内容占位符——><divid＝＂内容＂风格＝＂padding-top：20.px；＂>div><！——Web Widget——><脚本id＝＂ze-snippet＂src＝＂https://static.zdassets.com/ekr/snippet.js?key= {YOUR_KEY}＂>脚本><！——hello template——><脚本id＝＂hello-template＂类型＝＂文本/ x-handlebars-template＂><p>你好！</p><一个身份证＝“link-goodbye”href＝“#”>我我已经读完了这页面！</一个>脚本><！——再见模板——><脚本id＝＂goodbye-template＂类型＝＂文本/ x-handlebars-template＂><p>再见！</p><一个身份证＝“link-hello”href＝“#”>没有，带我回去！</一个>脚本><！——显示模板——><脚本src＝＂https://cdn.jsdelivr.net/npm/<一个href＝＂https://developer.zendesk.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="345c555a5058515655464774001a071a07">(电子邮件保护)/dist / handlebars.min.js＂>脚本><脚本>（函数（）｛// showHello函数函数showHello（）｛var源＝文档．getElementById（“hello-template”）．innerHTML；var模板＝车把．编译（源）；文档．getElementById（“内容”）．innerHTML＝模板（）；varlinkGoodbye＝文档．getElementById（“link-goodbye”）；linkGoodbye．addEventListener（“点击”，showGoodbye）；｝// showGoodbye函数函数showGoodbye（）｛var源＝文档．getElementById（“goodbye-template”）．innerHTML；var模板＝车把．编译（源）；文档．getElementById（“内容”）．innerHTML＝模板（）；varlinkHello＝文档．getElementById（“link-hello”）；linkHello．addEventListener（“点击”，showHello）；｝//显示hello内容showHello（）；｝）（）；脚本>身体>超文本标记语言>
             

页面通过切换句柄模板来响应单击事件来创建动态内容。有关实现细节，请参阅代码注释。

“你好!内容显示“我已读完此页”链接，该链接切换到“再见”内容。“不，带我回去!”链接切换到“Hello”内容。小部件显示在两个内容页面上。