Skip to content

Better support, fewer sighs. Grab a flat 20% discount on Fluent Support

Fluent Support logo
  • FeaturesExpand
    • All Features

      • Ticketing
      • Setting Up & Migration
      • Business
      • Agents
      • Power Usage

      MAKE YOUR SUPPORT BETTER

      AI-Powered

      Fluent Support + OpenAI = Faster replies, polished tone, better conversations

      Automation

      Automate support tasks with triggers, conditions, and predefined actions.

      Migration

      Migrate your helpdesk data to Fluent Support quickly, safely, and with total ease.

      Power user

      • Rest API
      • Incoming Webhook
      • Outgoing Webhook
      • Classes
      • Devs Documentation
      • Reports & Analytics

      WPManageNinja Contact Us Create a Support Ticket Join Our Community
  • IntegrationsExpand
    • All Integrations

      Explore Integrations

      Unlock Fluent Support’s full potential with LMS, CRM, eCommerce integrations, and more.

      Fluent Suite Integration

      Fastest Form Builder Plugin for WordPress

      Email Marketing Automation Plugin

      Fastest WordPress Community Plugin

      WordPress Project Management Plugin

      WordPress payment and donation plugin

      Email Delivery Plugin for WordPress

      A New Era of eCommerce with WordPress (Coming Soon)

      COMMUNICATION APPS

      WhatsApp

      Telegram

      Slack

      Discord

      Third-party Automation

      n8n

      ZohoFlow

      SureTriggers

      See All


      WPManageNinja Contact Us Create a Support Ticket Join Our Community
  • Pricing
  • ResourcesExpand
    • Learn & Progress

      All Blogs

      What's New

      Change log

      Customer Support

      E-commerce

      Small Business

      get inspired

      Women in Support

      Stories and insights of women shaping the support industry.

      Build Support Team

      Tips and strategies to hire, train, and scale your support team.

      Top IT Helpdesk

      Comparisons and insights on today’s leading IT helpdesk tools.

      Comic: Flashback

      Illustrated throwbacks showing Fluent Support’s journey and stories.

      Statistics

      Latest reports & statistics of the customer service industry.

      Free vs Pro

      A breakdown of features and differences between our free and pro plans.

      xcloud-logo

      Success Stories

      Customers who turned challenges into wins with Fluent Support

      Documentation

      Instructions to help you set up, customize, and get the most out of Fluent Support.


      WPManageNinja Contact Us Create a Support Ticket Join Our Community
  • Pricing Calculator
  • Account
Buy Now

Better support, fewer sighs. Grab a flat 20% discount on Fluent Support

Fluent Support logo

Getting Started

  • How to Install & Activate Fluent Support
  • How to Install & Activate Fluent Support PRO
  • Deactivate Or Delete the Fluent Support

Business Management

  • Create Business Inbox Initially
  • Adding Multiple Business Inboxes
  • Creating Products to Categorize Tickets
  • Setup Customer Support Portal With Global Settings
  • Adding Support Staff/Agents
  • View & Manage Ticket Entries
  • File Attachment Regulations
  • Permission Management for Agents
  • Adding a Custom Ticket Submission Form
  • Ticket Form Customization
  • File Upload Integrations
  • Web-Based Settings In Business Inbox
  • Web and Email-Based Settings In Business Inbox
  • Customer Support Portal Dashboard

Productivity

  • Ticket Tags (Custom Tags)
  • Saved (Templated) Replies
  • Filtering, Sorting & Searching Tickets
  • Agent Specific Tickets (My Tickets)
  • Internal Notes
  • Bulk Action in Tickets
  • Creating A Ticket On Behalf Of The Customer
  • Custom Fields
  • Outgoing Webhook
  • Merge Tickets
  • Bookmark Tickets
  • Shortcodes
  • Split Reply in New Tickets
  • Frontend Agent Portal
  • Automatic Ticket Closing
  • Close Ticket Silently
  • Advanced Filter Fluent Support
  • Add More Attachments Type
  • Add and Customize Customer Portal using Gutenberg Block
  • Advanced Filter Save Search Feature
  • Agent Time Tracking
  • Navigate With the Keyboard Shortcut 

Activities & Reports

  • Dashboard Overview
  • Reports and Stats
  • Overall Activities
  • Dynamic Dashboard

Ticket Importer

  • Ticket Importer
  • HelpScout Ticket Migrator
  • Freshdesk (Freshworks) Ticket Migrator
  • Zendesk Ticket Migrator

