Basic Widget Usage
This is the simplest implementation of a widget.
The actual output of the widget is contained within an <iframe> that is part of the web page on your site, and is controlled by the styling of your site. You can override the style of the iframe using normal HTML and CSS Styling.Punctuation matters with HTML, please be sure all semi-colons, brackets, etc. are correctly included.
<iframe
src="http://www.ambrosevideo.com/api/widgets/customer/[subject]/?license=[your-license-key-goes-here]"
style="width:100%; height:300px; border:0px"
>
</iframe>
src=
The Widget URL that you want to use.
(For SSL/Https: If your site uses SSL (https:), then the iframe should also use SSL(https:) for the url to ambrosevideo.com)
/subject/
Subjects to display: This portion of the Widget link specifies the Subject Area of titles to display.
Using "titles" as the subject, all of your licensed titles will be included. This can be over 100 images in some cases, and could cause the widget to load slowly while it retrieves that many images. You can specify a subset of your titles with any of the following subjects:
- titles
- economics
- english
- fine-arts
- history
- medicine
- philosophy
- political-science
- science
- social-studies
- The
style=
portion overrides the appearance of the iframe for your site.
width: 100%
Will make the iframe fill the width of the area it is used on your site (called the "container")
height: 300px;
A suitable height for the height of the thumbnails displayed
border:
0px; Hides the border that normally appears around an iframe element
Example of a complete HTML page using an Embedded Widget
The code below shows all the components of an HTML page that can be used to implement and style an embedded widget.
You can override the style of the iframe using normal HTML and CSS Styling.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Embedded Widget Example</title>
<style type="text/css">
iframe {
border: 2px dashed silver;
height: 210px;
width: 65%;
}
#your-container {
width: 100%;
}
</style>
</head>
<body>
<div id="your-container">
<iframe src="http://www.ambrosevideo.com/api/widgets/index.php/general/titles/science/?license=[your-license-key-goes-here]&width=800"></iframe>
</div>
</body>
</html>
The size and style of the iframe and widget usually have to be adjusted to fit the container you choose on your website:
<iframe style="width: 870px;height: 215px;border: 0px;" src="http://www.ambrosevideo.com/api/widgets/index.php/general/titles/science/?license=[your-license-key-goes-here]?width=830"></iframe>
<iframe style="width: 870px;height: 215px;border: 0px;" src="http://www.ambrosevideo.com/api/widgets/index.php/general/titles/english/?license=[your-license-key-goes-here]&width=830"></iframe>