DocumentationEmbeddable widget

Embeddable widget

The Behold Instagram widget is easy to use, highly configurable and works on most modern platforms. Here we'll explain how to create your widget, customize it, and add it to a website.

How it works

Our embeddable widget consists of a script tag that loads some lightweight (~2kb) JavaScript, and a container for your feed. It looks like this:

<div data-behold-id="ljSLT7SuyAwK9phkZZ4i"></div>
<script src="https://widgets.behold.so/ig.js" defer></script>

And here's the result:

Creating a widget

  1. First, connect an account. Use the Basic API to pull posts from a single Instagram account. If you want to show a feed of public hashtag posts, connect using the Graph API.
  2. Click "+ Add Feed" in the Behold dashboard. Choose "Widget", and pick a name for your feed.
  3. Click "Create Feed", and you're all set! Click on your new feed for your embed code, settings and a preview of the widget.

Widget settings

Our widgets are configurable, flexible and responsive. Below is a list of settings you can use to customize widget appearance and behavior.

When you make changes to a live widget allow a couple minutes for updates to propagate. If you still don't see changes, clear your browser cache and refresh.

Tip: Don't forget to click "save" on the bottom left of your screen when you're ready for your updates to go live.

Number of Posts

The maximum number of recent posts to fetch. Set this only as high as you need. Smaller = faster.

This number is limited by your plan. See the pricing page for details.

When this is turned on, the posts in your widget will link directly to Instagram.

Controls whether your linked posts open in a new tab

Preview videos on hover

When turned on, video posts will autoplay muted when they are hovered-over.

Max. width

Sets a maximum pixel width for your feed. When this option is disabled your feed will always fit the width of its container.

Either way your feed will never grow wider than its containing element.

Alignment

Sets the horizontal alignment / justification of the widget within its container. Only applies if the widget has a max width less than its container.

Hover effect

Determines what, if any, animation to apply when a post is hovered-over.

  • Fade: Applies a semi-transparent black overlay to darken the image
  • Zoom Fade (default): Combined zoom and fade
  • Blur: Blurs the image
  • Zoom Blur: Combined zoom and a blur
  • To Greyscale: De-saturates the image so it renders in greyscale
  • Zoom to Greyscale: Combined zoom and greyscale
  • From Greyscale: All images will appear in greyscale. When you hover over a post, it will be showin in full-color
  • Zoom from Greyscale: Combined zoom and from-greyscale effects
  • None: No hover effect is applied

# of columns

The number of columns your posts will be arranged into. Columns are automatically sized to fit the width of the widget.

Column gap

The space (in pixels) between columns of posts.

Row gap

The space (in pixels) between rows of posts.

Rounded corners

Applies a percentage-based rounding to the corners of your widget posts. If you set this to 100% your posts will be cropped into circles.

Breakpoints

You can apply unique styling based on the width of your widget. This allows you to show different versions for users on desktops, laptops, tablets and mobile devices.

  • To start, click "Add Breakpoint" and enter a pixel width. At or below this width, your breakpoint-specific styles will apply.

  • You can set number of posts, number of columns, column gap, row gap, and rounded corners for each breakpoint. The number of posts displayed at a given breakpoint cannot exceed the primary "Max posts" setting.

  • To test your breakpoints, you can adjust the width of the preview area. Simply click and drag one of the handles to either side of the widget (See image #1 below). The current width of the preview area is displayed at the top of the screen.

  • In image #2 below you can see that the preview area width has been reduced to 590 pixels, and thus the "< 600" breakpoint is being applied: 4 posts instead of 6, 2 columns instead of three, no rounded corners, and no column or row gaps.

  • In image #3 the preview area has been shrunk further to 360 pixels, and thus the "< 400" breakpoint is being applied: 1 post, 100% rounded corners.

Domain whitelist

Your feed will only function on domains listed here, or on any domain if left blank. By default your feed will work on any domain.

Subdomains are independent and wildcards are not supported. So example.com and  www.example.com must be entered separately. The protocol (e.g. https://) is ignored.

localhost is always whitelisted.

Browser support

Our widget works on all modern browsers, including Firefox, Chrome, Microsoft Edge, Brave, Vivaldi, Opera and Safari.

Internet Explorer is not supported. IE only represents a small fraction of web traffic, and is officially no longer being supported by Microsoft as of June 2022.

Targeting modern browsers allows us to rapidly improve our widget and provide a fast, modern experience to your users without being bogged down by the requirements of legacy platform support.

Adding your widget to a website

The Behold widget works on any platform that lets you add or edit custom snippets of HTML. So every major site-builder, CMS and e-commerce platform should be covered.

Just paste your embed code wherever you can put HTML and you're good to go!

Ready to Get Started?

Create a Free Account