Website-Widgets

Code Snippets Widget für Ihre Website

Zeigen Sie Codebeispiele in einem ansprechenden, einbettbaren Block an, den Besucher lesen und kopieren können. Fügen Sie Snippets hinzu, wählen Sie Sprachen, wechseln Sie zwischen Tab- und gestapelten Layouts, gestalten Sie das Codefenster und veröffentlichen Sie Ihr Jotform Code Snippets Widget ohne Programmierung auf jeder Website.

So erstellen Sie ein Code Snippets-Widget

Add your code examples

Fügen Sie Ihre Codebeispiele hinzu

Erstellen Sie Snippets für echte Dokumentationsanforderungen, wie Installationsbefehle, API-Anfragen, Antwortbeispiele, CSS-Helfer oder Tutorial-Code. Fügen Sie einen Titel hinzu, wählen Sie die Sprache und fügen Sie für jedes Beispiel den Code-Inhalt ein.

Choose how snippets display

Wählen Sie, wie Snippets angezeigt werden

Verwenden Sie Tabs, wenn Leser zwischen zusammengehörigen Beispielen wechseln müssen, oder ein Listenlayout für Schritt-für-Schritt-Tutorials. Wählen Sie ein Code-Design, einen Fensterstil, Zeilennummern, Kopier-Beschriftungen, Breite, Abstände und Radius.

Embed it on your site

Betten Sie ihn auf Ihrer Website ein

Sehen Sie sich eine Vorschau des Widgets an, kopieren Sie den Einbettungscode und platzieren Sie Ihre Codebeispiele in Docs, Hilfe-Centern, API-Seiten, Produkt-Tutorials oder Setup-Anleitungen, wo Besucher Implementierungsdetails benötigen.

Teilen Sie Codebeispiele, die leicht zu erfassen und zu kopieren sind

Mehrere Snippets hinzufügen

Fassen Sie zusammengehörige Beispiele in einem Widget zusammen, etwa Installationsbefehle, API-Anfragen, JSON-Antworten, CSS-Helfer oder Tutorial-Code. Fügen Sie datei-ähnliche Titel, Sprachbezeichnungen und bearbeitbare Codeblöcke hinzu, damit Leser wissen, wofür jedes Snippet gedacht ist.

Add multiple snippets

Vertraute Code-Designs auswählen

Sorgen Sie dafür, dass sich technische Beispiele in Docs, Hilfe-Centern und auf Produktseiten wie zu Hause anfühlen. Beginnen Sie mit integrierten Designs wie Midnight Glass, Nord, VS 2015, Zenburn, Railscast, Solarized Light oder Tomorrow und passen Sie dann die wichtigsten Farben an Ihre Website an.

Choose familiar code themes

Besuchern helfen, Code schnell zu kopieren

Lassen Sie Besucher genau das Snippet kopieren, das sie brauchen, ohne den Text manuell auszuwählen. Fügen Sie Kopier-Buttons, „Kopiert“-Beschriftungen, Zeilennummern und Fensterrahmen hinzu, damit Einrichtungsbefehle und Codebeispiele leichter nachvollziehbar und wiederverwendbar sind.

Help visitors copy code quickly

Layout und Einbettungsverhalten steuern

Verwenden Sie Tabs für kompakte Dokumentationen oder den Listenmodus für Schritt-für-Schritt-Tutorials. Legen Sie automatische oder benutzerdefinierte Breite, Abstände, Schatten, Branding-Sichtbarkeit, Desktop-/Mobilanzeige und gezieltes CSS fest, damit das Widget zu Ihrem Seitenlayout passt.

Control layout and embed behavior

So betten Sie Ihr Code Snippets in WordPress ein

1Einbettungscode abrufen

Nachdem Sie Ihr Jotform Website-Widget angepasst haben, klicken Sie auf Kostenlos auf Ihrer Website testen und kopieren Sie den generierten Einbettungscode.

2Seiteneditor öffnen

Gehen Sie zum WordPress-Beitrag oder zur Seite, auf der Sie das Widget anzeigen möchten, und fügen Sie einen neuen Block hinzu.

3Custom HTML Block hinzufügen

Wählen Sie Custom HTML und fügen Sie den Einbettungscode Ihres Jotform Website-Widgets in das HTML-Feld ein.

