Sections in this category

Embedding Web Elements in an HTML Page

To embed Web Elements in a basic HTML page, you'll need a basic understanding of HTML.

Below you can find an example of a basic html page showing how easy it is to embed our web elements. Two parts of the page are bolded:

1. The script required to include jQuery on the page (necessary for Web Elements to render)

2. The code copied from the widget site (our web element itself)

 

<!DOCTYPE html> 

<html> 

<head> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 

</head> 

<body> 

<h1>My First Heading</h1> 

<p>My first paragraph.</p> 

<div id="cw-1613808711" style="width: 100%; height: 100%;" class="cobalt-widget" data-loading="true" src="https://natcamwidget.cobalttest.net/Login.aspx?ReturnUrl=/Profile/Default.aspx?widget=frame&color=&script=&ver=2.0"/> <script>var js,p=/^http:/.test(document.location)?"http":"https"; if(!document.getElementById("cobalt-wjs")){js=document.createElement("script"); js.id="cobalt-wjs"; js.src="https://natcamwidget.cobalttest.net/App_Themes/Nevia/js/widget.js"; document.getElementsByTagName("head")[0].appendChild(js);}</script> 

</body> 

</html> 

As you can see, embedding Web Elements is as simple as copy/pasting our code blocks, generated in the Web Element Designer, into the body of an HTML page. The only other important component is making sure that the page can handle jQuery.