Gatsby Cloud Docs

Add the Gatsby Preview extension to the Contentful Sidebar

See how to add the Gatsby Preview extension for faster preview updates

Add the Gatsby Preview extension to the Contentful Sidebar

Adding this extension to the Contentful sidebar will make you preview edits update much more quickly.

Prerequisites

The site must be set up with a Gatsby Preview instance. Please see “Getting Started with Gatsby Preview and Contentful”.

Contentful Marketplace

To install the sidebar extension in your contentful space via the Contentful Marketplace follow the steps below

  1. Log in to your Contentful Dashboard

  2. In a new tab, visit the Gatsby Preview extension page on the Contentful Marketplace and click “Install Now” Install extension from the Contentful Marketplace

  3. You should see a modal open titled, “Install from GitHub”, click install and you will be navigated to configure the extension Select install from GitHub

  4. Select the “Field types” you would like to use the extension on. We recommend adding all of them. Select field types

  5. 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 on the Site settings page.

  6. 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 on the Site settings. Set URLs

  7. Click Save in the top right corner to finish configuring the extension

  8. Navigate to the Content Model configuration page content model configuration page

  9. Select a content model and navigate to the “Sidebar” tab

  10. Select “Use custom sidebar” and click the “+” button to add the Gatsby Preview extension to the sidebar sidebar selection

  11. 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

  12. Navigate to a piece of content within Contentful. The sidebar will be installed and displayed to the right. button-on-sidebar-installed

You can navigate to the preview instance by clicking “Open preview”. Automatic updates are debounced 1000ms.

Manual Installation

To install the sidebar extension in your contentful space manually follow the steps below

  1. Log in to your Contentful Dashboard

  2. In the navbar, click Settings > Extensions

  3. On the extensions page, click “Add extension” and within the dropdown click “Install from Github” settings-extensions-selection

  4. 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 install-from-github-URL

  5. Select the “Field types” you would like to use the extension on. We recommend adding all of them. Select field types

  6. 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 on the Site settings page.

  7. 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 on the site settings. Set URLs

  8. Click Save in the top right corner to finish configuring the extension

  9. Navigate to the Content Model configuration page content model configuration page

  10. Select a content model and navigate to the “Sidebar” tab

  11. Select “Use custom sidebar” and click the “+” button to add the Gatsby Preview extension to the sidebar sidebar selection

  12. 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

  13. Navigate to a piece of content within Contentful. The sidebar will be installed and displayed to the right. Set URLs

You can navigate to the preview instance by clicking “Open preview”. Automatic updates are debounced 1000ms.