Skip to main content

Embed Component Usage and Functionality

The Embed Component allows the author to embed external content in a page.

How it Works

The author selects the type of content the embed will display and the source for that content. The Embed compoent will configure that content to appear properly on the page.

How to Use

There are three ways to use the Embed component.

URL

The simplest embed is the URL. Simply paste the URL of the resource you wish to embed in the URL field. The component will attempt to access the resource and if it can be rendered by one of the processors, it will display a confirmation message below the URL field. If not, the field will be marked in error.

Many sites easily comply with the oEmbed standard including Facebook Post, Instagram, SoundCloud, Twitter, Pinterst, and YouTube

Important to Note:

  • For the Embed component to display a URL, the URL must be in the oEmbed standard format.
  • Information on the oEmbed format can be found here https://oembed.com/

Embeddable

The second way to use the Embed compinent is through the Embeddable option.  Embeddables allow for more customization of the embedded resource, which can be parameterized and include additional information. An author is able to select from pre-configured trusted embeddables each of which are shown below.

ArcGIS

Select ArcGIS for maps such as the one shown below. Only the URL of the map is required.

Chat Bot

The Chat Bot embed is already programmed to meet the State of Oklahoma's  needs and does not require any authoring choices.

iFrame

The iFrame option allows you to input a view to a specific location such as a Google Map (as shown below).  Many sites include an embeddable link which can be used for iFrame purposes.

  • Source - The source of the content you would like to appear
  • Height - Input the pixel height you would like for the iFrame to have.  The height and width may have been included in the URL you input, however this option will overwrite what was in the URL.
  • Css Class - If there is a specific Css class to include, add it here.
  • Border - Choose the width of the border you'd like to appear in pixels.
  • iFrame Title - Add a title to appear on screen readers.

Instagram

The Instagram embed can display an instagram feed.

  • Embed ID - The ID is a 6 digit number which can be found in the SnapWidget account for the Instagram feed. You will only need to input this number for the feed to appear.

Microsite

The Microsite embed is designed to link out to specific Health microsites. The instructions for filling in each field will appear once this option is selected.

Tableau

Use the Tableau embed option to embed charts, graphs, or other graphics from a Tableau source. You will only need to link to a Tableau URL value for this embed.  Results appear best when using a full width template.

Twitter

The Twitter embed only needs the source (Twitter URL) to pull the tweets.  The author may also choose the height and width of the display.

Vimeo

YouTube

YouTube SOK

The SOK-Youtube embed is unique from the other Youtube embed in that it scales to the size of the embed component.  The SOK-Youtube component only needs the Youtube ID (the string after the = in the URL) rather than the entire URL.

HTML

The final option is to provide a full string of HTML code to deliver the embed. For this particular option, the author will need to provide the HTML code with all details.  If any issues arise, an error message will appear.

Last Modified on Oct 09, 2025