Skip to main content

Integrating and customizing the Proxy-Cheap widget on your website [Step by Step Tutorial]

Updated

The Proxy-Cheap widget allows resellers and referral to embed a seamless proxy purchasing interface on their websites. This tutorial will guide you through integrating the widget, configuring settings, and customizing it.

1. Embedding the Proxy-Cheap Widget

1.1 Add the Stylesheet to the <head> Section

Include the following <link> tag inside your website's <head> section to load the required styles:

<link rel="stylesheet" href="https://main.d30i1txsql53xn.amplifyapp.com/proxy-widget.css">

This ensures the widget appears correctly with the intended design.

 

1.2 Insert the Widget Container (<div>)

Place this <div> element wherever you want the Proxy-Cheap widget to be displayed on your page:

<div class="proxy-widget"
     data-language="en"
     data-title="Buy Private Proxies"
     data-subtitle="Fast & Secure Access"
     data-without-title="false"         
     data-referrer-code="CODE"
     data-host="https://app.proxy-cheap.com">

</div>
  • data-language="en" → Sets the widget language (only en (English) and zh (Chinese) are supported).
  • data-title="Buy Private Proxies" → Defines the main heading of the widget.
  • data-subtitle="Fast & Secure Access" → Adds a subtitle below the title.
  • data-without-title="false" → If true, removes the title and subtitle from the widget.
  • data-referrer-code: If provided, the user will be redirected to the checkout page with the referrer code assigned to cookies.
  • data-host: If provided, the user will be redirected to the given host with the configuration parameters.

You can modify these attributes to fit your needs.

 

1.3 Add the Script at the End of <body>

To ensure smooth loading, add this <script> tag just before the closing </body> tag:

<script type="module" src="https://main.d30i1txsql53xn.amplifyapp.com/proxy-widget.es.js"></script>

This script initializes and renders the widget.

 

Full Implementation Example

Here’s how your final HTML structure should look:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Proxy-Cheap Widget</title>
    <link rel="stylesheet" href="https://main.d30i1txsql53xn.amplifyapp.com/proxy-widget.css">
</head>
<body>

    <!-- Widget Container -->
    <div class="proxy-widget"
         data-language="en"
         data-title="Buy Private Proxies"
         data-subtitle="Fast & Secure Access"
         data-without-title="false"
         data-referrer-code="CODE"
         data-host="https://app.proxy-cheap.com">
    </div>

    <!-- Widget Script -->
    <script type="module" src="https://main.d30i1txsql53xn.amplifyapp.com/proxy-widget.es.js"></script>

</body>
</html>

Click here to edit and preview the HTML live on CodeSandbox.

This will insert the proxy widget into your website, allowing users to configure and purchase proxies directly from your platform.

 

2. Configuring Proxy Parameters

Depending on the proxy type, you can modify the widget to predefine proxy settings. Below are the supported configurations:

 

2.1 Residential and Mobile Proxies

networkType: 'MOBILE' | 'RESIDENTIAL';
bandwidth: number;

Available Parameters:

When setting up a proxy order via our checkout system, you can specify two key parameters:

1. networkType (Proxy Type Selection)

The networkType parameter allows you to choose the type of proxy network you want:

  • MOBILE → Orders a Mobile Proxy Package (using real mobile carrier IPs).
  • RESIDENTIAL → Orders a Rotating Residential Proxy Package (using real household IPs).

2. bandwidth (Data Allocation in GB)

The bandwidth parameter defines the amount of data you want to allocate to your proxy package, measured in gigabytes (GB).

Example Usage

 

2.2 Static Residential Proxies

networkType: 'RESIDENTIAL_STATIC';
isUnusedProxy: boolean;
ipVersion: 'IPv4';
country: string;
isp: string;
quantity: number;
timePeriod: '7d' | '1m' | '2m' | '3m' |'4m' |'5m' |'6m' |'7m' |'8m' |'9m' |'10m' |'11m' |'12m';

Available Parameters:

1. isUnusedProxy (New vs. Previously Used IPs)

  • true → Orders a brand new, unused proxy (Premium).
  • false → Orders a previously assigned proxy (Standard).

