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.
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)
- 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.