Is there community content you want to pull from your site and embed in another of your organization's websites? If so, you can use Higher Logic's Widget Builder to accomplish this.
You can embed the following community content:
- Announcements
- Blogs
- Discussions
- Events
- Library entries
- Volunteer opportunities
Access Widget Builder
To access the Widget Builder:
- In the Admin Toolbar, click Admin.
- Navigate to Settings > External Content > External Widgets.
Step 1 - Choose content type
On the resulting page, you can select the type of content you wish to pull from your site and embed in an external site.
- Click the desired content type.
- Click the Widget link to the right.
TIP: As you're building your widget, refer to the Preview section to see your changes in real time.
Step 2 - Configure widget settings
In the Configuration area (it should be expanded automatically, but click to expand if it's not), configure the widget's settings:
NOTE: While some widgets have unique options, many are common among widgets; these are the ones covered in this article. A great way to understand what an option does is to refer to the Preview area as you toggle options on/off or configure them, as any changes are reflected there.
- Community - Select a community to have the widget pull content from a specific community or leave it blank to pull content from ALL communities.
- Number of Items - Controls the number of content items shown in the widget (users can click More to view additional content).
- Subject Length - Controls the maximum number of characters displayed for content item titles. Titles longer than the entered number are truncated with "..." to make it clear additional characters are not shown. You can hover over a title to view it in its entirety.
- Content Length - Controls the maximum number of characters displayed for content item content. Content longer than the entered number are truncated with "..." to make it clear additional characters are not shown.
- "More" URL - This is the URL you want users taken when they click the More link at the bottom left of the widget. For example, for the blogs widget, this is typically either the main Blogs home page for a community or a page with the latest blog articles.
- Show Login Status - Controls whether a authenticated user's name is displayed at the bottom right of the widget.
- Include Staff - Toggle this on/off to control whether staff content is included in the widget. This is a great option to control whether the widget focuses only on user-created content.
- Use Bio Bubble - Toggle this on/off to control whether user profile information is displayed when hovering over their names in the widget.
Step 3 - Configure widget CSS
Click the CSS header to view and configure the widget's CSS. Some default CSS is provided for you, but you can easily tweak the styles to customize the widget to fit your organizational colors/needs.
Click between the Widget CSS and Bio Bubble CSS tabs to customize their associated styles.
NOTE: This article assumes you possess an understanding of CSS and how to make changes to a style sheet. Also, if you embed multiple instances of the same widget, you only need to include one copy of the CSS on your external site.
Step 4 - Embed widget CSS and JavaScript in your external site
All that's left to do is copy the CSS and JavaScript and insert it into your external site.
NOTE: This article assumes you know how to perform this step OR have the help of someone in your organization who can do so.
- In the CSS area, click into the field and copy the CSS code. Insert it into your external site in the applicable location.
- In the Code Snippet area, click into the field and copy the JavaScript code. Insert it into your external site in the applicable location.