# Retention tools customization guide

## Overview

2Checkout offers the option of configuring churn prevention campaigns in the Control Panel that take effect in **myAccount**. You can configure these campaigns according to your preferences, including creating personalized messages that 2Checkout will display to shoppers when they try to cancel an auto-renewing subscription.

## Control Panel customization

### How to customize auto-renewal enrollment campaigns

To customize auto-renewal enrollment campaigns, you first need to create them. Refer to our detailed [documentation](/subscriptions/subscriptions/churn-prevention/voluntary-churn-prevention/how-to-configure-auto-renewal-enrollment-campaigns.md) for instructions on how to create an auto-renewal enrollment campaign. After you’ve set the campaign’s details, you can start the campaign. You cannot customize auto-renewal enrollment campaigns from the Control Panel. You can customize how they appear in **myAccount** via CSS.

### How to customize churn prevention campaigns

To customize churn prevention campaigns, you first need to create them. Refer to our detailed [documentation](/subscriptions/subscriptions/churn-prevention/voluntary-churn-prevention/how-to-configure-churn-prevention-campaigns.md) for instructions on how to create a churn prevention campaign. After you’ve set the campaign’s details, you can include a personalized message in it. 2Checkout will display this message to your shoppers when they attempt to stop the auto-renewal of the subscription you choose in the campaign’s settings.

You can use the following elements in the personalized message:

* HTML tags
* Custom variables, such as PRIMARY\_PRODUCT\_NAME and PRIMARY\_PRODUCT\_PRICE

Additionally, you can choose to display the message only for orders that were placed in a specific language. Simply select the desired languages from the available list.

{% hint style="danger" %}
**Important!** An English version of the custom text is mandatory. The English version will be displayed for any selected language that doesn’t have a translated text.
{% endhint %}

## 2Checkout myAccount customization

### What can I customize in myAccount

{% hint style="danger" %}
**Important!** Any retention campaign displayed in myAccount inherits by default the style of the myAccount template.
{% endhint %}

You can further customize the way retention campaigns are displayed by applying custom CSS styles to specific HTML IDs. The following sections detail each customizable element together with its IDs and the CSS classes they inherit by default.

Any customization made to the elements below applies to every retention campaign displayed in myAccount.

### Customize auto-renewal campaign pop-ups in myAccount

Identify and customize the elements described below.

#### Title bar icon

Customize the look of the title bar icon by applying your own styles to **id="secureLocked"**. The icon inherits the style of the `secureLocked` and `retentionModal` CSS classes.

<div data-with-frame="true"><img src="/files/553ed99d7e3501b077a57244259525619bce24d0" alt=""></div>

#### Pop-up title

Customize the look of the pop-up title by applying your own styles to **id="secureLockedTitle"**. The title inherits the style of the `secure_locked_title` CSS class.

<div data-with-frame="true"><img src="/files/7675ff8ff708f4779583af1ba779735c3121b1de" alt=""></div>

#### Auto-renewal enrollment dialog

Customize the look of the auto-renewal enrollment dialog by applying your own styles to **id="autoRenewalEnrollment"**. The dialog inherits the style of the `ui-dialog-content` and `ui-widget-content` CSS classes.

<div data-with-frame="true"><img src="/files/c58893b83a9dd5569fd9420d0de563c85fdfc495" alt=""></div>

#### Discount details

Customize the look of the discount details section by applying your own styles to **id="** **autoRenewalEnrollmentDiscount"**. The section inherits the style of the `myaccount__myproductsrenewal__page__price` CSS class.

<div data-with-frame="true"><img src="/files/2ee92e4d6a7ba7eb5c73761eb9dacc4a655284a6" alt=""></div>

#### Next billing amount (initial value)

Customize the look of the next billing amount (initial value) text by applying your own styles to **id="autoRenewalEnrollmentDiscountInitialAmount"**. The text inherits the style of the `myaccount__myproductsrenewal__page__price__value__initial` CSS class.

<div data-with-frame="true"><img src="/files/c2501604caa8e8bccb47d935c22a668142a497ef" alt=""></div>

#### Next billing amount (discounted value)

Customize the look of the next billing amount (discounted value) text by applying your own styles to **id="autoRenewalEnrollmentDiscountDiscountedAmount"**. The text inherits the style of the `myaccount__myproductsrenewal__page__price__value__amount` CSS class.

<div data-with-frame="true"><img src="/files/2178f2f2da5da7df2aee2dacc2474b3228fc121c" alt=""></div>

#### Discount text

Customize the look of the discount text by applying your own styles to **id="**&#x61;**utoRenewalEnrollmentDiscountBillingCycles"**. The text inherits the style of the `myaccount__myproductsrenewal__page__price__value` CSS class.

<div data-with-frame="true"><img src="/files/a5cff461d408e23fc91ca98f0d69bba332a5ccd9" alt=""></div>

