Japan Wireless eSIM

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. 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. const widget = new JapanWirelessWidget({ container: "#widget-container", }); widget.initialize(); widget.show(); The widget can be setup to use show custom plans by passing an array of plan ID's. const widget = new JapanWirelessWidget({ container: "#widget-container", plans: [11, 21, 39, 42, 15] }); widget.initialize(); widget.show(); 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) const widget = new JapanWirelessWidget({ container: "#widget-container", language: "jp" }); widget.initialize(); widget.show(); 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 const widget = new JapanWirelessWidget({ container: "#widget-container", params: { currency: "EUR", }, }); widget.initialize(); widget.show(); Coupons and referral paramters for the widgets can be set using a params option. const widget = new JapanWirelessWidget({ container: "#widget-container", params: { via: "affilate", coupon: "Lo88GH97", }, }); widget.initialize(); widget.show(); 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. const widget = new JapanWirelessWidget({ container: "#widget", popupStyles: { xs: { height: "350px", width: "250px", }, border: "dashed red", borderColor: "red", }, closeButtonStyles: { borderRadius: "50%", }, }); widget.initialize(); widget.show(); The full API to the customization that can be done: 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; }; 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; } The widget is attached below as a live demo:

Affiliates 条款和条件会员条款隐私政策法律规范关于我们常见问题联系我们