React
事前構築済みの React コンポーネントを使って、React アプリケーションに Docs Embed を追加する
手順
1
npm install @gitbook/embed2
import {
GitBookProvider,
GitBookFrame,
} from "@gitbook/embed/react";3
function App() {
return (
<GitBookProvider siteURL="https://docs.company.com">
<YourAppContent />
</GitBookProvider>
);
}4
function App() {
return (
<GitBookProvider siteURL="https://docs.company.com">
<div className="app">
<YourAppContent />
<GitBookFrame
visitor={{
token: 'your-jwt-token', // 任意: Adaptive Content または認証済みアクセス用
unsignedClaims: { userId: '123' } // オプション: 動的式用のカスタムクレーム
}}
/>
</div>
</GitBookProvider>
);
}5
<GitBookProvider siteURL="https://docs.company.com">
<GitBookFrame
trademark={false}
tabs={['assistant', 'search', 'docs']}
colorScheme="dark"
greeting={{ title: 'Welcome!', subtitle: 'How can I help?' }}
assistantName="Support Copilot"
closeButton={true}
suggestions={['GitBook とは何ですか?', 'どうやって始めればよいですか?']}
actions={[
{
icon: 'circle-question',
label: 'サポートに問い合わせる',
onClick: () => window.open('https://support.example.com', '_blank')
}
]}
tools={[/* ... */]}
visitor={{
token: 'your-jwt-token',
unsignedClaims: { userId: '123' }
}}
/>
</GitBookProvider>6
import { useGitBook } from "@gitbook/embed/react";
function HelpButton() {
const gitbook = useGitBook();
const frameURL = gitbook.getFrameURL({ visitor: { token: '...' } });
const handleNavigate = () => {
const iframe = document.createElement('iframe');
iframe.src = frameURL;
const frame = gitbook.createFrame(iframe);
frame.navigateToPage('/getting-started');
frame.navigateToAssistant();
frame.postUserMessage('どうやって始めればよいですか?');
};
return <button onClick={handleNavigate}>ヘルプを取得</button>;
}7
function App() {
const [showEmbed, setShowEmbed] = useState(false);
return (
<GitBookProvider siteURL="https://docs.company.com">
<button onClick={() => setShowEmbed(true)}>ヘルプを取得</button>
{showEmbed && <GitBookFrame />}
</GitBookProvider>
);
}8
import dynamic from "next/dynamic";
const GitBookProvider = dynamic(
() => import("@gitbook/embed/react").then((mod) => mod.GitBookProvider),
{ ssr: false }
);
const GitBookFrame = dynamic(
() => import("@gitbook/embed/react").then((mod) => mod.GitBookFrame),
{ ssr: false }
);Props と設定
Prop
入力します
必須
デフォルト
説明
Prop
入力します
必須
デフォルト
説明
設定オプション
tabs
tabscolorScheme
colorSchemeを設定すると
を設定するとgreeting
greetingassistantName
assistantNamecloseButton
closeButtonsuggestions
suggestionstrademark
trademarktools
toolsvisitor (認証済みアクセス)
visitor (認証済みアクセス)よくある落とし穴
最終更新
役に立ちましたか?