weiyu/deploy/server/docs/assets/js/375cb1be.b18c8dfa.js

"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[6949],{4247:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>o,contentTitle:()=>a,default:()=>h,frontMatter:()=>l,metadata:()=>t,toc:()=>c});const t=JSON.parse('{"id":"channel/nextjs","title":"Nextjs \u96c6\u6210\u6307\u5357","description":"\u5728 Nextjs \u5e94\u7528\u4e2d\u96c6\u6210\u5fae\u8bed\u5ba2\u670d\u7cfb\u7edf","source":"@site/docs/channel/nextjs.md","sourceDirName":"channel","slug":"/channel/nextjs","permalink":"/docs/docs/channel/nextjs","draft":false,"unlisted":false,"editUrl":"https://github.com/bytedesk/bytedesk/docs/channel/nextjs.md","tags":[],"version":"current","sidebarPosition":5,"frontMatter":{"title":"Nextjs \u96c6\u6210\u6307\u5357","sidebar_label":"Nextjs","sidebar_position":5,"description":"\u5728 Nextjs \u5e94\u7528\u4e2d\u96c6\u6210\u5fae\u8bed\u5ba2\u670d\u7cfb\u7edf"},"sidebar":"tutorialSidebar","previous":{"title":"Angular","permalink":"/docs/docs/channel/angular"},"next":{"title":"Vanilla","permalink":"/docs/docs/channel/vanilla"}}');var i=s(5723),d=s(6246);const l={title:"Nextjs \u96c6\u6210\u6307\u5357",sidebar_label:"Nextjs",sidebar_position:5,description:"\u5728 Nextjs \u5e94\u7528\u4e2d\u96c6\u6210\u5fae\u8bed\u5ba2\u670d\u7cfb\u7edf"},a=void 0,o={},c=[{value:"\u5b89\u88c5\u5305",id:"\u5b89\u88c5\u5305",level:3},{value:"\u5bfc\u5165\u7ec4\u4ef6",id:"\u5bfc\u5165\u7ec4\u4ef6",level:3},{value:"\u914d\u7f6e\u53c2\u6570",id:"\u914d\u7f6e\u53c2\u6570",level:3},{value:"\u4f7f\u7528\u7ec4\u4ef6",id:"\u4f7f\u7528\u7ec4\u4ef6",level:3},{value:"\u53ef\u7528\u65b9\u6cd5",id:"\u53ef\u7528\u65b9\u6cd5",level:3}];function r(e){const n={a:"a",code:"code",h3:"h3",img:"img",li:"li",pre:"pre",ul:"ul",...(0,d.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.a,{href:"https://github.com/Bytedesk/bytedesk-web",children:"github"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.a,{href:"https://badge.fury.io/js/bytedesk-web",children:(0,i.jsx)(n.img,{src:"https://badge.fury.io/js/bytedesk-web.svg",alt:"npm version"})})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.a,{href:"https://www.npmjs.com/package/bytedesk-web",children:(0,i.jsx)(n.img,{src:"https://img.shields.io/npm/dm/bytedesk-web.svg?style=flat",alt:"NPM Downloads"})})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.a,{href:"https://www.npmjs.com/package/bytedesk-web",children:"npmjs"})}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"\u5b89\u88c5\u5305",children:"\u5b89\u88c5\u5305"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-bash",children:"npm install bytedesk-web\n# \u6216\nyarn add bytedesk-web\n"})}),"\n",(0,i.jsx)(n.h3,{id:"\u5bfc\u5165\u7ec4\u4ef6",children:"\u5bfc\u5165\u7ec4\u4ef6"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-bash",children:"import { BytedeskNextjs } from 'bytedesk-web/react';\nimport type { BytedeskConfig } from 'bytedesk-web';\n"})}),"\n",(0,i.jsx)(n.h3,{id:"\u914d\u7f6e\u53c2\u6570",children:"\u914d\u7f6e\u53c2\u6570"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"\u652f\u6301\u5207\u6362\u5de6\u53f3\u4fa7\u680f\uff0c\u9ed8\u8ba4\u53f3\u4fa7"}),"\n",(0,i.jsx)(n.li,{children:"\u652f\u6301\u81ea\u5b9a\u4e49\u989c\u8272\u4e3b\u9898\uff0c\u9ed8\u8ba4\u84dd\u8272"}),"\n",(0,i.jsx)(n.li,{children:"\u652f\u6301\u81ea\u5b9a\u4e49\u662f\u5426\u663e\u793a\u6c14\u6ce1\uff0c\u9ed8\u8ba4\u663e\u793a"}),"\n",(0,i.jsx)(n.li,{children:"\u652f\u6301\u81ea\u5b9a\u4e49\u56fd\u9645\u5316\u8bed\u8a00\uff0c\u9ed8\u8ba4\u4e2d\u6587"}),"\n",(0,i.jsx)(n.li,{children:"\u652f\u6301\u81ea\u5b9a\u4e49\u6df1\u8272\u6a21\u5f0f\uff0c\u9ed8\u8ba4\u6d45\u8272"}),"\n",(0,i.jsx)(n.li,{children:"\u652f\u6301\u662f\u5426\u81ea\u52a8\u5f39\u7a97\u9080\u8bf7\u5bf9\u8bdd\uff0c\u9ed8\u8ba4\u4e0d\u81ea\u52a8\u5f39\u7a97\uff0c\u5e76\u652f\u6301\u81ea\u5b9a\u4e49\u5f39\u7a97\u9080\u8bf7\u5bf9\u8bdd\u7684\u6807\u9898\u548c\u5185\u5bb9\uff0c\u5f39\u7a97\u6b21\u6570\uff0c\u65f6\u95f4\u95f4\u9694\u7b49"}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-bash",children:"const config: BytedeskConfig = {\n  placement: 'bottom-right',\n  marginBottom: 20,\n  marginSide: 20,\n  bubbleConfig: {\n    show: true,\n    icon: '\ud83d\udc4b',\n    title: 'Need help?',\n    subtitle: 'Click to chat'\n  },\n  chatConfig: {\n    org: 'df_org_uid',  // \u66ff\u6362\u4e3a\u60a8\u7684\u7ec4\u7ec7ID\n    t: \"2\",\n    sid: 'df_rt_uid'      // \u66ff\u6362\u4e3a\u60a8\u7684SID\n  }\n};\n"})}),"\n",(0,i.jsx)(n.h3,{id:"\u4f7f\u7528\u7ec4\u4ef6",children:"\u4f7f\u7528\u7ec4\u4ef6"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-bash",children:"const App = () => {\n  const handleInit = () => {\n    console.log('BytedeskNextjs initialized');\n  };\n\n  return (\n    <div>\n      <BytedeskNextjs {...config} onInit={handleInit} />\n      <button onClick={() => (window as any).bytedesk?.showChat()}>\n        \u6253\u5f00\u804a\u5929\n      </button>\n    </div>\n  );\n};\n"})}),"\n",(0,i.jsx)(n.h3,{id:"\u53ef\u7528\u65b9\u6cd5",children:"\u53ef\u7528\u65b9\u6cd5"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-bash",children:"# \u663e\u793a/\u9690\u85cf\u804a\u5929\u7a97\u53e3\n(window as any).bytedesk?.showChat() \n(window as any).bytedesk?.hideChat()\n\n# \u663e\u793a/\u9690\u85cf\u6309\u94ae\n(window as any).bytedesk?.showButton();\n(window as any).bytedesk?.hideButton();\n\n# \u663e\u793a/\u9690\u85cf\u6c14\u6ce1\u6d88\u606f\n(window as any).bytedesk?.showBubble();\n(window as any).bytedesk?.hideBubble();\n\n# \u663e\u793a/\u9690\u85cf\u9080\u8bf7\u5bf9\u8bdd\u6846\n(window as any).bytedesk?.showInviteDialog();\n(window as any).bytedesk?.hideInviteDialog();\n"})})]})}function h(e={}){const{wrapper:n}={...(0,d.R)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(r,{...e})}):r(e)}},6246:(e,n,s)=>{s.d(n,{R:()=>l,x:()=>a});var t=s(2155);const i={},d=t.createContext(i);function l(e){const n=t.useContext(d);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:l(e.components),t.createElement(d.Provider,{value:n},e.children)}}}]);