Portal Widget Setup

Setting up your website with our portal widgets will allow you to embed the portal pages within your own content pages. This document is specifically for WordPress sites, but if you’re using a different CMS, it should still give you an idea of the steps involved. We should be able to help you regardless of which CMS you’re using, as long as it supports SAML 2.0 Authentication (see below).

Getting Started

1)      To get started with putting widgets on your website, open a support ticket requesting "widget setup" for your organization at
2)      We'll create a temporary portal on our server to allow you to set up widgets while still being able to access your standard portal. After your widgets have been setup and tested, we'll switch you over to just use the widgets.
3)      We'll also configure your organizations settings in CRM to communicate with widgets.
4)      Then we’ll provide you with The URL to the Metadata for the SAML Identity Provider (IDP) hosted in your portal. 

Widget/SSL Prep

1)      You need to set up a Service Provider (SP) using simpleSAML for authentication on your website.
Note: If you’re not familiar with setting up a SP using simpleSAML in WordPress here is a good walkthrough: or If you have a different preferred SP we can help you with that as well.

2)      Then send us:

  1.  The link to your Metadata for your SAML SP. This can be found on the General Tab of the simpleSAML settings under "Your SAML Info"

3)      After we add that information to your CRM settings you’ll be ready to set up your widgets.

Widget Setup:

Note: replace “” throughout the following examples with the domain we gave you for the in the Metadata URL

1)      Generic Widget: You’ll need to create a reference widget page for the system to use:

  1. Create a page titled: Generic Widget
  2. b.     Send us the URL for this page (to add to the settings)
  3. c.      Add the following to its content area as source code

<div id="_yye5zgjoy" style="width: 100%; height: 100%;" class="cobalt-widget"></div>
<script>// <![CDATA[var js,p=/^http:/.test(document.location)?"http":"https";if(!document.getElementById("cobalt-wjs")){js=document.createElement("script");"cobalt-wjs";js.src="";document.getElementsByTagName("head")[0].appendChild(js);}// ]]></script>

2)      Individual Widgets: Add the following widget code block as source code to the content area of any page you want a widget to appear:

  1. Login widget:

<div id="_yye5zgjoy" style="width: 100%; height: 100%;" class="cobalt-widget" src=""></div>
 <script>var js,p=/^http:/.test(document.location)?"http":"https";if(!document.getElementById("cobalt-wjs")){js=document.createElement("script");"cobalt-wjs";js.src="";document.getElementsByTagName("head")[0].appendChild(js);}</script>

  1. Other Widgets: The example shown is the login widget. To select a specific portal page widget, just replace the “Login.aspx” with any of the following:
  • Login.aspx
  • Default.aspx*
  • EventCalendar.aspx*
  • Education/History/Classes.aspx*
  • Meetings/RegisteredEvents.aspx*
  • Education/History/FullHistory.aspx*
  • Meetings/FullHistory.aspx*
  • Education/History/MyClasses.aspx*
  • Meetings/MyMeetings.aspx*
  • Committees/Form.aspx*
  • Membership/Directory/MemberSearch.aspx
  • pac/history.aspx*
  • Subscriptions/Form.aspx*
  • Sales/Catalog/ProductSearch.aspx*
  • Sales/Orders.aspx*

* These pages should all require login for access.

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request


Please sign in to leave a comment.