Embedding a LinkedIn feed on a Webflow site is genuinely different from doing it on WordPress or Wix. Webflow's architecture gives you real control, but it also demands that the widget you embed respects that architecture. This guide is written with that in mind. It covers how Webflow's embed options work, where each option belongs, and how to get a LinkedIn feed live that actually looks intentional rather than bolted on.
Before you start: LinkedIn is not live yet on CollectSocials. LinkedIn is reviewing our access to their Community Management API, and until that clears, company pages connect only for accounts LinkedIn has authorised on our app. The steps below are the flow every source follows, and they work today for Instagram, Facebook, Google Reviews, YouTube, TikTok and the rest.
Why LinkedIn Content Belongs on a Webflow Site
Webflow sites are overwhelmingly built for studios, agencies, SaaS products, and professional service businesses, exactly the audiences most active on LinkedIn. The thought leadership posts, product announcements, team updates, and case study teasers that live on your LinkedIn company page are precisely the kind of content that builds authority with the decision-makers your Webflow site is trying to reach.
The disconnect is structural. Your Webflow site gets updated infrequently by nature, because it's a carefully designed artefact. Your LinkedIn page, if you're doing it right, gets updated several times a week. Without a bridge between the two, your website always risks looking frozen in time next to a competitor whose site feels alive.
An embedded LinkedIn feed solves this without compromising the Webflow site's design integrity. Done correctly, the feed feels like a natural extension of the site's visual language, not a foreign object that wandered in from a different decade of the web. For a platform-agnostic approach, see our guide on adding LinkedIn feeds without plugins.
There's also a conversion argument specific to Webflow's typical use cases. A design studio's Webflow site embeds a LinkedIn feed showing recent project announcements, award mentions, and industry commentary, and a prospective client sees that the studio is active, recognised, and professionally engaged. That context shortens sales cycles. The same logic applies to SaaS landing pages, agency showcases, and consultancy sites.
sync
What arrives without a publish step
The animation traces a company page post out of LinkedIn and into a section of a Webflow site. The detail worth noticing for a Webflow build is that nothing in the Designer changes: the Embed element is pasted once, and every later post lands inside it without a republish.
Understanding Webflow's Embed Options: Choose the Right One
Webflow gives you two ways to add third-party code, and the difference matters:
Option A: The Embed Element (per-page or per-section)
Found in the Add Elements panel under the Components section. You drag it onto your canvas, click the edit icon, and paste your code. The embed renders in the Webflow Designer canvas preview as an empty box (third-party scripts don't execute in the Designer), but it renders fully in Published and Preview modes.
Use this option when you want the LinkedIn feed on a specific page or section, whether that is your homepage's social proof section, your About page, your Careers page. It's the cleanest option because the embed lives exactly where you put it in the layout, participates in Webflow's grid and flex systems, and can have wrapper styling applied around it.
Option B: Custom Code (site-wide or page-level)
Found in Project Settings → Custom Code for site-wide injection, or in Page Settings → Custom Code for individual pages. Scripts added here appear in the <head> or before the </body> tag across all or selected pages.
Use this option only if you need the LinkedIn feed widget available across multiple pages, for instance, if you're building a global footer section that includes a LinkedIn ticker on every page. For most use cases, the Embed element is cleaner and more predictable.
💡 Webflow's Embed element doesn't render third-party scripts in the Designer view, so you'll see an empty placeholder. This is normal. Use the Preview or Published site to verify the widget renders correctly.
Setting Up Your LinkedIn Feed With CollectSocials
Step 1: Create Your CollectSocials Account
Sign up at CollectSocials with no credit card. Free is a permanent plan, not a countdown: one connected source and 2,000 page views a month, three sources through the 7-day trial, seven layouts, all sixteen themes, the theme builder, custom colours and custom fonts. A 7-day trial of the paid features runs alongside it, and when the trial ends a client's feed keeps serving on the free plan rather than going dark, which matters when you are handing a site over.
Step 2: Create a Feed
Create a new feed in your dashboard. Name it clearly, using your client's brand name if you're building for a client, or your own company name for your studio site.
Step 3: Add Your LinkedIn Company Page
Add LinkedIn as a source. You authorise CollectSocials from LinkedIn's own consent screen and then pick the page from the list of company pages that account administers, so there is no URL to paste, no API key to generate and no app to register: the OAuth handshake is the whole developer overhead, and it happens in the browser. CollectSocials imports recent posts immediately and syncs new content automatically going forward.
Step 4: Curate Your Content
Use the Collect view to decide which posts belong on the site. For Webflow sites, typically design studios, agencies and SaaS products, the curation bar is high. Prioritise posts that demonstrate expertise, announce recognisable work or clients, or show the team's perspective on the industry. Remove anything casual, time-sensitive, or that doesn't hold up as a standalone piece of content when divorced from the LinkedIn context.
Know which of the two modes the feed is in before you hand it over, because they behave differently on the day nobody is watching. By default the feed curates by exception: everything imported is live and rejecting a post is what removes it. Turn on Pre-approve posts and the widget serves only what has been approved, so a new post waits in the queue rather than appearing on the client's site. The second mode is off unless someone switches it on. If you are building for a client, that switch is the difference between a site that publishes their LinkedIn automatically and one that publishes nothing until a human acts, and both are defensible as long as everyone knows which they bought.
Either way, flag curation as an ongoing responsibility in your delivery handoff. The feed is only as good as what goes into it.
The step that outlives the build
The animation shows posts arriving from a connected page and someone deciding which ones a prospect should see. On a Webflow project this is the only part of the feed that still needs a human after launch, which makes it the part to name explicitly in a handoff document or a retainer.
Step 5: Design the Widget With Webflow's Aesthetic in Mind
Webflow sites skew toward restrained, typographically precise design. In CollectSocials' Design Studio:
Layouts: forty to pick from. Masonry or Grid for portfolio-style sections. List for editorial or news-style pages. Carousel for compact areas within a wider layout. Marquee for footer or banner treatments.
Themes: sixteen, all of them available on every plan including free. Minimal, Mono or Shadow for sites with clean, neutral palettes. Glass or Midnight for darker, more immersive Webflow designs. Elegant for client-facing professional services sites. If none is exactly right, the theme builder, the custom colour controls and Google Fonts are open on every plan too, so you can match a client's brand rather than approximating it.
Display options: Webflow audiences respond to visual restraint. Turn off avatars and platform badges if your site is design-forward. Keep dates if recency matters for your content strategy. Show full post text, because Webflow users read.
Forty layouts is the demo, not the spec sheet
The animation runs a single feed through layout and theme changes in the Design Studio. For a Webflow build the useful part is that none of it touches the published site: the embed code stays exactly as pasted, and a layout or theme change made months later propagates on its own.
Step 6: Copy the Script Tag
Make the feed public in CollectSocials and copy the embed script tag.
Step 7: Add to Webflow via Embed Element
In your Webflow Designer, open the page where you want the LinkedIn feed. From the Add panel, drag an Embed element into your layout, whether inside a section, inside a div block or wherever your design calls for it. Click the HTML Embed Code Editor icon that appears, paste your CollectSocials script tag, and click Save & Close.
The Embed element placeholder will appear in the Designer canvas. Resize the containing div as needed. The CollectSocials widget uses Shadow DOM isolation, so it inherits none of Webflow's CSS, and its styling is entirely self-contained. Size the wrapper div to match your column width and the widget will fill it responsively.
Publish the site (or use Preview mode) to see the feed render live.
Webflow-Specific Details You Should Know
The Shadow DOM and Webflow's CSS Architecture
Webflow generates highly specific CSS from its visual editor. When you add a third-party widget without Shadow DOM isolation, the specificity wars begin: Webflow's generated selectors override the widget's styles, or the widget's global styles creep into Webflow's carefully designed components. Either outcome looks broken.
CollectSocials renders inside a Shadow DOM, which creates a hard CSS boundary. Webflow's styles cannot reach inside it, and the widget's styles cannot leak out. From Webflow's perspective, the embed element is an opaque box: it can be sized, positioned, and wrapped, but its internals are isolated. A cross-origin iframe gives you the same boundary and is what we hand out for hosts that strip scripts, such as Squarespace and Wix. On Webflow, where custom code is a first-class feature, the script embed is the better of the two because it participates in your layout instead of sitting in a frame you have to size.
CMS Collection Pages
If your Webflow site uses CMS Collection pages, whether for a blog, case studies or team pages, you can place the Embed element inside the collection item template. The same LinkedIn feed embed code renders on every collection page that uses that template. This is useful for blog posts where a sidebar or footer LinkedIn feed appears consistently across all articles.
Client Handoff Considerations
If you're building a Webflow site for a client and including a LinkedIn feed, document the following clearly in your handoff:
- CollectSocials login credentials belong to the client, so set up the account in their name
- Which curation mode the feed is in, named explicitly: Pre-approve posts on, meaning someone has to release each post, or off, meaning the feed publishes automatically and rejecting is how you take something down
- The embed code in Webflow never needs updating. Changes made in CollectSocials, whether layout, theme or curation, propagate to the live site on their own
- Where the reporting lives, so nobody builds a spreadsheet for it: the dashboard reports feed views, and on a paid plan also clicks and top posts
- Re-authorising is a browser step, not a URL edit. If the connection lapses or the client changes who administers the page, someone signs in again and re-picks the page
Where to Place a LinkedIn Feed on Different Types of Webflow Sites
Agency or Studio Portfolio Sites
Place the feed in a dedicated section on the homepage between the work showcase and the contact section. Label it something with editorial intent, such as "From the Studio," "Thinking," or "What We're Building." A Masonry layout with the Minimal or Mono theme reads as native to high-quality portfolio sites. Six to eight posts is the right volume: enough to signal activity, not so many that it overwhelms the design.
SaaS Product Sites
On a SaaS site, the most effective placement is on the About or Company page rather than the homepage. Homepage real estate is too valuable to dedicate to a social feed when it should drive sign-ups or demos. The About page has a different job, namely context, credibility and story, and a LinkedIn feed supports all three. Use the Mono or Minimal theme. Display product announcements, company milestones, and team culture posts.
Webflow Sites Built for B2B Clients
For B2B client sites, the LinkedIn feed often belongs on the homepage's lower section and on the About page. One thing to set expectations on early if the client has a founder who publishes thought leadership alongside the company brand: LinkedIn gives us company pages and nothing else. There is no personal-profile source, and every plan includes one LinkedIn source, so a two-feed company-plus-founder build is not something to promise in a pitch. What you can do is mix the company page with the client's other live networks in one feed, which is where the multi-source capability actually earns its place.
Careers or Hiring Pages
For any Webflow site with a careers section, a LinkedIn feed showing company culture posts, team highlights, and employee spotlights is highly effective. Candidates who land on your careers page are evaluating whether they want to work there. A live feed of genuine company activity does more for that decision than any amount of "we value growth and collaboration" copy.
Performance Notes
Webflow sites frequently target high performance scores, because Lighthouse audits are part of many client deliverables. Here is what is architecturally true, and what you have to measure on your own page.
Architecturally: the embed is one script file, loaded with defer, so it does not block parsing or execute before your page has rendered. It renders into a Shadow DOM, so no style recalculation crosses the boundary in either direction. It sets no cookies and no client-side storage, which keeps it out of your consent banner's critical path. Those three are binary and you can confirm all of them in DevTools in under a minute.
What we will not tell you is a score, and the reason is worth knowing before a client asks. The single largest image painted in the first viewport becomes the page's Largest Contentful Paint. If your hero or heading is above the feed, that measurement stays yours. If the feed is the first thing on the page and a post carries a full-width portrait image, the feed takes LCP and the number moves, sometimes by a lot. We measured the same page and the same code twice and got materially different scores on that basis alone. So place the feed below your hero, and measure your own build rather than trusting anyone's published figure, including ours.
If your Webflow site uses Webflow's lazy-loading for images, the LinkedIn feed widget loads independently and isn't affected by that setting. The two systems don't interact.
If LinkedIn is one panel of a bigger Webflow build, embedding an Instagram feed on Webflow covers the visual side and embedding a social media feed on Webflow covers running every network on one page.
Start Using CollectSocials Today
One curated feed from 10+ platforms: on your website in a single line of code, or up on the big screen at your event.