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.
Twise
Connect Twise, an AI chat assistant, with Webflow to answer visitor questions, capture leads, and respond in 92 languages using a chat widget that learns from your site content.
Flowstar: Banners
Connect Flowstar: Banners with Webflow to display promotional pop-ups and announcement banners without writing code
Flowstar Urgency Countdown Timer
Add deadline-driven countdown timer bars to any Webflow page using Flowstar's no-code app.
Click to Call
Add Smartarget Click to Call to your Webflow site to give visitors a floating phone button that connects them to your team from any page.
Quiz Popup
Connect Quiz Popup with Webflow to embed branching quiz popups that collect visitor data, capture emails, and route product recommendations on your site.
Social Chat Buttons
Connect Social Chat Buttons with Webflow to add floating multi-channel messaging buttons to your site, connecting visitors to over 15 platforms.
Flowstar Customer Testimonials Slider
Connect Flowstar with Webflow to display customer testimonials in slider or grid layouts using the Flowstar app embed or the Webflow CMS API for programmatic control.
Supersparks
Connect Supersparks with Webflow to add commenting, reviews, community posting, and upvoting through pre-built components and custom attributes.
Smartarget FAQ
Connect Smartarget FAQ, a customizable FAQ widget, with Webflow to display frequently asked questions on your site and reduce support requests.
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.