#### Cancel enrollment button

Customize the look of the **Cancel auto-renewal enrollment** button by applying your own styles to **id="autoRenewalEnrollmentCancelButton"**. The button inherits the styles of the `button` and `buttonRetentionCancel` classes.

<div data-with-frame="true"><img src="/files/c8c55e7b16fcbe4068cbc3bfae761feef0509693" alt=""></div>

#### Confirm enrollment button

Customize the look of the **Confirm auto-renewal enrollment** button by applying your own styles to **id="autoRenewalEnrollmentSubmitButton"**. The button inherits the styles of the `button` and `buttonRetentionSubmit` CSS classes.

<div data-with-frame="true"><img src="/files/cabead5dca2e9e2aa00efbb58b3128e04e6d534c" alt=""></div>

### Customize churn prevention campaign pop-ups in myAccount

Identify and customize the elements described below.

#### Title bar icon

Customize the look of the title bar icon by applying your own styles to **id="secureLocked"**. The icon inherits the style of the `secureLocked`, `retentionModal` and `cancelAutoEnroll` CSS classes.

![](/files/8afecd4e3b186f3ac66203372b4efa2c8d88e604)

#### Pop-up title

Customize the look of the pop-up title by applying your own styles to **id="secureLockedTitle"**. The title inherits the style of the `secure_locked_title` CSS class.

<div data-with-frame="true"><img src="/files/f000bddab346d5ec98759a8b25d6a1453463e4ed" alt=""></div>

#### Campaign message

Customize the look of the campaign text message by applying your own styles to **id=" autoRenewalCancellationText"**. The text inherits the style of the template by default.

<div data-with-frame="true"><img src="/files/73032850edd9ae91a95cfcaf6ad237d612aa6b83" alt=""></div>

#### Stop auto-renewal button

Customize the look of the **Stop auto-renewal** button by applying your own styles to **id=" autoRenewalCancellationSubmitButton"**. The button inherits the styles of the `button` and `buttonRetentionCancel` classes.

<div data-with-frame="true"><img src="/files/8e03b401b50e13cce25bd86ce236d18dd9653151" alt=""></div>

#### Keep auto-renewal button

Customize the look of the **Keep auto-renewal** button by applying your own styles to **id=" autoRenewalCancellationCancelButton"**. The button inherits the styles of the `button` class.

<div data-with-frame="true"><img src="/files/aab1efa1d590e03278e467cb129bf666da302a5b" alt=""></div>

#### Auto-renewal cancellation reason dialog

Customize the look of the cancellation reason dialog by applying your own styles to **id=" autoRenewalCancellationStepREASON"**. The area inherits the style of the template by default.

<div data-with-frame="true"><img src="/files/679c0d7158d3c32b7f8d326274b2bc6f1383d0d8" alt=""></div>

#### Auto-renewal cancellation reason input

Customize the look of the cancelation reason input by applying your own styles to **id=" autoRenewalCancellationReasonInput"**. The input inherits the style of the `select` and `reasonField` CSS classes.

<div data-with-frame="true"><img src="/files/30d882e9af1ea574f8dec9de1e20c3cb15bc16f7" alt=""></div>

#### Auto-renewal cancellation comment text box

Customize the look of the cancelation reason comment box by applying your own styles to **id=" autoRenewalCancellationCommentInput"**. The text box inherits the style of the `text` and `reasonField` CSS classes.

<div data-with-frame="true"><img src="/files/3aa0cbfdb2611eb3f34673eb55aaddeca14a0745" alt=""></div>

#### Auto-renewal cancellation error message box

Customize the look of the cancellation reason error message box by applying your own styles to **id=" cPreventionError"**. The box inherits the style of the `showError` CSS class.

<div data-with-frame="true"><img src="/files/9d330356080eb903e830d8eadf5b47eca35dbf43" alt=""></div>

#### Auto-renewal cancellation discount pop-up

Customize the look of the discount pop-up by applying your own styles to **id=" autoRenewalCancellationStepDISCOUNT"**. The box inherits the style of the `myaccount__myproductsrenewal__page__step` CSS class.

<div data-with-frame="true"><img src="/files/d0e2f634e401859dd4eb907fb1c401dba986c7f9" alt=""></div>

#### Auto-renewal cancellation discount message

Customize the look of the discount message by applying your own styles to **id=" autoRenewalCancellationDiscountBillingCycles"**. The box inherits the style of the `myaccount__myproductsrenewal__page__price__value` CSS class.

<div data-with-frame="true"><img src="/files/f283dced177659577d81bf9f3bb9b5bec894fc77" alt=""></div>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.2checkout.com/subscriptions/subscriptions/churn-prevention/voluntary-churn-prevention/retention-tools-customization-guide.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.