Embedding the Explorer
If you have a public variant of your graph, you can embed the Apollo Studio Explorer in a webpage that you can then provide to your graph's consumers. This enables those consumers to test out operations from your own website.
For example, here's an embedded Explorer for an Apollo example graph. Try it out!
Setup
Before you proceed, make sure you have a public variant of your graph in Apollo Studio.
- Go to Apollo Studio and open the public variant you want to use with the embedded Explorer.
Go to the variant's Explorer page.
Under the Explorer's Settings tab, find Embed Explorer and click Copy code snippet.
The following dialog appears:
Use the options in the dialog to customize the embedded Explorer's appearance and behavior to your liking.
Click Copy to copy the snippet, then paste it into your code.
See below for descriptions of options shown in the dialog, along with advanced options that aren't shown.
Embedding with a default operation
You can also open the Embed Explorer dialog from the Explorer's operation editor. Open the ••• menu next to an operation and click Embed this operation:

This configures your embedded Explorer to include all of the following automatically on load:
- The operation you selected
- Any variable values defined in your current Explorer tab that are used in the selected operation
- All headers defined in your current Explorer tab
Options
The EmbeddedExplorer
object takes an options object with the following structure (individual options are described below):
{graphRef: 'acephei@current',endpointUrl: 'https://acephei-gateway.herokuapp.com',persistExplorerState: false,initialState: {document: `query ExampleQuery {me {id}}`,variables: { 'Variable1': 'ExampleValue' },headers: { 'Header1': 'ExampleValue' },displayOptions: {showHeadersAndEnvVars: true,docsPanelState: 'open',theme: 'light',},},handleRequest: (endpointUrl, options) => {return fetch(endpointUrl, {...options,headers: {...options.headers,authorization: `token ${token}`},})},}
Top-level options
These are the top-level fields you can include in the options object you pass to new EmbeddedExplorer
:
Name / Type | Description |
---|---|
| Required. The graph ref for the public variant you want to use the embedded Explorer with. Has the format The Explorer fetches this variant's schema from Apollo Studio to populate its Documentation panel and enable code completion. If you omit this option, the Explorer does still load, but it doesn't know which schema to fetch. This prevents the Explorer from providing critical features like documentation and code completion. |
| The endpoint URL of the public variant you want to use the embedded Explorer with. This value is automatically populated in the Explorer's embed snippet. Required, unless you specify your own fetcher with the |
| If If The default value is |
| By default, the embedded Explorer uses the You might want to do this if you need to include specific headers in every request made from your embedded Explorer. |
| An object containing additional options related to the state of the embedded Explorer on page load. For supported subfields, see |
initialState
options
These are the fields you can include in the initialState
option you pass to new EmbeddedExplorer
:
Name / Type | Description |
---|---|
| A URI-encoded operation to populate in the Explorer's editor on load. If you omit this, the Explorer initially loads an example query based on your schema. If Example:
|
| A URI-encoded, serialized object containing initial variable values to populate in the Explorer on load. If provided, these variables should apply to the initial query you provide for Example:
|
| A URI-encoded, serialized object containing initial HTTP header values to populate in the Explorer on load. Example:
|
displayOptions
options
These are the fields you can include in the initialState.displayOptions
option you pass to new EmbeddedExplorer
:
Name / Type | Description |
---|---|
| If The default value is |
| If The default value is |
| If The default value is |