Build a Modern Blazor Customer Support Portal 5× Faster [Webinar Show Notes] | Syncfusion Blogs
Detailed Blog page Skeleton loader
Build a Modern Blazor Customer Support Portal 5× Faster [Webinar Show Notes]

Overview

This webinar covered how to use the Syncfusion® Blazor UI Kit to develop a fully functional UI for a customer support portal. We walked through everything from setting up a new Blazor project to building and customizing login, navigation, chat, dashboard, and settings pages using prebuilt UI blocks. If you missed the webinar or would like to watch it again, you can do so on our YouTube channel or here.

You’ll learn how to:

  • Set up a Blazor project with the Syncfusion® UI Kit.
  • Install Syncfusion® input, grid, and navigation components.
  • Apply a Tailwind CSS theme.
  • Create a functional login page.
  • Build a ticket viewing layout with a sidebar and navbar.
  • Use tile views, list views, and data customization.
  • Integrate chat, contact, settings, and home pages.
  • Style and optimize your UI for responsiveness and usability.

The Blazor UI Kit

The Syncfusion® Blazor UI Kit offers over 230 ready-to-use UI blocks that cut development time dramatically. Whether you’re building an internal tool or a customer-facing app, these components simplify the process of delivering a polished, functional interface fast.

Timestamps

[00:00] Introduction and overview

[00:14] What is the Blazor UI Kit?

[00:51] Session agenda

[01:30] Project setup in Visual Studio®

[02:01] Installing Syncfusion® components

[05:03] Setting up Tailwind CSS Theme

[06:51] Registering Syncfusion® license

[07:26] Creating login page

[14:13] Main layout and navigation bar

[19:10] Customizing ticket viewing page

[22:16] Tile view implementation

[24:32] Finalizing ticket page styling

[27:02] Chat, home, contacts, and settings pages

[29:32] Wrap-up and key takeaways

FAQs

Q1: Are the Syncfusion® components not WASM and C# native?  The more JavaScript is used, the less stable and performant the components and the app will be.
Syncfusion® Blazor components are 100% native Blazor components written in C#, not JavaScript wrappers. Our components use Blazor’s JavaScript interop capability only when necessary for browser-specific functionality not available through .NET APIs.

Q2: Does Syncfusion® have a UI designer for HTML/CSS, or are they creating one for a near-time release?
As of now, we do not have a UI designer for HTML/CSS. But you can use the Syncfusion® Blazor playground to play with your Blazor code. We also provide the Theme Studio for customizing component appearances.

Q3: Does this example work with Blazor WebAssembly?
Yes, All Syncfusion® Blazor components and UI blocks are designed with hosting model independence. So, it will work with Blazor WebAssembly.

Q4: Can you email the podcast so we can see it again?
The recorded video of the webinar is available on YouTube.

Q5: Is there an example using SQL tables?
As of now there is no available example using SQL tables, but we will consider this as an upcoming webinar session’s topic. Our DataGrid, TreeGrid, and other data-bound components fully support Entity Framework Core and direct SQL connectivity through standard data binding patterns.

Q6: What about Blazor WebAssembly?
Yes, the solution will work with Blazor WebAssembly as the UI blocks are primarily developed using HTML, CSS, and C#.

Q7: Why WASM in this case? If it’s a portal, shouldn’t it be running on the server?
The sample uses a project of type Blazor web app with Server as the render mode and this configuration is being used only for this sample purpose.

Q8: Is the “Remember me” option fully functional in the login page? If it is, why didn’t you use it?
Remember me is not fully functional and the business logic for it must be coded as part of a specific application’s requirements.

Q9: I see the example shows a link to sign in with Google. Do your login samples work well with ADB2C or OAuth?
Yes, the login samples work well with AD B2C.

Q10: Is the Blazor UI Kit a paid option, and if so, is it part of our global license subscription?
The Blazor UI Kit blocks are completely free and open source, with full source code available in our GitHub repository for anyone to use. The UI Kit leverages Syncfusion® Blazor components, which do require a commercial license. If you have an existing Syncfusion® global license, all Blazor components used in the UI Kit are already included in your subscription at no additional cost.

Q11: Could you make an example with the login components using the interactive server mode with Microsoft Identity using cookies and EditForm in the next?
Sure, we will validate and consider this for one of our upcoming webinars.

Q12: Thanks for a useful demo. It could be more helpful if the backend was covered. And what about Blazor components license and subscriptions?
Sure, we will validate and cover back-end topics in our upcoming webinars. The license details can be found on this page.

Q13: Can you do a webinar integrating Blazor with MVC and providing application examples like this?
Sure, we will validate and consider this for one of our upcoming webinars.

Q14: Are there blocks for edit forms with validation?
Currently our UI blocks have no edit forms with validation. But we will consider this for upcoming UI block updates. In the meantime, our Blazor components like TextBox, DatePicker, and Form Validator support full validation capabilities individually.

Q15: What about dark and light modes?
The UI blocks are fully compatible with Tailwind CSS and Bootstrap 5.3 (both light and dark modes).

Q16: Why WASM in this case? If it’s a portal, shouldn’t it be running on the server? I don’t think an API will be developed here in this seminar.
No, an API would not be developed in a webinar. The sample uses a project of type Blazor web app with server as the render mode.

Syncfusion Blazor components can be transformed into stunning and efficient web apps.

Conclusion

In this webinar, attendees learned how to build a customer support portal using the Syncfusion® Blazor UI Kit. We walked through a real-world application scenario, showcasing how to assemble key pages quickly, like a login, main layout, and ticket viewer, without starting from scratch.

Helpful resources

Blazor-GitHub-1.png
Blazor-Live-Demo-1.png

Be the first to get updates

Carter Harris

Meet the Author

Carter Harris

Carter is the Video Marketing Specialist at Syncfusion. He is in charge of managing the Syncfusion YouTube channel as well as webinars produced through Syncfusion.

Comments (1)

Excellent content. Congratulations!

It helped me better understand how to get the most out of Blazor blocks.

And please keep creating new blocks, they help a lot.

Thank you.

Comments are closed.