Tutorials

Tutorial: Promote your Components UI referral link in your Carrd.co projects

You can now promote any or all of the products on componentsui.com in order to earn a commission every time someone makes a purchase using your referral link.

I want to get the products on as many hands as possible. I rather pay people that have supported my work to promote it instead of paying a big corporation for ads

Disclaimer: This tutorial is for informational purposes only and does not represent any financial advice. You are completely responsible of how you use the information in this post and for the correct use of your affiliate / referral links.

Tutorial

First you need you need to request access to the Components UI referral program by emailing me at oscar@oscaroarevalo.com

Learn all about affiliates in Components UI here → Join the Components UI Referral Program

Once you are in the program, you’ll get a referral link that you can use in a banner or a badge. We will use this link later so have it ready.

Open a Carrd project where you want to add the banner or badge with your referral link and add a new Embed element. You can add the Embed anywhere on the page.

Click on the Embed element: Label it Made with ComponentsUI and change the style to Hidden and Body End

Add Embed Element - Componentsui.com

You can add a badge or a banner to your project. Depending on what you want you need to copy and paste the following code in the Code field:

For a Badge:

<html>

<head>
  <style>
    @import url('https://fonts.googleapis.com/css?family=Open+Sans:300,700&display=swap');

    .badgec {
      display: flex;
      align-items: center;
      width: auto;
      right: 10px;
      bottom: 30px;
      font-family: 'Open Sans', sans-serif;
      position: fixed;
      z-index: 99;
      border-radius: 5px;
      padding: 0.3rem 1rem;
      border: 1px solid #E2E8F0;
      background: #fff;
      color: #494949;
      box-shadow: -1px 1px 5px #dbdbdb;

    }

    .contc {
      margin-left: 15px;
    }

    .builtc {
      color: #FF4E21;
      font-size: 0.9rem;
      font-weight: 300;
    }

    .componentsc {
      font-weight: 700;
      font-size: 1.3rem;
      letter-spacing: -1px;
    }

    img {
      width: 40px;
    }
  </style>
</head>

<body>
  <a target="blank" href="YOUR_REFERRAL_LINK_HERE">
    <div class="badgec">
      <div>
        <img src="https://componentsui.com/favicon.png">
      </div>
      <div class="contc">
        <div>
          <span class="builtc">Built in Carrd.co with</span>
        </div>
        <div>
          <span class="componentsc">Components UI</span>
        </div>
      </div>
    </div>
  </a>
</body>

</html>

For a Banner:

<html>

<head>
  <style>
    @import url('https://fonts.googleapis.com/css?family=Open+Sans:300&display=swap');

    .badge_cui {
      display: flex;
      align-items: center;
      width: auto;
      left: 10px;
      bottom: 20px;
      font-family: 'Open Sans', sans-serif;
      position: fixed;
      z-index: 99;
      border-radius: 3px;
      padding: 7px 14px;
      border: 1px solid #E2E8F0;
      background: #fff;
      color: #494949;
      box-shadow: -1px 1px 5px #dbdbdb;
    }

    .badge_cui:hover {
      border: 1px solid rgba(255, 77, 6, 0.80);
    }

    .containerbadge_cui {
      margin-left: 10px;
    }

    .built_cui {
      color: #1b1c22;
      font-size: 12px;
      font-weight: 300;
    }

    img {
      width: 20px;
    }
  </style>
</head>

<body>
  <a target="blank" href="YOUR_REFERRAL_LINK_HERE">
    <div class="badge_cui">
      <div>
        <img src="https://componentsui.com/favicon.png">
      </div>
      <div class="containerbadge_cui">
        <div>
          <span class="built_cui">Made with Components UI</span>
        </div>
      </div>
    </div>
  </a>
</body>

</html>

Now that you pasted the code, locate the line where it says YOUR_REFERRAL_LINK_HERE. Replace that text with your own referral link.

Replace with you own referral link - Componentsui.com

It should look something like this but with your own referral link:

Referral link example - Componentsui.com

Click Done and Publish Changes. Now visit your website and you should have the Made with Components UI banner or badge on the bottom of your screen.

Banner with you referral link - componentsui.com
Badge with you referral link - componentsui.com

A nifty way to check if you added your referral link correctly is to place the cursor on the banner. Your browser should display a message showing that your referral link will be open in a new tab.

That’s it. Now you have a banner with your referral link that can be used in every Carrd website.

Made with in El Salvador, CA

Components UI © 2021 v 0.9.1.