---
title: "How can I use the hosted signup page and the hosted customer portal?"
slug: "how-can-i-use-the-hosted-signup-page-and-the-hosted-customer-portal"
updated: 2025-07-10T12:43:03Z
published: 2025-07-10T12:43:03Z
canonical: "help.frisbii.com/how-can-i-use-the-hosted-signup-page-and-the-hosted-customer-portal"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://help.frisbii.com/llms.txt
> Use this file to discover all available pages before exploring further.

# How can I use the hosted signup page and the hosted customer portal?

The **hosted order page** and the **hosted customer portal** offer an easy and fast way to integrate pre-fabricated self-service forms into your own website.

- The hosted order page is a **registration form for new customers** that can be used to place orders.
- The hosted customer portal is a **self-service page for existing customers** to view the services they have booked, independently change invoice or payment data, cancel the contract in due time or, for example, download invoices and credit notes already received.

Both the order page (Hosted Signup, registration form) and the customer portal (Hosted Customer Self-Service Portal) can either be reached via a link and passed on to your customers, or the pages can be integrated into a separate website via iFrame.

## Self-Service Settings

All settings for the self-service pages can be found under Settings > Integration > **Self-Service Settings**.

![](https://cdn.document360.io/b84e1b5d-2ba6-4465-8c62-fb45a2f31314/Images/Documentation/self-serviceSettingspage.png)

### General

In the first tab you can:

- check the **Public API Key**
- set the **Default Token Validity:** Between 1 min - 10080 min (7 days)
- configure which **Customer data** field is optional, required or hidden in the self service
  - Company name
  - First and last name
  - Email address
  - Postal address
  - Additional address lines
  - Phone number
  - VAT ID
  - Mode of Dispatch
  - Birth Date
- **Save** your settings.

### Hosted Signup

You have the following options at your disposition:

- Decide, if you would like to
  - **Ask for coupon code on signup**
  - **Show ExternalID in order preview**
- For each of the following information you can open the **Adjust Translation** window, where you can set a name for the different languages you need:

![10421382548124-mceclip2.png](https://cdn.document360.io/b84e1b5d-2ba6-4465-8c62-fb45a2f31314/Images/Documentation/167d9a5a9d9e95(2).png)
  - Page Title
  - Title
  - Order Heading
  - Customer Heading
  - Payment Heading
  - Metered Components Price list heading
  - Metered Components Price list description
- Set the different **URLs**
  - **Success URL:** Customers will be redirected to this page on success. We'll attach a request parameter`contractId`to this URL.
  - **Error URL:** Customers will be redirected to this page on error.
  - **TAC URL:** Insert the URL of your Terms and Conditions here. If set, it can be displayed by using the placeholder`{tac}`in the Terms of contract settings below.
  - **DPP URL:** Insert the URL of your Data Protection Policy here. If set, it can be displayed by using the placeholder`{dpp}`in the Terms of contract settings below.
  - **Withdrawal Instructions URL:** Insert the URL of your Withdrawal Instructions here. If set, it can be displayed by using the placeholder`{withdrawal}`in the Terms of contract settings below.
- Define your **Terms of contract:** Click on the

![10421548554652-mceclip4.png](https://cdn.document360.io/b84e1b5d-2ba6-4465-8c62-fb45a2f31314/Images/Documentation/167d9a5a9dd6e2(2).png)

button to add the terms of contract; line per line. You can use `{tac}`, `{dpp}` or `{withdrawal}` as a placeholder for the respective URLs that have been defined above.

Click on ![10421582794908-mceclip5.png](https://cdn.document360.io/b84e1b5d-2ba6-4465-8c62-fb45a2f31314/Images/Documentation/167d9a5a9e0c0b(2).png)

to **adjust translation** and insert the different translations per language. The drop down list **Mandatory confirmation** can be set to required, if you would like to display a checkbox to let your clients confirm the different rows of your terms of contract.

> **Note:**
> 
> (1) The output of the contract terms is displayed above the order button. The specification of each line is optional.
> 
> (2) The placeholders are only displayed properly if a URL is defined.
> 
> (3) The combination of several placeholders is possible. Maximal 5 rows can be specified.
> 
> Further information about the configuration options for contract terms and conditions can be found [here](/frisbii-transform/docs/how-can-i-set-which-terms-of-contract-my-customers-have-to-accept-when-ordering-via-the-hosted-singup-pages) .

Click on **Save** to finish the configuration.

To check your configuration, please follow [this procedure](/frisbii-transform/docs/how-can-i-use-the-hosted-signup-page-and-the-hosted-customer-portal#hosted-order-page-access).

### Hosted Portal

You have the following settings at your disposition:

- Decide, if you would like
  - that **customers may change their own data via the default self-service portal**
  - to **allow contract cancellation** via the hosted portal.
- For each of the following sections you can decide
  - to **display** them or not
  - define a **heading** and **adjust translations** by clicking on

![10421582794908-mceclip5.png](https://cdn.document360.io/b84e1b5d-2ba6-4465-8c62-fb45a2f31314/Images/Documentation/167d9a5a9e0c0b(2).png) ![10421823393052-mceclip6.png](https://cdn.document360.io/b84e1b5d-2ba6-4465-8c62-fb45a2f31314/Images/Documentation/167d9a5a9e3f64(2).png)
    - Customer
    - Payment
    - Contract
    - Ledger
    - Documents
    - Additional data

Click on **Save** to finalize your configuration.

### Hosted Page Style

On this tab you can set the look & feel of your hosted page.

You can:

- Upload a **logo**.
- Set **colors** (using hexadecimal color codes) according to your corporate identity for:
  - Page title
  - Page background
  - Section:
    - Header Background
    - Header Text
    - Content Background
    - Discount Text
    - Button
    - Button Text
    - Action Button
    - Action Button Text
    - Border
  - As well as the:
    - Border width
    - Border radius

Click on **Save** to finalize your styling.

For more information on customizing the design, please click [here](/frisbii-transform/docs/how-can-i-change-the-design-of-the-signup-page-and-the-customer-portal).

Would you like to see the results of your settings? Let us have a look.

## Hosted order page

First of all, you have to edit the plan variant settings to enable access to the hosted order form.

### Enable access

1. Please go to the **Products** tab.
2. In the **Plans** tab, in the **Plan variant** column, click on the name of the variant you are interested in.
3. On the **Edit plan** variant page, scroll to **Signup Settings** and activate the **Allow self-service signup for this variant** option.

Now you can access the hosted order page preview.

### Hosted order page access

1. Back on the **Products** tab overview, in the **Plans** tab, search for the plan variant you are interested in.
2. In the line of this variant, click on the ![10421236996380-mceclip1.png](https://cdn.document360.io/b84e1b5d-2ba6-4465-8c62-fb45a2f31314/Images/Documentation/167d9a5a9e779a(2).png)

icon.
3. You will be redirected to the **Self Service** order form you configured in the [**Settings**](/frisbii-transform/docs/how-can-i-use-the-hosted-signup-page-and-the-hosted-customer-portal#hosted-signup) earlier:

| ![](https://cdn.document360.io/b84e1b5d-2ba6-4465-8c62-fb45a2f31314/Images/Documentation/selfss(1).png) |
| --- |

### Displayed products

Each **link on a hosted order page** leads to a plan variant and all components in that product family to be displayed on the order pages.

Whether a specific component should be listed in the order pages can be defined in the respective component:

1. Open the **Products** tab.
2. On the Products page, open the **Component** tab.
3. Double click on the name of the component you would like to add.
4. Scroll to **Signup Settings**.
5. Activate the option **show in self-service signup** (available for quantity based and on/off components only).

If the component is activated for the order page, **quantity based** and **on/off components** can be freely added to the shopping cart by the customer.

**Metered usage components** can only be displayed as information in the **Usage fees** section using the **show as pricing information in self-service** option:

More about components can be found [here](/frisbii-transform/docs/how-can-i-create-a-component).

## Hosted customer portal

### Example page of the customer portal:

| ![](https://cdn.document360.io/b84e1b5d-2ba6-4465-8c62-fb45a2f31314/Images/Documentation/port.png) |
| --- |

### Access to the customer portal

Access to the customer portal is via a time-limited token. The expiry time of the self-service token can be configured under Settings > **Self Service**, please see [above](/frisbii-transform/docs/how-can-i-use-the-hosted-signup-page-and-the-hosted-customer-portal#hosted-portal).

### Access via the user interface

The link to the hosted customer portal of a contract can be accessed in the UI.

1. Please open the **Customers** tab.
2. Click on **Reference code** of a customer to open the **Contract Details**.
3. Click on **Perform Action** and then on **Self-Service Access.**

### Access via own app or website

An access token for a specific contract can be requested via **REST API**. This allows direct access to the customer portal in your own app or website.

In the developer documentation you will find the function with which you can [request the self-service token](https://docs.frisbii-transform.com/reference/contracts_getselfservicetoken_contractid_tokenvalidity_get) for a specific contract via REST API.

### Access via link in an e-mail

If you do not have a separate login area for your customers, you can send the link to the customer portal with each new invoice/credit note or reminder e-mail.

To place the link in the e-mail:

1. Go to Settings > Documents > Invoices > **E-Mail Template**.
2. Place the placeholder **{SelfServicePortalUrl}** anywhere, which will be replaced by the personal link that can be called up for a limited time.

**Note:** You can use the same placeholder in the credit note email template and the reminder email templates.

If the link to the customer portal has to be delivered in the respective customer language, the placeholder **{SelfServicePortalUrl}** can be supplemented by a URL suffix of the language, e.g: **{SelfServicePortalUrl}?language=en**.

For more information on how to deliver a specific language, click [here](/frisbii-transform/docs/how-can-i-submit-an-english-order-page-and-prefill-the-country).

![](https://cdn.document360.io/b84e1b5d-2ba6-4465-8c62-fb45a2f31314/Images/Documentation/InvoicesEmailTemplate.png)

### Displayed areas

For the customer portal, it can be set which areas the customer is allowed to view and change and which not. Detailed instructions can be found [here](/frisbii-transform/docs/how-can-i-change-the-design-of-the-signup-page-and-the-customer-portal).