How to Add Blog CTAs in Your Webflow CMS

If you want to create great CTAs (Calls to Action) to drive customer action on your Webflow blog and want a how-to guide, you're in the right place.

We'll show you exactly how to embed HTML code to create eye-catching buttons and banners on Webflow.

There's a bit of a catch, though — embedding code in Webflow can be clunky. So we'll also show you how Letterdrop's user-friendly and intuitive CMS can help get CTAs into Webflow much more easily.

CTAs and Webflow

Your CTAs should stand out and drive readers to engage with you.

There are different types of CTA, primarily:

• A text CTA — A link attached to a snippet of text.
• An HTML element — this can be a button or banner.

Buttons and banners are eye-catching, so they are the way to go when driving action — have a look at these examples:

‎Want to stand out with HTML elements on Webflow? Here's the process:

Creating Text-Link CTAs in Webflow

Making a Text Link CTA in Webflow is the easiest CTA to do.

When editing your blog post on Webflow, highlight a snippet of text and click on the link option — add your link, whether it's to your sign-up or demo page.

Creating a CTA Button in Webflow

Code embeds give you the ability to insert a variety of CTAs throughout your blog.

1. First, design your Call to Action block, in this case, a button. Do this on a separate page, such as your design system page.
2. Publish the page containing the design, and open it in your browser.
3. Inspect the element by right-clicking on the div and selecting "inspect element."
4. After locating the div in your code, right-click and choose "HTML" from the list of available Copy options.

5. ‎Return to your blog post in Webflow, find a space in your blog post where you'd like the button to go, and click the code embed symbol. Paste the HTML code you just copied.

6. You can also search the web for "Button Code" and copy HTML from the results instead.

That's it! You won't be able to see the block inside Webflow, though. You'll need to publish to your staging domain first to make sure it looks correct.

Creating a CTA Banner in Webflow

Creating a banner CTA in Webflow is similar to creating a button, only with more code.

As with the button, design and publish your banner on your designer page, inspect the code in your browser, and copy the relevant HTML code. Embed it into Webflow in the same manner as before.

Remember, you can also search "Banner Code" on the web and copy the HTML code provided.

All of this is a lot of work, isn't it?

Making CTAs on Webflow Is a Publishing Process Roadblock

Creating CTAs on Webflow is a manual process and easy to mess up — there's a lot of HTML and JavaScript.

You have to store both button and banner code in a third-party application, such as Google Docs or Notes, and have to copy and paste every time. It's easy to copy the code wrong and break the page, especially when it comes to the more complex banner code and when you're rushing to publish.

You can't even see how your buttons look on-page until you publish to staging.

Using Webflow for CTAs can be slow, time-consuming, and error-prone. Letterdrop, on the other hand, is a Webflow CMS option that makes CTA integration easy.

Letterdrop: CTAs Made Easy

Did you know that Letterdrop's CMS integrates seamlessly with Webflow?

You can create a button with just one click — just name it, and insert the link.

Check it out:

‎For banners, Letterdrop lets you insert the code snippet on-page. Just go to the "Insert HTML widget" option. and yo. These templates can be made into forms by saving the HTML code embed with variables, too, so you never have to deal with code more than once. Just go to the "Insert HTML widget" option.

You can even save code templates for future use. These templates can be made into forms by saving the HTML code embed with variables, too, so you never have to deal with code more than once.

This means you can save the HTML code embed with variables. After building your variable templates, you simply pick and choose the CTA you want and enter a custom message — without ever dealing with code!

‎

‎

You can also preview your blog post before publishing to check that everything looks good. On the draft page, click "Review and Submit" and then "Preview Post."

‎You can easily integrate Letterdrop's intuitive CMS into your Webflow blog to create CTAs, coordinate your socials, align on a real-time content calendar, and much more.

Draft Blogs and Add CTAs in Letterdrop

Now you know how to add a CTA in the Webflow CMS, and you can create eye-catching CTAs with HTML embeds on your Webflow page in the form of buttons and banners. But it requires you to store, copy, and paste HTML codes using third-party applications like Google Docs.

Not ideal.

With Letterdrop, you can create CTAs for Webflow in no time using its smooth and intuitive CMS. You can even make templates with variables in the code, so the button code is stored where you need it — in the CMS — and you're naming buttons with natural language. That's true "no-code."

Check out Letterdrop for your Webflow blog. Sign up for a demo today!