Combining static and dynamic text in a text block or rich text element

[Wennerholm (Lukas Wennerholm)]

Is there a way to combine static and dynamic text in a text block or a rich text field?

Examples:

• Best way to send money from {Country} in 2023
• The currency in {country} is {currency name} and the currency code is {currency code}. To transfer money, make sure to follow these steps: {list of steps}.
• etc.

This is such a trivial thing to achieve in any programming language, not to mention in other nocode tools such as Bubble. That being said, I’m surprised to find myself having to write a forum post about this because I couldn’t find a solution to this when googling or searching this forum.

Without this functionality, there’s no way to build dynamic pages in Webflow without having every piece of “dynamic” content reference a field in your CMS database.

[memetican (Michael Wells)]

Hey Lukas,

Do you have a demonstration of exactly where you’re using this? I.e. are these fields in a richtext element, on a collection page or within a collection list?

[ChrisDrit]

@Wennerholm

Without this functionality, there’s no way to build dynamic pages in Webflow without having every piece of “dynamic” content reference a field in your CMS database.

In your other experiences with programming languages and with Bubble, where is that dynamic text stored to populate the static text?

Also, if you have 30 different pages, how was each unique variable “Country” (assuming you have list of 30 countries as well) bound to the correct page?

I ask because with traditional programming frameworks you query for a record from the database and then assign that field within static text as you’ve mentioned in your example.

It sounds like this doesn’t solve your problem, but this is what CMS templates do for you.

If that doesn’t solve your problem then you can to do this client-side with JQuery. It’ll need to parse the page, or specific elements, and swap out variables for text from some list you either hard code or query through an API.

You can also try to shoe horn existing solutions like this for your needs: Powerful Rich Text - Add HTML and components to Webflow Rich Text Block

That will swap out variables you embed within RT for values residing on the same or different Webflow pages.

[Wennerholm (Lukas Wennerholm)]

Here is an example from Bubble where records from my country database (e.g. country names, currencies) and provider database (e.g. provider names) is pulled. This is combined with data from the API request to the money transfer providers.

In Bubble, I would do the following in a Workflow

1. Page is loaded
2. Get URL path parameters
3. Do a search for Countries where some field matches the URL path parameters.
4. Display that data in a text or rich text element.

And when data has been returned from the APIs, I would populate the text with data from those as well (client-side).

PS. the text in the images is translated with Google Translate to English.

I also use this technique to build landing pages for programmatic SEO, where similar pages share a lot of the same content but a lot of variables are used to make the content unique for each page. In Webflow, it looks like I need to store the full texts for each CMS item (i.e. several paragraphs of text), instead of adding the text to the Collection page template and insert variables where needed.

[Wennerholm (Lukas Wennerholm)]

It’s stored in my Bubble Database, so very similar to CMS collection items in Webflow.

I’m using CMS templates in Webflow to build these pages, but I’m surprised that I can’t query a {collection_item.field} and insert it as a variable to a plain text or rich text element.

From what I hear from you, I’ll have to build the complete paragraphs and save them as fields to each CMS collection item. It works, of course, but it feels a bit redundant and makes it very inflexible and time-consuming to change the copy.

[ChrisDrit]

@Wennerholm

I’m using CMS templates in Webflow to build these pages, but I’m surprised that I can’t query a {collection_item.field} and insert it as a variable to a plain text or rich text element.

I see. Your needs are more of the opposite of how Webflow works today.

@Wennerholm

From what I hear from you, I’ll have to build the complete paragraphs and save them as fields to each CMS collection item. It works, of course, but it feels a bit redundant and makes it very inflexible and time-consuming to change the copy.

No, I wouldn’t do that.

So if you have 30 country pages, those are 30 items in your CMS.

Someone lands on a country page and pulls that item out of the CMS for display on your CMS template.

Since you can’t query in Webflow, what you could do instead is add a (multi)reference field to that pages associated data.

Now you can access that on the template page.

• What you’re trying to do: Make a database query based upon many different url params when visitors land on 1 page.

• With Webflow you need to: Send people to many different pages (the correct country page) that then hard codes a reference to all the associated data you need.

Now you can mad lib your copy. But you can’t change what’s inserted into your mad libs from a url param, unless…

@Wennerholm

And when data has been returned from the APIs, I would populate the text with data from those as well (client-side).

You can do this too, or instead of using the (multi)reference option.

Use a 3rd party service like NoCodeAPI. They make good use of caching so querying on page load should be efficient.

Good Luck!

[memetican (Michael Wells)]

Hey Lukas, thanks for sharing-

I’m in the middle of upgrading Sygnal’s templatting and data-binding libs so your use case caught my interest.

In general, Webflow’s hosting solution avoids building pages dynamically as much as possible, because that massively increases the server costs and complicates CDN deployment. Even simple dynamics like randomizing a collection list only refreshes every 12 hours.

But you can accomplish this kind of template + content meld effectively on either side of the page build.

CLIENT-SIDE

You can deliver the page with your { variable } template, retrieve your data and then process the template using client-side js. Handlebars or mustache are good for template processing, and give you a nice bridge between JS objects and HTML.

My agency has our own custom solution for this because we commonly need to integrate a range of different datasources- CMS data, plus external data. However it’s client side which means we don’t integrate with secure APIs from the client. Instead we push that data into the CMS or another DB securely and access it from there.

Is your API request to a public, unsecured API? If so, you could use that same approach here.

SERVER-SIDE

Have a server-side process that composes your rich text content, and then syncs it to Webflow through the API. For a lot of teams, AirTable is the go-to here since it has an easy interface and scripting support. For the sync, powerimporter pro or whalesync are popular, or you could build something custom particularly if it’s a one way AirTable → Webflow CMS sync.

This gets you 90% of the way there, however if your API data needs to be more real-time, you may still need to handle that piece client-side.

HYBRID

Obviously you can mix these approaches to suit your use case, but one good direction you might look is Wized + Xano. Together they are the closest thing you’d get to Bubble-like nocode functionality on a pixel-perfect Webflow hosted site.