Create New Custom Widget

Contentstack allows you to create a custom widget in your stack to analyze your entry content and recommend ideas.

To create a custom widget, log in to your Contentstack account, and perform the following steps:

  1. Navigate to your stack and click on the “Settings” icon on the left navigation panel.
  2. Click on Extensions.
  3. On the Extensions page, click on the + New Extension button, and select Create new.
    Create_New_Custom_Widget_1_highlighted.png
  4. In the Select Extension Type window, select Custom Widget.
    Create_New_Custom_Widget_2_highlighted.png
  5. In the Create New Extension page, enter values in the fields as given below:
    1. Title: Provide a suitable title for your custom widget. This title will be visible as a widget name in the entry page.
    2. Hosting method: Select how you want to host the widget:
      • External Hosting: Select this option for externally hosted widgets. You need to provide the URL in the External hosting URL field that appears below.
      • Hosted on Contentstack: Select this option if you can write the code in the Extension source code field that appears below.

      Additional Resource: If you want to try out sample code for widget in the Extension source code field, browse through the Text Intelligence repository available on GitHub.

    3. Config Parameter: If you have used any config parameters (such as access token) in the source code, specify the value of the parameters in this field.
    4. Scope: Select for which content types this widget will be available. You can choose either All Content Types or Specific Content Types.
  6. Finally, click on Save.

Test Custom Widget Extension

When you create your custom extension to integrate with Contentstack, you can follow the steps given below to test the extension and verify if the extension is working fine before releasing it.

  1. To test the extension, first, clone the extension repo that you have built and install the dependencies. Then, edit the HTML, CSS, and JS files from the source folder.
  2. To install the required dependencies, run the following commands in the root folder:
    npm install gulp-cli -g
    npm install
  3. To create a new build for the extension, run the following command (index.html):
    gulp build
  4. Update/test the extension while developing:
    gulp watch
  5. Now, create a server using the Lite Server npm module. Before that, install the Lite Server module by using the following command:
    npm install -g lite-server
  6. Then, run the lite-server — in the root folder as follows:
    lite-server

    After running the above command, you should see the following:
    Local_server.png

    Make a note of the port no in Access URLs (the localhost URL):

  7. Next, we need to install ngrok to build secure tunnels from a public endpoint (that is the internet) to a locally running server. Issue the following command:
    npm install ngrok -g
    ngrok http <<port number>>
    You should see the following:
    ngrok_hosting.png
  8. Once you run the above command, you will get a URL. Create an extension by navigating to your stack and selecting Settings > + Add Extension > Create new.
  9. On the Select Extensions Type screen, select Custom Widget and then add the required details on the Create New Extension screen. 
  10. In the Hosting method field, select External hosting and paste the above URL in it.
  11. Save your extension and check the entry where you have added your extension.

You should see your updated changes.

API Reference

Here are the links to the API requests related to this action:

Was this article helpful?

Thanks for your feedbackSmile-icon

On This Page

^