ClickBank Trust Badge

The ClickBank Trust Badge (CBTB) is a required header or tab that displays the ClickBank brand on any product page that has a link to a ClickBank order form.

The following subjects are covered in this article:

Overview

The ClickBank Trust Badge is a header, displaying the ClickBank brand, that must be displayed on all pages that contain a ClickBank pay link leading to a ClickBank order form. This promotes a secure experience for the customer, regardless of the path that led them to your pitch page.

When the CBTB is clicked by the user, a modal displays with a short text summary identifying ClickBank as the retailer for the product, as well as Better Business Bureau (BBB) ratings for ClickBank. Note, as per BBB requirements, the BBB image and text are links that open a new browser window to the BBB site review for ClickBank. This link serves to increase customer confidence in the transaction process.

ClickBank has provided JavaScript that can be used to add the CBTB to any product page. The CBTB can be added as a header bar or as a floating tab, and can be implemented in one of eight color palettes – four greyscale and four full-color. If you are a vendor, you can choose the style and color configuration that works best with your site.

Since the CBTB is mandatory, your product can be disapproved or removed from the marketplace if your Pitch Page does not display the CBTB correctly.

Display

The CBTB can be displayed as a header bar or as a floating tab.

NOTE – Users on Internet Explorer 8 will always see the header bar due to limitations within the browser.

The header bar is centered on the top of the page. When the user scrolls down, the header scrolls off the page. For example:

This image shows a blank page with the ClickBank Trust Badge displayed as a header along the top. The CBTB text is ClickBank® | Trusted. Secure. A small image of a padlock is displayed after the word Trusted.

The floating tab can be placed in any of the four corners of the page.

If the tab is displayed in either of the upper corners, the tab scrolls off the page when the user scrolls down. If the tab is displayed in either of the lower corners, it stays static and remains in that corner when the user scrolls down. The tab is positioned 10 pixels from the edge of the browser regardless of the window size.

For example:

This image shows a blank page with the ClickBank Trust Badge displayed as a tab in the upper left. The CBTB text is ClickBank® | Trusted - Secure. A small image of a padlock is displayed after the word ClickBank.

If the user clicks the CBTB, it expands to show ClickBank's BBB rating. The user can then click on the image or rating to view ClickBank's BBB page.

For example:

 This image shows the expanded ClickBank Trust Badge. The top section includes the text ClickBank® | Trusted - Secure and an image showing ClickBank's A+ rating with the Better Business Bureau. The bottom section has the following text: ClickBank is the trusted retailer for vendor.clickbank.com. If you aren't completely satisfied with your purchase, let us know. We'll make it right. Your satisfaction is guaranteed!

There are eight color palette choices. These are the greyscale options:

This image shows the greyscale color palette options. The options are White, Light Grey, Dark Grey, and Black. Black is selected.

These are the color options:

This image shows the color palette options. The options are Dark Blue, Light Blue, Light Yellow, and Light Green. None are selected.

You can change your configuration and color/theme selection at any time.

Language Support

ClickBank uses browser detection to display the appropriate language for the CBTB. Supported languages include English, French, German, Spanish, Italian and Portuguese (also supported on the ClickBank order form).

Implementing the CBTB

You can add the ClickBank trust badge to your pages by logging into your account and generating a custom badge. The CBTB is linked to your account, so if you have multiple accounts, you will need to generate separate CBTBs for each account.

