Custom Widgets

Custom widgets let you integrate powerful functionalities into your stack that let you analyze your entry content and recommend ideas. Some examples of custom widgets are SEO tag recommendations, sentiments analysis, and language translation.

what are extension

Add Custom Widgets

There are two ways to add a custom widget to a content type:

You can create new custom widgets by writing your custom code, or you can use the prebuilt templates by modifying the given code to suit your requirements. Let’s look at both the methods in detail.

Create new custom widgets

In this guide, we will learn how to build a new custom widget from the ground up.

We have step-by-step custom widget setup guides for some popular third-party apps. The details can be found in the corresponding articles given in the list below. Or you can refer to our general guide on creating a custom widget.

Guides for specific custom widgets:

General guide on creating custom widgets:

 Let’s look at the steps involved in creating and deploying the custom widget in Contentstack.

  1. Go to Settings > Extensions.
  2. Click Add Extension and select Create new.
    Create New Extension.png
  3. From the two options, select Custom Widget.
    Select Custom Widget.png
  4. On the page that appears, enter values in the fields as given below:
    • Title: Provide a suitable title for your custom widget. This title will be visible as a widget name in the entry page.
    • Hosting method: Select how you wish to host the widget. If you select ‘External Hosting’, you need to provide the URL on which you have hosted the widget, in the URL field that appears below. If you select ‘Hosted on Contentstack’, you can write the code in the ‘Extension source code’ that appears below after selecting this method.
    • External source code: Enter your custom widget’s source code. You can find an example here.
    • Config Parameter: If you have used any config parameters (such as access token) in the source code, specify the value of the parameters in the ‘Config Parameter’ field.
      Text Intelligence Extension Edit Page.png
    • Scope: Select which content types this widget will be available for. You can choose All Content Types or Specific Content Types.
  5. Click ‘Save’. This will create your custom widget extension.

Once your custom widget is created, you will be able to use them in the entries of the specified content types.

Use prebuilt templates

Contentstack provides certain prebuilt custom widget templates, so that you can get started instantly instead of writing code. You just need to configure these templates a bit and get started.

Below is the list of prebuilt templates that Contentstack provides:

In order to use a prebuilt custom widget, follow the steps given below:

  1. Go to Settings > Extensions.
  2. Click + Add Extension and select Use prebuilt.
    Select Use Prebuilt.png
  3. Select Custom Widget from the drop-down options.
    Select Custom Widget from dropdown.png
  4. Select any prebuilt template. For example, Text Intelligence.
  5. Click Add. You will then see the Custom Widget Extension configuration page where you need to configure the following:
    • Title: You will see a predefined title. This title will be displayed as the widget name on the entry page.
    • Hosting Method: The hosting method will be set to ‘Hosted By Contentstack’ since it’s a custom widget hosted on Contentstack.
    • Extension Source Code: You will find the source code for the custom widget. You can make changes to this code as per your requirements.
    • Config Parameters: If you have used any config parameters in the source provide, provide the value for the parameters in this field.
    • Scope: Select which content types this widget will be available for. You can choose All Content Types or Specific Content Types.
  6. Click on 'Save'. This creates your Custom Widget.

Use Custom Widgets in Entries

Once you have added your custom widget, you can use it in your entries of selected content type(s). Let’s look at the steps involved in using the custom widget.

  1. Click on the content type for which you have enabled the custom widget.
    Select the content type.png
  2. Create a new entry. Enter the relevant details in the fields and click ‘Save’. As soon as you save your entry, you will see the ‘Widgets’ drop-down at the top.
    Widgets dropdown.png
  3. Select the widget that you want to use in your entry. For example, 'Text Intelligence'. The selected widget expands on the sidebar.
    Text Intelligence Sidebar.png
  4. Run it to get the results.
    Text Intelligence Sidebar Result.png

Once done using the widget, click on the close (x) button.

Limitations

The limitations to using custom widgets are as follows:

  • The maximum size of an custom widget file cannot exceed 500 KB
  • The title you provide to an custom widget cannot exceed 256 characters
  • You can install maximum 50 extensions (including custom fields and custom widgets) in a stack
  • The size of the configuration file of a custom widget cannot exceed 10 KB
  • The maximum number of content types that can be added in the scope of a custom widget is 20
  • Internally as well externally hosted custom widgets are not supported on Internet Explorer and Microsoft Edge as these browsers lack support for the <iframe> srcdoc attribute. Read more.

Helpful links

Was this article helpful?
top-arrow