Plan

Overview

ds-plan is a simple self contained Web Component for showing a Soracom plan tag. The component will sanitize the plan text, and display the correctly formatted offical plan name and color.

Options

Simply include the plan name inside the ds-plan element.

<ds-plan>[plan name]</ds-plan>

html

Copy

<script type="module" src="https://assets.soracom.io/sds/beta/ds-plan/index.mjs"></script>

<ds-plan>planUSmax</ds-plan>

<ds-plan plan="[plan name]"></ds-plan>

html

Copy

<script type="module" src="https://assets.soracom.io/sds/beta/ds-plan/index.mjs"></script>

<ds-plan plan="planUSmax"></ds-plan>

<ds-plan plan="planUSmax" bundle="X3-5MB"></ds-plan>

Javascript

The following example code implements the copy to clipboard functionality and changes the state of the button to provide user feedback.

html

Copy

<script type="module" src="https://assets.soracom.io/sds/beta/ds-plan/index.mjs"></script>

<ds-plan>planUSmax</ds-plan>
<ds-plan>plan-USmax</ds-plan>

<p>
  By default, each <ds-plan>plan01s</ds-plan> SIM is preprogrammed with an
  operator profile from Soracom, which includes a corresponding
  <ds-plan>plan01s</ds-plan> subscription plan. When your device connects to a
  cellular network, it uses the information stored in this subscription plan,
  such as Subscriber Identity (IMSI) and authentication keys, to authenticate
  itself.
</p>

<p style="font-size: 16px;">
  By default, each <ds-plan>plan01s</ds-plan> SIM is preprogrammed with an
  operator profile from Soracom, which includes a corresponding
  <ds-plan>plan01s</ds-plan> subscription plan. When your device connects to a
  cellular network, it uses the information stored in this subscription plan,
  such as Subscriber Identity (IMSI) and authentication keys, to authenticate
  itself.
</p>

Sizing

html

Copy

<script type="module" src="https://assets.soracom.io/sds/beta/ds-plan/index.mjs"></script>

<ds-plan size="xsmall">planUSmax</ds-plan>
<ds-plan size="small">planUSmax</ds-plan>
<ds-plan>planUSmax</ds-plan>
<ds-plan size="medium">planUSmax</ds-plan>
<ds-plan size="large">planUSmax</ds-plan>

Bundle

html

Copy

<script type="module" src="https://assets.soracom.io/sds/beta/ds-plan/index.mjs"></script>

<ds-plan bundle="5GB">planUS</ds-plan>
<ds-plan bundle="100MB">plan X3-EU</ds-plan>