October 14th Sprint Review

Resources

• Demo Recording
• Demo Slides
• Release Notes - upcoming

New Features

⭐ Featured Categories Widget

We've frequently received requests through services and CSMs to include a tiled categories widget on forum homepages. We've built several custom versions of this widget over the years, hard coded similar components into custom themes, or dealt with customers who have built this themselves through pockets or customize theme. All of these iterations look great but each implementation represents a significant amount of development time, uses a different code base, and is patched separately. Noticing this trend, Product, R&D and Services identified a joint goal to implement this as a core feature once and for all.

In sprint 2020.022, R&D collaborated with Services to introduce the featured categories widget to our product.

Custom Themes:

Services can place this widget in custom themes as a service.

Legacy Themes:

Customers using Keystone, Bootstrap3, or other legacy themes will be able to place this widget as they would a theme module, using Smarty. Documentation to come on how to do this.

Foundation Themes:

Customers using Foundation will have the featured categories widget included in their theme by default.

A new setting has been added to Categories allowing Community Managers to feature a category:

All featured categories will be displayed on your community homepage as tiles:

How do I style my Featured Categories widget?

By default the widget is styled:

• As tiles
• Using the category photo
• Showing the category title, description & counts
• With centred alignment

Using Foundation's theme editor, you have more advanced styling options for this widget.

Theme Options

A new "Widgets" section has been added to the theme editor

Here theme editors can control the look and feel of the widget container, its tiles, and your category info.

N.B. After yesterday's demo we collected feedback and conducted more testing and we will be making adjustments to the layout and naming of these new theme settings in the UI. I will provide an updated version of these docs when those updates are released.

• Columns: Determines the maximum number of tiles per row in your widget
• Border Type: Changes the style of border around your widget container
• Outer Background: Controls the colour around your widget
• Inner Background: Controls the colour in between and around your tiles
• Items: Allows you to edit settings for the content of your tiles:
  • Border Type: Changes the style of the border of each tile
  • Border Radius: Controls the tiles border radius
  • Background: Changes the background colour used for tiles
  • Color: Changes the text colour
  • Content Type: Allows you to determine which category image setting to use for category info. Chose:
  • Text: to omit all images and only display your category name, description and counts.
  • Icon: to use your category icon. This is uploaded to the "Photo" setting in the category management section
  • Image: to use your category's banner image. This is uploaded to the "Banner Image" setting in the category management section. If this option is chosen you have options to alter the image height and width.
  • Background: to use your category's banner image with a full-bleed effect. This is uploaded to the "Banner Image" setting in the category management section. If this option is chosen you have options to alter the image height and width.
  • Horizontal Alignment: Allows you to centre tiles items, or align them to the left
  • Vertical Alignment: Allows you to align tile items to the top, middle or bottom of the tile
• Pieces: Allows you to enable or disable different types of info in your tile, such as:
  • Description: Your category description, as set in your category settings
  • Counts: The number of discussions and comments in each category

This allows us the flexibility to apply any combination of these style variations as needed and with no coding required. Here a few different examples of what can be achieved by mixing and matching the above configurations.

Preview: Zapier Integration

For those of you who don't know, Zapier is a service that allows websites and applications to communicate through "Zaps." Zaps are essentially triggers from one system, causing actions in another system.

Thanks to the work done by ICB earlier this year, Vanilla now offers Webhooks. Webhooks are essentially triggers that can send messages and information to other systems. For example, I can set up a webhook to send a message to Twitter when a new discussion is created in the community. Currently, you would likely need a developer to set this up for you, but over the last few months ICB has been hard at work on an integration with Zapier to facilitate the process of setting up these kinds of workflows and empower our customers to integrate their community into their business's applications, channels and workflows.

While we have delivered a set of triggers that can be used in Zapier, our integration is currently under review with Zapier before it can be made available to customers. In this week's demo ICB joined us to give us a highly-anticipated preview of this integration. You can check this out in the demo recording linked in the Resources section of this post.