In this tutorial we are going to show you how to embed Giphy GIFs on web pages with Scrivito. It guides you through building a Giphy widget from scratch and using a third-party service in your app.

This tutorial requires some basic knowledge of the Scrivito workflow and React. It is based on the Scrivito Example App but can be used to extend any Scrivito app.

We will implement a GiphyWidget so that editors can place random GIFs on any page simply by selecting the widget from the widget browser. Additionally, we will limit the randomness by providing a tag option. For finding GIFs, we’ll use the giphy-js-sdk-core package. So let’s include this component in the Scrivito app first.

Scrivito dependencies are managed with npm. To add the giphy-js-sdk-core package to your app, just open a terminal, go to your project directory, and execute

First things first, so let’s add the file for the new widget model class to the project at “src/Widgets/GiphyWidget/” named “GiphyWidgetClass.js”.

In this file, we make the widget model known to Scrivito by calling Scrivito.provideWidgetClass and passing the widget class name, GiphyWidget, to it. Next to this name, we pass an attributes definition to it consisting of just a single attribute, tag, that lets us restrict our image request later on.

For rendering instances of the GiphyWidget, we’ll now create a React component (and make it known to Scrivito). Inside the component, we can access the widget instance via the widget prop to fetch the widget attribute values.

As you can see, we are importing the Giphy SDK and using it for requesting an image and saving its URL to the component’s gif state prop when the component is mounted. This causes a new GIF to be requested each time the widget is inserted into the DOM. The render function outputs the Giphy image referenced in this gif state prop.

Finally, to have Scrivito use the GiphyWidgetComponent for rendering instances of the GiphyWidget, we associate the widget class with the component using Scrivito.provideComponent.

We want the tag attribute to be editable via the properties dialog of the widget instances, so let’s provide Scrivito with an editing configuration for the GiphyWidget. This can be done using Scrivito.provideEditingConfig:

We’re done!

To summarize: Every widget is comprised of

• a model defining its attributes (Scrivito.provideWidgetClass),
  
• a React component for rendering the instances (attached to the Scrivito widget class using Scrivito.provideComponent),
  
• and an editing configuration for making at least those attributes editable (Scrivito.provideEditingConfig) that cannot be accessed directly on the page.