You can use Layout Editor to add custom pages to your Higher Logic Vanilla (Vanilla) community. Vanilla makes it easy for you to customize the layout of your pages and to then populate the pages with content via a variety of widgets.
Widgets are a great device in communities because they can host either static or dynamic content. Serving up dynamic content to your users enhances the value of your Vanilla community because it feels fresh and up-to-date with its ever-changing content.
⚠️ Before we begin…
- This article lists and describes all of Layout Editor's available widgets. It focuses solely on highlighting each widget's unique options—those you'll configure to define their core functionality.
- To instead learn about the common widget options that are shared amongst all widgets, such as their display options, container options, and conditions, see Add & Configure Layout Editor Widgets.
Access the Widgets
Widgets are individually added to columns in a Section.
1. Access the Dashboard.
2. Navigate to the Appearance tab and expand the LAYOUTS section.
3. Expand one of the available page layout options (e.g., Home Page, Discussions Page, etc.) and click Add Custom Layout.
4. Click a Section to select it. (✔️ TIP: See Sections in Create a Custom Layout to learn how to add, remove, and rearrange Sections.)
📝 NOTE: Before choosing a Section, consider which and how many widgets you plan to add, and then choose an appropriate Section to host the content.
5. Click the (+) in a Section column to open the widget selector.
6. Click a widget to select it and then click Add at the bottom right.
Layout Editor Widgets
The sections that follow describe the widgets that are available in Layout Editor.
📝 NOTE: This article focuses on highlighting each widget's unique options. See Add and Configure Custom Layout Widgets to learn about common widget options, such as their display options, container options, conditions, and more.
Meta Options
Before discussing Layout Editor's widgets, let's touch on Meta Options.
⚠️ IMPORTANT: These options pertain only to the content-based widgets listed below (the available Meta Options vary per widget):
- Announcements
- Articles
- Categories
- Discussions
- Ideas
- Questions
You can turn ON/OFF a host of Meta Options to control what content- and user-based details are provided for each widget entry (see image below). These options make it easy to show important, at-a-glance details and metrics, such as an entry's author, the user who last commented, its score, tags, and more.
📝 NOTE: A widget's configured Display Type (grid, list, carousel, links) controls what Meta Options are available: The List Display Type provides the most Meta Options (along with the ability to display them as text or icons), whereas the Link Display Type offers none.
Announcements
- Displays a list of announcements that have been posted in your Vanilla community. Using the Display Type Container Option, announcements can be displayed in a grid, list, carousel, or as links.
Each entry can be configured to show or hide various information, such as:
- an excerpt (discussion summary),
- various discussion details (author and category) and user activity metadata (view count, comment count, score count, etc.).
In addition, each announcement can be clicked so that users can read the full post.
Discussion Options
- Excerpt: Controls whether an excerpt from each announcement is included (this is a short snippet, or preview, of text serving to give users an idea as to the announcement's content).
Articles
Displays a list of knowledge base articles that have been posted in your Vanilla community. Using the Display Type Container Option, articles can be displayed as a grid, list, carousel, or as links.
Each entry:
- provides a summary and
- links to the knowledge base where users can read the full article.
Display Options
You can configure several Display Options to control what articles are displayed, and how:
- Knowledge Base: 📝 This option only pertains to customers who have multiple knowledge bases. Leave this option blank to allow articles from all of your knowledge bases or select one from this menu to only display articles from that specific knowledge base.
- Show Featured: This toggle controls whether only articles that have been flagged as Featured will display.
Banner
📝 NOTE: This widget is only available with the 1 Column - Full Width section type.
Adds a page-specific banner that can display:
- the default title of the page,
- a description,
- a background colour or image, and
- a search bar.
Depending on your needs, you can:
- Hide the banner title and description, which is recommended if your banner image already includes text (or you simply don't want text)
- Hide the search bar, if that functionality is not wanted.
- Choose to pull banner titles, descriptions, and images dynamically from site settings, subcommunity settings, or category settings. This adaptability is based on the type of layout and precisely where the layout is applied, allowing you to curate the perfect look and feel for each corner of your platform.
Content Banner
📝 NOTE: This widget is only available with the 1 Column - Full Width section type.
Adds a page-specific banner that displays:
- the default title of the page,
- a description, and
- a background colour or image,
While this widget is similar to the Banner, discussed above, there are two main differences:
- It does not include the search bar functionality.
- It is not as tall as the Banner, making it better suited in situations where space is limited and you want a smaller footprint.
Depending on your needs, you can:
- Hide the banner title and description, which is recommended if your banner image already includes text (or you simply don't want text)
- Choose to pull banner titles, descriptions, and images dynamically from site settings, subcommunity settings, or category settings. This adaptability is based on the type of layout and precisely where the layout is applied, allowing you to curate the perfect look and feel for each corner of your platform.
Call to Action
Allows Administrators to insert a title, description, and (optional) button anywhere in their Vanilla community to prompt users to take a particular action.
- Buttons can have a Primary and Secondary color, which are pulled from your Style Guide.
- Place Call to Action widgets across your community (e.g., sign up today!, join our meeting!, check out our KB, etc.) to get the word out to your users about anything important to your organization.
📝 NOTE: When configuring the widget, if you're inserting an image via the Image option, the recommended dimensions are 1920x480px. Depending on the size of the layout, the image will scale appropriately. If you're concerned about file size, simply scale the image down from the above dimensions to retain the aspect ratio.
✔️ TIP: You don't have to include a button with this widget. Excluding a button provides additional ways to leverage the widget, such as using it as an eye-catching banner at the top of a page to advertise important information. Note, however, that you can turn OFF the button but include a URL to make the entire widget a clickable link.
Categories
Displays a list of Categories from your Vanilla community. Using the Display Type Container Option, Categories can be displayed as a grid, list, carousel, or as links.
You can control what information is displayed for each Category, including:
- a summary description, and
- various discussion details (discussion count, follower count, etc.) and user activity metadata (last post author, last post date, etc.).
In addition, each Category can be clicked so that users can view its content.
Let's learn about the options you can configure to control what information is displayed in this widget.
Widget Options
An important option to highlight here is Filter By, which allows you to filter the displayed Categories in a few ways:
- Subcommunity: Only show Categories belonging to the selected Subcommunity. You can optionally choose to only show Followed Categories, meaning only the Categories a user has chosen to Follow will display.
- Category: Only show the selected Category. You can optionally choose to also include content from any associated subcommunities and/or only show a user's Followed Categories.
- Featured: Only show Categories flagged as Featured.
Category Options
- Category Description: Controls whether each Category's description text is displayed.
Custom HTML
Allows you to add custom code (HMTL, CSS, and/or JavaScript) to a page to target specific content, such as including advertisements and embedding iframes (for videos, podcasts, calendars, feeds, etc.). The code is:
- separated by type, and
- validated to help with organizing code and troubleshooting.
📝 NOTE: This can add visible content to the page or it can host code that operates in the background.
As shown above, click the HTML, CSS, and JS tabs to add that specific type of code in the widget.
HTML
The HTML tab is where you write the markup for your widget. The editor offers:
- syntax highlighting,
- autocomplete, and
- inline documentation for built-in HTML tags.
CSS
The CSS tab is where you apply styling to your markup. Vanilla uses Shadow DOM to isolate the HTML and CSS of your widget from the rest of page. This prevents conflicts between the application's CSS/styling and your own CSS/styling.
JavaScript
Use the JS tab to apply scripting and interactivity to your widget. A few helpful utilities are provided:
The customHtmlRoot element
The HTML element at the root of your widget (that wraps your widget) is available in the variable customHtmlRoot. Use this to get easy access to the HTML you wrote.
📝 NOTE: Because the HTML is inside of a shadow root, you'll need to use that shadow root to access elements inside of the HTML.
// This doesn't work.var myButton = customHtmlRoot.querySelector("#my-button");// This does workvar myButton = customHtmlRoot.shadowRoot.querySelector("#my-button");
The vanilla object
The vanilla object provides a few useful utilities to help you interact with your community.
// Get the currrent user// The autocompletion should help you discover the various properties of the user.vanilla.getCurrentUser().name;vanilla.getCurrentUser().userID;// Check the current user's permissions.// Checkout the permission names at `/api/v2/users/$me/permissions`vanilla.currentUserHasPermission("moderation.manage");// Translate a string into the current locale.// This will use the translations currently loaded into the sitevanilla.translate("Discussions");// Get the current locale key.vanilla.getCurrentLocale(); // "en" for example.// Make API requests as the current user.vanilla.apiv2.get("/endpoint", config);vanilla.apiv2.post("/endpoint", body, config);vanilla.apiv2.patch("/endpoint", body, config);vanilla.apiv2.delete("/endpoint", config);// The config is as follows and is optional in all requests.interface RequestConfig { // Key value object of headers. headers?: Headers; // Key value object of query params. params?: Record<string, any>;}
Discussions
- Displays a list of discussions from your Vanilla community. Using the Display Type Container Option, discussions can be displayed as a grid, list, carousel, or as links.
You can control what information is displayed for each discussion, including:
- an excerpt from each discussion,
- various discussion details (view count, comment count, etc.) and user activity metadata (last comment user, score count, etc.).
In addition, each discussion can be clicked so that users can read more and participate.
Discussion Options
- Excerpt: Controls whether an excerpt from each discussion is included (this is a short snippet, or preview, of text serving to give users an idea as to the discussion's content).
Events
A list of future and/or past Events that have been posted in your Vanilla community. Each entry:
- provides a summary and
- links to the Event where users can see Event details and registration options.
Display Options
Time Frame determines what events are presented in the widget. You can select:
- Upcoming: Only show upcoming events to ensure your users are aware of them.
- All: Show ALL events, both those that are upcoming and those that have already happened.
- Past: Only show events that have already happened. In some instances, this can be an ideal way to highlight past events that may present information or resources you want your users to have access to.
Featured Collections
This widget is detailed in:
Guest Sign In
Allows Administrators to insert a title, description, and two buttons: Sign In and Register.
- You cannot modify the links for these buttons: they are pulled from your site's registration.
- Buttons can have a Primary and Secondary color, which are pulled from your Style Guide, or be plain text.
While your Vanilla community has a default page dedicated to signing in and registering, the purpose of this widget is to give you the freedom of custom placement of these actions anywhere you may want to highlight them.
📝 NOTE: When configuring the widget, if you're inserting an image via the Image option, the recommended dimensions are 1920x480px. Depending on the size of the layout, the image will scale appropriately. If you're concerned about file size, simply scale the image down from the above dimensions to retain the aspect ratio.
Ideas
- Displays a list of ideas from your Vanilla community. Using the Display Type Container Option, ideas can be displayed as a grid, list, carousel, or as links.
You can control what information is displayed for each idea, including:
- an excerpt from each idea,
- various idea details (view count, comment count, etc.) and user activity metadata (last comment user, score count, etc.).
In addition, each idea can be clicked so that users can read more and participate.
Discussion Options
- Excerpt: Controls whether an excerpt from each idea is included (this is a short snippet, or preview, of text serving to give users an idea as to its content).
Leaderboard
Displays a list of the top contributors (those who have earned the most activity-based points) in your Vanilla community during a selected time period.
✔️ TIP: This widget is a good tool for "nudging" other users to become more engaged in community activities.
Each entry:
- provides the member's name,
- their earned-points total, and
- links to the member's profile.
📝 NOTE: The Grid (shown below) and Carousel views also include a user's role within the community.
Earning points
Your Vanilla community members can earn points in a number of ways, including:
- positive reactions to their posts
- answering other members' questions
- having their answers accepted (if this option is enabled in Q&A settings)
- receiving badges
To learn about setting up a point-awarding program to reward your community's top contributors, see the knowledge base articles in:
Widget Options
- Timeframe: Click the dropdown and select the timeframe in which you want the Leaderboard widget to calculate point totals. Options are:
- Daily
- Weekly
- Monthly
- Yearly
- All Time
📝 NOTE: Refer to the Leaderboard list resets section below to learn more about how leaderboard data is handled for each timeframe.
- Leaderboard Type: Click the dropdown and select one "qualifier" as the points basis to display in the widget.
- You can select: Reputation points, Posts and comments count, or Accepted answers count.
- This means you can create three types of leaderboards for your community: one dedicated to users' reputation scores, one dedicated to the number of posts and comments users have made, and one dedicated solely to users with the most accepted answers. This flexibility gives you several ways to highlight your user's engagement and accomplishments.
- Included/Excluded Roles: By default, all users are eligible to appear in the Leaderboard widget, as long as they've met the chosen criteria. However, you can use the Included Roles and/or Excluded Roles dropdowns to filter the Leaderboard to users based on their Role membership.
- This option makes it easy to create user-specific Leaderboards (e.g., a Leaderboard showcasing just your MVPs).
- In instances where you want to make the widget available to numerous Roles, it's often easier to exclude the one or two that it doesn't apply to rather than include all of the ones that it does.
Filter By
A particularly important option for the Leaderboard widget is Filter By.
- By default, leaders are determined by tallying activity across all of your Vanilla community's Categories and Subcommunities.
- However, you can use the Filter By options to limit users eligible to appear on the leaderboard to either a specific Subcommunity or Category (and, optionally, its associated subcategories).
In addition to the options discussed above, these filters enable you to customize your Leaderboard widgets to an even greater extent by highlighting user engagement from specific Categories and Subcommunities.
Leaderboard list resets
A Leaderboard widget checks the database for users' point totals and then resets the lists in order to ensure that the leaderboards remain current. The resets occur every:
- Day for the Daily leaderboard
- Monday for the Weekly leaderboard
- First day of the month for the Monthly leaderboard
- First day of the year for the Yearly leaderboard.
- All Time leaderboards update every time the page is loaded and display the leader list accordingly.
New Post Button
Add one or more buttons that enable users to post a new Discussion, Question, Idea, Poll, and/or Event. These are known as "post types."
You can:
- use the default + New Post button, which contains all of the post types in a dropdown list (shown below), and/or...
- add individual buttons, each dedicated to a particular post type (discussion, poll, etc.). 📝 NOTE: As you add individual buttons, they are removed from the + New Post button list.
Let's learn the two ways you can configure this widget.
- Excluded Buttons: If there are post types that you do not want available in the + New Post button, add them in this field.
- They won't be available in the + New Post list or as individual buttons.
- Notice below how the Event and Poll post types are NOT available in the + New Post button list.
- Separate Buttons: Any post types selected here will display as their own individual buttons, making this a great way to highlight specific types of content creation across your community.
- Note that any post types added in the Excluded Buttons field cannot be used as individual buttons here.
- Custom Labels - Slide the toggle to the right to enable text fields in which you can customize the label of each post type button.
- For example, you could change the "Discussion" post type to something more appropriate for your community, such as "Thread."
📝 NOTE: Customizing button labels is not currently supported on multi-lingual communities; this functionality is in development.
Questions
- Displays a list of questions from your Vanilla community. Using the Display Type Container Option, questions can be displayed as a grid, list, carousel, or as links.
You can control what information is displayed for each question, including:
- an excerpt from each question,
- various question details (view count, comment count, etc.) and user activity metadata (last comment user, score count, etc.),
In addition, each question can be clicked so that users can review it, see other members' answers, and submit an answer.
Display Options
- Status: By default, all Questions display in the widget. However, you can click the Status dropdown and filter Questions by:
- Accepted answer only
- Answered questions only
- Unanswered questions only
- All
Discussion Options
- Excerpt: Controls whether an excerpt from each question is included (this is a short snippet, or preview, of text serving to give users an idea as to the question's content).
Quick Links
By default, this widget displays a list of links to the more popular areas of your Vanilla community. You can:
- Remove links, as needed,
- rearrange their display order, and
- create your own custom links to any URL of your choosing.
You can manage what links display, and their sort order, via the Links List button.
In the dialog, you can:
- Drag and drop existing links to change their display order.
- Click New Link to add your own custom link, with a custom name and URL.
Link management
Link management is different depending on whether you're managing a default link or a custom one. In either case, hover over a link to access its management options.
- For Default links, you can:
- Click Edit to change their titles. You cannot change their URLs.
- Click Hide to remove the link from view, though it is not deleted; you can click Show to once again display a default link.
- For custom links, you can:
- Click Edit to update both their names and URLs.
- Click Delete to completely remove them.
RSS Feed
Displays an RSS feed of your choosing, allowing you to give your users easy access to important RSS content across your community. This is a great way to promote community blog content and/or external news feeds.
After you configure the widget with an RSS feed's URL, that feed's thumbnails, titles, and descriptions are automatically populated from the feed.
📝 NOTE: There is a slight delay (about a minute) between applying a Layout with an RSS Feed and when the RSS feed will display in your community.
Using the Display Type Container Option, questions can be displayed as a grid, list, carousel, or as links.
Each entry:
- provides a summary and
- links to the community blog or external feed where users can see the full content.
Widget Options
- RSS Feed: Enter or copy/paste the RSS Feed's URL in this field.
📝 NOTE: A preview of the RSS Feed will not display while editing your Layout; you will only be able to view the feed once the Layout is applied and you view the page in your community.
Site Totals
Displays a range of site totals data, such as total:
- members
- posts
- online users
- discussions
- comments
- questions
You can choose which metrics to display, and in what order, and even filter the data by a specific subcommunity.
Widget Options
- Site Metrics: Click Edit to manage what site total data is displayed in the widget. This process is described in the Manage site totals section below.
- Filter by subcommunity: Toggle ON to display a Subcommunity dropdown you can use to filter the Site Totals widget's data to a subcommunity of your choosing.
- Label Type: Controls how the data is displayed: Icon and Text, Icon only, or Text only.
- Format numbers: Controls how numbers are formatted. Unchecked: exact, full numbers (e.g., 99,999); checked: rounded numbers with decimals (e.g., 100.0k)
Manage the site totals
Click the Site Metrics Edit button (shown above) to view the Edit Totals dialog.
- The Label text for data that is currently displayed in the widget is bold (e.g., Posts below.
- The Label text for data that is currently hidden in the widget is grayed out in the dialog (e.g., Questions and Discussions below)
You can manage this data in the following ways:
- Drag and drop the data Types in the order you want them displayed (this sort order is not reflected in the widget preview).
- Hover over active data to access the Edit and Hide options.
- Hover over hidden data to access the Show option, which you can click to make it active.
Subcommunities
Displays a list of your subcommunities, allowing you to advertise them anywhere in your Vanilla community for better visibility and easy access.
Using the Display Type Container Option, subcommunities can be displayed as a grid, list, carousel, or as links.
Each entry:
- provides a summary and
- links to the subcommunity for easy access.
Tabs
This widget allows you display up to three tabs of community content (of your choice), giving users easy access to a range of content options in a single, easy-to-use widget. This flexibility of choosing what content to display can lead to increased engagement for certain types of content that may be overlooked.
📝 NOTE: Refer to the Content Types - List options section below to learn about each type of content you can display.
Widget Options
- Max Items: Controls how many content entries display in each tab. You can choose a maximum of 3, 5, or 10.
- Tabs: Click Edit to manage the number of tabs displayed and what type content they provide. Refer to the Tab management section below to learn more.
Tab management
Click the Tabs Edit button (shown above) to view the Edit Tabs dialog.
- The Label text for tabs that are currently displayed in the widget is bold (e.g., Trending Discussions below.
- The Label text for data that is currently hidden in the widget is grayed out in the dialog (e.g., Recent Discussions below)
You can manage the tabs in the following ways:
- Drag and drop the tabs in the order you want them displayed.
- Hover over active tabs to access the Edit and Hide options.
- Hover over hidden tabs to access the Show option, which you can click to make it active.
Content Types - List options
You can choose from the following types of content to populate your tabbed lists.
- Newest Ideas - the ideas that were most recently added.
- Trending Ideas - the ideas that have received the most votes and comments in the past week.
- Newest Questions - the questions that were most recently added.
- Unanswered Questions - the questions that were most recently added but which have not yet been answered.
- Recently Answered Questions - the questions that were most recently answered.
- Trending Discussions - the discussions that have received the most comments and positive reactions this week.
- Top Discussions - the discussions that have received the most positive reactions this month.
- Recent Discussions - the discussions that have been newly commented on or published. 📝 This includes announcements, though they are not pinned to the top (they are treated as a normal discussion).
- Announced Discussions - all globally announced discussions.
Tag Cloud
Displays a list of the most used tags in your community. Each tag "pill":
- links to a filtered list of all discussions, questions, and ideas to which that tag has been applied.
User Spotlight
The User Spotlight widget is a great way to showcase specific users in your Vanilla community (and even people in your organization or affiliates). You can use it to:
- introduce your community team members
- introduce partners / special guests for upcoming webinars
- recognize thought leaders and super users
- recognize active members who are contributing in a special way (answering questions, providing great ideas)
The widget:
- provides a bio/description,
- includes the member's name and role within the community, and
- links to the member's community profile.
Who's Online
Displays a list of users who are currently online in the community. The widget:
- provides a total count of online users (the number at the top right, shown below),
- can have avatars or linked usernames, and
- can include a count of guest users (the +x Guests, shown below).
Widget Options
- Style: Allows you to display users as icons (their avatars) or by their usernames.
- Display Guests: Here, you can opt to display only registered users or also include guests
