Main Content for Page

Frequently Asked Question - Using the Ambrose Widgets

Using the Ambrose Widgets

Featured FAQ

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>