Corner Popup plugin

← Back

How to set up and customize your Corner Popup plugin

CORNER POPUP CARRD PLUGIN — SETUP & CUSTOMIZATIONCorner Popup is a simple popup plugin for Carrd that slides into the bottom-right corner of your website as a visitor scrolls down the page.You can use it to announce a new product, promote an offer, link visitors to another page, share a discount code, or draw attention to an important call-to-action.There are two variants:- Normal CTA — clicking the button opens a URL.
- Promo Code — clicking the button copies a promo code to the visitor's clipboard.Get the Corner Popup Carrd plugin here:https://cornerpopup.carrd.co1. DOWNLOAD THE PLUGIN TEMPLATEStart by downloading or copying the Corner Popup plugin template from:https://cornerpopup.carrd.coChoose the popup variant you want to use:- Normal CTA button
- Promo code copy buttonThe plugin code contains three main parts:<style>
CSS that controls how the popup looks.HTML
The actual popup content, including the icon, text and button.<script>
JavaScript that controls when the popup appears, closing the popup, and other interactions.You generally don't need to understand all of the code to customize the plugin.2. ADD THE POPUP TO YOUR CARRD SITEOpen your Carrd site in the Carrd editor.Add a new Embed element:Add Element → Embed → CodePaste the entire Corner Popup code into the Embed element.Make sure you copy everything, including:<style>the popup HTMLand<script>Publish your Carrd site and test the popup on the live site.Depending on the scroll trigger you've chosen, you may need to scroll down the page before the popup appears.3. CUSTOMIZE THE HEADER TEXTLook for the popup title in the HTML.For the normal CTA version:<h2
class="cta-popup-title"
id="ctaPopupTitle"
>
Something new is here
</h2>Change:Something new is hereto your own headline.For example:<h2
class="cta-popup-title"
id="ctaPopupTitle"
>
Get 20% off your first order
</h2>For the promo-code variant, look for:<h2
class="promo-popup-title"
id="promoPopupTitle"
>
Get 20% off
</h2>You can replace Get 20% off with any headline you want.4. CUSTOMIZE THE SUBTEXTFor the normal CTA version, look for:<p class="cta-popup-text">
Check out our latest offer and learn more about what's new.
</p>Replace the text between the <p> and </p> tags.For example:<p class="cta-popup-text">
We're offering 20% off for new customers until Sunday.
</p>For the promo-code variant, look for:<p class="promo-popup-text">
Use promo code
<span class="promo-popup-code">SAVE20</span>
at checkout to get 20% off your purchase.
</p>You can edit the surrounding text while keeping the promo-code <span> in place.5. CUSTOMIZE THE CTA BUTTON TEXTNormal CTA variantLook for:<a
href="https://example.com"
class="cta-popup-button"
target="blank"
rel="noopener noreferrer"
>
Learn more
</a>Change:Learn moreto your preferred CTA.For example:Get startedView offerLearn moreJoin nowBook a callStart free trialPromo-code variantLook for:<button
class="promo-popup-cta"
id="promoPopupCopyButton"
data-code="SAVE20"
>
Copy promo code
</button>Change:Copy promo codeto whatever you want the button to say.6. CHANGE THE CTA BUTTON LINKThis only applies to the normal CTA version.Look for:href="https://example.com"Replace the example URL with the page you want visitors to open.For example:href="https://yoursite.com/pricing"The complete button might look like:<a
href="https://yoursite.com/pricing"
class="cta-popup-button"
target="blank"
rel="noopener noreferrer"
>
View pricing
</a>By default, the link opens in a new browser tab because of:target="_blank"If you want the link to open in the same tab, remove:target="_blank"7. CHANGE THE PROMO CODEThis applies to the promo-code variant.There are two places where the promo code appears.First, the code displayed to the visitor:<span class="promo-popup-code">SAVE20</span>Second, the actual code copied to the clipboard:data-code="SAVE20"Change both to your new promo code.For example:<span class="promo-popup-code">WELCOME25</span>and:data-code="WELCOME25"The button will now copy WELCOME25 to the visitor's clipboard.After it has been copied, the button temporarily changes to:✓ Code copied!8. CHANGE THE FONTThe font is controlled in the popup's CSS.For the normal CTA variant, look for:.cta-corner-popup {
...
font-family: Arial, sans-serif;
}For the promo-code variant:.promo-corner-popup {
...
font-family: Arial, sans-serif;
}Change Arial to your preferred font.For example:font-family: Georgia, serif;or:font-family: Inter, Arial, sans-serif;If you're using a custom web font, make sure that font is already being loaded by your Carrd site or included separately.9. CHANGE THE FONT SIZESHeaderFor the normal CTA variant, look for:.cta-popup-title {
...
font-size: 20px;
}For the promo-code variant:.promo-popup-title {
...
font-size: 20px;
}Change 20px to your preferred size.For example:font-size: 24px;SubtextLook for:font-size: 14px;inside .cta-popup-text or .promo-popup-text.For example:.cta-popup-text {
...
font-size: 16px;
}ButtonThe button also uses:font-size: 14px;Change this inside .cta-popup-button or .promo-popup-cta.10. CHANGE THE POPUP BACKGROUND COLORFor the normal CTA version, find:.cta-corner-popup {
...
background: #ffffff;
}For the promo-code version:.promo-corner-popup {
...
background: #ffffff;
}#ffffff is white.Replace it with any CSS color.For example:background: #fff7ed;You can use HEX, RGB, HSL, or other valid CSS colors.11. CHANGE THE CTA BUTTON COLORThe default button uses a tangerine orange:background: #f97316;For the normal CTA version, you'll find this inside:.cta-popup-buttonFor the promo-code version:.promo-popup-ctaChange it to any color you want.For example:background: #2563eb;The darker hover color is controlled separately:.cta-popup-button:hover {
background: #ea580c;
}or:.promo-popup-cta:hover {
background: #ea580c;
}Change this color too if you're changing the main button color.12. CHANGE THE ICON COLORThe default icon uses the same tangerine palette.For the normal CTA version:.cta-popup-icon {
...
background: #fff7ed;
color: #f97316;
}For the promo-code version:.promo-popup-icon {
...
background: #fff7ed;
color: #f97316;
}background controls the pale circular background.color controls the SVG icon color.13. REPLACE THE SVG ICONThe default popup uses a loud-hailer / megaphone SVG.Look for the <svg> block inside:<div class="cta-popup-icon">or:<div class="promo-popup-icon">It will look something like:<svg
viewBox="0 0 24 24"
...
>
...
</svg>Replace the entire <svg>...</svg> block with another SVG icon.For example:<div class="cta-popup-icon">YOUR NEW SVG CODE HERE</div>You can get SVG icons from libraries such as:- Lucide
- Heroicons
- Tabler Icons
- Phosphor IconsFor best results, use an SVG that supports currentColor. This allows the icon to automatically use the color defined in the popup's CSS.14. CHANGE THE POPUP WIDTHThe default desktop width is:width: 340px;You'll find this inside:.cta-corner-popupor:.promo-corner-popupFor a smaller popup:width: 300px;For a larger popup:width: 400px;You can experiment with the width until it fits your content and site design.15. CHANGE THE POPUP HEIGHTThe popup does not have a fixed height by default.Instead, its height automatically adjusts based on the content inside it.This is usually preferable because longer text automatically makes the popup taller.If you specifically want a fixed height, you can add:height: 350px;For example:.cta-corner-popup {
width: 340px;
height: 350px;
}However, in most cases it's better to leave the height automatic.You can also control the amount of space inside the popup using:padding: 32px 28px 28px;Increasing the padding makes the popup feel larger and more spacious. Reducing it makes the popup more compact.16. CHANGE WHEN THE POPUP APPEARSThe popup can automatically slide in after the visitor reaches a certain percentage of the page.For the normal CTA version, look for:const CTAPOPUPTRIGGERSCROLLPERCENT = 30;The number represents how far down the page the visitor needs to scroll.For example:const CTAPOPUPTRIGGERSCROLLPERCENT = 10;Popup appears after scrolling approximately 10% of the page.const CTAPOPUPTRIGGERSCROLLPERCENT = 30;Popup appears after scrolling approximately 30%.const CTAPOPUPTRIGGERSCROLLPERCENT = 50;Popup appears halfway down the page.To show the popup immediately:const CTAPOPUPTRIGGERSCROLLPERCENT = 0;Promo-code variantThe promo-code popup uses a different setting:const PROMOPOPUPTRIGGERSCROLLPERCENT = 30;Change the number in exactly the same way.This means you can have the normal CTA popup and promo-code popup trigger at different points on your site.17. CHANGE THE POPUP POSITIONThe popup is positioned in the bottom-right corner using:right: 24px;
bottom: 24px;Increase these values to move the popup further away from the edges of the browser.For example:right: 40px;
bottom: 40px;Or reduce them to move the popup closer to the edges.18. CHANGE THE CORNER ROUNDNESSThe popup uses:border-radius: 16px;For slightly rounded corners:border-radius: 8px;For more rounded corners:border-radius: 24px;For square corners:border-radius: 0;19. CONTROL WHAT HAPPENS AFTER SOMEONE CLOSES THE POPUPBy default, the popup remembers when someone closes it for the current browser session.For the normal CTA popup:const CTAPOPUPREMEMBERCLOSE = true;For the promo popup:const PROMOPOPUPREMEMBERCLOSE = true;With this set to true, closing the popup prevents it from appearing again during that browser session.If you don't want this behaviour, change it to:const CTAPOPUPREMEMBERCLOSE = false;or:const PROMOPOPUPREMEMBERCLOSE = false;20. USING BOTH POPUP VARIANTS ON THE SAME SITEThe Normal CTA and Promo Code versions have been designed to use different CSS classes, IDs, JavaScript variables, functions, and browser storage keys.The normal version uses names such as:cta-corner-popupctaCornerPopupCTA_POPUP_TRIGGER_SCROLL_PERCENTThe promo version uses:promo-corner-popuppromoCornerPopupPROMO_POPUP_TRIGGER_SCROLL_PERCENTThis prevents the code for one popup from interfering with the other.If you're using both on the same page, you may also want them to appear at different scroll positions.For example:const CTAPOPUPTRIGGERSCROLLPERCENT = 20;and:const PROMOPOPUPTRIGGERSCROLLPERCENT = 70;The normal CTA popup would appear earlier in the page, while the promo popup would appear much later.21. TEST YOUR POPUPAfter you've finished customizing the plugin:1. Save your Carrd site.
2. Publish it.
3. Open the live site.
4. Scroll down until you reach your configured trigger point.
5. Check that the popup slides in correctly.
6. Test the close button.
7. If you're using the normal CTA version, click the CTA and make sure the correct URL opens.
8. If you're using the promo-code version, click the button and paste somewhere to confirm that the correct code was copied.
9. Test the site on both desktop and mobile.If you've already closed the popup while testing, remember that the plugin may remember this for the current browser session. Open the site in a new private/incognito window to test it again.QUICK CUSTOMIZATION REFERENCENormal CTA scroll trigger:CTA_POPUP_TRIGGER_SCROLL_PERCENTPromo-code scroll trigger:PROMO_POPUP_TRIGGER_SCROLL_PERCENTNormal CTA button link:href="https://example.com"Promo code:data-code="SAVE20"Popup width:width: 340px;Popup background:background: #ffffff;Tangerine CTA:background: #f97316;CTA hover:background: #ea580c;Icon background:background: #fff7ed;Icon color:color: #f97316;Popup corner radius:border-radius: 16px;Popup distance from right:right: 24px;Popup distance from bottom:bottom: 24px;THAT'S IT!Once the code is inside a Carrd Embed element, most customizations only require changing a few lines of HTML or CSS.You can use the Corner Popup Carrd plugin for announcements, special offers, lead magnets, new product launches, discount codes, affiliate offers, important links, or any other call-to-action you want visitors to notice.Get the plugin and template here:https://cornerpopup.carrd.co

• Home