2. ipVersion (IP Type)

  • Currently supports IPv4.

3. country (Country Selection)

  • Instead of full country names, use ISO country codes (e.g., US for the United States, DE for Germany).
  • Example values:
    • United States → US
    • Germany → DE
    • France → FR
    • Italy → IT

4. isp (Internet Service Provider – Selected by ID)

  • ISP must be chosen by its unique ID.
  • The easiest way to retrieve the correct ISP ID is to click through the form in the ordering system, as shown in the tutorial video.
  • Example:
    • AT&T (United States) → e649eed7-ee2b-11ec-85c2-06902e647790
    • Liberty Global (Germany) → d7186d88-9d7a-11ed-89cd-069b3a488940
    • NTT (United Kingdom) → bf22ae6b-765f-11ef-b719-0ac79cee8129

5. quantity (Number of Proxies)

  • Specifies how many static proxies you want to order.

6. timePeriod (Rental Duration)

  • Choose the duration for which you want to rent the proxies:
    • 7d → 7 days
    • 1m → 1 month
    • 2m → 2 months
    • Up to 12 months (12m).

Example Checkout URLs

1. Order a Used Static Residential Proxy in the U.S. (AT&T) for 1 Month

2. Order 3 German Static Residential Proxies (Liberty Global) for 6 Months

3. Order 5 United Kingdom Static Residential Proxies (NTT) for 3 Months

2.3 Datacenter IPv4 Proxies

networkType: 'DATACENTER';
ipVersion: 'IPv4';
country: string;
quantity: number;
timePeriod: '1m' | '2m' | '3m' |'4m' |'5m' |'6m' |'7m' |'8m' |'9m' |'10m' |'11m' |'12m';

Available Parameters:

1. ipVersion (IP Type)

  • Currently supports IPv4 only.

2. country (Server Location)

  • Choose a specific country where your datacenter proxies will be located.
  • Use ISO country codes instead of full names:
    • United States → US
    • Germany → DE
    • France → FR
    • Japan → JP
    • United Kingdom → GB
    • Canada → CA
    • Singapore → SG
    • Australia → AU
    • Netherlands → NL
    • Sweden → SE
    • United Arab Emirates → AE
    • Full List: RO, CN, GB, CA, FR, HK, JP, US, IT, HU, NO, AU, BE, ES, DK, DE, FI, SE, NL, SG, PL, AE, CH, AT, BG.

3. quantity (Number of Proxies)

  • Defines the number of datacenter proxies in the order.

4. timePeriod (Rental Duration)

  • Choose the rental duration:
    • 1m → 1 month
    • 2m → 2 months
    • Up to 12 months (12m).

Example Checkout URLs (with Country Codes)

1. Order 5 U.S. Datacenter Proxies for 1 Month

2. Order 10 German Datacenter Proxies for 6 Months

2.4 Datacenter IPv6 Proxies

networkType: 'DATACENTER';
ipVersion: 'IPv6';
country: string;
package: number;
timePeriod: '1m';

Available Parameters:

1. ipVersion (IP Type)

  • IPv6 only.

2. country (Server Location)

  • Choose from the following available countries (use ISO country codes):
    • Czechia → CZ
    • France → FR
    • Germany → DE
    • United States → US

3. package (Number of Proxies in Package)

  • IPv6 proxies are available in fixed packages:
    • 50
    • 150
    • 500

4. timePeriod (Rental Duration)

  • Currently only supports:
    • 1m → 1 month rental

Example Checkout URLs (with Country Codes)

1. Order 50 IPv6 Proxies in Germany for 1 Month

2. Order 150 IPv6 Proxies in France for 1 Month

3. Order 500 IPv6 Proxies in the U.S. for 1 Month

By embedding and configuring this Proxy-Cheap widget, you can offer your customers an easy and efficient way to purchase proxies directly from your platform. Experiment with different settings to tailor the experience to your audience.

For any technical support or further customization requests, feel free to reach out to our team.

Happy selling!

Related to

Related articles