Narrowly Preventing Mayhem

    @thanku/postpaid-widget

    0.3.1 • Public • Published

    ThankU logo

    Say ThankU and Do Goodwww.thanku.social • Plant trees, clean the ocean, and protect animals


    ThankU Postpaid Widget (Web Component)

    Create ThankUs on the fly and show your customers that you care about the environment.

    ThankU Postpaid Widget Screenshot

    See a DEMO here: https://thanku.github.io/postpaid-widget/

    We make use of the latest browser features (Web Components, module scripts, fetch, CSS variables, etc.) which are well supported in current versions of Google Chrome, Mozilla Firefox, Apple Safari and Microsoft Edge. If you need to target older browser versions or Microsoft Internet Explorer, you need to provide appropriate polyfills.

    Installation

    Self hosted

    Add the following to an HTML document:

    <script type="module" src="path/to/postpaid-widget.js"></script>

    CDN

    Add the following to an HTML document:

    <script type="module" src="https://unpkg.com/@thanku/postpaid-widget"></script>

    NPM

    Run npm i @thanku/postpaid-widget.

    Usage

    This widget is intended for ThankU for Business partners. Before using this widget you need to create your own ThankU page. And we need to setup the required configuration for you. So if you are interested in using the ThankU Postpaid Widget, do not hesitate to get in touch with us via: business@thanku.social.


    Create a <thanku-postpaid-widget> element with default content for users of browsers that don't support Web Components and add the required attributes mentioned below.

    <thanku-postpaid-widget
      slug="freshfarm-shop"
      cause="PlantTrees"
      impact="1"
      message="Dear Mrs. Johnson, thank you for shopping with us! We really appreciate you as a customer. Best regards, your Feshfarm Shop team"
      pid="SOME_UNIQUE_ID"
      sig="THE_SIGNATURE_CREATED_WITH_YOUR_SECRET"
      lang="en"
    >
      <!-- [start] fallback content if web components are not supported -->
      <p>
        Dear Mrs. Johnson, thank you for shopping with us! We really appreciate you
        as a customer. Best regards, your Feshfarm Shop team
      </p>
      <!-- [end] -->
    </thanku-postpaid-widget>

    To get the full ThankU look and feel, also include the following font inside <head>:

    <link href="https://www.thanku.social/fonts/exo.css" rel="stylesheet" />

    Attributes

    name required default description
    slug ✔️ - Your ThankU page name
    cause ✔️ - The good cause you want to support (possible values: PlantTrees, CleanOcean, ProtectWildlife)
    impact ✔️ - The impact value (a positive integer). Depending on the selected cause this value represents either number of trees, kg plastic or sqm habitat.
    message ✔️ - The ThankU message you want to show
    pid ✔️ - The postpaid id (an unique id like e.g. your order id)
    sig ✔️ - The signature, a HMAC-SHA256 hash (hex encoded) generated with your secret token (sig needs to be generated server-side to keep your token secret)
    lang en The language used for the widget and for the generated ThankU (possible values: en, de)
    simulate - If defined no data will be stored on our side, so no ThankU will be created. Great for testing!

    NOTE: It's NOT possible to update attributes programatically, because the signature sig needs to be generated server-side anyway to keep your token secret.

    Styling

    The style of the <thanku-postpaid-widget> element can be changed by setting the following custom properties / CSS variables:

    • --bg-image - The background image of the widget (e.g. an image or gradient or none)
    • --bg-color - The background color of the widget
    • --bg-color-button - The background color of the button
    • --bg-color-button-hover - The background hover color of the button
    • --bg-color-impact - The background color of the impact bubble
    • --bg-color-message - The background color of the message box
    • --color-text-base - The base color of the text
    • --color-text-headline - The color of the headline text
    • --color-text-impact - The color of the impact bubble text
    • --color-text-button - The color of the button text
    • --color-text-message - The color of the message text
    • --shadow-color-message - The shadow color of the message box
    • --font-family - The font family of the text (defaults to "Exo", sans-serif)
    • --font-size-base - The base font size (small screens, mobile)
    • --font-size-sm - The base font size for screens >= 640px (responsive)
    • --font-size-md - The base font size for screens >= 768px (responsive)
    • --font-size-lg - The base font size for screens >= 1024px (responsive)

    The CSS variables can be set e.g. inline via the style attribute like this:

    <thanku-postpaid-widget
      slug="freshfarm-shop"
      ...
      style="--bg-color: #202c55;
             --bg-image: none;
             --color-text-base: white;
             --color-text-headline: #78c0c4;
             --font-family: 'Roboto Mono', monospace"
    >
    </thanku-postpaid-widget>

    License

    MIT License

    Install

    npm i @thanku/postpaid-widget

    DownloadsWeekly Downloads

    36

    Version

    0.3.1

    License

    MIT

    Unpacked Size

    17.4 kB

    Total Files

    4

    Last publish

    Collaborators

    • layflags