Adding this extension to the Contentful sidebar will make your preview edits update faster.
The site must be set up with a Gatsby Preview instance. Please see “Getting Started with Gatsby Preview and Contentful”.
There are two ways to install the extension, through the Contentful Marketplace and manually. Both instructions are listed below.
To install the sidebar extension in your contentful space via the Contentful Marketplace follow the steps below.
Log in to your Contentful Dashboard
In a new tab, visit the Gatsby Preview extension page on the Contentful Marketplace and click “Install Now”.
You should see a modal open titled, “Install from GitHub”, click install and you will be navigated to configure the extension.
Select the “Field types” you would like to use the extension on. We recommend adding all of them.
Fill in the input labeled “The url of your Gatsby Preview instance” with the URL of your Gatsby preview instance. You can find this on ‘/dashboard/sites’ or in the settings for the Preview instance.
Fill in the input labeled “The url of the webhook to rebuild your Gatsby Preview instance” with the webhook URL of your Gatsby preview instance. You can find this in the settings for the Preview instance.
(Optional) Fill in the input labeled “Optional Authentication token for private Gatsby Cloud instances” with an
authToken. This is necessary for Gatsby Preview instances that require the user to login before they can view the Preview.
Click Save in the top right corner to finish configuring the extension.
Navigate to the Content Model configuration page.
Select a content model and navigate to the “Sidebar” tab.
Select “Use custom sidebar” and click the “+” button to add the Gatsby Preview extension to the sidebar.
Click save to finalize the configuration of the Content Model. You can add the sidebar to each content model you would like to update in your preview.
You can navigate to the preview instance by clicking “Open preview”. Automatic updates are debounced 1000ms.
To install the sidebar extension in your contentful space manually, follow the steps below:
Log in to your Contentful Dashboard.
In the navbar, click Settings > Extensions.
On the extensions page, click “Add extension” and within the dropdown click “Install from GitHub”.
You should see a modal open titled, “Install from GitHub”. In the URL input paste https://github.com/contentful/extensions/blob/master/samples/gatsby-preview/extension.json, and click install. You will be navigated to configure the extension.
Follow steps 5 through 13 from the Installing via Contentful Marketplace instructions above.