Boosting Productivity with Strapi Plugins
Tags: strapi, plugins, headlesscms, productivity
Published: 2022-09-14 08:29:59

_This article will explore the configuration and usage of five Strapi plugins that will help you boost your productivity._

**Author: Popoola Temitope**

Improving productivity has become a necessary thing for small and big businesses today, as well as for developers too. In headless CMS like Strapi, there are many pre-written plugins that make websites workflow easier and faster. Using plugins to customize your Strapi website or blog is a great way to enhance your website's performance, functionalities, and search engine optimization (SEO), just to mention a few.
 
For instance, if you want to allow your users to be able to use the Google authentication method or magic link verification on your website, using the GoogleAuth plugin or Passwordless plugin can help in achieving this without taking much time to integrate. 

All you have to do is to configure the plugin from your Strapi dashboard. The Strapi marketplace contains collections of plugins that are not limited to the security level only. They also include other plugins that can be used to analyze, customize, and manage your content effectively.

In this tutorial, we are going to explore five Strapi plugins. We'll look at the functions when needed and how we can use each of the plugins in our applications. But before we get started, if you are new to Strapi CMS or Strapi plugins, let's look at what Strapi is and what Strapi plugins are.

## What Is Strapi?

[Strapi is an open-source headless CMS that is based on Node.js for building fast and dynamic websites.](http://www.strapi.io) It provides an easy-to-use dashboard for managing and delivering content to the frontend via an API call.

With Strapi, the backend is separated from the frontend using Jamstack technology. This allows your website to be robotic such that when there is an issue at the frontend, it does not affect the backend.

## Strapi Installation
Are you new to Strapi? If yes, to get started with Strapi, you'll need to install the following programs on your computer.:

-  Node.js V14 or V12
-  NPM or Yarn

 Once you have the above software installed, the next step is to install Strapi. You can install Strapi using any of the commands below.
 
For npm, run:
```bash
    npx create-strapi-app survey-app --quickstart
```
For yarn, run:
```bash
    yarn create strapi-app survey-app --quickstart
```
Once the installation is completed, the Strapi app will automatically be launched in the browser. Register and you will be redirected to your dashboard.

![Strapi dashboard](https://lh6.googleusercontent.com/jaMDreqnZfsdPoB1qDcCEbEnT-GcVYkf_pZwSZHotdZOfQy1xmtc2b90Irb_CCevdQY-F9zsA7BM9TVin-UgFjXEr_hoJ1UI3vYZA3L2wWtkLYH6xinwlZPzkxRyzaHi_th1HMbS7ufg6CdlqM4yHyI)

## Plugins for Boosting Productivity

Strapi headless CMS allows developers to add functionality to an application using pre-written plugins, thereby speeding up the application development process. 

Let's consider developing an application without using plugins. It means that you have to create every single feature from scratch. 

Similarly, managing content without using appropriate plugins will have a significant impact on the quality of your website content. The [Strapi marketplace](https://market.strapi.io/) contains a collection of plugins that can be used to do the following:
-  Customize your website,
-  Improve your website's security,
- Enhance website accessibility, and
- Ease the development process by adding more functionality. 

Visit the [Strapi marketplace](https://market.strapi.io/) to browse the list of available plugins. From your dashboard menu, click on the marketplace.
      

![Strapi Marketplace](https://paper-attachments.dropbox.com/s_2B6F88F750E91D8E3E82E4C077412D8865DAED883110FFF50777CB925E72AC1F_1659489460615_MAR.PNG)


Now, let's demonstrate how to configure and use some plugins for improving productivity in a Strapi application.

##  Todo Plugin
The [*Todo* plugin](https://market.strapi.io/plugins/strapi-plugin-todo) allows admin users to easily keep track of content progress. It adds a list of to-do tasks next to the content on the editing page. An admin user can add a list of tasks that are expected to be completed by the authors. The editor can mark each to-do task as completed or not. The super admin user can decide whether to publish the content or not based on the completed tasks.

### Installation and Configuration
Run the command below to install the *Todo* plugin:
```bash
    npm install @_sh/strapi-plugin-todo
    npm run build 
    npm run develop
```
Or
```bash
    yarn add @_sh/strapi-plugin-todo
    yarn build
    yarn develop
```
## Adding To-Do Tasks to Content
Once the installation is complete, navigate to **Content Manager** on the Strapi dashboard. Click on any **collection type,** and then click on **Edit** on any content.

![How to Use Todo Plugin](https://lh3.googleusercontent.com/XWLl7zK8Fzqmp1tvdGIWp4UCEQx_36wk0MREQ_EIFa-OkKXZ7c3U3BWVdWwX1xmFzoiUBxZVvGOVHFhA4NDrCNseJo979omWZSgx2MLejKuT21vC3iyjIBfXHnhEAtz06V-WrOMsfpee7dEj-krQkW8)

You can add tasks to the to-do list by clicking "Add todo" in the *TODO* section, which is located on the right side, below the *Locales* section.

![Adding new todo](https://lh3.googleusercontent.com/kdhzgjPVD692mWUT1-pMZvrJv-57dFDz8_m8o0WBEvtHfjA2wHU5Nidtvvr94jsQ7I-A8WwQWba9ej0JXPH57SAnIGLe8OMwB12lf8eJS3o0k6OKCjNQ9iw3cgiIJY39G7q_GmflMyQMDgwrznLTYpY)

Then, enter the task and click Save. When a task is done, mark it as completed by checking the *task* box as shown below.

![How to Use Todo Plugin](https://lh3.googleusercontent.com/oUrAdXJB9vxCik7QDj8y9KpsxNhxJA-1qel4uQ2OhbjJ4uVpdSASrH3_lBO24iihHO3e4C4k3K-HLprjn8hTDUMWHPCSCq-TLAU208ykhvlP6DzJcfDKsgl3gKvv2YRHNX-yMdM-AuOdg6hFrmzBFC0)

## Mux Video Uploader Plugin
[Mux Video Uploader](https://market.strapi.io/plugins/strapi-plugin-mux-video-uploader) is a Strapi plugin for managing videos on your website. This plugin makes it easy to upload videos from the Strapi dashboard to Mux, and all the video management is done from the Strapi dashboard. With this plugin, you can upload content via URL or file upload. It also supports audio uploading too.

### Installation
Run the following commands to install the mux video upload plugin:
```bash
    npm i strapi-plugin-mux-video-uploader@latest
    npm run build 
    npm run develop
```
Or
```bash
    yarn add strapi-plugin-mux-video-uploader@latest
    yarn build
    yarn develop
```

### Configuration
Now that we have installed the Mux video upload plugin, let's ahead and configure it. Create a new Mux account or login to your mux.com dashboard. On the side bar, navigate through **settings** >**API Access**.

![how to configure Mux Video Uploader Plugin](https://lh5.googleusercontent.com/jaVGyJ64VF7h8IPMrycQGDBseAD0Hp_WH5DNrZTs2oa9T6zcEUIGrxlEkJBNDBMnTBJZV-7UieO-fwA4UN8cCkHGttqJqgWaEVOhRDTKebN-BvqH-Qzsq0rqZSam8_4-1_IrnD3BM2HujkrcLuUgyOA)

Once the form is filled out, click on **Generate Token**. This will generate both the **access token ID** and **secret key**. Copy them.

![how to configure Mux Video Uploader Plugin](https://lh6.googleusercontent.com/utpCtBhVGx7p7qMAScRdJbx8nQrZtB02qDuw2ccAVYHBnT-JVICo7P9AE6CcTZSc3yVCcTakk0SzVRex-Gd1BnlxLpfZDIn178-v6lVgt4Mam1z1oVPplhlpeQmuVyl6VHfrfhyva3QU3a2WKFxG1u8)

Next, go back to your Mux dashboard and navigate through **settings** >**webhooks**. Click on "**Create new webhook."** For the webhook URL, use `[https://localhost:1337/mux-video-uploader/webhook-handler](https://localhost:1337/mux-video-uploader/webhook-handler)` and click on "Create Webhook." After creating the webhook, copy its **SIGNING SECRET.**

![how to configure Mux Video Uploader Plugin](https://lh3.googleusercontent.com/3MPvlrazZV-OJHykHJ36Zp6gsEhNPnCyj6kxaM8qp9lRJDSi3hXkNQKC7GRzo2Jq5n1551i7Goi_2VrWv8C7tpghLUfEu82hz0kFoD3jmKdqSQLESB5f1D44bIpPU_Ug1M_63669jDb0q9DXzUCU-D0)

On the Strapi dashboard, click **Mux Video Uploader** on the sidebar and then click on **Webhook Settings**. Fill the appropriate settings and click on save.

![how to configure Mux Video Uploader Plugin](https://lh5.googleusercontent.com/k41SqagNZcYUrHrl1_6Tr10HBrD8zm_aBfB_14I9UVo-xn1HIm3UT6B4q1zrkmYa4hmZxGYjBE0UGP-o7Co-RTClpBmU0B4ic9z8-6tVZFls4nV97tTcEldNaBxfnMnPLvEPPUl4XzXO8eupdo34TSk)

You can upload as many videos as you want by clicking on **New Upload**. After selecting the video, click on **Save**.

![uploading video with Mux Video Uploader Plugin](https://lh4.googleusercontent.com/ikpqoWTj2Pm4d_EHe84anYO3XGPBdLAAvDdwVI-DFNi10PLXzs86ZWejVpxQNgbjVmyBPL9BjGJ4fIuICAKnj_se1-z1cJdhussRNpqe_IWPCzci3H4NYLawLDwgkBfUsXfkDFEGGqaxMpEFc_AA_WU)

## Publisher Plugin
Automating your content publishing process gives your website more flexibility. With the Strapi [Publisher plugin](https://market.strapi.io/plugins/strapi-plugin-publisher), you can easily schedule publishing and unpublishing dates and times for your content. 

With this plugin, you can automate periodic content on your website. Whenever the publishing date is reached, the content will be made available online, and vice versa for unpublishing. Once the set time is reached, it’ll automatically change to a draft article. This plugin feature helps in improving and enhancing content workflow.   

### Installation
To add a publisher plugin to your project, run the following commands:
```bash
    npm install strapi-plugin-plubisher
    npm run build 
    npm run develop
```
Or
```bash
    yarn add strapi-plugin-plubisher
    yarn build
    yarn develop
```

### Using Publisher
Once you have successfully installed the plugin, add the publish/unpublish date(s) from the left side when editing your content as shown below.

![How to use Publisher Plugin](https://lh5.googleusercontent.com/bSFE2DLEv1UwJLeZYYXxuOta1qtNnWl4fj8cIHaXif4k2SH-askOxHdhi-0PKVUbGCiDVK90tDZL1MkNSZY90lU-Vxuvk40Bs9anL6SA8xFkiiFnxiW3Fg5J_Pee4W9i64Oh_IHteDqjqj1BSjDGLPc)


To schedule publishing or unpublish, click on "Add publish date" or "Add unpublish date" respectively, then select the date and time. Now, click on "Save." You can edit or publish/unpublish the date at any time.

![setting publish/unpublish date](https://lh3.googleusercontent.com/HTt-QNfv3g1ZZ4YCLOzVF1nVZZO2733izPLjumoTHRrKOJCU8x_Vj2GoQiWiIVCCa27IIqbde7tkvUTy4tE01ghWfOBt-YZ-xZlpvLzri2e89TjAZJGoUG0sL3yTuLQF6DLls6oDgeoAtVeRMwQQpQ4)

## GoogleAuth Plugin
The Strapi [GoogleAuth plugin](https://market.strapi.io/plugins/strapi-google-auth) is an easy-to-use cross-browser authentication method that enables users' authentication using their Google account. With the GoogleAuth plugin, you can implement Google authentication on your registration and login pages without the users having to retype their email, username, and password every time they access your website.

### Installation and Configuration
To use the GoogleAuth plugin in your application, run the following commands on the terminal:
```bash
    npm install strapi-google-auth
    npm run build 
    npm run develop
```
Or
```bash
    yarn add strapi-google-auth
    yarn build
    yarn develop
```
Once the installation is completed, the GoogleAuth plugin will appear on your menu dashboard under plugins. To configure the plugin, click on GoogleAuth. 

![GoogleAuth Plugin](https://lh3.googleusercontent.com/MHY9kZNCsjhYeXEbY51sNKwyEigN0J1BVV5e2S3o_xY0IU1H15u8bNs4LxV9VJJoWxf3mRkn1gZGJrAZvwpXCtmNTr-LqdraaZrCQnVQUpzv1rL8h8wtwx_5oqGCTOGoWz2Ge7sUTmepF3TcRXZ3n6E)

To add your Google Authenticator details, click on **Create Google Project**. It will open the Google Cloud Console. Click on "**Create a new project"** and navigate through  **APIs & Services** -> **OAuth** **consent screen** from the sidebar menu, then follow the prompt steps to configure the app.

![GoogleAuth Plugin configuration](https://lh6.googleusercontent.com/l-Qj9JiFw25baPR9bKEP2jWsyVkMcP0j05w8YsXMHTW75fAtbO2rIv0vtRhpy5tpeBBc6fmRP1als8JGGQV3nOWXZ_LLWx6oHnGI3st-xFUPXvcPY9JwdM8vBM2fneXgHx3V7TVOQnhejdWOa8-6te4)

Once you are done with the above step, navigate through  **APIs & Services** -> **credentials**. Next, click on create credentials -> OAuth Client ID and fill in the details and save.

![GoogleAuth Plugin configuration](https://lh5.googleusercontent.com/tHUacsxYuYxTPsG36KI-Zt3QvE3NyBUmXRp7VoFosbKUjfp0KteQ1AvDzJHW29U7hJsj7i-zAWyIBnh2xC84gx4wR5fT31h29MoojdKKSi0kEpr5qb3zfse5bKCK9WRvI2s-1zZW1leIrvjTMfgTbUA)

Now, copy the **CLIENT_ID**, **CLIENT_SECRET**, **REDIRECT URL,** and the **Scopes** into the plugin page of Strapi and save it.

![GoogleAuth Plugin configuration](https://lh4.googleusercontent.com/enWgg-aAl50zYCGfehNL8ydMwDoiN9t5l4Q0ABT0cKZzxfvOurc9SuxCUjRXoFK4ReTrWTBS6htnLIA278L-xzrHSP2vQATSWVBvj1Cr3ec3XA4KGEy0g35fC_rohTt4Fh8HNgr0ry2R1losB8_U03o)

### Implementing
To add Google authentication to the frontend, follow the steps below:

**Step 1:**
Redirect your user to [http://STRAPI_BACKEND_URL/strapi-google-auth/init](http://localhost:1337/strapi-google-auth/init). Once the user is been authorized, it will redirect the user back to the redirect URL mentioned in the Google project console [https://redirect_url/?code=REDIRECTION_AUTH_CODE](https://redirect_url/?code=REDIRECTION_AUTH_CODE). 

**Step 2:**
Next, make a POST request to `STRAPI_BACKEND_URL/strapi-google-auth/user-profile` and send the following along with the request to generate a Google `TOKEN` to view the user's details.
```
    data: {
          code:REDIRECTION_AUTH_CODE
         }
```
 
## Notes Plugin 
[Strapi Notes plugin](https://market.strapi.io/plugins/strapi-plugin-notes) is an important plugin, especially in content workflow. It's designed to help you organize your content and provide additional useful resources for authors. For article-publishing companies, editors can add outlines and other resources as a note. This helps in guiding the authors to deliver quality content.

### Installation 
To install the notes plugin, run the following commands:
```bash
    npm install strapi-plugin-notes
    npm run build 
    npm run develop
```
Or
```
    yarn add strapi-plugin-notes
    yarn build
    yarn develop
```

### Adding Notes to Content
During content creation or editing, you can add, edit, or delete notes. The **notes** section is below the **locales** section, which is located on the right side of the content editing page as shown below.

![Notes Plugin](https://lh3.googleusercontent.com/_oCi8pBzv3FcBW1WlIqhH7jgqn2niPrAGX1GMcFYcHRPK0uUy_gexThLmOpk254mmHmDCJVfu5LHxR4-uanB6CY6GYdnYTWjVOoY_nMkUGOTKB0ursq3bMiIgeja7H1oAmj3f4N7PaF-k5XJNCgeT54)
o
To add a note, click on **Add**, then enter the note title and the note content before saving it. To view or edit notes, click on the note.

![adding new Notes](https://lh3.googleusercontent.com/iHMV2kGhDB6VM5XuuVD27uaWmxFF-ENJaKyMHYVd6qNKi6ypj87V5ZpD4JN3T2vBFXJvUpLjwEMNp5j59gBkBBK3c1g5gD3UkvuKhHx58gjNiFJ2Yt7fhdfLONk7a3sotf6CKkYNVO_0bDZd-LFpLVc)

## Conclusion

Strapi marketplace contains over seventy plugins that you can use for boosting and enhancing your website's performance. Productivity is the core of business success. If you do more in less time, you can spend more time on things that really matter to your business.

In this tutorial, we looked at how to use plugins to boost productivity in a Strapi application. We demonstrated how to configure and use some plugins too. 

I hope you found this article helpful. If you need more information, you can visit [Strapi marketplace](https://market.strapi.io/) or [Strapi marketplace documentation](https://docs.strapi.io/user-docs/latest/plugins/installing-plugins-via-marketplace.html#installing-marketplace-plugins-and-providers) for more information.