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.
Urgency Deal
Connect Urgency Deal with Webflow to encourage visitors to complete purchases before time runs out.
Smartarget Stories
Connect Smartarget Stories, a story-format content widget, with Webflow to display images and videos in a swipeable format for product announcements, promotions, and brand content.
Brandzway Reviews Photos and More
Connect Brandzway with Webflow to collect and display customer reviews with photo submissions on your e-commerce site.
Boosters
Connect Boosters with Webflow to add interactive features like GSAP animations, carousels, and improved forms without writing custom JavaScript.
Flowstar Sales Notification
Connect Flowstar Sales Notification with Webflow to display real-time purchase notifications on eCommerce sites.
Chat Everywhere
Connect Chat Everywhere to Webflow to help visitors connect to messaging platforms through a customizable floating button widget.
Chat Whisperer
Connect Chat Whisperer with Webflow to deploy automated chatbot responses using ChatGPT and Claude models.
Flowstar Click to Call
Connect Flowstar Click to Call with Webflow to add mobile-optimized phone buttons that convert visitors into callers with a single tap.
Social Intents
Connect Social Intents with Webflow to chat with website visitors directly from Microsoft Teams, Slack, or Google Chat without separate agent software.
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.
