Display a Copy License Key Button

The orderClosed An agreement between a seller and a buyer to exchange goods and/or services for money. An order can: - contain multiple products and quantities; - have multiple financial transactions. A preorder authorization is considered an order. confirmation pageClosed The confirmation page is displayed after a customer makes a purchase. The confirmation page contains the order confirmation and delivery information. can be configured to display a button that a customerClosed An individual or business purchasing your product or service by placing an order through Cleverbridge. The customer is the end user of this product, as they are not allowed to resell the purchased products or services. ​ A customer is unique per client. If a customer purchases products or services from two different clients, there are 2 separate records of said customer.​ can click to copy the license key. This makes activating software simpler for customers, reducing the number of technical support contacts.

An example of the copy license key button is shown below:

copy license key example

In the Cleverbridge platform, the Product portal has a Delivery Texts section for configuring the presentation of the license key and associated text for the customer. To use the copy license key button, two fields must be edited:

  • Key template
  • Email key template

There are two steps required for implementing this feature, with an optional third step:

Step 1: Edit the Key Template

  1. Open the product and select Delivery Texts.
  2. Select Key template and enter the following script:

    <script>
      Document.UseCopyButton('yes', '<ProductId>', {
        shadowLabel: 'Copy to clipboard',
        shadowTitle: 'Click to copy the license code to your clipboard'
      });
    </script>
    License Code: <span id="CopyData<ProductId>">
      <Key>
    </span>
    <div id="CopyArea<ProductId>" class="CBNoJSFold CBJSFold">
      <span class="fulfilmentContentLink">
        <a class="fulfilmentContentLink" href="javascript:;" id="CopyButton<ProductId>" title="Click to select the license code and press Ctrl+C to copy it your clipboard">Select license
          code</a>
      </span>
    </div>
    <div id="CopyInfo<ProductId>" class="CBJSFold">
      Select the license code and press Ctrl+C to copy it to your clipboard.
    </div>

  3. Go to Editing the Email Key Template and follow the instructions.

Key Template Requirements

You can change the markup of the key template, for example, to rearrange the data, rename the button, or re-write the text, but you must keep the following elements with the following IDs to ensure correct functionality:

  • CopyButton<ProductId>
  • CopyArea<ProductId>
  • CopyData<ProductId>

The key template script contains the line condition': '<x-flashcopybutton>' that requires the use of the x-parameterClosed The x-parameter is a variable appended to a URL that allows grouping and tracking orders for later reporting purposes. It also enables you to pass through data that you want to capture in the order process. X-parameters can also be used to control design elements based on the value of the x-parameter.. To always use the copy license key button, remove this line from the script.

To display the key without the additional text information, remove the div with the ID CopyInfo<ProductId>.

Warning

Removing this element results in no additional text information displaying for users with JavaScript disabled.

Note

If you localize your shopping cart pages, you are responsible for translating the text in the key template; it will not be localized into other languages by Cleverbridge .

Step 2: Edit the Email Key Template

If you enable the copy license key button in the key template, you must also specify a different email template. This is required because the key template contains JavaScript that should not be used in an email.

After you edit the key template, select Email key template and enter the following text: License key: <Key>

Step 3: Copy License Key Parameter (Optional)

Optionally, you can insert an x-parameter into the checkout process URL to use the copy license key button. This is an additional step to the template edits described above. The x-parameter is useful for scenarios when you want to test the efficacy of the button using an MVTClosed Multivariate testing (MVT) is a technique for testing two or more different variables in the checkout process to determine which variable creates more revenue or a higher conversion rate. campaign. For example, one candidate uses the x-parameter and the other does not.

Pass the x-parameter x-flashcopybutton with the value yes into the checkout process URL. In the Commerce Assistant, this can be done using the Saved Links tool, the MVT Campaign tool, or the Link Generator tool.

The copy license key button displays only if the x-parameter specified in the Key Template field matches the one passed and it has the value yes. You can rename the x-parameter, but the value must be yes. If you rename the x-parameter, adapt the key template accordingly.

JavaScript Enabled Behavior

There are two possible behaviors when JavaScript is enabled:

  • If Flash is enabled, the customer sees the Copy License Key button with the tooltip displaying, “Click to copy the license key to your clipboard.” When the customer clicks the button, the license key is copied to the clipboard.
  • If Flash is disabled, the customer sees the Select License Key button with the tooltip displaying, “Click to select the license key and press CTRL+C to copy it to your clipboard.”

If JavaScript is enabled and the x-parameter is not passed, but required by the key template, the customer sees the license key with additional text as shown below:

copy license key js enabled

JavaScript Disabled Behavior

If JavaScript is disabled, the license key displays as if the x-parameter was not passed as shown below:

copy license key js disabled

Examples of Copy License Key Outputs

A confirmation page without the copy license key button is shown below:

copy license key sample without

A confirmation page with the copy license key button is shown below:

copy license key sample output

If a product has more than one license key, the customer can simply select a radio button for the key required and then use the copy license key button.

copy license key multiple keys

For more information about the copy license key button, contact Client Experience.