Content Changes and Previews

Update Live Content - Webhooks


[00:00] Alright, time for the first part of our lesson, creating webhooks in Prismic and integrating them into Vercel. This is a powerful feature that lets Prismic notify your application whenever there are updates to your content. Enabling real time responses to changes. So when a new marketing page is published, for example, your live website will be rebuilt with the new content.

[00:20] First, go to your repository, navigate to settings, and then to the webhooks section.

[00:26] In this area, you'll find an option to create a webhook. You'll be prompted to enter a name for the webhook and the URL that Prismic should notify when your updates occur.

[00:35] Now to get the appropriate URL, you'll need to head over to your Vercel account, navigate to the project you wish Prismic to notify. Once there, go to settings and then to the Git section.

[00:47] Here you'll find a deploy hooks area where you can create a new hook. Give it a name related to Prismic to keep things clear and choose the branch that you wish the hook to work with. After setting this up, Vercel will provide a unique URL for this deploy hook.

[01:03] Copy this URL and head back over to Prismic. In the web hook section, paste the copied URL into the 'URL to notify' field. You can also decide what events trigger webhook, here. For instance, we don't want a release or tag changes to trigger this webhook. Complete this process by clicking, 'Add this webhook' at the bottom of the form in Prismic.

[01:23] And there you go. You've successfully set up a web hook in Prismic and linked it to Vercel. Now, every time Mr. McDonald updates the website with content in Prismic, Vercel will automatically deploy these changes, ensuring your application is always up to date with the latest content.

Answer to continue

Quiz banner

What are webhooks?