NOTE – If you use GoDaddy Website Builder, see the Implementing the CBTB With GoDaddy Website Builder procedure.

  1. Log in to your account.
  2. Click the Settings tab.
  3. Click My Site.
  4. Scroll down to the “ClickBank Trust Badge - Injection Code" section, then click Configure Settings. For example:
    This image shows the ClickBank Trust Badge - Injection Code section of the user interface. The top section describes the ClickBank Trust Badge. The bottom section has three display fields: The Badge Configuration which is set to Centered Header Bar, the Color/Theme which is set to White, and the JavaScript Snippet which is a code sample. The sample JavaScript snippet is <!-- ClickBank Trust Badge --> <script scr='//cbtb.clickbank.net/?vendor=vendornickname'></script>. There is a Configure Settings button.
  5. Choose the badge configuration and color/theme combination that works best with your site. For example: This image shows the badge configuration and color/theme selection panel. The Badge Configuration field has a dropdown menu with Centered Header Bar selected. The Color/Theme section has radio buttons for White, Light Grey, Dark Grey, Black, Dark Blue, Light Blue, Light Yellow, and Light Green. White is selected.
  6. Click Save Changes.
  7. Copy the unique JavaScript snippet provided. For example:This image shows the JavaScript snippet used to implement the ClickBank Trust Badge. It contains the JavaScript Snippet field, which contains the following: <!-- ClickBank Trust Badge --> <script src='//cbtb.clickbank.net/?vendor=vendornickname'></script>
  8. Paste the JavaScript snippet into your HTML pages. We recommend placing it just above the closing header tag.
    For example:

    This image shows a sample HTML page with the ClickBank Trust Badge added. The text is: <!DOCTYPE html> <html> <head lang="en">     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">      <title>Sample Vendor Pitchpage Title</title>      <link rel="stylesheet" href=css/bootstrap.min.css">     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/fond-awesome.min.css">     <link rel="stylesheet" href="css/main.css">      <ClickBank Trust Badge -->     <script src='//cbtb.clickbank.net/?vendor=vendornickname'></script> </head>  <body>      ...     html body     ...      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>     <script src="js/vendor/bootstrap.min.js"></script>     <script src="js/main.js"></script> </body> </html> The CBTB should now be displayed on your page.
  9. View the page to verify that the CBTB is displaying properly.
    NOTE – If you change the settings for your CBTB, it may take up to two hours for the new settings to be reflected on all of your pages.

Implementation Recommendations

To ensure the best experience for your customers with the addition of the ClickBank Trust Badge:

  • Include a DOCTYPE declaration at the top of your HTML so that your page doesn't render in quirks mode. For example:
    <!DOCTYPE html>
  • If you choose to use the Centered Header Bar Badge Configuration, we recommend that you set the margin of the body tag element to 0. For example:
    body{margin:0;}
  • Test your CBTB implementation after making any changes. We recommend that your testing include the following at a minimum:
    • Test your pages in different browsers and devices to confirm proper layout and functionality.
    • Review your own analytics to ensure that everything is tracking properly.
    • Ensure any proprietary scripts, such as exit pops, are working properly.

Modifying the CBTB For a Single Page

By default, the CBTB is displayed with the configuration and theme that you selected in your account. However, you can add parameters to the JavaScript on a specific page, which will override the account settings and display the CBTB with a different configuration or theme on that page.

You might want to use parameters to override the default Trust Badge selection for the purposes of split testing. With this, you may test a few different variations of the ClickBank Trust Badge to determine the best fit for your customers shopping experience.

The parameters that you can modify are position and theme.

Position

This parameter specifies the location of the ClickBank Trust Badge. It correlates to the “Badge Configuration” selection in your account. The possible values for this parameter are:

  • HEADER
  • TOP_LEFT
  • TOP_RIGHT
  • BOTTOM_LEFT
  • BOTTOM_RIGHT

Theme

This parameter specifies the ClickBank Trust Badge coloring. It correlates to the “Color/Theme” selection in your account. The possible values for this parameter are:

  • WHITE
  • LIGHT_GREY
  • DARK_GREY
  • BLACK
  • DARK_BLUE
  • LIGHT_BLUE
  • LIGHT_YELLOW
  • LIGHT_GREEN

Example

For example, this code displays the CBTB in the lower left corner of the page with the black color theme:

<!-- ClickBank Trust Badge -->
<script src='//cbtb.clickbank.net/?vendor={VENDOR}&position=bottom_left&theme=black'></script>

Common Issues

This section contains information about troubleshooting common issues with the CBTB. If you are having issues with the CBTB that aren't discussed on this page, contact our client services team for assistance.

