This article...
- Details how to access the Widget Builder and select a content type for the widget.
- Explains how to configure the widget settings, such as number of display items, the amount of content, and link URLs.
- Describes how to customize the CSS code to manage the appearance of the widget.
- Outlines how to copy the CSS code and the JavaScript code, and embed them in an external website.
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 types of community content:
- Announcements
- Blogs
- Discussions
- Events
- Library Entries
- Volunteer Opportunities
Prepare for embedding the widget code
This process requires copying two code snippets from the External Widgets page and pasting them into your external site. To simplify this:
- Open a new instance of a text editor, such as Notepad (or a blank document).
- Open a second tab of the editor.
TIP: You can save and name these as files, but having them open and available is what's important because they'll simplify your work later in the process.
Access the External Widgets page
The External Widgets page houses the "widget builder:" several sections in which you configure the settings and customize the embed code for the widget that displays on an external website.
To access the External Widgets page:
- In the Admin Toolbar, click Admin.
- Navigate to Settings > External Content > External Widgets.
The External Widgets page (the Widget Builder) opens in a new tab.
Step 1 - Choose a content type
On the External Widgets page:
- Click the content type that you want to pull from your site and embed in an external site.
- Click the Widget link to the right.
The widget preview
As you build your widget, the Preview section displays your changes in real time.
- Use the Preview to check how the entries will display in the widget.
Step 2 - Configure the widget settings
The Configuration section should automatically expand; if it doesn't, click the section heading to expand it and configure the widget's settings.
The settings in the Configuration section differ from one content type to another, but a few fields are present in most of them. For example:
- the Event Types dropdown is unique to the Upcoming Events Widget because it's relevant to events only.
- the Number of Items field display for all of the content types so that you can manage the number of entries in the widget.
TIP: The Preview automatically updates as you work. If you are uncertain as to what a setting does (e.g., Content Length), specify a value and the check how the preview changes.
Some of the more common settings are described below.
| Setting | Description |
|---|---|
| Community | Select a community to have the widget pull content from it, If you do not select a community, the widget pulls content from all your communities. |
| Number of Items | Specify the number of entries to display in the widget. |
| Subject Length | Specify the maximum number of characters to display for the title of each entry. Titles that exceed this number are truncated with "..." to indicate that it's not the complete title. When the title is hovered on in the widget, the full title displays. |
| Content Length | Specify the maximum number of characters to extract directly from the post and display for the content of each entry. Content that exceeds this number is truncated with "..." to indicate that it's not the entire content. |
| "More" URL | Specify the URL of the page that you want for the More link on the widget. When users click More, they are taken to the URL. For example, a "latest blogs" page or an "announcements" page, depending on the widget. |
| Show Login Status | Check the box to have authenticated users' names display on the widget. |
| Include Staff | Check the box to have staff-generated content included in the widget. Uncheck the box to have user-created content be the focus of the widget. |
| Use Bio Bubble | Check the box to have users' profile information display when the user name is hovered on in the widget. |
Step 3 - Customize and copy the CSS code
Click the CSS header to view and configure the widget's CSS code; some default CSS code is provided.
NOTE: This article assumes that you have an understanding of CSS (cascading style sheets) and how to manage their code. Also, if you embed multiple instances of the same widget on your external site, only one copy of the CSS code is necessary.
- Customize the widget's CSS code if you want to reflect your organization's branding.
- When you have finished customizing the code, select all of it and copy it.
- Paste the code into a text editor or similar application.
Step 4 - Copy the JavaScript code
Click the Code Snippet header to access the JavaScript code that has to be embedded in your external site.
- Click into the Code Snippet section, select all of the JavaScript code, and copy it.
- Paste the code into a text editor or similar application.
Step 5 - Embed the CSS and JavaScript code snippets
The last step is to embed the copied code snippets in your external site.
NOTE: This article assumes that you have some familiarity with inserting embed code in a website, or that you have available someone who is.
- Access the CSS code and JavaScript code snippets that you have pasted into a text editor or similar application.
- Individually copy each snippet and paste it into the appropriate location on your external site.
- Save your work.