At Super Forum, we unveiled the Widget builder, a new and easier way to place Connected Community (CC) powered content on other websites (like an association home page).
The Widget Builder is meant to be both an easy and customizable way to share content from your CC site to your non-CC site. If you know CSS, you can also easily customize the look of the widget to reflect your site's theme.
Access to the widget builder can be found under your Connected Community Admin page. Find it under Tools -> Widget Administration:
Clicking on that link will open up the new Widget Builder:
And you can click on any of the widgets to expose the widgets available, in this case, we'll click on "Blogs -> Widget":
Clicking on "Widget" will bring up the widget builder interface for the Latest Blogs Entries widget:
From here, there are a few things to note. The Preview Panel is a live preview of what the blogs widget will look like. Changing the values in the Configuration panel will update the Preview Panel.
The Configuration Panel is where the actual changes to the parameters for the Blogs Widget are made:
This menu looks the same for each widget; but has different options. These options are very similar to the parameters offered for the Blogs User Control.
To place a widget on your non connected community site; make the changes to the blogs widget; and then copy the code snippet
to the page where the widget will be displayed. I've set up a
demo site that demonstrates this.
There are a few parts of the code snippet that need to be observed (and may need to be changed depending on the software that powers your non-connected community site):
The line:
<div id="previewWidget"></div>
should be placed where the widget will be displayed on the page. The text 'previewWidget' should be changed (if necessary) to something unique for that page (no two
<div></div>
tags can have the same
id attribute).
Likewise, the line that contains:
hl.latestBlog('previewWidget', {
will need to have the previewWidget text changed to whatever the id was changed to above. These two must match.
Next, is your non connected community site delivered over HTTPS? If so, anywhere you see "http" in the code snippet will need to be changed to "https". To determine whether your site is delivered over HTTPS, check the location bar in your browser when visiting your non-Connected Community site. If it always displays 'https://', that's an indication it's being served over HTTPS.
Once the code is pasted into the page you want to display it on, it may look like this:
The last step to get it to look right involves copying and pasting the CSS from the widget page to either a <style> tag in the head of the file it will appear in, or in a <link> tag (as shown above).
The CSS can be found on the Widget Builder Page, underneath the configuration:
that's the last step really needed to get the widget to display correctly. Once you do that, the final result should look something like this:
We're always looking for feedback on the Widget builder and how we can make it better fit the mission of sharing CC content and increasing engagement to your Connected Community site.
Update: There's now a video that is essentially a companion to this blog post that takes you through the process of creating a new widget. It's
located here for your viewing pleasure.