4Ändern und anzeigen

Klicken Sie auf Ändern oder Veröffentlichen und öffnen Sie dann die Seite, um Ihr eingebettetes Widget zu überprüfen.

Warum sich Jotform Website Widgets auszeichnen

Mit den Widgets von Jotform wird Ihre Website interaktiver und Sie steigern Ihre Conversion-Rate. Zur Auswahl stehen zahlreiche Tools wie Sternebewertungen, Slideshows mit Erfahrungsberichten, Pop-ups mit Social Proof und eingebettete Medien. Fügen Sie Widgets zu Ihren Formularen oder Landingpages hinzu, um Daten zu sammeln, Erfahrungsberichte anzuzeigen und Leads zu gewinnen – ganz ohne Programmierkenntnisse.

Widgets ohne Programmierung verwenden

Fügen Sie Jotform-Widgets mithilfe eines Einbettungscodes in Ihre Website ein. Passen Sie das Widget an, sehen Sie sich die Vorschau an und fügen Sie den Code in jede Seite ein, die benutzerdefiniertes HTML oder Einbettungsblöcke unterstützt – ganz ohne Entwicklerinnen oder Entwickler.

Bauen Sie interaktivere Seiten

Mit Jotform Website Widgets sammeln Sie Leads, zeigen Kundenfeedback, präsentieren Social Proof, binden Medien ein oder fügen nützliche Webseiten-Tools hinzu. Über jedes Widget können Besucher direkt auf Ihrer Website mit Ihrem Unternehmen interagieren.

Holen Sie sich jederzeit Hilfe

Wenn Sie Unterstützung bei der Einrichtung, Anpassung, Einbettung oder Fehlerbehebung Ihres Widgets benötigen, steht Ihnen das Kundensupport-Team von Jotform rund um die Uhr zur Verfügung. So können Sie beruhigt weiterarbeiten, denn Sie wissen: Hilfe ist da, wenn Sie sie brauchen.

Wo Sie Ihr Code Snippets Widget einsetzen können

Fügen Sie das Widget überall dort ein, wo Besucher Implementierungsbeispiele benötigen, ohne die Seite zu verlassen.

Entwicklerdokumentationen, die Installationsbefehle, API-Anfragen, Antwortbeispiele und Konfigurations-Snippets benötigen.

Produkt-Tutorials, die Einrichtungsschritte anhand von HTML-, CSS-, JavaScript-, SQL-, Shell- oder JSON-Beispielen erklären.

Hilfe-Center, die Einbettungsanleitungen, Webhook-Payloads, Vorlagen-Snippets oder Fehlerbehebungsbefehle anzeigen.

SaaS-Landingpages, die kompakte technische Beispiele neben Feature-Erklärungen oder Integrationsdetails benötigen.

Bildungswebsites, die Unterrichtscode, Startdateien sowie Vorher-Nachher-Beispiele veröffentlichen.

Agentur- und Portfolio-Seiten, die Implementierungsbeispiele neben Projekt-Fallstudien zeigen möchten.

Gewinnen Sie Leads als zahlende Kunden mit dem Jotform Formulargenerator

Nutzen Sie Jotform, um aus jedem Kontakt eine konkrete Maßnahme zu machen. Erstellen Sie leistungsstarke Formulare, mit denen Sie Leads erfassen, Zahlungen abwickeln und Antworten automatisieren – und das alles an einem Ort. Jede Antwort landet in Ihrem Jotform Posteingang, von wo aus Sie nachfassen oder Ihre bevorzugten Apps verbinden können.

Jetzt starten – Kostenlos!
Convert leads into customers

FAQ

  • Was ist ein Code Snippets Widget?

    Ein Code Snippets Widget ist ein einbettbarer Codeanzeigeblock, mit dem Sie betitelte, syntaxgestylte Beispiele auf Ihrer Website darstellen können.

  • Können Besucher Code aus dem Widget kopieren?

  • Welche Layouts sind verfügbar?

  • Kann ich Zeilennummern anzeigen?

  • Kann ich das Code-Design anpassen?

  • Welche Sprachen kann ich auswählen?

  • Funktioniert es auf Mobilgeräten?

  • Brauche ich Programmierkenntnisse, um das Tool zu nutzen?