Sign inCreate your system
Developers · Widget lab

Every widget, live.

Each widget on this page talks to our demo store. Copy the snippet, put in your own key and store address, and it sells for you.

The demo store resets every night. Payments here are sandbox only; nothing is charged.

Every widget below names its store with data-key and data-base-url, so this page can show the demo store next to ours.

yourpage.html
<script src="https://cdn.teculiar.net/embed/latest/teculiar.js"
        data-key="pk_live_…"
        data-base-url="https://yourstore.example"></script>

Product grid

<teculiar-product-grid>

A category's products, with prices and a monthly/yearly switch

Live, against the demo store

Attributes

category
Only this category's products
cycle
The billing cycle to start on, for example YEAR_1
checkout
Your checkout page; Select opens it with the product and cycle
currency
Pins the prices to one listed currency

Events

  • teculiar:product-select
  • teculiar:catalog-loaded
Snippet
<teculiar-product-grid></teculiar-product-grid>

Pricing table

<teculiar-pricing-table>

Plans side by side

Live, against the demo store

Attributes

cycle
The billing cycle to start on
checkout
Your checkout page; Select opens it with the plan and cycle
heading
Replaces the heading

Events

  • teculiar:product-select
  • teculiar:catalog-loaded
Snippet
<teculiar-pricing-table></teculiar-pricing-table>

Live price

<teculiar-price>

One price that follows the visitor's currency

Live, against the demo store

$8

Attributes

amount
A price in the store's main currency, converted for the visitor
product
A product's slug; the price then comes from the catalogue
cycle
Which cycle's price to show, with product
per
Adds the period, for example /mo
currency
Pins one listed currency

Events

  • none
Snippet
<teculiar-price amount="8">$8</teculiar-price>

Language and currency

<teculiar-preferences>

The globe toggle, shared with your portal

Live, against the demo store

Attributes

languages
The languages to offer, for example en,de
show
languages, currencies or both
href-template
Where a language switch goes, when the page has no translated twin

Events

  • teculiar:prefs
Snippet
<teculiar-preferences languages="en,de"></teculiar-preferences>

Blog list

<teculiar-blog-list>

Your newest posts

Live, against the demo store

Attributes

limit
How many posts, 5 by default
tag
Only posts with this tag
base-href
The page a post opens on, for example /journal
locale
The language of the posts

Events

  • none
Snippet
<teculiar-blog-list limit="3" base-href="/en/journal"></teculiar-blog-list>

Contact form

<teculiar-contact-form>

Opens a ticket in your desk

Live, against the demo store

Attributes

privacy-href
Your privacy page; shows the notice and the link
consent
required adds a checkbox the sender must tick
heading
Replaces the heading

Events

  • teculiar:inquiry-sent
Snippet
<teculiar-contact-form privacy-href="/en/privacy/"></teculiar-contact-form>

Login

<teculiar-login>

Sign-in, on our address

Live, against the demo store

Attributes

locale
The language of the frame
data-teculiar-*
Fills theme values your store left unset, for example data-teculiar-accent

Events

  • teculiar:ready
  • teculiar:authenticated
  • teculiar:signed-out
  • teculiar:error
Snippet
<teculiar-login></teculiar-login>

Account

<teculiar-account>

Invoices, services and tickets inside your page

Live, against the demo store

Attributes

view
overview, services, invoices, tickets, domains, billing, hosting or account
height
A fixed height; without it the frame sizes itself
locale
The language of the frame

Events

  • teculiar:ready
  • teculiar:resize
  • teculiar:authenticated
  • teculiar:signed-out
  • teculiar:navigate
  • teculiar:error
Snippet
<teculiar-account view="overview"></teculiar-account>

Checkout

<teculiar-checkout>

Cart to payment, then back to your site

Live, against the demo store

Attributes

product
The product's slug (required)
cycle
The billing cycle to start on
config-<key>
Starts one of the product's order fields, for example config-subdomain
return-url
Where the buyer goes after paying; cancel-url for cancelling

Events

  • teculiar:checkout-step
  • teculiar:checkout-created
  • teculiar:checkout-complete
Snippet
<teculiar-checkout product="demo-web-starter"></teculiar-checkout>