Email Management

  • Managing Email Notifications
  • Auto-forward From Google Workspace (G Suite) to FluentSupport
  • Email Piping For Email-Based Support Tickets
  • Forward From Microsoft 365 Outlook Web Access (OWA)
  • Change Amazon Lambda Cloud Processing Service for Email Piping

Workflow/Automation

  • Workflows & Automations
  • Manual Workflow
  • Automatic Workflow

Ticket Management using Third Parties

  • Managing Tickets Using Slack
  • Managing Tickets using Telegram
  • Managing Tickets Using Discord
  • Managing Tickets Using WhatsApp

Integrations

  • FluentCRM Integration
  • Easy Digital Downloads (EDD) Integration
  • LifterLMS Integration
  • LearnDash Integration
  • WooCommerce Integration
  • TutorLMS Integration
  • BuddyBoss Integration
  • WishList Member Integration
  • Restrict Content Pro Integration
  • Paid Membership Pro Integration
  • Fluent Forms Integration
  • Incoming Webhook
  • BetterDocs Integration
  • LearnPress Integration
  • Google reCAPTCHA Integration
  • Google Drive Integration
  • Dropbox Integration
  • MemberPress Integration
  • FluentBoards Integrations
  • Integration Statuses
  • SureTriggers Integration  
  • FluentCommunity Integration

AI-Powered Assistance

  • OpenAI Integration With Fluent Support
  • Features Of OpenAI Integration In Fluent Support

Change Log

  • Change Log
View Categories
  • Home
  • Docs
  • Productivity
  • Add and Customize Customer Portal using Gutenberg Block

Add and Customize Customer Portal using Gutenberg Block

FluentSupport (Customer Portal) Gutenberg Block empowers you to create a customized customer portal. You can design the customer portal precisely according to your preferences. To know the whole process, follow the steps accordingly.

Add Customer Portal #

To learn how to add the FluentSupport (Customer Portal) on your WordPress site, follow the steps with screenshots below —

Go to the Pages from the WordPress Dashboard, open the desired page where you want to add your Customer Support Portal1 and click the Edit button.

If you want to add your Customer Support Portal to a new page, click the Add New Page button in the top left corner and create a new page.

WordPress dashboard - Pages

Once you are on the Page Editor, add a FluentSupport (Customer Portal) Gutenberg Block to your desired page as shown in the GIF below.

You can also add FluentSupport (Customer Portal) in Posts on your WordPress Site by following the process shown below.

Customize Customer Portal #

To learn how to customize the FluentSupport (Customer Portal), follow the steps with the screenshots & GIFs below —

Once you’ve added the block, your Customer Portal will appear and you can personalize its design according to your needs.

First, click any place of the portal randomly and it will take you to the Block page in the right sidebar where all the available customization settings will appear. These are:

  1. Custom Page Style
  2. General Style Settings
  3. Advanced

All three major customization settings mentioned above are briefly explained below:

1. Custom Page Style #

Once you click the Arrow Icon right next to the Custom Page Style, you will get the following settings option.

  1. Log Out Button: Here, you can see a Three-Dot Icon (which includes the Log Out option) next to the + Create Ticket button in the Customer Portal. Using this setting, you can make the button Visible or Hidden anytime by selecting Show or Hide from the dropdown menu.

2. General Style Settings #

Once you click the Arrow Icon right next to the General Style Settings, you will get the following settings option.

A. Select MailBox: Here, you can specify the Business Inbox whose tickets you want to display in the customer portal. To learn more about Business Inbox, read this Documentation.

B. Border Radius: Using this option you can customize the border radius of the customer portal through the slider or by entering a specific value in the input box.

C. Primary Button Style: Now, you can customize the appearance of the Primary Button by changing its Text and Background color. You can also reset them anytime using the Three-dot Icon on the right side.

D. Secondary Button Style: Also, you can customize the appearance of the Secondary Button by changing its Text and Background color. You can reset them anytime using the Three-dot Icon on the right side.

Customize the Ticket Portal #

Once you click the + Create Ticket button in the Customer Portal, you will be redirected to the Ticket Portal to submit your query to the support agents. You can also Customize the Ticket Portal using the following settings options.

a. Custom Page Style: Using this option you can customize the input fields’ border radius of the ticket portal through the slider or by entering a specific value in the input box.

b. Secondary Button Style: Also, you can customize the appearance of the Secondary Button by changing its Text and Background color. You can reset them anytime using the Three-dot Icon on the right side. For example, I made the Browse File button orange colour.

3. Advanced #

Once you click the Arrow Icon right next to the Advanced, you will get the following setting option.

a. Additional CSS Class(es): You can use this advanced field to make the design of this Customer Portal (Gutenberg block) more customized by providing additional CSS Class(es).

