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>
Javascript
The following example code implements the copy to clipboard functionality and changes the state of the button to provide user feedback.
<!-- Include the web component source -->
<script src="https://assets.soracom.io/js/sds/latest/ds-plan/component.js"></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>