Board to Website Widget advanced features

By manually adding URL parameters to your embedded widget, you can take advanced control over what is shown in your widget and overwrite settings. If you need assistance, feel free to contact us.

Filter by groups

Board items are organized across groups

You have one board containing all your items, and those items are separated by groups. And you want to only display items per group across multiple website pages or sections.

In this example, we have products on different categories and we only want to embed the Barstool group products. The default widget URL looks like this, showing all products: https://widgets.getgorilla.app/66c9df7655546acb?type=embed

By simply adding the filter_group parameter and passing in the designated group name, you can narrow down the displayed items further: https://widgets.getgorilla.app/66c9df7655546acb?type=embed&filter_group=Barstool

Did you know?

If your group name contains blank spaces, you should replace those with %20 to encode the URL properly: https://widgets.getgorilla.app/3fdb3798bab9c146?type=embed&filter_group=Under%20consideration

Filter by column

Embed one widget multiple times with different filters

You can add specific filters to your widget URL with a query parameter which looks like ?filter_<columnID>=value. That way you can embed the same website widget multiple times into your website, but apply different filters per widget. You can also apply multiple filters to a widget, such as ?filter_<columnID>=value&filter_<columnID>=value. Find the columnID under Column settings by clicking the ⚙ button next to the column name.

Lets take a look at real examples, the default widget URL looks like this, showing all products: https://widgets.getgorilla.app/66c9df7655546acb?type=embed

Here we filter all items that have exactly only Brown as color: https://widgets.getgorilla.app/66c9df7655546acb?type=embed&filter_text2=Brown

The following filters items, where the color contains Brown: https://widgets.getgorilla.app/66c9df7655546acb?type=embed&filter_text2|contains=Brown

And here we filter for where the color contains Brown and the material Wood: https://widgets.getgorilla.app/66c9df7655546acb?type=embed&filter_text2|contains=Brown&filter_text|contains=Wood

Did you know?

If you want to embed the same widget multiple times on the same page, you additionally have to index each widget ID to make it unique. Taking the last two examples from above to illustrate it better below.

First widget with the following snippet, where both IDs have a -1 suffix in the iframe and last script tag:

<script src="https://widgets.getgorilla.app/resizer/iframeResizer.min.js"></script><iframe id="widget-66c9df7655546acb-1" src="https://widgets.getgorilla.app/66c9df7655546acb?type=embed&filter_text2|contains=Brown&setting_bodyPadding=small" style="width:1px;min-width:100%;border:0;"></iframe><script>iFrameResize({ log: false }, '#widget-66c9df7655546acb-1');</script>

Second widget with the following snippet, where both IDs have a -2 suffix in the iframe and last script tag:

<script src="https://widgets.getgorilla.app/resizer/iframeResizer.min.js"></script><iframe id="widget-66c9df7655546acb-2" src="https://widgets.getgorilla.app/66c9df7655546acbtype=embed&filter_text2|contains=Brown&filter_text|contains=Wood&setting_bodyPadding=small" style="width:1px;min-width:100%;border:0;"></iframe><script>iFrameResize({ log: false }, '#widget-66c9df7655546acb-2');</script>

Overwriting settings

Overwriting published settings for specific embeds

Lets stick to the example widget from above and overwrite the widgets background, border and headline colors. The default widget URL looks like this, inheriting its default widget settings: https://widgets.getgorilla.app/66c9df7655546acb?type=embed

Now lets add three parameters backgroundColor, borderColor and secondaryColor to overwrite the described settings: https://widgets.getgorilla.app/66c9df7655546acb?type=embed&setting_backgroundColor=%23ffcc00&setting_borderColor=%23ffcc00&setting_secondaryColor=%23ffcc00

Did you know?

Any setting available in the widget editor can be accessed in URL parameters by its name, like shown above. Any non-alphanumeric letter must be encoded. Since we pass in a HEX code color above, we need to encode # to %23.