events
Use event hooks to get notified about various user events in your API reference documentation. This feature provides access to in-page analytics.
Each event provides information about a specific event as well as some basic information:
eventType: string; resource: string; action: string; operationId?: string; operationPath: string; operationHttpVerb: string; operationSummary?: string;
Options
Option | Type | Description |
---|---|---|
codeSamplesLanguageSwitch | function | Called when the user switches to a different language tab in the code samples section. Provides information about the selected language (lang) and an optional example ID (exampleId). |
tryItOpen | function | Triggered when the user opens the “Try it” panel. Captures actions like opening the panel or navigating using the override links. |
targetServerSwitch | function | Invoked when the user changes the target server selection. Provides the updated server URL (serverUrl). |
tryItSent | function | Called when the user clicks the “Send” button in the “Try it” panel. Captures whether the request was successfully sent (Sent) or if there was a validation failure (ValidationFailed). |
panelToggle | function | Records when a user expands or collapses any panel in the Reference docs UI (for example, request, responses, request samples, or response samples). Includes details about the panel type (panelType) and its state (expanded or collapsed). |
codeSamplesCopy | function | Triggered when a user copies request or response samples within the Reference docs UI. Captures details such as the sample type (request or responses), example ID (if applicable), code sample language (lang ), and label (label ). |
Examples
The following example show the usage of the events
configuration:
redocly.yaml
openapi: events: codeSamplesLanguageSwitch: '({ lang, label, exampleId}) => { console.log(`Switched to language: ${lang}`); }' tryItOpen: '() => { console.log(`Try it panel opened`); }' targetServerSwitch: '({ serverUrl }) => { console.log(`Switched to server: ${serverUrl}`); }'
Related options
- openapi - Learn more about using
openapi
configuration.