# Component: Switch Subscription **Purpose:** Use this component to create a Page that confirms a change to a subscription (e.g. cancel/save offer accepted, or change offer). It is best suited to simple, B2C-type of changes. Learn more at [https://docs.limio.com/product/self-service/what-are-the-standard-functionality-of-limio-self-service-manage-my-account/how-to-create-a-personalised-switch-upgrade-or-downgrade-experience](https://docs.limio.com/product/self-service/what-are-the-standard-functionality-of-limio-self-service-manage-my-account/how-to-create-a-personalised-switch-upgrade-or-downgrade-experience "mention"). The component includes 2 steps: 1. Offer selection 2. Modal to confirm the changes The component includes the following abilities: * **Group:** Ability to group Offers based on the Offer group attribute. * **Display:** * Show the data of the offers attributes, such as Display Price, Offer Features, and CTA. * Hide offers that are of the same term (e.g. hide Monthly offer if the customer is already on a Monthly offer). * **Sort:** Modifying the order of the Offers being displayed. * **Payment:** Display the Payment Method which will be used for the update Subscription. * **Delivery:** If the switch is to a product that includes Has Delivery = true, then the customer will be prompted to confirm the delivery address. * **Block:** Block switch to other products if those are not allowed online. You should also create a separate page to confirm success of the changes, using the [Order Change Success component](/components/component-library/legacy-configuration-components/component-order-change-success.md) will require configuration also of the Switch Offer. Switch Offers are very similar to other offers, but you must configure a Switch Date (the effective date of the switch). Learn more at [https://docs.limio.com/product/self-service/what-are-the-standard-functionality-of-limio-self-service-manage-my-account/how-to-create-a-personalised-switch-upgrade-or-downgrade-experience](https://docs.limio.com/product/self-service/what-are-the-standard-functionality-of-limio-self-service-manage-my-account/how-to-create-a-personalised-switch-upgrade-or-downgrade-experience "mention") {% hint style="info" %} **Note**: If reCAPTCHA is enabled on your site, it will perform checks on pages which use this component. Read more: [https://docs.limio.com/product/settings/security/recaptcha-bot-protection](https://docs.limio.com/product/settings/security/recaptcha-bot-protection "mention"). {% endhint %} {% embed url="" %} ## 1. Offer selection You have two options for layouts: {% tabs %} {% tab title="Card layout" %}
{% endtab %} {% tab title="Radio button layout" %}
{% endtab %} {% endtabs %} ## 2. Confirmation of changes {% hint style="warning" %} When using Initial Price on Limio Offers, be aware that processing an immediate switch will not display any credit or proration in the Payment Amount. The amount **displayed** will be full price of the new Limio Offer selected. However, the customer will be charged at pro-rated amount by the connected billing engine such as Zuora if proration is activated. {% endhint %} ## Props Key properties to configure are highlighted in **Bold.** | **id** | **label** | **type** | **default** | **options/infos** | | -------------------------------------------- | ----------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | splitByGroups | Split offers by groups? | boolean | FALSE | Display of offers by groups, if groups are setup on the Offer | | layout | Layout | picklist | cards | Display of offers in either Card or Radio Button layout | | preselectFirstOfferInGroup | Preselect first offer in each group | boolean | FALSE | If true, first offer in each group will be preselected. | | heading | Heading | string | Alternative subscriptions | | | subheading | Subheading | string | | | | contactNumber | Contact Number | string | | | | defaultImageUrl | Default Image Url | string | | | | shadow | Shadow? | boolean | FALSE | Design settings | | roundedCorners | Rounded Corners? | boolean | FALSE | Design settings | | imagePosition | Image Position | picklist | middle | Defines the position of the image, if there is an attachment on the Offer | | **redirectUrl** | Redirect Url | string | /mma | Redirect URL if the switch is processed successfully, for example /mma or a /switch-success page using the [Component: Order Change Success](/components/component-library/legacy-configuration-components/component-order-change-success.md) | | confirmSubheading | Confirm Sub Heading | string | You will be switched over to this offer, starting your next billing date: | If the confirmation modal is configured, this subheading text will show. | | confirmationOk | Confirmation Ok label | string | OK | | | confirmationCancel | Confirmation Cancel label | string | Cancel | | | confirmationReturn | Confirmation Return label | string | Return to my account | | | **filterSameTerm** | Filter same term offers? | boolean | FALSE |

