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.
Poper
Connect Poper with Webflow to deploy AI-powered popups that capture leads, reduce cart abandonment, and increase conversions through behavioral targeting.
ChatSale
Connect ChatSale with Webflow to add ChatGPT-driven chatbots to a site for automated lead capture and qualification.
Salespeak
Connect Salespeak with Webflow to deploy chat widgets with AI-powered lead qualification that engage visitors and sync conversation data to CRM systems.
Smartarget Countdown Popup
Connect Smartarget Countdown Popup with Webflow to display time-limited offers and event deadlines through JavaScript embed codes.
Announcement Bar
Connect Announcement Bar by Smartarget with Webflow to display promotional notifications, shipping thresholds, and time-sensitive offers across your site through JavaScript embedding.
Massively AI
Connect Massively AI, an AI-powered chatbot platform, with Webflow to automate customer support and qualify leads through conversational marketing on your site.
Flowstar Spin Wheel Gamification
Connect Flowstar Spin Wheel’s gamification widget platform with Webflow to add interactive pop-ups that capture leads in exchange for discount codes and rewards.
Tidio
Connect Tidio with Webflow to add live chat and AI chatbot functionality on websites for customer engagement.
Twilio
Connect Twilio to Webflow forms and automate customer communications. Send SMS notifications, appointment reminders, and authentication codes via middleware.
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.