If you previously implemented the Always On Shopping Portal JavaScript, the CBTB is automatically displayed as a header bar in white. You can follow the procedures above to customize your configuration and color settings.

Restoring an Account Removed For Incorrect CBTB Use

If your account has been removed from the ClickBank Marketplace due to incorrect CBTB use, you can have your account restored.

Follow the procedures above to correctly display the CBTB on your site, then contact our client services team to have your account restored.

NOTE – The CBTB is account-specific. If you have multiple accounts, you must display the CBTB for the correct account on each pitch page. Using the CBTB for one account on a pitch page for another account is not correct use.

Implementing the CBTB With GoDaddy Website Builder

GoDaddy Website Builder uses custom template code which conflicts with JavaScript libraries used by the CBTB. As a consequence, you must modify the code used for the CBTB if you are implementing it using GoDaddy Website Builder.

Use the Implementing the CBTB procedure to configure your CBTB and copy the JavaScript snippet, then use this procedure to implement the CBTB and test your implementation.

NOTE – You must use a tab configuration for the CBTB if you are implementing it through GoDaddy Website Builder.

  1. Log in to your account.
  2. Click the Settings tab.
  3. Click My Site.
  4. Locate the ClickBank Trust Badge - Injection Code section, then click Configure Settings. For example:
    This image shows the ClickBank Trust Badge - Injection Code section of the user interface. The top section describes the ClickBank Trust Badge. The bottom section has three display fields: The Badge Configuration which is set to Centered Header Bar, the Color/Theme which is set to White, and the JavaScript Snippet which is a code sample. The sample JavaScript snippet is <!-- ClickBank Trust Badge --> <script scr='//cbtb.clickbank.net/?vendor=vendornickname'></script>. There is a Configure Settings button.
  5. Choose the badge configuration and color/theme combination that works best with your site. For example:
    This image shows the badge configuration and color/theme selection panel. The Badge Configuration field has a dropdown menu with Centered Header Bar selected. The Color/Theme section has radio buttons for White, Light Grey, Dark Grey, Black, Dark Blue, Light Blue, Light Yellow, and Light Green. White is selected.
  6. Click Save Changes.
  7. Copy the unique JavaScript snippet provided. For example:This image shows the JavaScript snippet used to implement the ClickBank Trust Badge. It contains the JavaScript Snippet field, which contains the following: <!-- ClickBank Trust Badge --> <script src='//cbtb.clickbank.net/?vendor=vendornickname'></script>
  8. Log in to the GoDaddy Website Builder and open the designer so that you can see your website and the various options for adding new elements to the page.
  9. Click the Manage Site button in the upper right corner. This option is displayed as a button with 3 horizontal lines. For example:
    This image shows the GoDaddy Manage Site button. It is to the right of two buttons labeled Preview and Publish.
  10. Click Site Settings. For example:
    This image shows the Manage Site menu in GoDaddy, including the Site Settings option which the user should click. The other settings are Page Settings, SEO Wizard, Lock All Layers, Grid/Guides, Background, Show Tips, Help, and Exit Designer.
  11. On the following display, click the Site-Wide Code tab. For example:
    This image shows the Site-wide code tab. The top section has a field entitled Code to put between <HEAD> tags (all pages):. The bottom section has a field entitled Code to put before closing </body> tag (all pages):. The top section includes the code snippet described in the following step.
  12. Within the “Code to put between <HEAD> tags (all pages)" text box, add the following code snippet:
     <script>
    (function() {
    var define = window.define;
    window.define = function(package) {
    if (package.HandlebarsEnvironment) {
    window.Handlebars = package;
    }
    define.apply(this, arguments);
    }; })();
    </script>
    Then, add the JavaScript code snippet copied from your ClickBank account. This snippet is in this format, with your account nickname replacing "yournickname":
    <script src="//cbtb.clickbank.net/?vendor=yournickname"></script>
  13. Click OK to save the settings.
  14. Click Publish to publish your site.
  15. View the page to verify that the CBTB is displaying properly.
    NOTE – If you change the settings for your CBTB, it may take up to two hours for the new settings to be reflected on all of your pages.
Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk