Setting up the widget on your website
This is a guide on setting up the widget.
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.
The installation is fairly simple as setting a script tag.
<script src="https://www.japan-wireless.com/esim/widget/v1/dist/index.js"></script><br/>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><br/><script src="https://www.japan-wireless.com/esim/widget/v1/dist/index.js"></script><br/><script><br/> const widget = new JapanWirelessWidget({<br/> container: "#widget-container",<br/> });<br/> widget.initialize();<br/> widget.show();<br/></script><br/>The widget can be setup to use show custom plans by passing an array of plan ID's.
<div id="widget-container"></div><br/><script src="https://www.japan-wireless.com/esim/widget/v1/dist/index.js"></script><br/><script><br/> const widget = new JapanWirelessWidget({<br/> container: "#widget-container",<br/> plans: [11, 21, 39, 42, 15]<br/> });<br/> widget.initialize();<br/> widget.show();<br/></script><br/>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><br/><script src="https://www.japan-wireless.com/esim/widget/v1/dist/index.js"></script><br/><script><br/> const widget = new JapanWirelessWidget({<br/> container: "#widget-container",<br/> language: "jp"<br/> });<br/> widget.initialize();<br/> widget.show();<br/></script><br/>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><br/><script src="https://www.japan-wireless.com/esim/widget/v1/dist/index.js"></script><br/><script><br/> const widget = new JapanWirelessWidget({<br/> container: "#widget-container",<br/> params: {<br/> currency: "EUR",<br/> },<br/> });<br/> widget.initialize();<br/> widget.show();<br/></script><br/>Coupons and referral paramters for the widgets can be set using a params option.
<script><br/> const widget = new JapanWirelessWidget({<br/> container: "#widget-container",<br/> params: {<br/> via: "affilate",<br/> coupon: "Lo88GH97",<br/> },<br/> });<br/> widget.initialize();<br/> widget.show();<br/></script><br/>For customizing the Widget Component, it's fairly simple. The container element can be styled for that purpose.
For the Popup Component, there are certain customization that can be done to its responsiveness and styles.
This example shows to style the popup element with border color and adds a responsive breakpoint.
<script><br/> const widget = new JapanWirelessWidget({<br/> container: "#widget",<br/> popupStyles: {<br/> xs: {<br/> height: "350px",<br/> width: "250px",<br/> },<br/> border: "dashed red",<br/> borderColor: "red",<br/> },<br/> closeButtonStyles: {<br/> borderRadius: "50%",<br/> },<br/> });<br/> widget.initialize();<br/> widget.show();<br/></script><br/>The full API to the customization that can be done:
Default styles:
const DEFAULT = {<br/> breakpoints: {<br/> xs: "576px",<br/> sm: "768px",<br/> md: "992px",<br/> lg: "1200px",<br/> xl: "1408px",<br/> },<br/> xs: { width: "350px", height: "450px" },<br/> sm: { width: "350px", height: "450px" },<br/> md: { width: "450px", height: "550px" },<br/> lg: { width: "450px", height: "550px" },<br/> xl: { width: "450px", height: "550px" },<br/> boxShadow: "rgb(110 110 110 / 15%) -1px 1px 5px 3px",<br/> borderColor: "none",<br/> positioning: {<br/> anchor: "bottom-right",<br/> offsetX: 0,<br/> offsetY: 0,<br/> },<br/> border: "none",<br/> borderTopLeftRadius: "5px",<br/> borderTopRightRadius: "5px",<br/>};<br/>Full customizable API:
interface PopupStyles {<br/> xs?: Dimension;<br/> sm?: Dimension;<br/> md?: Dimension;<br/> lg?: Dimension;<br/> xl?: Dimension;<br/><br/> breakpoints?: {<br/> xs?: string;<br/> sm?: string;<br/> md?: string;<br/> lg?: string;<br/> xl?: string;<br/> };<br/><br/> positioning?: {<br/> anchor: "top-left" | "top-right" | "bottom-left" | "bottom-right";<br/> offsetX: number;<br/> offsetY: number;<br/> };<br/><br/> borderColor?: string;<br/> border?: string;<br/> boxShadow?: string;<br/>}<br/><br/>type Dimension = {<br/> width: string;<br/> height: string;<br/>};<br/>Default styles:
const DEFAULT = {<br/> position: "absolute",<br/> top: "14px",<br/> right: "14px",<br/> left: "auto",<br/> bottom: "auto",<br/><br/> backgroundColor: "white",<br/> border: "none",<br/> borderRadius: "10%",<br/> width: "28px",<br/> height: "28px",<br/> cursor: "pointer",<br/> fontSize: "28px",<br/> lineHeight: "1",<br/> padding: "0",<br/> display: "flex",<br/> alignItems: "center",<br/> justifyContent: "center",<br/> boxShadow: "none",<br/>};<br/>Customizable API:
interface CloseButtonStyles {<br/> position?: string;<br/> top?: string;<br/> right?: string;<br/> left?: string;<br/> bottom?: string;<br/> backgroundColor?: string;<br/> border?: string;<br/> borderRadius?: string;<br/> width?: string;<br/> height?: string;<br/> cursor?: string;<br/> fontSize?: string;<br/> lineHeight?: string;<br/> padding?: string;<br/> display?: string;<br/> alignItems?: string;<br/> justifyContent?: string;<br/> boxShadow?: string;<br/>}<br/>The widget is attached below as a live demo:
Loading widget...