Getting Started with Widgets

By George Stocker posted Oct 14, 2014 10:00 AM

  
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.
6 comments
640 views

Permalink

Comments

Dec 01, 2014 01:24 PM

Hi, I've dropped in the events widget, but it's showing events from back in May. Am I missing a step to show only future events, from soonest to furthest out?

Oct 16, 2014 02:44 PM

Much appreciated, I figured it was something along those lines. I can confirm it is working in IE9 now and will await my HL API keys to be able to test our data outputs!
Thanks,

Oct 16, 2014 02:20 PM

The problem was that IE9 won't respect 'addEventListener' unless the HTML declaration is <!DOCTYPE html>. I've added and uploaded it, as well as tested this change using Browserstack (with a IE9/Win7 vm). It works now.
I'm compiling a list of common issues with widgets; I'll add this to that list and give you credit for the find. Thanks for catching this!

Oct 16, 2014 02:00 PM

George,
Thanks, I think this may be an IE9 issue. I sent the link to a co-worker running IE11 and it viewed properly. I can also get it to view on Firefox and Chrome on this computer but IE9 doesn't seem to want to load the widget. What browser versions are supported currently for widget display?

Oct 16, 2014 01:54 PM

If you refresh the page; it should work. You may have caught it when I'd been uploading changes; as I was using it while creating the video. It works for me.

Oct 16, 2014 01:39 PM

George,
On the provided page I see "This is the Higher Logic widget demo site". Is the widget going to be displaying underneath that text in the near future?
http://higherlogic.github.io/widgets-demo/blogs/index.html
Thanks,