Embedding search components

Embed the footage.one search as web components on your website.

Overview

footage.one provides web components that let you embed a media search directly in your own website. The components connect to your footage.one account and display the media from a distribution.

Embedding

Load the script into your HTML page:

<script src="https://ork.footage.one/asset-search/main.js"></script>

Configuration

Configure the connection to your footage.one account. You need the host and a JWT token. You obtain the token by creating a Distribution of type "Public search" — the JWT token is shown in the distribution settings.

Via HTML element

<foc-config host="https://ork.footage.one" token="your-jwt-token" language="en"></foc-config>

Via JavaScript

FoComponents.configure('https://ork.footage.one', 'your-jwt-token', 'en');

Available components

foc-result — Search results

Displays the current results list:

<foc-result link-format="/details.html?sku=%SKU%"></foc-result>

The link-format defines the URL pattern for detail pages. %SKU% is replaced by the asset ID.

foc-details — Asset detail view

Displays a single asset. Without the sku attribute, the SKU is read from the URL parameter sku:

<foc-details sku="DWT000342"></foc-details>

Displays available filter options (facets):

<foc-facets format-counter sort-by-label="codec_norm_s,resolution_ss"></foc-facets>

Displays currently active filters with the option to remove them:

<foc-active-facets></foc-active-facets>

foc-pagination — Page navigation

<foc-pagination>
  <span slot="first">First</span>
  <span slot="previous">Previous</span>
  <span slot="next">Next</span>
  <span slot="last">Last</span>
</foc-pagination>

foc-pagesize — Results per page

<foc-pagesize sizes="8,16,32,64" default-size="16"></foc-pagesize>

foc-result-count — Result count

<foc-result-count format>
  <span slot="before-count">Total </span>
  <span slot="after-count"> results</span>
  <span slot="no-result">No results found</span>
</foc-result-count>

foc-asset-keywords — Asset keywords

Displays keywords for an asset (must be inside foc-details):

<foc-details sku="DWT000342">
  <foc-asset-keywords mode="keywords"></foc-asset-keywords>
</foc-details>

Modes: keywords, parentKeyword, freewords.

foc-asset-image — Asset image

<foc-asset-image sku="DWT000342"></foc-asset-image>

JavaScript API

Configuration can be changed at runtime:

FoComponents.changeToken('new-token');
FoComponents.changeHost('https://other-host.footage.one');
FoComponents.changeLanguage('en');
FoComponents.addFilter('aspect_norm_s', '16x9');
FoComponents.removeFilter('aspect_norm_s', '16x9');

Events

All events are dispatched on document:

Event	Description
`foc:result`	Current results list
`foc:result-count`	Number of results
`foc:facet-add`	A filter was added
`foc:facet-remove`	A filter was removed
`foc:facet-changed`	List of active filters
`foc:search-start`	Search started
`foc:search-end`	Search completed

Teams Overview