How to Embed a LinkedIn Feed on Your Webflow Site
Webflow attracts a particular kind of builder: designers who think in systems, developers who care about clean markup, and agencies who deliver client sites where visual craft and technical rigour are equally non-negotiable. If you're in that cohort, you already know that "just paste a widget" rarely ends well — inconsistent fonts, CSS leakage, render-blocking scripts, and layouts that shatter when the host site updates.
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.
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 — 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
Watch LinkedIn posts sync automatically from your company page to your website
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 — 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 — 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 for a free 7-day trial with full feature access. No credit card required.
Step 2: Create a Feed
Create a new feed in your dashboard. Name it clearly — 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 by entering the company page URL. CollectSocials imports recent posts immediately and syncs new content automatically going forward. No OAuth setup, no API keys, no developer overhead.
Step 4: Curate Your Content
Use the Collect view to select which posts belong on the site. For Webflow sites — typically design studios, agencies, 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.
If you're building this for a client, flag the curation step as an ongoing responsibility in your delivery handoff. The feed is only as good as what goes into it.
Approve professional posts, hide off-brand content — updates sync instantly to your site
Step 5: Design the Widget With Webflow's Aesthetic in Mind
Webflow sites skew toward restrained, typographically precise design. In CollectSocials' Design Studio:
Layouts: 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: Minimal, Mono, or Shadow for sites with clean, neutral palettes. Glass or Aurora for darker, more immersive Webflow designs. Corporate for client-facing professional services sites.
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 — Webflow users read.
Watch the widget transform through layouts and themes — find your perfect match
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 — inside a section, inside a div block, 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 — 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. This is the only correct way to add a third-party widget to a Webflow site.
CMS Collection Pages
If your Webflow site uses CMS Collection pages — 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 — set up the account in their name
- The curation layer requires periodic attention — approve new posts weekly or set up the feed to auto-approve and curate by exception
- The embed code in Webflow never needs updating — only CollectSocials-side changes (layout, theme, curation) propagate automatically
- If the client changes their LinkedIn company page URL, the source in CollectSocials needs updating
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 — "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 — context, credibility, story — and a LinkedIn feed supports all three. Use the Corporate 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. If the client has a strong personal brand alongside the company brand — a founder who publishes thought leadership — consider creating two feeds: one from the company page for company announcements, one from the founder's profile for industry commentary. Display them together with CollectSocials' multi-source feed capability.
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 — Lighthouse audits are part of many client deliverables. The CollectSocials embed loads asynchronously, so it does not block the main thread or affect Largest Contentful Paint. The Shadow DOM renders the widget as a self-contained unit after the main page content. Your Webflow site's Core Web Vitals remain clean.
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.
CollectSocials is coming soon
The social media aggregator built for performance and simplicity — pull from 12+ platforms without sacrificing page speed.