Webflow Personalize Text

Last updated 10/05/2023

Before adding personalized text make sure you have added the initialization script tag.

With this feature, you can replace generic content with a personalized message that users only see once they have authenticated. For example, on your homepage, you can mention the user by name:

The available content to insert is First Name, Last Name, Full Name, and Email Address.

To set this up on your Webflow site, please follow these steps:

Step 1

Find the text on your homepage, or other pages, that you want to personalize.
Select the text field. You can find the text field by selecting it on the page, or by finding it in the Navigator in the left menu.
In the right pane, click on the gear icon to go to Element Settings.
Then, set the ID to a unique value (eg: grow-business), and record it for use in a later step.

Step 2

On your Webflow Dashboard, click on the 3 dots at the bottom right of your project.
Then, select Settings.

Step 3

Select the Custom Code from the left menu.

Step 4

In the Head Code field, paste in the following script tag after the Bread & Butter initialization script tag:

<script>
null == window.breadbutterQueue && (window.breadbutterQueue = []), window.injectBreadButter = function (e) { "undefined" != typeof BreadButter && BreadButter.init ? e() : window.breadbutterQueue.push(e) };
injectBreadButter(function () {
    BreadButter.ui.applyText('FIELD_ID', "TEMPLATE", {
        type: 'TYPE'
    });
});
</script>

Note: If you have other Bread & Butter feature snippets, just add this snippet below them.

Step 5

Replace FIELD_ID with the ID that you set in Step 1.
Replace TEMPLATE with the new text that you want to appear when a user authenticates. You can use plain text or html, which must be specified in the TYPE below. The available customization fields are:

%FIRST_NAME%

%LAST_NAME%

%NAME%

%EMAIL%

Note: This will replace all of the text in the text field.
Replace TYPE with the content type: either 'html' or 'text'. Use 'text' if the content is just plain text. Use 'html' if you have included HTML tags in the TEMPLATE content.

Step 6

Click Save Changes.
Publish your website, when ready.

Don’t use Bread & Butter? Want to learn more about how Bread & Butter solves the four biggest problems facing marketers today? Book a demo and see how Bread & Butter is helping marketers make the most of their first-party data

BOOK A DEMO