Setting up the widget

This is a guide on setting up the widget.

Introduction

This widget has two components:

1. Widget Component: It shows the plans that are currently being featured.
2. Popup Component: It pops up when a plan is clicked. It shows the plan details and an order can be places from within the component.

Installation

The installation is fairly simple as setting a script tag.

<script src="https://www.japan-wireless.com/esim/widget/v1/dist/index.js"></script>

Usage

The widget is attached to a div component that is passed when initiailizing it. The div component should be at least 250px or it might not show the full widget.

<div id="widget-container"></div>
<script src="https://www.japan-wireless.com/esim/widget/v1/dist/index.js"></script>
<script>
  const widget = new JapanWirelessWidget({
    container: "#widget-container",
  });
  widget.initialize();
  widget.show();
</script>

Custom plans

The widget can be setup to use show custom plans by passing an array of plan ID's.

<div id="widget-container"></div>
<script src="https://www.japan-wireless.com/esim/widget/v1/dist/index.js"></script>
<script>
  const widget = new JapanWirelessWidget({
    container: "#widget-container",
    plans: [11, 21, 39, 42, 15]
  });
  widget.initialize();
  widget.show();
</script>

Internationalization

The widget can be dislayed in several different languages. You can pass a language option when initiailizing the widget. The language codes are:

1. "de": German
2. "en": English
3. "es": Spanish
4. "fr": French
5. "it": Italian
6. "jp": Japanese
7. "kr": Korean
8. "ms": Malay
9. "tl": Tagalog (Filipino)
10. "vi": Vietnamese
11. "zh": Chinese (Simplified)
12. "zt": Chinese (Traditional)

<div id="widget-container"></div>
<script src="https://www.japan-wireless.com/esim/widget/v1/dist/index.js"></script>
<script>
  const widget = new JapanWirelessWidget({
    container: "#widget-container",
    language: "jp"
  });
  widget.initialize();
  widget.show();
</script>

Currency

The prices of the plans in the widget can be dislayed in several different currencies. You can pass a currency param in the params option when initiailizing the widget. The currencies are:

1. "PHP": Philippine Peso
2. "JPY": Japanese Yen
3. "USD": US Dollar
4. "EUR": Euro
5. "AUD": Australian Dollar
6. "CAD": Canadian Dollar
7. "TWD": New Taiwan Dollar
8. "HKD": Hong Kong Dollar
9. "CNY": Chinese Yuan
10. "GBP": British Pound Sterling
11. "KRW": South Korean Won

<div id="widget-container"></div>
<script src="https://www.japan-wireless.com/esim/widget/v1/dist/index.js"></script>
<script>
  const widget = new JapanWirelessWidget({
    container: "#widget-container",
    params: {
          currency: "EUR",
        },
  });
  widget.initialize();
  widget.show();
</script>

Using coupons and referral

Coupons and referral paramters for the widgets can be set using a params option.

<script>
  const widget = new JapanWirelessWidget({
    container: "#widget-container",
    params: {
      via: "affilate",
      coupon: "Lo88GH97",
    },
  });
  widget.initialize();
  widget.show();
</script>

Customization

Customizing the Widget Component

For customizing the Widget Component, it's fairly simple. The container element can be styled for that purpose.

Customizing the Popup Component

For the Popup Component, there are certain customization that can be done to its responsiveness and styles.

Example

This example shows to style the popup element with border color and adds a responsive breakpoint.

<script>
  const widget = new JapanWirelessWidget({
    container: "#widget",
    popupStyles: {
      xs: {
        height: "350px",
        width: "250px",
      },
      border: "dashed red",
      borderColor: "red",
    },
    closeButtonStyles: {
      borderRadius: "50%",
    },
  });
  widget.initialize();
  widget.show();
</script>

API

The full API to the customization that can be done:

Popup component

Default styles:

const DEFAULT = {
  breakpoints: {
    xs: "576px",
    sm: "768px",
    md: "992px",
    lg: "1200px",
    xl: "1408px",
  },
  xs: { width: "350px", height: "450px" },
  sm: { width: "350px", height: "450px" },
  md: { width: "450px", height: "550px" },
  lg: { width: "450px", height: "550px" },
  xl: { width: "450px", height: "550px" },
  boxShadow: "rgb(110 110 110 / 15%) -1px 1px 5px 3px",
  borderColor: "none",
  positioning: {
    anchor: "bottom-right",
    offsetX: 0,
    offsetY: 0,
  },
  border: "none",
  borderTopLeftRadius: "5px",
  borderTopRightRadius: "5px",
};

Full customizable API:

interface PopupStyles {
  xs?: Dimension;
  sm?: Dimension;
  md?: Dimension;
  lg?: Dimension;
  xl?: Dimension;

  breakpoints?: {
    xs?: string;
    sm?: string;
    md?: string;
    lg?: string;
    xl?: string;
  };

  positioning?: {
    anchor: "top-left" | "top-right" | "bottom-left" | "bottom-right";
    offsetX: number;
    offsetY: number;
  };

  borderColor?: string;
  border?: string;
  boxShadow?: string;
}

type Dimension = {
  width: string;
  height: string;
};

Close Button

Default styles:

const DEFAULT = {
  position: "absolute",
  top: "14px",
  right: "14px",
  left: "auto",
  bottom: "auto",

  backgroundColor: "white",
  border: "none",
  borderRadius: "10%",
  width: "28px",
  height: "28px",
  cursor: "pointer",
  fontSize: "28px",
  lineHeight: "1",
  padding: "0",
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  boxShadow: "none",
};

Customizable API:

interface CloseButtonStyles {
  position?: string;
  top?: string;
  right?: string;
  left?: string;
  bottom?: string;
  backgroundColor?: string;
  border?: string;
  borderRadius?: string;
  width?: string;
  height?: string;
  cursor?: string;
  fontSize?: string;
  lineHeight?: string;
  padding?: string;
  display?: string;
  alignItems?: string;
  justifyContent?: string;
  boxShadow?: string;
}

Live Demo

The widget is attached below as a live demo:

Loading widget...