Cobalt’s Web Elements are a Content Management System (CMS) agnostic set of widgets that can be embedded in a user’s website to seamlessly surface content and eCommerce processes from Dynamics 365. In conjunction with Web Single Sign-on (SSO) Cobalt’s Web Elements add portal functionality to your website with very little effort.

To begin with let’s look at how to generate out-of-the-box web elements to embed in your CMS. This example will use WordPress as an example CMS. However, Cobalt’s web elements can be embedded in any CMS that supports HTML and Javascript.

Configuring and Embedding Web Elements using the Web Element Designer

The web element designer is intended to allow end users to configure the out-of-the-box web elements for use inside of their Content Management System.
1. The Web Element designer imitates a page on a client’s website that would ultimately display the web element as an iFrame within the page.
2. To get to the Web Element Designer go to the web element enabled portal at https://[Portal Url]/WebElementDesigner.aspx (e.g. https://www.cobalt.net/WebElementDesigner.aspx)

3. The Web Element Designer has a few key features that you’ll notice immediately.
The Web Element Generator toolbar on the left hand side allows user to change the Web Element theme. The color selections available control the highlight colors of the Web Elements (e.g. button colors). For example below has the Green css selected.
In addition to the simple color changes there is the ability to specify a custom stylesheet that is hosted by your CMS. This allows designers to control all of the elements of a web element’s look and feel using custom css file that gets included after all other css to ensure that any styles specified in the file take precedence over the standard css. Under the CSS option is a dropdown to select the type of web element you are creating. There are 2 options for Cobalt’s Web Elements
  • Embedded Control – An embedded control will render in the content area where the code is placed in your CMS. Some web elements are full page elements like the pictured login page. Others will be smaller controls like the Event Calendar Control. When you select the Embedded Control option you have the option to Show the Loading indicator on the page while the Web Element is loading in the rendered iFrame. This is generally recommended when displaying a full page web element that may take a second to load after the rest of the content on the page has loaded. However, it can be hidden by unchecking this box.
  • Lightbox Link – The lightbox link web element will render in the content area where the code is placed in your CMS as a link that will launch a new Lightbox window with the content embedded. This can be useful for allowing users to launch a process like Meeting Registration from a page in your website without leaving the page they are on. The Lightbox that the link opens will be rendered in front of any content on the page. When you select the Lightbox Link option you will be shown a text box that will allow you to enter the text of the link that will be rendered (e.g. Register Now for this Meeting)
  • Depending on the type of web element you’re configuring there may be more options available. If there are more options available a link will appear that reads “Configure Element” Clicking the Configure Element link will open a window that allows you to select options specific to the Web Element your Viewing.

4. The last control in the Web Element Generator is code for the web element. A quick look at the generated code shows that it is a simple HTML and JS snippet. In cases where your CMS doesn’t allow js to be embedded directly in the content area you can split the html from js and include them separately otherwise copying and pasting the entirety of this code will render the web element on the page. Below is an example of the Store Web Element embedded in Cobalt’s WordPress site.

Cobalt’s web elements are full responsive when rendered inside of a page that is similarly responsive this means that the web element will adjust to the form factor of the screen being displayed. You can preview the different form factors using the dropdown menu under the main menu of the web element designer. Below is an example of the Store rendered on a phone in landscape view. As well as a live example of the web element in Cobalt’s website.



If you’re interested in learning more about web elements and Cobalt’s portals, check out the main product page or contact us for a demo.