Social Feed: Filter feed content by source tabs

Changelog New Feature
1

Great news for Social Feed users! :sparkles:

Source filters are now available! With this new feature, you can organize your feed more efficiently and tailor it to your specific needs. It’s the perfect way to make your feed work for you:

image
image967×695 157 KB

Key details

How to enable filters?

These filters are the same tabs you may have seen in our All-in-One Reviews app, and you can enable them under the Header tab in your widget’s settings:

image
image330×439 9.25 KB


Filter customization options

In the Tab settings, you can choose whether to show or hide icons and source names:

image
image1631×849 201 KB


Additionally, it’s possible to group sources by platform. By default, each source is shown in a separate tab, but when grouped, sources from the same platform are combined into one:

image
image1596×836 209 KB

image
image1679×862 225 KB


How to set a custom source name?

The default source name is the platform name, but you can change it to any custom name you like:

image
image1639×830 206 KB


What do you think of the new filter option? Let us know your thoughts in the comments—we’re excited to hear your feedback! :wink:


Back to Changelog →

2

Hey @Max - this is a great feature. Is there a way to way to set it to show a particular source by default (eg Instagram) and then the viewer can select ALL or other sources? We often have similar posts going across multiple platforms and this way it won’t show similar posts next to each other. Thanks!

3

Hi there, @Gina_Chong1 :waving_hand:

Sure! You just need to add this script to the Custom JS field on the Settings tab of your widget’s settings:

const waitForElement = (selector, root = document) =>
  new Promise((res) => {
    const observer = new MutationObserver(() => {
      const element = root.querySelector(selector);
      if (element) {
        res(element);
        observer.disconnect();
      }
    });

    observer.observe(root, {
      childList: true,
      subtree: true,
    });
  });

const init = async () => {
	const tabsContainer = await waitForElement('.es-tabs-container');
	const tabsNames = [...tabsContainer.querySelectorAll('.es-tab-item-source-name')];
	
	for (const tabName of tabsNames) {
		const text = tabName.textContent.toLowerCase();
		
		if (text === 'instagram') {
			tabName.click();
			break; 
		}
	}
}; 

init();

Please try it out and let me know if it worked :wink:

Note: Custom JS doesn’t function in the preview mode, so you can check the result right on your website or through the Share Link