Usage

This service allows you to embed web components on your page by including the appropriate code with the correct ID from the EDAN API for the selected content type.

A web component is a self-contained, embeddable element that registers the <si-wc> custom HTML tag. It operates in an encapsulated environment, ensuring it does not interfere with your page’s existing functionality or styles.

The Smithsonian public web component service directly retrieves and displays data that complies with the EDAN API JSON schema through an unauthenticated content endpoint (https://edan.si.edu/content/{edan record URL}).

Steps

Include the web component library script:

<script src="https://web-component.si.edu/siwc-component/dist/index.js"></script>

Place <si-wc> tags in the page's content area as desired:

<si-wc mode="{EDAN record type}" url="{JSON data URL}"></si-wc>

Attributes

Attribute	Required	Description
`mode`	Yes	Indicates the EDAN content type to render. Values currently supported: `storymap`
`url`	Yes	The web-accessible URL to data that is compliant with an EDAN JSON schema
`stylesheet`	No	The web-accessible URL to a custom stylesheet injected into the web component's shadow DOM

Example


<!DOCTYPE html>
<html>
<head>
    <title>Smithsonian Web Component Demo</title>
    <script src="https://web-component.si.edu/siwc-component/dist/index.js" type="module"></script>
<head>
<body>
    <si-wc mode="storymap" url="https://edan.si.edu/content/storymap:smithsonian-locations"></si-wc>
</body>
</html>