VL Billing Module

Introduction

VL Billing is a User Page module in Template Builder. It is the signed-in billing screen: customers can review their current plan, manage a subscription, and (when a TV provider is connected) change or disconnect that provider.

This article explains how to create the Billing page, add and configure VL Billing, publish it, and verify the experience on the website.

Purpose

The purpose of this article is to help you:

• Create a User Page for Billing
• Add and configure the VL Billing module
• Set card and button colors, TV-provider controls, and customer-facing labels
• Understand what signed-in customers see on the website
• Publish and verify the live Billing page

Scope

This article covers:

• Creating a User Page in Template Builder
• Adding VL Billing
• Layout colors and Show Change TVE CTA / Show Disconnect CTA
• Content labels: Page Title, Current Plan Label, Cancel Subscription CTA, and Subscribe CTA
• Publishing the page
• How the page behaves on the website for signed-in customers

It does not cover:

• Creating plans, checkout, or payment processor setup
• Full TV provider (TVE) onboarding
• In-app store billing (for example subscriptions started on a TV or phone store)

Prerequisites

Before you begin, ensure you have:

• Access to Template Builder with permission to create, edit, and publish pages
• A published Authentication page so unsigned customers can sign in
• A published checkout or plans path if customers without a subscription should be able to subscribe
• Brand colors ready for billing cards and buttons

Example used in this article
The steps use a User Page named Billing at path /billing. Replace these examples with values that match your site.

Billing flow overview (website)

The flowchart below shows the typical customer journey on the website when VL Billing is published.

Notes

• Unsigned customers are sent to the Authentication page.
• Cancel Subscription on the website applies to subscriptions started in a web browser. Subscriptions started in an app store are managed in that store.
• Change Provider and Disconnect appear only when a TV provider is connected and those Layout options are on.

Step 1: Create a User Page

You can start a new page in either of these ways:

1. Open Template Builder.
2. Start Create New Page from one of these locations:
   • On the Template Builder home screen, select + New Page.
   • On the home Page Overview, select View All Pages, then select New Page.
3. Enter a Page Name, such as Billing.
4. Under Page Type, select User Page.
5. Enter a Page Path, such as /billing.
6. If localization is enabled, choose the Target Language.
7. Select Create Page.

The page type cannot be changed after the page is created.

Create New Page with User Page selected as the Page Type. Start from + New Page on the Template Builder home screen, or from New Page on View All Pages.

Also available on: Modular Page, Marketing Page, and System Screen. For the standard billing experience, use a User Page.

Step 2: Add the VL Billing module

1. Open the new page in the Template Builder editor.
2. Select Add Modules.
3. Open the User group, or search for VL Billing.
4. Select VL Billing to add it to the page.
5. Select the module on the page to open its settings.

Add Modules → User. Search for and insert VL Billing.

Step 3: Configure Layout

Open Layout and configure:

Turn the TVE options off if customers should not change or disconnect a provider from this page.

VL Billing → Layout. Set card and button colors, and whether Change Provider and Disconnect are shown.

Step 4: Configure Content labels

Open Content and review these localizable labels:

If your site supports multiple languages, review these values in every published language.

After you change Page Title or Subscribe CTA, verify the live website. The heading customers see may come from Current Plan Label, and Subscribe may follow site-level navigation text.

VL Billing → Content. Edit Page Title, Current Plan Label, Cancel Subscription CTA, and Subscribe CTA.

Step 5: Review delivery settings

The inspector can also show these common settings:

VL Billing is enabled for the website and apps. Leave Enable Personalization off unless your site’s personalization setup requires this module to participate.

Step 6: Publish the page

1. Review the page layout and module settings.
2. Select Publish in the page toolbar.
3. In the confirmation dialog, select Publish Page.
4. Wait for the publish action to complete.

Until the page is published, the website and apps will not show your latest Billing configuration.

Step 7: How it looks on the website

After publish, open your Billing URL while signed in, for example:

https://www.example.com/billing

If the customer is not signed in, they are sent to /authentication.

Typical website layout

Signed-in customers typically see:

1. Heading — often from Current Plan Label (or Manage Subscription if that label is not used)
2. Current plan — plan name, price, last payment, next billing date, and payment method when a subscription exists
3. Cancel Subscription — from Cancel Subscription CTA, for web-browser subscriptions when cancel is available
4. Subscribe — when the customer does not have a current plan
5. Connect TV Provider — when TVE is part of the site and no provider is connected
6. Change Provider and Disconnect — when a TV provider is connected and those Layout options are on
7. Payment history — when purchase history is available (Buy / Rent tabs depend on your site’s service types)

A confirmation dialog appears before cancel completes. Extra cancel steps (for example a reason or an offer) depend on your site setup.

Website Billing page (/billing) showing the current plan, actions, and optional TV-provider controls.

Link Billing from the site

After you publish the page, point Account or Billing menu items to the same path (for example /billing). Use that exact path in header navigation or masthead account links.

Verification checklist

• The page type is User Page
• Page path is /billing (or the path your site uses)
• VL Billing is on the page
• Card and CTA colors match the site design
• Show Change TVE CTA and Show Disconnect CTA match the intended TV-provider experience
• Page Title, Current Plan Label, Cancel Subscription CTA, and Subscribe CTA are reviewed for launch language(s)
• The page is published
• Unsigned customers are sent to Authentication
• A signed-in subscriber sees current-plan details
• Cancel is available for a web subscription when expected
• A customer without a plan sees Subscribe
• Change Provider and Disconnect appear only when a TV provider is connected and those options are on
• Header or account Billing opens the same path

Troubleshooting

Best Practices

• Use one User Page at a stable path (for example /billing).
• Point every Billing / Account billing link to that same path.
• Match Card Background, CTA Background, and CTA Text to the rest of the site.
• Turn Show Change TVE CTA and Show Disconnect CTA off if this page should not manage TV providers.
• Localize Content labels when the site has more than one live language.
• Test three states before launch: no subscription, web subscription, and connected TV provider.
• Publish after every meaningful change.

FAQs

Q. What page type should I use for VL Billing?
Use a User Page. The module is also available on Modular Page, Marketing Page, and System Screen.

Q. How do I create the page?
Select + New Page on the Template Builder home screen, or open View All Pages and select New Page. Then choose User Page, enter the name and path, and select Create Page.

Q. What is the recommended page path?
/billing, unless your site already uses a different billing path.

Q. What happens if the customer is not signed in?
They are sent to the Authentication page.

Q. Can customers cancel an app-store subscription here?
On the website, Cancel Subscription is for subscriptions started in a web browser. App or TV store subscriptions are managed in that store.

Q. How do I hide Change Provider or Disconnect?
Turn Show Change TVE CTA or Show Disconnect CTA off in Layout, then publish.

Q. Which labels can I edit in this module?
Page Title, Current Plan Label, Cancel Subscription CTA, and Subscribe CTA.

Important Information

• VL Billing belongs on a User Page.
• Unsigned customers are sent to Authentication.
• Cancel Subscription CTA, Current Plan Label, Page Title, and Subscribe CTA are the customer-facing strings you can edit in this module.
• Show Change TVE CTA and Show Disconnect CTA default to on.
• Plan name, price, dates, and payment method come from the customer’s subscription, not from this form.
• Both the page and Authentication page must be published for the full experience.

Glossary

Contact Support

If you need help beyond this article, contact the ViewLift support team.

• Email: techsupport@viewlift.com
• Phone (US): +1-800-859-0420
• Phone (UK): +44-203-014-8921

Support hours: B2C requests are handled Monday to Friday. B2B support is available 24/7.