Entwickler · Widget-Labor

Jedes Widget, live.

Jedes Widget auf dieser Seite spricht mit unserem Demo-Shop. Kopiere das Snippet, setze deinen eigenen Schlüssel und deine Shop-Adresse ein, und es verkauft für dich.

Der Demo-Shop wird jede Nacht zurückgesetzt. Zahlungen hier sind nur Sandbox; es wird nichts belastet.

Jedes Widget unten nennt seinen Shop mit data-key und data-base-url, sodass diese Seite den Demo-Shop neben unserem zeigen kann.

ihreseite.html

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

Domainsuche

<teculiar-domain-search>

Domains suchen, prüfen und in den Warenkorb legen

Live, gegen den Demo-Shop

Attribute

checkout: Deine Checkout-Seite. Der Button heißt dann Bestellen und öffnet sie mit der eingetragenen Domain
suggestions: true fügt dem Ergebnis andere Endungen hinzu (standardmäßig aus)
heading: Ersetzt die Überschrift

Ereignisse

teculiar:domain-search
teculiar:cart-add

Snippet

<teculiar-domain-search></teculiar-domain-search>

Produktraster

<teculiar-product-grid>

Die Produkte einer Kategorie, mit Preisen und einem Monats-/Jahresschalter

Live, gegen den Demo-Shop

Attribute

category: Nur die Produkte dieser Kategorie
cycle: Die Laufzeit, mit der begonnen wird, zum Beispiel YEAR_1
checkout: Deine Checkout-Seite; Auswählen öffnet sie mit Produkt und Laufzeit
currency: Legt die Preise auf eine gelistete Währung fest

Ereignisse

teculiar:product-select
teculiar:catalog-loaded

Snippet

<teculiar-product-grid></teculiar-product-grid>

Preistabelle

<teculiar-pricing-table>

Tarife nebeneinander

Live, gegen den Demo-Shop

Attribute

cycle: Die Laufzeit, mit der begonnen wird
checkout: Deine Checkout-Seite; Auswählen öffnet sie mit Tarif und Laufzeit
heading: Ersetzt die Überschrift

Ereignisse

teculiar:product-select
teculiar:catalog-loaded

Snippet

<teculiar-pricing-table></teculiar-pricing-table>

Live-Preis

<teculiar-price>

Ein Preis, der der Währung des Besuchers folgt

Live, gegen den Demo-Shop

Attribute

amount: Ein Preis in der Hauptwährung des Shops, für den Besucher umgerechnet
product: Der Slug eines Produkts; der Preis kommt dann aus dem Katalog
cycle: Welchen Laufzeitpreis man zeigt, zusammen mit product
per: Fügt den Zeitraum hinzu, zum Beispiel /Monat
currency: Legt eine gelistete Währung fest

Ereignisse

keine

Snippet

<teculiar-price amount="8">$8</teculiar-price>

Sprache und Währung

<teculiar-preferences>

Der Globus-Schalter, mit deinem Portal geteilt

Live, gegen den Demo-Shop

Attribute

languages: Die anzubietenden Sprachen, zum Beispiel en,de
show: languages, currencies oder beides
href-template: Wohin ein Sprachwechsel führt, wenn die Seite keinen übersetzten Zwilling hat

Ereignisse

teculiar:prefs

Snippet

<teculiar-preferences languages="en,de"></teculiar-preferences>

Blogliste

<teculiar-blog-list>

Deine neuesten Beiträge

Live, gegen den Demo-Shop

Attribute

limit: Wie viele Beiträge, standardmäßig 5
tag: Nur Beiträge mit diesem Tag
base-href: Die Seite, auf der sich ein Beitrag öffnet, zum Beispiel /journal
locale: Die Sprache der Beiträge

Ereignisse

keine

Snippet

<teculiar-blog-list limit="3" base-href="/de/journal"></teculiar-blog-list>

Hilfesuche

<teculiar-kb-search>

Antworten aus deiner Wissensdatenbank, noch vor einem Ticket

Live, gegen den Demo-Shop

Attribute

base-href: Die Seite, auf der sich ein Artikel öffnet, zum Beispiel /knowledgebase
heading: Ersetzt die Überschrift

Ereignisse

keine

Snippet

<teculiar-kb-search base-href="/de/dokumentation"></teculiar-kb-search>

Kontaktformular

<teculiar-contact-form>

Eröffnet ein Ticket in deinem Desk

Live, gegen den Demo-Shop

Attribute

privacy-href: Deine Datenschutzseite; zeigt den Hinweis und den Link
consent: required fügt ein Kästchen hinzu, das der Absender anhaken muss
heading: Ersetzt die Überschrift

Ereignisse

teculiar:inquiry-sent

Snippet

<teculiar-contact-form privacy-href="/de/datenschutz/"></teculiar-contact-form>

Login

<teculiar-login>

Anmeldung, auf unserer Adresse

Live, gegen den Demo-Shop

Attribute

locale: Die Sprache des Frames
data-teculiar-*: Füllt Theme-Werte, die dein Shop nicht gesetzt hat, zum Beispiel data-teculiar-accent

Ereignisse

teculiar:ready
teculiar:authenticated
teculiar:signed-out
teculiar:error

Snippet

<teculiar-login></teculiar-login>

Konto

<teculiar-account>

Rechnungen, Dienste und Tickets in deiner Seite

Live, gegen den Demo-Shop

Attribute

view: overview, services, invoices, tickets, domains, billing, hosting oder account
height: Eine feste Höhe; ohne sie bestimmt der Frame seine Größe selbst
locale: Die Sprache des Frames

Ereignisse

teculiar:ready
teculiar:resize
teculiar:authenticated
teculiar:signed-out
teculiar:navigate
teculiar:error

Snippet

<teculiar-account view="overview"></teculiar-account>

Checkout

<teculiar-checkout>

Vom Warenkorb zur Zahlung und zurück auf deine Seite

Live, gegen den Demo-Shop

Attribute

product: Der Slug des Produkts (erforderlich)
cycle: Die Laufzeit, mit der begonnen wird
config-<key>: Startet eines der Bestellfelder des Produkts, zum Beispiel config-subdomain
return-url: Wohin der Käufer nach der Zahlung geht; cancel-url für einen Abbruch

Ereignisse

teculiar:checkout-step
teculiar:checkout-created
teculiar:checkout-complete

Snippet

<teculiar-checkout product="demo-web-starter"></teculiar-checkout>