Streaming live at 10am (PST)

Simplest / cheapest way to turn URL into a rich "card"?

#1

We want to aggregate a lot of links from our users. What we want to happen:

  1. A user submits a URL via a Webflow form.
  2. [Magic Step] Using Webflow or Zapier or OpenGraph, metadata is extracted from that URL: its page title, thumbnail, and date published, for example.
  3. That metadata is added to a CMS collection, whose layout creates a “rich card” using the image, title, date, and a handy source URL.

In other words, if a user submits this:

image

Webflow turns that into this rich “card” (with metadata, image, faivcon, etc.):

From my research, I need something to crawl the metadata. Is this something that needs to be coded by hand? The above images are using Slack’s “unfurl” feature to crawl the metadata. Facebook does this with OpenGraph. Zapier almost looks like it can do this, but the only integration that looks right (Apify) requires significant coding skills.

I almost want to copy what Slack does, but I don’t know how to get that metadata out to Webflow.

#2

Take a look at the embed.ly api. They also have a card component you use manually.

#3

Thank you, webdev! That’s not a bad idea, actually, and it saves a lot of time!

I had been looking for a CMS/form integration (as it’s mostly user-generated content), but I’ve also just realized that Webflow Forms and Webflow CMS have actually zero connection: they have nothing to do with each other, i.e. a submitted Form -> New CMS item. So, perhaps I’m also in the wrong court, too.

I did find a Zapier workflow to get Webflow Forms -> Slack Messages for Metadata extraction -> Webflow CMS, for what it’s worth.

Zapier takes the Webflow form submission’s URL, sends that URL to a private Slack channel, and then Zapier takes the metadata from Slack and adds it back into Webflow’s CMS.