You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Drop page-context scope from docs; document webframe navigate
Per review, the current page is exposed to webframes without a dedicated scope, so remove site:page:context from the scopes list and reword the interactivity and reference docs (page is always available; visitor claims still need site:visitor:claims). Also document the @webframe.navigate action for navigating to another page in the site.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
In addition to the values you bind through the `data` prop, GitBook injects contextual information about the current site into the webframe `state`, as long as your integration requests the matching [scope](../configurations.md#scopes):
96
+
GitBook injects contextual information about the current site into the webframe `state`, alongside the values you bind through the `data` prop:
97
97
98
-
-`state.page` — the current page as `{ id, path, title }`, when the integration has the `site:page:context` scope.
99
-
-`state.visitor` — the visitor claims, when the integration has the `site:visitor:claims` scope.
98
+
-`state.page` — the current page as `{ id, path, title }`. Always available.
99
+
-`state.visitor` — the visitor claims, when the integration has the `site:visitor:claims`[scope](../configurations.md#scopes).
100
100
101
-
This context is delivered client-side through the same `message` event as your bound `data`, so requesting it does not change how the integration block is cached:
101
+
This context is delivered client-side through the same `message` event as your bound `data`, so it does not change how the integration block is cached:
102
102
103
103
```js
104
104
window.addEventListener("message", (event) => {
105
105
conststate=event.data?.state;
106
106
if (!state) return;
107
107
108
-
// Current page — only present when the integration has the `site:page:context` scope.
109
108
if (state.page) {
110
109
const { id, path, title } =state.page;
111
110
// e.g. build a link to a sibling page from `path`
112
111
}
113
112
});
114
113
```
115
114
115
+
## Navigating to another page
116
+
117
+
A webframe can navigate the reader to another page in the site by posting a `@webframe.navigate` action with the target page `path` (the same format as `state.page.path`):
118
+
119
+
```js
120
+
window.parent.postMessage({
121
+
action: {
122
+
action:'@webframe.navigate',
123
+
path:'guides/getting-started',
124
+
},
125
+
}, '*');
126
+
```
127
+
128
+
GitBook resolves the path within the current space, so navigation always stays inside the site.
129
+
116
130
## Webframes and actions
117
131
118
132
Webframes are powerful elements to integrate in GitBook external applications or complete UI. Passing data to the webframe can be done using the `data` prop. But the webframe also needs to be able to communicate data back to the top component. It can be achieved using the `window.postMessage`:
Copy file name to clipboardExpand all lines: docs/integrations/development/contentkit/reference.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -264,7 +264,7 @@ If you need a copy button, only add it when your integration has a supported way
264
264
|`buttons`|`Array<Button>`| Overlay buttons |
265
265
|`data`|`Record<string, string>`| State dependencies |
266
266
267
-
The `data` values, together with GitBook-provided context, reach the frame through the `message` event as `event.data.state`. GitBook reserves two keys in `state`: `page` (`{ id, path, title }` of the current page, with the `site:page:context` scope) and `visitor` (visitor claims, with the `site:visitor:claims` scope). See [Interactivity](../../contentkit/interactivity.md#page-and-visitor-context).
267
+
The `data` values, together with GitBook-provided context, reach the frame through the `message` event as `event.data.state`. GitBook reserves two keys in `state`: `page` (`{ id, path, title }` of the current page, always available) and `visitor` (visitor claims, with the `site:visitor:claims` scope). A webframe can also navigate the reader to another page by posting a `@webframe.navigate` action. See [Interactivity](../../contentkit/interactivity.md#page-and-visitor-context).
In addition to the values you bind through the `data` prop, GitBook injects contextual information about the current site into the webframe `state`, as long as your integration requests the matching [scope](../configurations.md#scopes):
100
+
GitBook injects contextual information about the current site into the webframe `state`, alongside the values you bind through the `data` prop:
101
101
102
-
-`state.page` — the current page as `{ id, path, title }`, when the integration has the `site:page:context` scope.
103
-
-`state.visitor` — the visitor claims, when the integration has the `site:visitor:claims` scope.
102
+
-`state.page` — the current page as `{ id, path, title }`. Always available.
103
+
-`state.visitor` — the visitor claims, when the integration has the `site:visitor:claims`[scope](../configurations.md#scopes).
104
104
105
-
This context is delivered client-side through the same `message` event as your bound `data`, so requesting it does not change how the integration block is cached:
105
+
This context is delivered client-side through the same `message` event as your bound `data`, so it does not change how the integration block is cached:
106
106
107
107
```js
108
108
window.addEventListener("message", (event) => {
109
109
conststate=event.data?.state;
110
110
if (!state) return;
111
111
112
-
// Current page — only present when the integration has the `site:page:context` scope.
113
112
if (state.page) {
114
113
const { id, path, title } =state.page;
115
114
// e.g. build a link to a sibling page from `path`
116
115
}
117
116
});
118
117
```
119
118
119
+
### Navigating to another page
120
+
121
+
A webframe can navigate the reader to another page in the site by posting a `@webframe.navigate` action with the target page `path` (the same format as `state.page.path`):
122
+
123
+
```js
124
+
window.parent.postMessage({
125
+
action: {
126
+
action:'@webframe.navigate',
127
+
path:'guides/getting-started',
128
+
},
129
+
}, '*');
130
+
```
131
+
132
+
GitBook resolves the path within the current space, so navigation always stays inside the site.
133
+
120
134
### Editable blocks
121
135
122
136
Some blocks might be static or only generated from link unfurling, but most blocks are designed to be editable by the user. Editable means that the user can interact with the blocks to change its properties.
0 commit comments