How it works

Our embedded widget consists of a script tag that loads some lightweight JavaScript and a container for your feed. It looks like this:

<behold-widget feed-id="L7mnQCHvZeMZLbNXmJll"></behold-widget>
<script>
  (() => {
    const d=document,s=d.createElement("script");s.type="module";
    s.src="https://w.behold.so/widget.js";d.head.append(s);
  })();
</script>

And here’s a simple example widget:

Creating a widget

1. First, connect an Instagram account
2. Navigate to the feeds page and click on “Add feed”
3. You will be prompted to choose between a user feed or hashtag feed. User feeds pull posts from a single account, hashtag feeds aggregate public hashtag content from across Instagram.
4. Pick a source for your feed. If you are creating a hashtag feed, you must choose an advanced source.
5. Select “Widget”
6. Name your feed, or just click on “Create feed” to use the default name. You can change this later.
7. You will be redirected to your widget admin page. Here you can see a preview of your widget, update settings, and access your embed code.

Widget types

We currently have three main widget types (with more on the way!):

Flexible grid

Our core widget. Highly configurable and responsive. This type of widget can be configured to suit almost any layout and design.

Gallery wall

Gallery wall widgets allow for beautiful and interesting layouts that break outside the standard grid. They cannot be adjusted by breakpoint, however, and are generally less configurable.

You can choose between multiple gallery wall layouts by going to “Customize” → “Gallery wall design”.

Elastic carousel

A fluid, physics-based slider with mouse and touch drag support. Inspired by the Material 3 carousel. Available on all paid plans.

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. Not available for Gallery Wall widgets.

• To start, navigate to the Breakpoints panel, click “Add breakpoint” and enter a pixel width. At or below this width, your breakpoint-specific styles will apply.
• You can apply a selection of settings for each breakpoint including “Number of posts”. 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. 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, 2 columns, 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

Available under “Advanced settings”. 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!

For instructions on adding Behold to specific platforms, you can refer to our integration guides.

Common problems

Widget doesn’t load

Some systems will strip out the <behold-widget> component used in our standard embed, which breaks our widget. In those cases, using the compatibility embed code can fix the issue.

Issues with React, Angular, Vue, Etc.

We publish official components for React, Angular, Vue, Svelte, Preact and Solid. Find out more here.