Domains widget

Iframely supports over two thousand rich media providers. While it is a challenge for us to maintain the full list, we do our best and maintain an embeddable widget of supported publishers, so you can share some of those providers with your users.

Here’s how the widget looks:

Widget is built as a web component so you can program it without cross-domain restrictions. Here’s its basic embed code:

<script type="module" src=""></script>

The widget is configurable. You can change the icon styles, page size, as well as choose some tag categories and the first page. Read this complete specification of every widget attribute, or customize your widget here with WYSIWYG editor.


To change the behaviour of domains widget, you can set different attribute values. For example, here’s a dark theme with small icons:

<iframely-domains theme="dark" icon-size="small"></iframely-domains>
<script type="module" src=""></script>

Please note that src of widget’s script can be sourced from your custom CDN.

Below is the list of the attributes with possible values.


Values: auto, light, dark
Default: auto

Sets the widget color mode (dark and light theme). auto mode automatically chooses between light and dark modes depending on users’ system settings.


Values: inherit, system-ui, sans-serif, serif
Default: inherit

Sets the font. To use your custom font, use default inherit value. system-ui will use user’s default operating system font.


Values: small, medium, large
Default: medium


Values: fill, fill-accent, border, border-accent, plain
Default: fill-accent


Values: square, round-square, squircle, circle
Default: round-square


Values: rank, sitename, accent-color
Default: rank

Defines the order of the providers in the list. Default is the rank that we take from SimilarWeb, smallest number being the most popular on the Internet. sitename will sort the widget alphabetically.


Values: comma-separated list of keywords
Default: empty

The widget is searchable by keywords and provider names. You may have some of the keyword tags be added as categories in your widget. The categories will show up as the tab navigation.

The navigation will be added only for supported tags. If a tag yields no publishers, it will be omitted.


Values: comma-separated list of keywords
Default: empty

Similar to tags above, lead-tags are to choose categories that go onto the front page. Whatever tags you choose will form the landing “lead” list of publishers in your widget.


Values: number
Default: 60

The number of providers per page. The widget is responsive, but pagination always using the same number of providers so you can control it.

Please put the widget on your page and see if you need to adjust the page size so it fits well with no empty spaces.

60 is the default value so it works well in many scenarios, yielding full rows with 2, 3, 4, 5, 6 columns.


The widget raises a few events so you can change some behaviours.


If you need one, add a handler for when your user clicks on a provider. The event body will come with the provider information.

document.querySelector('iframely-domains').addEventListener('iframely-domains-click', (event) => {
  // Handle `event.detail` in your code here...

The provider/domain information will come as event’s detail property:

// event.detail
  sitename: 'Iframely',
  domain: '',
  slug: 'iframely',
  url: ''

iframely-domains-load and iframely-domains-update

These are the events when the widget loads its initial size or updates the size.

Because the widget has no height initially, you may experience quite a bit of layout shift. To avoid that, you may reserve the empty space for the list of providers and adjust that space on widget’s triggers.