Skip to content
Andy Day edited this page Jul 6, 2015 · 6 revisions

Widgets are html code snippets that hook into the Firebrand Cloud Services API V2 to provide Digital eBook Library, Product Catalog, and E commerce Capabilities.

Setup Email

As part of our teams engagement with you we will send you a Setup Email that contains the following details.

  • API Key - This will be a unique key for your application. It will be used in the steps below.
  • Override CSS - This will be a link to the Override CSS we've created to customize the widgets to your current site style.

Setup Steps

To insert widgets into your site first do the following steps. These steps are common for all widgets and should only be applied once per page or page template.

1. Include P3P Meta Tag

The following element needs to be included between the <head>...</head> tags on your page.

<meta http-equiv="P3P" content='CP="CAO PSA OUR"'>

2. Include Base CSS

Widgets use Bootstrap 3 as their foundation. There are 2 ways to handle styles: With Bootstrap or Without Bootstrap.

With Bootstrap

In most cases, including Bootstrap will be a shorter path to producing well styled widgets. If you prefer take this path, include the following CSS links before your own CSS links. This will ensure that your own styles override similar styles from the widgets.

<link href="//cloud.firebrandtech.com/widgets/content/fcw.css" rel="stylesheet" />

Without Bootstrap

This capability is coming soon.

3. Include Override CSS

As part of our customization of widgets for your site, we will create Override CSS specific to your needs. This will be the last CSS file included. It should be after all of your site specific CSS link statements. The actual link to your custom Override CSS will be included in your Setup Email. In general it will be similar to the following.

<link href="//cloud.firebrandtech.com/your-site/content/widgets.css" rel="stylesheet"/>

4. Set Body Attributes

The following attributes need to be added to the body element in your html.

  • data-ng-app - this should be set to widgets.
  • data-fc-api - this will be set to the API Key sent in your Setup Email.

For example

<body data-ng-app="widgets" data-fc-api="46HwX11Q8UK13aOtAYFT8Q">

5. Include JS

The following JavaScript should be included at the end of your html just before the closing </body> tag.

<script type="text/javascript" src="//cloud.firebrandtech.com/widgets/scripts/fcw.js"></script>

Clone this wiki locally