Corner Ribbon
Connect Corner Ribbon with Webflow to add customizable promotional ribbons that highlight sales, announcements, and offers on your site.
How to integrate Corner Ribbon with Webflow
Corner ribbons are a useful way to highlight time-sensitive offers, new product launches, or important announcements. They sit in page corners and draw attention without blocking content, unlike modal popups that interrupt browsing.
You can install Corner Ribbon through the Webflow Apps Marketplace for automatic setup, or manually embed the JavaScript snippet in your site's custom code. Both methods give you access to the same dashboard-based configuration for customizing position, colors, size, text, and link destinations.
Use the Corner Ribbon app
The Corner Ribbon app in the Webflow Apps Marketplace handles code integration automatically. After installation, you configure the ribbon appearance through the Smartarget dashboard and publish your site to see changes live. This method requires no manual code handling.
The app provides the following:
- One-click marketplace installation that adds the necessary JavaScript code to your site
- Free Smartarget account creation and a 5-minute setup process before configuration
- Dashboard configuration that lets you set corner position, colors, text content, and click-through URLs
- Automatic responsive behavior that adapts the ribbon display across desktop, tablet, and mobile
- Site-wide deployment through Site Settings or page-specific deployment through Code Embed elements
The app requires permissions to read and write custom code and read site data. After installation, log in to your Smartarget account to customize the ribbon, then publish your Webflow site to deploy the changes.
Embed the Corner Ribbon widget manually
If you prefer direct control over code placement, you can embed the Corner Ribbon snippet manually using a Code Embed element. This approach works well when you want page-specific ribbons for targeted campaigns or need to test the integration before deploying site-wide.
- Site-wide placement in Site Settings → Custom Code → Footer code (before \</body> tag) displays the ribbon on all pages
- Page-specific placement using a Code Embed element targets individual landing pages or campaigns
- CMS-driven placement through Rich Text fields enables dynamic ribbon deployment based on collection items
To set up the widget manually, follow these steps:
- Create a free account at Smartarget
- Configure your ribbon in the dashboard (position, colors, size, text, link)
- Copy the generated JavaScript snippet from the Integrations section
- Paste the code into your chosen Webflow location
- Publish your site to see the ribbon live
Place scripts in the footer (before </body>) rather than the head for better page load performance. Custom code only renders on published sites, so you won't see it in the Webflow preview.
If you run into common issues, try the following:
- Ribbon not appearing: Custom code requires site publication. Publish and check your live URL.
- Changes not updating: Clear browser cache, republish, and test in incognito mode.
- Code not executing: Remove any
<html>,<head>,or<body>wrapper tags from the snippet
What you can build
Integrating Corner Ribbon with Webflow lets you create promotional visual elements that maintain your site's design quality while driving specific user actions.
- Flash sale landing pages: Add promotional ribbons to product pages that link directly to checkout, creating urgency through time-sensitive offers
- New feature announcement pages: Deploy announcement ribbons on SaaS marketing sites that drive users to documentation or demo booking pages
- Product status indicators: Display status ribbons (such as "Free Shipping Over [Amount]") on e-commerce pages to influence purchasing decisions
- Event registration pages: Create call-to-action ribbons on webinar or conference landing pages that link to signup forms
Frequently asked questions
For site-wide display, add the snippet to Site settings → Custom code → Footer code (before
</body>). This placement loads the script after page content has rendered, preventing render-blocking behavior. For page-specific ribbons, use a Code Embed element directly on individual pages. The embed element supports up to 50,000 characters and lets you target specific landing pages or campaigns without affecting other pages.Yes. All visual customization is done in the Smartarget dashboard before you generate the embed code. You can adjust corner position (top-left, top-right, bottom-left, bottom-right), background and text colors, ribbon size, message content, and click-through link destination. After making changes, you'll need to generate a new snippet in the Smartarget dashboard and republish your Webflow site for updates to take effect.
Custom code only executes on published Webflow sites. This is a platform-level constraint, not specific to Corner Ribbon. To preview your ribbon, publish your site (or use a staging subdomain) and view the live URL. If the ribbon still doesn't appear after publishing, verify your snippet doesn't contain forbidden wrapper tags like
<html>,<head>, or<body>, which prevent execution.Corner Ribbon includes built-in responsive functionality that adapts across desktop and mobile devices. Test on multiple device sizes after publishing to confirm the ribbon displays correctly across your target screen widths.
Description
Corner Ribbon by Smartarget is a JavaScript-based promotional widget that adds visual elements to your Webflow site. Configure ribbon position, colors, text, and links through the Smartarget dashboard, then deploy site-wide or on specific pages through the Webflow custom code settings.
This integration page is provided for informational and convenience purposes only.
LiveChat
Use LiveChat to talk to your customers in real-time.
LiveChat
Connect LiveChat with Webflow to provide real-time customer support, engage visitors instantly, and manage conversations across multiple channels—all with a customizable chat widget that matches your brand.
Joonbot
Connect Joonbot with Webflow to capture leads through conversational chatbots and qualify visitors automatically.
Intercom Acquire
Connect your Webflow site with Intercom's live chat and customer engagement tools to capture leads, provide instant support, and convert more visitors into customers—all without leaving your Webflow dashboard.
Ideta
Integrate Ideta's AI-powered chatbots and automation tools with your Webflow site to automate customer support, capture leads, and schedule appointments without writing code.
Hyvor Talk
Add privacy-focused commenting, reactions, and community features to your Webflow site with Hyvor Talk's flexible integration options. Enable real-time discussions, membership systems, and moderated conversations without sacrificing user privacy or design consistency.
Drift
Connect Drift's conversational marketing platform with Webflow to capture leads, qualify visitors, and book meetings directly from your website. Add live chat, AI-powered bots, and intelligent routing without complex coding.
Disqus
Connect Disqus with Webflow to add robust commenting to your site, enabling threaded discussions, social logins, and streamlined moderation for active community engagement.
Crisp
Connect Crisp (AI-powered live chat and omnichannel messaging) with Webflow to enable real-time conversations, automate support with intelligent chatbots, and manage every customer interaction from a single, unified inbox
Related integrations
Get started for free
Try Webflow for as long as you like with our free Starter plan. Purchase a paid Site plan to publish, host, and unlock additional features.
