How I hacked Webflow’s CMS for a personalized UX on budget

September 20, 2024

•

3 min read

To implement localization in Webflow, you typically need the enterpri$e plan. While that plan is robust, it’s unnecessary for the current scale of our site. So, I got a little creative with the CMS.

What we wanted to accomplish

Personalize content based on top accounts and target segment
Display content in other languages
Keep it easy to manage and track for updates
Help the sales team with more targeted content and approachable CTAs
‍

How I delivered a scalable, tailored content structure without going enterprise 🤑

1. Reworking the CMS for flexibility

‍Connected a new collection for our solutions

We have a large amount of solutions for our platform and having to rewrite descriptions for them across many pages becomes a pain in the ass tedious, also making it hard to track which type of messaging resonates the most with our users.

By converting them to a CMS (and even as a component symbol), sales or product can creates a new personalized landing page by simply choosing which solutions they want to highlight and without needing to keep rewriting content. This speeds up the launch process and provides insights into which messaging is more impactful.

I set up a simple collection that includes a color-and-icon system with alternate headers and descriptions for different languages or industries. This structure could easily expand to include options for customer verticals, buyer personas, or even variations in tone—depending on what we want to test.
‍

The CMS for the landing page includes a toggle system that shows the corresponding language fields when a language is selected.

Toggling between languages (this gets slightly technical)
It was tricky getting the language toggles to work correctly with the solutions cards. To reference the right language for the solution on the landing page, the solutions CMS needed to reference the landing page CMS, and vice versa.

Initially, both languages showed up in the cards, instead of just the selected one. After some troubleshooting with ChatGPT, I found truth by grouping the text by language within a single class “card-language”, instead of splitting it into header and subheader groups.
‍

View of final class structure compared with ChatGPT's suggestion. — Even though I don’t pay $20 a month for ChatGPT, their free version still allowed me to build off their answer and find the solution.
‍

2. Making the consideration stage more approachable

Showing a potential client’s name or logo grabs attention, but it’s the personalized content that keeps them engaged. Instead of generic USPs, we highlight only the solutions relevant to their needs. Likewise, instead of showcasing all our top client logos, we display logos from companies in their specific industry.

To add a personal touch for sales, I updated our CTAs to include the name and photo of the –showing the user exactly who they will be speaking to. This also featured a direct link to their Chili Piper schedule and a short bio to build familiarity.
‍

Sales team data is now in a CMS collection so their information could be easily referenced in future pages.

‍

Creatively stretching the tools at our disposal

This page could have been built without using extra CMS, but that would’ve sacrificed scalability and the ability to effectively test different messaging. By investing upfront and pushing Webflow’s capabilities, we now have a system that seamlessly handles personalization, while giving us the flexibility to test and iterate across future projects.

Next step: refine copy and design based on user behavior and feedback from sales.

‍