Skip to main content

Intro to iFrames


An inline frame, or iFrame, is an HTML element that allows you to embed another HTML document within the current webpage. Essentially, it creates a window within your page that can display content from another source. This is particularly useful for embedding interactive content such as the StoryFile video player.

Generating an iFrame in Conversa

Conversa has the option to create custom embed code automatically. To generate a code, click on the Publish tab from the StoryFile page and click on “Websites,” then the “Embed” icon.

Sample iFrames Sample iFrames

Sample iFrames

Here is an example of the standard StoryFile iframe that embeds a single StoryFile with several parameters specified to control its behavior and appearance.

<iframe src="https://ask.storyfile.com/?uid=2115" width="100%" height="100%" allow="autoplay;microphone" frameborder="0" style="min-height: 80vh;"></iframe>

Common Attributes

src

Provides the URL of the StoryFile content to be embedded. Each StoryFile is specified by its unique numeric ID (uid).

width and height

Define the dimensions of the iFrame. In this example, it is set to the full width and height of the parent container.

frameborder

Specifies whether the iFrame should have a border (0 for no border).

allow

Enables extra permissions.

  • autoplay: Allows the iFrame to automatically start playing videos without requiring user interaction.
  • microphone: Grants permission for the iFrame to access the user's microphone for voice input.

style

Applies inline CSS to the iFrame. In the example, min-height: 80vh; sets a minimum height of 80% of the viewport height (vh). This ensures the iFrame maintains a substantial height, improving visibility and user experience on larger screens.

To maintain the best appearance, ensure that the iFrame size is responsive to changes in the window's aspect ratio. This can be achieved through additional CSS styling.