Once you complete the customization process, click the Save button (Publish button for new pages) in the top right corner to save all your changes. To see the preview, click the button beside the Save button.

Preview of Customer Portal #

Here, you can see the preview of FluentSupport’s Customer Portal.

Preview of Ticket Portal #

Here, you can see the preview of FluentSupport’s Ticket Portal.

If you have any further questions, concerns, or suggestions, please do not hesitate to contact our @support team. Thank you.

Updated on April 7, 2025

What are your Feelings

  • Happy
  • Normal
  • Sad
  • Facebook
  • X
  • LinkedIn
  • Pinterest
Saved (Templated) Replies
Table of Contents
  • Add Customer Portal
  • Customize Customer Portal
    • 1. Custom Page Style
    • 2. General Style Settings
      • Customize the Ticket Portal
    • 3. Advanced
  • Preview of Customer Portal
  • Preview of Ticket Portal
Fluent Support logo

Fluent Support smoothly integrates with popular e-commerce, membership, CRM, and LMS apps.

Weekly Email Newsletter

weekly newsletter
We won't send you spam. Unsubscribe at any time.

  • Facebook
  • Instagram
  • Twitter
  • LinkedIn
  • YouTube

Get Help

  • Automation
  • Migration
  • Comparison
  • Free Vs Pro
  • Documentation
  • REST API Doc
  • Developers
  • Brand
  • Support
  • Report a Security Issue

Integration

  • OpenAI Tools
  • WooCommerce
  • Easy Digital Downloads
  • FluentCRM
  • Fluent Forms
  • Slack
  • Telegram
  • WhatsApp
  • Discord
  • Tutor LMS

Resources

  • Success Stories
  • New
  • CS Trends 2024
  • Fluent Support 101
  • Blog
  • Mission and Vision
  • About Us
  • Terms & Conditions
  • Privacy Policy
  • Email Piping Data Policy
  • Contact

Our Products

  • FluentCommunity
  • Ninja Tables
  • Fluent Forms
  • FluentCRM
  • FluentBooking
  • WP Social Ninja
  • Paymattic
  • AzonPress
  • FluentSMTP
  • FluentBoards
  • FluentSnippets
  • FluentAffiliate

© 2025 Fluent Support


Drop Your Info & Grab the Discount
FreshDesk Migration Form
  • Features
    • All Features

      • Ticketing
      • Setting Up & Migration
      • Business
      • Agents
      • Power Usage

      MAKE YOUR SUPPORT BETTER

      AI-Powered

      Fluent Support + OpenAI = Faster replies, polished tone, better conversations

      Automation

      Automate support tasks with triggers, conditions, and predefined actions.

      Migration

      Migrate your helpdesk data to Fluent Support quickly, safely, and with total ease.

      Power user

      • Rest API
      • Incoming Webhook
      • Outgoing Webhook
      • Classes
      • Devs Documentation
      • Reports & Analytics

      WPManageNinja Contact Us Create a Support Ticket Join Our Community
  • Integrations
    • All Integrations

      Explore Integrations

      Unlock Fluent Support’s full potential with LMS, CRM, eCommerce integrations, and more.

      Fluent Suite Integration

      Fastest Form Builder Plugin for WordPress

      Email Marketing Automation Plugin

      Fastest WordPress Community Plugin

      WordPress Project Management Plugin

      WordPress payment and donation plugin

      Email Delivery Plugin for WordPress

      A New Era of eCommerce with WordPress (Coming Soon)

      COMMUNICATION APPS

      WhatsApp

      Telegram

      Slack

      Discord

      Third-party Automation

      n8n

      ZohoFlow

      SureTriggers

      See All


      WPManageNinja Contact Us Create a Support Ticket Join Our Community
  • Pricing
  • Resources
    • Learn & Progress

      All Blogs

      What's New

      Change log

      Customer Support

      E-commerce

      Small Business

      get inspired

      Women in Support

      Stories and insights of women shaping the support industry.

      Build Support Team

      Tips and strategies to hire, train, and scale your support team.

      Top IT Helpdesk

      Comparisons and insights on today’s leading IT helpdesk tools.

      Comic: Flashback

      Illustrated throwbacks showing Fluent Support’s journey and stories.

      Statistics

      Latest reports & statistics of the customer service industry.

      Free vs Pro

      A breakdown of features and differences between our free and pro plans.

      xcloud-logo

      Success Stories

      Customers who turned challenges into wins with Fluent Support

      Documentation

      Instructions to help you set up, customize, and get the most out of Fluent Support.


      WPManageNinja Contact Us Create a Support Ticket Join Our Community
  • Pricing Calculator
  • Account