The major update of the hosted pages comes with a few breaking changes. Those breaking changes won’t prevent your customers from using the subscription workflows or subscribing, but the user experience might not be optimal. This migration guide will help you to make it all better.
Before migrating
In the pre-launch phase of the new hosted pages, you won’t be able to migrate your production business.
Migrating to the new hosted pages is done segment by segment.
We highly recommend that you start by migrating your Sandbox Business first to ensure the result matches your expectations.
How to switch to the new hosted pages
To do the switch, go to Settings / Hosted Pages / General settings.
On top of the ‘Design’ section is an action letting you switch to the new hosted pages.
Breaking changes
There are 4 points that may require your attention. Each point is described below.
- (major) Url redirections
- (minor) Texts & translations
- (minor) Integration mode
- (minor) CSS
URL redirections
Url redirections are used when a workflow ends in the hosted pages. They allow you to customize the completion page after a customer workflow.
In the legacy hosted pages, there where many different pages and even with that extensive list, all the cases where not covered.
The new hosted pages work differently: there is only 1 available redirection page, and you can choose which workflows lead to that page.
That single redirection page will have query string parameters indicating the complete workflow and the outcome of that workflow.
More about the URL redirections.
Texts & translations
The texts in the new hosted pages have been improved and adapted to the new interface. If you did customize texts in the previous hosted pages, then those customizations will be lost.
This is considered a minor breaking change, as the new texts are designed to provide an optimized customer subscription experience.
Here is where you can update the texts after the switch to the new hosted pages.
| Settings / Hosted Pages / General settings / Support section Content of the ‘Customer care’ section displayed in many hosted pages. |
| Settings / Hosted Pages / Customer portal / Subscription tab Content of the ‘Subscriptions’ tab of the customer portal. |
| Settings / Hosted Pages / Customer portal / Invoices tab Content of the ‘Invoices’ tab of the customer portal. |
| Settings / Hosted Pages / Customer portal / Contact information tab Content of the ‘Contact’ tab of the customer portal. |
| Settings / Hosted Pages / Customer portal / Payment information tab Content of the ‘Payment method’ tab of the customer portal. |
| Settings / Hosted Pages / Customer workflows/ Workflows customization Content of the workflow pages. |
Integration mode
The new hosted pages are shipped with a new integration mode. It’s currently optional, you can keep your current iframe integration, but the new integration mode has been engineered to provide a better customer experience.
The in-site integration mode does not use an iframe. Instead, it generates all the hosted pages directly into your web application, avoiding scrollbar issues and making visual customization way easier.
To switch to the in-site integration, read the migration guide to in-site integration.
We highly recommend switching to the in-site integration as the final result is way better, but there is no hurry as the iframe integration will keep working for now.
CSS
The new hosted pages are packed with a versatile neutral design that can fit in most of the web application. That design is responsive and works even on phone screens.
How to customize that CSS depends on your integration mode (see Integration mode above).
With the in-site integration
If you are using the in-site integration, the generated hosted pages will inherit all the CSS of the containing web page.
To adjust the design, just add extra CSS in your web page.
Check this article for more information about CSS classes of the new hosted pages.
With the iframe integration
To adjust the design with the iframe integration, go to Settings / Hosted Pages / General Settings / CSS Customization.
Your previous CSS customizations are mostly incompatible, so we recommend that you remove everything and restart customization from scratch.
Check this article for more information about CSS classes of the new hosted pages.