If true, hide switch offers that are within the same group and term than the offer of the current subscription

For example, hide montly print offers if the subscriber already has a monthly print offer.

This feature uses the Limio Offer Term and Group attributes, which must match between the acquisition and switch offer.

| | **blockProductSwitch** | Block switch to offers with different products? | boolean | FALSE |

Block switch attempt to a product that is different from the original product.

This will display a message to contact customer service and will not allow to process a switch.

| | showDescription | Show description? | boolean | FALSE | Show a product description | | confirmAddressLabel | Address confirmation label | string | Use this address: | | | deliveryCompanyLabel | Delivery company label | string | Company | | | deliveryAddress1Label | Delivery address line 1 label | string | Address line 1 | | | deliveryAddress2Label | Delivery address line 2 label | string | Address line 2 | | | deliveryCityLabel | Delivery city label | string | City | | | deliveryStateLabel | Delivery state label | string | {{state\_name\_type}} | Use this pattern to be able to have a regionally accurate label i.e. State for US, Country for GB etc. | | deliveryPostalCodeLabel | Delivery postal code/ZIP code label | string | {{zip\_name\_type}} | Use this pattern to be able to have a regionally accurate label i.e. Zip Code for US, Postal Code for GB etc. | | deliveryCountryLabel | Delivery country label | string | Country | | |

invalid

DeliveryCountryMessage

| Invalid delivery country message | string | Please choose a different country | Displayed if validation fails for this field | | invalidAddressMessage | Invalid address message | string | Address is required | Displayed if validation fails for this field | | invalidCityMessage | Invalid city message | string | City is required | Displayed if validation fails for this field | | invalidStateMessage | Invalid state/county message | string | {{state\_name\_type}} is required |

Displayed if validation fails for this field

Use this pattern to be able to have a regionally accurate label i.e. State for US, Country for GB etc.

| |

invalid

PostalCodeMessage

| Invalid zip/postal code message | string | {{zip\_name\_type}} is required |

Displayed if validation fails for this field

Use this pattern to be able to have a regionally accurate label i.e. Zip Code for US, Postal Code for GB etc.e

| | invalidCountryMessage | Invalid city message | string | Country is required | Displayed if validation fails for this field | | showPaymentMethod | Show payment method? | boolean | FALSE | If enabled, payment method which will be used on the new subscription will be displayed on the confirmation dialog. | | paymentMethodHeading | Payment method heading | string | Payment Method | Will only be displayed if "Show payment method?" is enabled | | paymentFrequencyLabel | Payment frequency label | string | Payment Frequency | Will only be displayed if "Show payment method?" is enabled | | paymentAmountLabel | Payment amount label | string | Payment Amount | Will only be displayed if "Show payment method?" is enabled | | paymentDateLabel | Payment date label | string | Payment Date | Will only be displayed if "Show payment method?" is enabled | | showOfferFeatures | Show offer features? | boolean | FALSE | If enabled, the offer features will be displayed on the confirmation modal | | allowAddressChange | Display address information? | boolean | TRUE | If enabled, the customer can change their address while switching their subscription | | confirmationText | Confirmation Text | richtext | | If present, this Confirmation Text will be displayed on the confirmation modal | | contactText | Contact Text | richtext | | This rich text field allows users to add links to the confirmation modal, which can be helpful to redirect customers to contact methods. | | processErrorMessage | Switch process error message | string | Something went wrong and we weren't able to process your switch. Please contact our support team. | If a switch is not processed successfully, this message will alert the customer. | | componentId | Component Id | string | switch-offers-limio | | --- # 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.limio.com/components/component-library/standard-components/component-switch-subscription.md?ask= ``` 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.