# Telemetriedaten hinzufügen (BETA)
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/add-telemetry
Erfahren Sie, wie man Telemetriedaten einrichtet.
Sie können für Ihre App eine Telemetriefunktion einrichten, die zur Ablage von Protokolldaten dient, um diese an einen externen Observability-Anbieter weiterzuleiten. Derzeit werden nur [Honeycomb](https://www.honeycomb.io/) und [Sentry](https://sentry.io/welcome/) als Drittanbieter unterstützt.
## Erstellen und Einrichten von Telemetriekomponentendateien
Erstellen Sie im `app/`-Verzeichnis Ihres Projekts ein `telemetry/`-Verzeichnis und fügen Sie dort eine `telemetry-hsmeta.json`-Konfigurationsdatei hinzu.
```shell theme={null}
└── src/
└── app/
└── telemetry/
└── telemetry-hsmeta.json
```
Bearbeiten Sie die `telemetry-hsmeta.json`-Datei, um Ihren Anbieter, die Einstellungen auf Protokollebene usw. zu konfigurieren. Nachstehend finden Sie eine Beispieldatei sowie eine Tabelle, in der die einzelnen verfügbaren Felder aufgeführt sind.
> [!WARNING]
>
> **Hinweis**: Standardmäßig werden alle Protokolltypen und -ebenen über die `logTypes`- und `logLevels`-Felder mit Ihrem Anbieter synchronisiert, was zu einem sehr hohen Datenvolumen führen kann. Deshalb wird dringend empfohlen, zunächst nur die Protokolltypen zu konfigurieren, an denen Sie interessiert sind, und die Protokollebenen so festzulegen, dass nur nach Fehlern gefiltert wird.
### telemetry-hsmeta.json
```json theme={null}
{
"uid": "telemetry",
"type": "telemetry",
"config": {
"providerType": "SENTRY",
"datasetName": "my-app-telemetry",
"logTypes": ["API_CALL", "EXTENSION_LOG", "EXTENSION_RENDER", "DATA_FETCH"],
"logLevels": ["ERROR", "WARN", "INFO"]
}
}
```
| Feld | Typ | Beschreibung |
| - | - | - |
| `uid` | Zeichenfolge | Eine eindeutige ID für Ihre Telemetriekonfiguration. Dieser Wert kann auf einen beliebigen Wert festgelegt werden, wird jedoch in den Projekteinstellungen in Ihrem Account angezeigt und sollte sich daher von den `uid`-Werten anderer App-Komponenten unterscheiden. |
| `type` | Zeichenfolge | Der Typ der Komponente, der in diesem Fall `telemetry` lauten sollte. |
| `config` | Objekt | Dies ist ein Objekt, das die Konfigurationsdetails enthält; s. die Untereigenschaften in den folgenden Zeilen. |
| `providerType` | Zeichenfolge | Der Name Ihres Drittanbieters für Telemetriedaten. Derzeit werden nur `SENTRY` und `HONEYCOMB` unterstützt. |
| `datasetName` | Zeichenfolge | Ein Label, das Ihren Protokolldaten zugeordnet wird, wenn Ihr Anbieter diese Option unterstützt. |
| `logTypes` | Array | Eine Liste von Protokolltypen, die an Ihren externen Anbieter gesendet werden. Standardmäßig werden alle Protokolle an Ihren Anbieter weitergegeben. Die verfügbaren Protokolltypen umfassen: `["CRM_LEGACY_CARD", "CRM_EXTENSIBILITY_CARD", "WEBHOOKS", "API_CALL", "APP_SETTINGS", "SERVERLESS_EXECUTION", "PROXY_EXECUTION", "EXTENSION_RENDER", "EXTENSION_LOG", "SERVERLESS_GATEWAY_EXECUTION"]`. |
| `logLevels` | Array | Eine Liste von Schweregraden, nach denen Protokolle gefiltert werden sollen. Unterstützte Protokollebenen sind: `["ERROR", "WARNING", "INFO"]` |
## Externe Authentifizierung als Geheimnis per CLI hinzufügen
Zusätzlich zum Erstellen der zuvor genannten `telemetry-hsmeta.json`-Konfigurationsdatei müssen Sie auch ein Geheimnis hinzufügen, das dem Authentifizierungsschlüssel Ihres Anbieters entspricht:
* Wenn Sie Sentry verwenden, fügen Sie den DSN (Namen der Datenquelle) als Geheimnis hinzu.
* Wenn Sie Honeycomb verwenden, fügen Sie einen API-Schlüssel als Geheimnis hinzu.
### Einen Sentry-DSN finden
Wenn Sie Sentry verwenden, führen Sie die folgenden Schritte zum DSN-Erhalt aus:
* Melden Sie sich bei Ihrem [Sentry-Konto](https://sentry.io/welcome/auth/login/) an.
* Gehen Sie zu den Einstellungen Ihres Projekts.
* Im Abschnitt *Clientschlüssel* oder im Bereich *DSN* finden Sie einen eindeutigen DSN-Eintrag für Ihr Projekt. Dieser sollte wie folgt aussehen:
```
https://sentry-key@sentry-identifier.ingest.us.sentry.io/project-id
```
### Einen Honeycomb-API-Schlüssel finden
Wenn Sie Honeycomb als externen Observability-Anbieter verwenden, wird ein API-Schlüssel zur Authentifizierung und Weiterleitung von Daten verwendet. Dieser API-Schlüssel ist mit Ihrem spezifischen Honeycomb-Account und -Projekt verknüpft.
So generieren Sie einen Honeycomb-API-Schlüssel:
* Melden Sie sich bei Ihrem [Honeycomb-Konto](https://ui.honeycomb.io/login) an.
* Gehen Sie zu den Einstellungen Ihres Projekts,
* dann zum Abschnitt *API-Schlüssel* und generieren Sie einen neuen Schlüssel.
* Kopieren Sie den generierten API-Schlüssel.
### Ein Geheimnis mithilfe des HubSpot CLI hinzufügen
Nachdem Sie entweder Ihren Sentry DSN- oder Honeycomb-API-Schlüssel erhalten haben, führen Sie den folgenden Befehl aus, um den Wert als Geheimnis hinzuzufügen. Wenn Sie zur Eingabe des Namens des Geheimnisses aufgefordert werden, müssen Sie `TELEMETRY_SECRET` für die korrekte Synchronisierung der Protokolldaten verwenden.
```shell theme={null}
hs app secrets add
```
# Ein Agent-Tool erstellen
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/agent-tools/create-an-agent-tool
Folgen Sie diesem Tutorial, um ein Agent-Tool zu erstellen, bei dem es sich um eine benutzerdefinierte Workflow-Aktion handelt, die auf KI-Agents zugeschnitten ist.
In HubSpot haben Sie die Möglichkeit, einen KI-Agent zu erstellen, der verschiedene Aktionen basierend auf Ihren Anweisungen ausführt. Sie können zum Beispiel einen Agent schaffen, der Ihnen jeden Morgen eine E-Mail mit Notizen zu den anstehenden Meetings des Tages schickt.
Um Aufgaben auszuführen, verlassen sich Agents auf Agent-Tools. Tools sind wie Funktionen in einer Programmiersprache und verwenden Parameter, die Sie bestimmen – woraufhin das Tool dann antwortet. Die Tools in HubSpot ähneln dem Konzept der Tools in MCP (Model Context Protocol). Ein Agent-Tool bündelt API-Aufrufe, LLM-Schritte und anderen unterstützenden Kontext, damit KI die Arbeit erledigen kann. Diese Tools sind für bestimmte, klar definierte Aufgaben vorgesehen, wie zum Beispiel das Abfragen einer Datenbank, das Ausführen von CRUD-Operationen (Erstellen, Lesen, Aktualisieren, Löschen) oder die Verwendung generativer KI zur Zusammenfassung von Inhalten.
In Hinblick auf die Implementierung ist ein Agent-Tool eine erweiterte Version einer benutzerdefinierten Workflow-Aktion, die Sie mit dem Entwicklerprojekt-Framework von HubSpot erstellen. Dieses Tutorial zeigt Ihnen, wie man ein Agent-Tool erstellt.
## Voraussetzungen
Bevor Sie loslegen, sind folgende Dinge zu erledigen:
* Installieren Sie die neueste Beta-Version des HubSpot CLI, indem Sie `npm i -g @hubspot/cli@next`ausführen.
* Erstellen Sie einen [Entwickler-Test-Account](/docs/getting-started/account-types#developer-test-accounts) innerhalb des Entwickler-Accounts, der für die Beta-Phase angemeldet ist.
* Authentifizieren Sie den Test-Account mit der CLI, indem Sie den [`hs auth`-Befehl](/docs/developer-tooling/local-development/hubspot-cli/reference#authenticate-an-account) in Ihrem Terminal ausführen.
**1. Ein Projekt erstellen**
Wenn Sie ganz von vorne anfangen, müssen Sie zuerst ein neues Projekt erstellen. Falls Sie ein vorhandenes Projekt verwenden möchten, können Sie [den nächsten Abschnitt überspringen](#2.-add-an-agent-tool-to-the-project) (Projektversion `2025.2` erforderlich).
So erstellen Sie ein neues Projekt:
1. Führen Sie im Terminal den folgenden Befehl aus, um ein neues Projekt aus einer der Boilerplate-Schnellstart-Vorlagen zu erstellen.
```shell theme={null}
hs project create --platform-version 2025.2
```
2. Befolgen Sie die Terminal-Eingabeaufforderungen, um den Projektnamen und -speicherort zu konfigurieren, und wählen Sie dann eine Vorlage aus. Je nachdem, wie Sie Ihre App [verteilen](/docs/apps/developer-platform/build-apps/app-configuration#distribution) möchten, stehen mehrere Vorlageoptionen zur Verfügung. Wählen Sie für die Zwecke dieses Tutorials die **App-Vorlage „Projekt mit Marketplace starten“** aus.
3. Die Projektvorlage wird dann in Ihr Arbeitsverzeichnis heruntergeladen, wo Sie sich ihren Inhalt anschauen können.
Diese Projektvorlage enthält alle nötigen Dateien zum Hochladen eines Projekts mit einer App, die einige Anwendungsbeispielfunktionen enthält. Zu diesen Funktionen gehören u. a. eine [Boilerplate-App-Karte](/docs/apps/developer-platform/add-features/ui-extensibility/app-cards/create-an-app-card), ein [Webhook](/docs/apps/developer-platform/add-features/configure-webhooks) und eine [Workflow-Aktion](/docs/apps/developer-platform/add-features/custom-workflow-actions). Für die Zwecke dieses Tutorials werden diese Komponenten nicht benötigt, aber es kann hilfreich sein, sie sich anzusehen, wenn Sie später mit ihnen experimentieren möchten.
**2. Dem Projekt ein Agent-Tool hinzufügen**
Eigentlich sind Agent-Tools benutzerdefinierte Workflow-Aktionen, die speziell für den Agent-Kontext konfiguriert sind. Damit ein Agent das Tool ausführen kann, müssen Sie – ganz so wie ein Workflow eine Aktion ausführen würde – die Aktion aktivieren, damit sie in Agents, die das `supportedClients`-Feld verwenden, verfügbar ist.
* Erstellen Sie dazu im `workflow-actions`-Verzeichnis eine neue JSON-Datei für die Tool-Konfiguration. Die Datei kann einen beliebigen Namen haben, muss aber mit `-hsmeta.json` enden (z. B. `my-agent-tool-hsmeta.json`).
* Definieren Sie die Aktionskonfiguration mithilfe der [Referenzdokumentation für Agent-Tools](/docs/apps/developer-platform/add-features/agent-tools/reference). Stellen Sie sicher, dass Sie den `AGENTS`-Client im `supportedClients`-Feld angeben, wie im Beispielcode unten gezeigt.
```json theme={null}
{
"uid": "agent_tool_action",
"type": "workflow-action",
"config": {
"actionUrl": "https://example.com",
"toolType": "GET_DATA",
"llmDescription": "A description that helps the LLM understand what this tool does.",
"isPublished": false,
"supportedClients": [
{
"client": "AGENTS"
},
{
"client": "WORKFLOWS"
}
],
"inputFields": [
{
"typeDefinition": {
"name": "message",
"type": "string",
"fieldType": "textarea"
},
"supportedValueTypes": ["STATIC_VALUE"],
"isRequired": false
}
],
"labels": {
"en": {
"actionName": "My custom agent tool",
"actionDescription": "A description of the tool.",
"actionCardContent": "Send a notification",
"inputFieldLabels": {
"message": "Notification Message"
},
"inputFieldDescriptions": {
"message": "Enter the message to be sent in the notification"
}
}
},
"objectTypes": ["CONTACT"]
}
}
```
Beachten Sie beim Erstellen Ihres Tools Folgendes:
* Wenn Sie sich im Entwicklungsprozess befinden, sollten Sie Ihre Eingabefelder nicht als Pflichtfelder festlegen, da diese nach dem Hochladen nicht aktualisiert oder entfernt werden können.
* Anfragen an öffentliche Endpunkte werden als `POST`-Anfragen gestellt.
Wenn Sie bereit sind, auf Ihren Test-Account hochzuladen, speichern Sie bitte Ihre Dateien und führen Sie dann `hs project upload` aus. Falls Sie mit einem neuen Projekt begonnen haben, werden Sie aufgefordert, auf `y` zu klicken , um das Projekt im Account zu erstellen.
> [!WARNING]
>
> ### Hinweis:
>
> HubSpot entwickelt weiterhin aktiv Funktionen, die das Testen von Agent-Tools ermöglichen. Diese Seite wird mit weiteren Anweisungen aktualisiert, sobald diese Testfunktionen verfügbar sind.
# Übersicht über Agents und Tools
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/agent-tools/overview
Erfahren Sie, wie Sie Agent-Tools erstellen können, um die Nutzung der HubSpot-Agents noch individueller zu gestalten.
In HubSpot können Sie einen KI-Agent erstellen, der basierend auf Ihren Anweisungen verschiedene Aktionen ausführt. Sie können zum Beispiel einen Agent erstellen, der Ihnen jeden Morgen eine E-Mail mit Notizen zu den am jeweiligen Tag anstehenden Meetings schickt.
Um Aufgaben auszuführen, verlassen sich Agents auf Agent-Tools. Tools sind wie Funktionen in einer Programmiersprache: Sie haben Parameter, die Sie an das Tool übergeben, und das Tool gibt eine Ausgabe zurück. Die Tools in HubSpot ähneln dem Konzept der Tools im MCP (Model Context Protocol). Ein Agent-Tool bündelt API-Aufrufe, LLM-Schritte und anderen unterstützenden Kontext, damit die KI die Arbeit erledigen kann. Die Tools sind für bestimmte, klar definierte Aufgaben vorgesehen, wie zum Beispiel das Abfragen einer Datenbank, das Ausführen von CRUD-Operationen (Create, Read, Update, Delete, also Erstellen, Lesen, Aktualisieren, Löschen) oder die Verwendung generativer KI zur Zusammenfassung von Inhalten.
In der Implementierung ist ein Agent-Tool eine erweiterte Version einer benutzerdefinierten Workflow-Aktion, die Sie mit dem Entwicklerprojekt-Framework von HubSpot erstellen.
> [!NOTE]
>
> Beachten Sie bitte die folgenden aktuellen Einschränkungen während der Betaphase:
>
> * Der Agent hat keinen Zugriff auf CRM-Daten, es sei denn, es werden explizit Tools bereitgestellt, um diese Daten abzurufen.
> * Der Agent kann nach dem Aufruf keine Informationen vom Benutzer anfordern, wenn er nicht genügend Informationen erhält, um die Aufgabe abzuschließen.
## Tools erstellen
Um ein Tool zu erstellen, lesen Sie bitte den [Leitfaden zum Erstellen eines Agents](/docs/apps/developer-platform/add-features/agent-tools/create-an-agent-tool) und die [Referenzdokumentation](/docs/apps/developer-platform/add-features/agent-tools/reference), die Informationen über Konfigurationsoptionen, bewährte Methoden und die Anfragevalidierung enthält.
> [!WARNING]
>
> ### Hinweis:
>
> HubSpot entwickelt weiterhin aktiv Funktionen, die das Testen von Agent-Tools ermöglichen. Diese Seite wird mit weiteren Anweisungen aktualisiert, sobald diese Testfunktionen verfügbar sind.
# Referenz zu Agent-Tools (BETA)
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/agent-tools/reference
Erfahren Sie, wie Sie Agent-Tools erstellen, bei denen es sich um benutzerdefinierte Workflow-Aktionen handelt, die von KI-Ausführungen verwendet werden können.
HubSpot Agents sind KI-gestützte Assistenten, mit denen Nutzende chatten können, um Aufgaben zu erledigen. Jeder Agent umfasst eine Reihe von Aktionen, sogenannte Tools, die er gemäß den Anweisungen des Benutzers einsetzt. Als Entwickler können Sie benutzerdefinierte Agent-Tools erstellen, um bestimmte, klar definierte Aufgaben je nach beabsichtigtem Anwendungsfall des Agents auszuführen.
Tools sind eigentlich benutzerdefinierte Workflow-Aktionen, die so konfiguriert werden, dass sie im Agentenkontext verfügbar sind. Die Tools können über mehrere Agents hinweg verwendet und so konfiguriert werden, dass sie sowohl in Agents als auch in Workflows funktionieren.
Im Wesentlichen umfasst die Erstellung eines Agent-Tools:
* Hinzufügen einer Workflow-Aktionskomponente zu einer App durch Berücksichtigen eines `workflow-actions`-[Verzeichnisses im Projekt](#project-setup) zusammen mit einer `*-hsmeta.json`-Konfigurationsdatei für das Tool. Jedes Tool und jede Workflow-Aktion, die Sie erstellen, sollte über eine eigene `*-hsmeta.json`-Konfigurationsdatei verfügen.
* [Konfigurieren der Aktion](#agent-tool-definition), damit diese in KI-Agents über das `supportedClients`-Feld verfügbar ist.
Bei der Entwicklung Ihrer Tools sollten Sie auch eine Reihe von [Best Practices](#best-practices) beachten, um eine höhere Leistungsqualität zu gewährleisten.
## Projekteinrichtung
Um Tools zu erstellen, muss in Ihrer `hsproject.json`-Datei die `platformVersion` auf `2025.2` festgelegt sein. Diese Version wird in allen [Schnellstart-Vorlagen](/docs/apps/developer-platform/build-apps/create-an-app) automatisch bestimmt. Für Projekte mit älteren Versionen ist es allerdings erforderlich, die Aktualisierung manuell vorzunehmen.
Beachten Sie bitte, dass beim Upgrade eines Projekts auf die Version `2025.2` die neuen `*-hsmeta.json`-Konfigurationsdateistandards für die [App-Konfiguration](/docs/apps/developer-platform/build-apps/app-configuration) und Funktionen einzuhalten sind.
Agent-Tools und benutzerdefinierte Workflow-Aktionen sind beide im `workflow-actions`-Verzeichnis der App enthalten.
```shell theme={null}
├──src
│ ├── hsproject.json
│ ├── app/
│ │ └── app-hsmeta.json
│ │ └── ...
│ │ └── workflow-actions/
│ │ └── agent-tool-action-hsmeta.json
└──
```
## Definition des Agent-Tools
Die Konfigurationsdatei Ihrer Tools muss im `workflow-actions`-Verzeichnis abgelegt werden, um zu funktionieren. Die Konfigurationsoptionen für Agent-Tools sind die gleichen wie für [benutzerdefinierte Workflow-Aktionen](/docs/apps/developer-platform/add-features/custom-workflow-actions#custom-workflow-action-definition), mit der zusätzlichen Anforderung, dass das `supportedClients`-Feld den `AGENTS`-Client enthalten muss.
```json theme={null}
{
"uid": "agent_tool_action",
"type": "workflow-action",
"config": {
"actionUrl": "https://example.com",
"toolType": "GET_DATA",
"llmDescription": "A description that helps the LLM understand what this tool does.",
"isPublished": false,
"supportedClients": [
{
"client": "AGENTS"
},
{
"client": "WORKFLOWS"
}
],
"inputFields": [
{
"typeDefinition": {
"name": "message",
"type": "string",
"fieldType": "textarea"
},
"supportedValueTypes": ["STATIC_VALUE"],
"isRequired": true
},
{
"typeDefinition": {
"name": "priority",
"type": "enumeration",
"fieldType": "select",
"options": [
{
"value": "high",
"label": "High Priority"
},
{
"value": "normal",
"label": "Normal Priority"
},
{
"value": "low",
"label": "Low Priority"
}
]
},
"supportedValueTypes": ["STATIC_VALUE"],
"isRequired": true
}
],
"labels": {
"en": {
"actionName": "My custom agent tool",
"actionDescription": "A description of the tool.",
"actionCardContent": "Send {{priority}} priority notification",
"inputFieldLabels": {
"message": "Notification Message",
"priority": "Priority Level"
},
"inputFieldDescriptions": {
"message": "Enter the message to be sent in the notification",
"priority": "Select the priority level for this notification"
}
}
},
"objectTypes": ["CONTACT"]
}
}
```
Mit \* markierte Felder sind Pflichtfelder.
| Feld | Typ | Beschreibung |
| - | - | - |
| `uid`\* | Zeichenfolge | Eine interne eindeutige ID für die Workflow-Aktion. |
| `type`\* | Zeichenfolge | Der Typ der Komponente, die in diesem Fall `workflow-action` sein sollte. |
| `actionUrl`\* | Zeichenfolge | Die URL, an die das Tool eine `POST`-Anfrage stellt. Die URL muss ein öffentlich zugänglicher Endpunkt und darf keine serverlose Funktion sein, die im Entwicklerprojekt definiert ist. |
| `toolType`\* | Zeichenfolge | Die Kategorie der Toolfunktionalität. Kann einer der folgenden sein:
`GET_DATA`: Ruft Informationen von HubSpot oder externen Quellen ab.
`GENERATE`: generiert Inhalte, Zusammenfassungen, Analysen oder Vorschläge auf der Grundlage der bereitgestellten Eingaben.
`TAKE_ACTION`: führt CRM-Aktionen aus, z. B. das Erstellen von Notizen oder das Zuweisen von Aufgaben an zuständige Mitarbeiter.
|
| `llmDescription`\* | Zeichenfolge | Eine Beschreibung, die dem LLM hilft zu verstehen, was das Tool leistet. |
| `isPublished` | BoolescherWert | Bestimmt, ob die Definition in Accounts sichtbar ist, die Ihre App installiert haben. Standardmäßig ist dies auf `false`festgelegt. |
| `supportedClients`\* | Array | Ein Array von Objekten, das die Clients angibt, die von der benutzerdefinierten Workflow-Aktion unterstützt werden. Jedes Objekt im Array sollte einen `client`-Schlüssel mit einem Zeichenfolgenwert haben, der den Client-Typ angibt. Zu den Werten gehören:
`WORKFLOWS`: aktiviert die Aktion für Workflows.
`AGENTS`: aktiviert die Aktion für Mitarbeiter.
|
| `inputFields` | Array | Die Werte für die Eingaben, die der Benutzer ausgefüllt hat. Erfahren Sie mehr über [bewährte Verfahren bezüglich der Anzahl von Feldern](#be-mindful-of-the-number-of-input-fields). |
| `typeDefinition.name` | Zeichenfolge | Der Name oder Schlüssel des Eingabefelds. |
| `typeDefinition.type` | Zeichenfolge | Der Werttyp, der für das Eingabefeld gelten soll. |
| `typeDefinition.fieldType` | Zeichenfolge | Der Feldtyp, der den Benutzern angezeigt wird, die den Workflow erstellen. |
| `typeDefinition.options` | Array | Dieses Feld enthält für Aufzählungstypen eine Liste von Optionen. Jede Option muss über ein `value` verfügen, das auf den Eingaben des Benutzers basiert, und ein `label`, das die Option im Workflows-Tool identifiziert. |
| `inputFieldDependencies` | Array | Eine Liste von Regeln, die die Beziehungen zwischen zwei oder mehr Eingaben basierend auf ihrem `dependencyType` definieren. Erfahren Sie mehr dazu in [diesem Beispiel](/docs/api-reference/automation-actions-v4-v4/guide#example-%233). |
| `labels.`\* | Zeichenfolge | Gebietsschemaschlüssel, der der Gebietsschemadefinition zugeordnet ist. Er muss mindestens ein englisches Label (`en`) umfassen und seine Definition gleichzeitig klar bestimmt sein. |
| `labels..inputFieldDescriptions` | Objekt | Ein Objekt, das die Details für die Eingaben für Ihre Aktion definiert. Im obigen Beispiel enthält dieses Objekt `message`- und `priority`-Felder. |
| `labels..inputFieldOptionLabels` | Objekt | Ein Objekt, das erforderlich ist, wenn Ihr(e) Eingabefeld(er) über Optionen verfügt/en. Bietet eine Zuordnung von Eingabefeldoptionslabeln, die durch den Wert oder das Label der Option geschlüsselt sind. |
| `labels..outputFieldLabels` | Objekt | Ein Objekt, das die Definitionen von `outputFields` den entsprechenden Label zuordnet, die im Workflows-Tool angezeigt werden. |
| `labels..actionName`\* | Zeichenfolge | Der Name der Aktion, wie im Bereich *Aktion auswählen* im Workflows-Editor angezeigt. |
| `labels..appDisplayName`\* | Zeichenfolge | Der Name des Abschnitts im Bereich *Aktion auswählen*, in dem alle Aktionen für die App angezeigt werden. Wenn `appDisplayName` für mehrere Aktionen definiert ist, wird die erstgefundene verwendet. |
| `labels..actionCardContent` | Zeichenfolge | Eine zusammengefasste Beschreibung, die auf der Karte der Aktion angezeigt wird. |
| `labels..executionRules` | Objekt | Ein Objekt, das die Definitionen von Ihren `executionRules` Nachrichten zuordnet, die im Rahmen der Ausführung im Workflow-Verlauf angezeigt werden. |
| `objectTypes` | Array | Die verfügbaren CRM-Objekttypen, mit denen diese Aktion verwendet werden kann. Ist hier kein Wert vorhanden, ist die Aktion für alle Objekttypen verfügbar. |
| `outputFields` | Array | Die Werte, die die Aktion ausgibt und die bei späteren Aktionen im Agent oder Workflow verwendet werden können. Eine benutzerdefinierte Aktion kann einen Output von 0, 1 oder mehrere Outputs haben. |
| `executionRules` | Objekt | Eine Liste der Definitionen, die Sie angeben können, damit dem Benutzer, der den Workflow erstellt, Fehler von Ihrem Dienst angezeigt werden. |
## Bewährte Methoden
Berücksichtigen Sie beim Erstellen von Agent-Tools die folgende Checkliste mit bewährten Methoden:
* Beginnen Sie mit optionalen Feldern und setzen Sie sie dieser nur dann auf erforderlich, wenn sie stabil sind.
* Felder sollen sowohl für Menschen als auch für KI gekennzeichnet und beschrieben werden.
* Testen Sie zunächst mit weniger Agent-Anweisungen, um zu verstehen, wie die KI ein Tool interpretiert.
* Achten Sie darauf, dass die Tools fokussiert sind und denken Sie an die Anzahl der Felder.
* Verwenden Sie Feldbeschreibungen, um die Kreativität Ihres Agent zu steuern.
In den folgenden Abschnitten erfahren Sie mehr über die einzelnen Best Practices.
> [!WARNING]
>
> **Hinweis:**
>
> Einige der folgenden Anleitungen enthalten zwar Informationen zum Testen von Agent-Tools, diese Testfunktionen befinden sich jedoch noch in der Entwicklung. Die Dokumentation der Agent-Tools wird aktualisiert, sobald Testmethoden zur Verfügung stehen.
### Mit optionalen Feldern entwickeln
Legen Sie Aktionsfelder (`inputFields`) während der aktiven Entwicklung nicht als „erforderlich“ fest. Sobald ein Feld als erforderlich festgelegt und das Projekt hochgeladen wird, können Sie das Feld nicht mehr entfernen oder aktualisieren. Sie sollten ein Feld nur dann als erforderlich bestimmen, wenn Sie sich über die Details des Feldes, z. B. `name` und `type`, sicher sind. Die Änderung erforderlicher Felder würde nämlich alle aktiven Workflows, die die Aktion enthalten, unterbrechen.
### Für menschliches und KI-Verständnis konzipiert
Die Verwendung und der Nutzen von `actionName`, `inputFields` und `labels` sollte sowohl für Menschen als auch für den Agent klar verständlich sein. Insbesondere diese Felder werden vom Agent verwendet, um zu verstehen, wann die Aktion aufgerufen werden soll und wie Daten an das Tool zu übermitteln sind. Denken Sie bei der Entwicklung Ihrer Tools daran, dass LLMs möglicherweise explizitere Beschreibungen benötigen als menschliche Nutzende. Während beispielsweise ein Mensch ein Feld mit der Bezeichnung `Date` intuitiv versteht, könnte ein LLM `Event start date (YYYY-MM-DD)` bevorzugen.
Idealerweise sollten Tools so konzipiert sein, dass Agents keine zusätzlichen Anweisungen benötigen, um sie zu benutzen. Es gibt jedoch Fälle, in denen Feldangaben allein für den Agent möglicherweise nicht ausreichen. Möglicherweise versteht der Agent nicht die geplante Operationsfolge für die Ausführungen von Tools, die von anderen Tool-Outputs abhängig sind (z. B. ist ein „E-Mail senden“-Tool eventuell davon abhängig, dass ein „Kontaktinformationen abrufen“-Tool ausgeführt wurde).
Während Sie ein Tool erstellen, sollten Sie es im Agent testen, ohne die Anweisungen des Agent zu ergänzen, um so besser zu verstehen, wie das Tool interpretiert wird. Durch Tests können Sie feststellen, ob die Reasoning Engine von sich aus korrekt funktioniert oder ob sie zusätzliche Anweisungen benötigt.
### Die Anzahl der Eingabefelder beachten
Agents können in jedem Tool eine große Anzahl von Eingabefeldern verarbeiten (maximal 26 eindeutige Eingaben). Je mehr Eingabefelder es jedoch in einem Tool gibt, desto übersichtlicher müssen Sie bei dem Zuweisen von `actionName`-, `inputField`- und `label`-Werten sein. Tools sind am effektivsten und zuverlässigsten, wenn sie für bestimmte Aufgaben mit einem spezifischen Parameterset entwickelt wurden. Überlegen Sie bei komplexen Vorgängen, ob es effektiver ist, mehrere einfachere Tools statt ein einzelnes Tool mit einer übermäßigen Anzahl an Inputs zu erstellen.
> [!WARNING]
>
> **Hinweis:**
>
> Es ist möglich, dass HubSpot die Anzahl der Inputs in Zukunft beschränkt, basierend auf dem Feedback zur Qualität der Agents, die große Input-Mengen verarbeiten.
### Kreativität und Improvisation von Agents kontrollieren
In manchen Szenarien möchten Sie vielleicht, dass ein Agent kreativ ist und improvisiert. Es kann jedoch Szenarien geben, in denen dies unerwünscht ist. Experimentieren Sie mit den Anweisungen, die Sie dem LLM in Ihren Eingabefeldnamen, Labels und Beschreibungen geben. Wenn ein strikteres Vorgehen erforderlich ist, formulieren Sie dies für den Agent entsprechend, um Ihre Erwartungen klar und deutlich zu formulieren.
Ein Beispiel: Sie übertragen einem Agent die Aufgabe, einen Blogbeitrag zu erstellen. Dabei ist eines der Felder der Titel des Blogbeitrags. Je nach der von Ihnen gewünschten Improvisationsfreiheit können Sie das Feld mit einem großzügigen oder restriktiveren Label ausstatten:
* **Großzügig:** `"Blog title"`
* **Restriktiv:** `"Blog title (must include the product name 'HubSpot CRM')"`
Hier ein weiteres Beispiel von möglichen Eingabefeld-Labels für Content von Social-Media-Beiträgen:
* **Großzügig:** `"Social post content"`
* **Regulär:** `"Social post content (keep under 280 characters)"`
* **Einschränkend:** `"Social post content (must mention our Q4 sale, include #HubSpot, and stay under 280 characters)"`
## Herkunft von Agent-Tool-Anfragen verifizieren
Wenn ein Agent ein Tool für eine Anfrage nutzt, stellt er eine `POST`-Anfrage an die `actionUrl` des Tools. Dieser Schritt wird authentifiziert durch die Validierung des mit der Anfrage gesendete `X-HubSpot-Signature`-Headers. Dabei handelt es sich um das gleiche System, das HubSpot zur [Validierung von Webhook-Anfragen](/docs/apps/legacy-apps/authentication/validating-requests#validate-the-v3-request-signature) verwendet.
> [!WARNING]
>
> **Hinweis:**
>
> Sie sollten keine Eingabefelder für Geheimnisse oder API-Schlüssel erstellen, da dies unsicher ist und nicht dem beabsichtigten Authentifizierungsmuster entspricht, insbesondere weil das LLM das Geheimnis/den API-Schlüssel in den Anweisungen erhalten oder von einem anderen Tool erhalten müsste.
# Event-Typen erstellen und verwalten (BETA)
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/app-events/create-and-manage-event-types
Erfahren Sie, wie Sie App-Event-Typen definieren, damit Sie Daten zum Auftreten von Events an HubSpot senden können.
Um App-Event-Daten an HubSpot zu senden, erstellen Sie zunächst einen Event-Typ mithilfe eines Entwicklerprojekts. Der Event-Typ ist ein JSON-Schema, das die Struktur, Eigenschaften und Validierungsregeln für mit dem Auftreten von Events verbundene Daten definiert, die von Ihnen gesendet werden. Dazu gehören der Event-Name, das Anzeigelabel, das Ziel-CRM-Objekt und die Event-Eigenschaften. Event-Typen enthalten auch Definitionen für Anzeige-Vorlagen für die CRM-Chronik-Darstellung.
> [!WARNING]
>
> Die in dieser Dokumentation beschriebenen App-Events sind für Apps gedacht, die mithilfe von Entwicklerprojekten für den [App Marketplace](https://ecosystem.hubspot.com/marketplace/apps) erstellt wurden. Um benutzerdefiniertes Event-Reporting für andere Arten von Integrationen zu erstellen, können Sie stattdessen [benutzerdefinierte Events](/docs/api-reference/events-manage-event-definitions-v3/guide) verwenden.
## Voraussetzungen
So nehmen Sie eine Typdefinition für App-Events in Ihr Projekt auf:
* Dazu müssen Sie die HubSpot CLI-Version `7.5.4` oder eine höhere Version verwenden. Sie können überprüfen, welche Version des CLI Sie haben, indem Sie `hs --version` ausführen und aktualisieren, indem Sie `npm i -g @hubspot/cli@next` verwenden.
* Ihr Projekt muss eingesetzt werden, bevor Sie es aktualisieren können, um eine App-Event-Komponente aufzunehmen.
## Ihre Projektdateien einrichten
> [!NOTE]
>
> Wenn Sie zuvor eine öffentliche App mit einem Chronik-Event erstellt haben, erfahren Sie hier mehr über [deren Migration zur Entwicklerplattform](#migrate-an-existing-timeline-event-type).
**1. App-Konfiguration und Projektstruktur**
Zum Erstellen einer neuen Typdefinition für App-Events in Ihrem Projekt aktualisieren Sie Ihre der [App-Konfiguration](/docs/apps/developer-platform/build-apps/app-configuration) dienende `hsmeta.json`-Datei, um den `timeline`-Bereich im `requiredScopes`-Feld zu berücksichtigen. Dies ist erforderlich, damit App-Event-Daten in CRM-Datensatzchroniken angezeigt werden. Installationsprogramme müssen diesen Bereich zulassen, sodass Ihre Event-Daten erfolgreich gesendet werden können.
```json theme={null}
"requiredScopes": [
"timeline"
],
```
> [!NOTE]
>
> Beachten Sie, dass Sie je nach den Funktionen, die Ihre App enthält, möglicherweise weitere [Bereiche](/docs/apps/legacy-apps/authentication/scopes#list-of-available-scopes) hinzufügen müssen.
Statten Sie das `app/`-Verzeichnis Ihres Projekts mit einem `app-events`-Verzeichnis aus. Anschließend fügen Sie in `app-events/` eine JSON-Konfigurationsdatei hinzu, um den App-Event-Typ zu definieren. Diese Datei kann einen beliebigen Namen haben, muss aber mit `*-hsmeta.json` enden. Sie können bis zu 750 Event-Typen pro App aufnehmen, wobei jeder seine eigene `*-hsmeta.json`-Datei besitzt.
```shell theme={null}
project-folder/
└── src/
└── app/
├── app-hsmeta.json
└── app-events/
└── my-event-type-hsmeta.json
```
**2. Das Event-Typschemas konfigurieren**
Richten Sie in der `*-hsmeta.json`-Event-Typdatei Ihr [Event-Typschema](/docs/apps/developer-platform/add-features/app-events/reference#event-type-schema) ein. Dieses Schema konfiguriert Event-Typattribute wie Name, die Vorlage zum Anzeigen des CRM-Datensatzes in der Chronik und den CRM-Objekttyp, dem Event-Daten zugeordnet werden sollen.
Während einige dieser Felder nach der Erstellung aktualisiert werden können, lassen sich die `name` - und `objectType` -Felder dann nicht mehr ändern.
Das folgende Event-Typschema könnte beispielsweise für die Nachverfolgung von Kundenanmeldungsevents verwendet werden.
```json theme={null}
{
"uid": "customer_login_event",
"type": "app-event",
"config": {
"name": "Customer login",
"headerTemplate": "{{customerName}} logged in",
"detailTemplate": "{{customerName}} logged in via the {{loginLocation}}.",
"objectType": "CONTACT",
"properties": [
{
"name": "customerName",
"label": "Customer Name",
"type": "string"
},
{
"name": "loginLocation",
"label": "Login location",
"type": "enumeration",
"options": [
{
"value": "mobileApp",
"label": "Mobile app"
},
{
"value": "website",
"label": "Website"
}
]
}
]
}
}
```
Mit \* markierte Felder sind Pflichtfelder.
| Feld | Typ | Beschreibung |
| - | - | - |
| `uid`\* | Zeichenfolge | Eine interne eindeutige ID für den Event-Typ. |
| `type`\* | Zeichenfolge | Der Typ der Komponente. Muss sein `app-event`. |
| `name`\* | Zeichenfolge | Das in HubSpot angezeigte Label (bis zu 50 Zeichen). Dieser Wert kann nach der Erstellung nicht mehr aktualisiert werden. |
| `objectType`\* | Zeichenfolge | Der vollständig qualifizierte Name des CRM-Objekttyps, dem Event-Vorkommnisse zugeordnet werden können. Dieser Wert kann nach der Erstellung nicht mehr geändert werden. Kann eines der folgenden sein: `COMPANY`, `CONTACT`, `CUSTOM_OBJECT`, `DEAL`, `TICKET`, `APP_OBJECT`. |
| `headerTemplate` | Zeichenfolge | Die [Rendering-Vorlage](/docs/apps/developer-platform/add-features/app-events/reference#rendering-templates) für den Header der Aktivitätskarte der CRM-Chronik. Kann bis zu 1.000 Zeichen lang sein. |
| `detailTemplate` | Zeichenfolge | Der [Rendering-Vorlage](/docs/apps/developer-platform/add-features/app-events/reference#rendering-templates) für den Text der CRM Chronik Aktivitätskarte. Kann bis zu 10.000 Zeichen lang sein. |
| `properties` | Array | Eigenschaften, die für den Event-Typ definiert sind, in dem Sie Daten zum Auftreten von Events speichern. Jeder Event-Typ kann über bis zu 500 Eigenschaften verfügen. Erfahren Sie mehr über Eigenschaften, einschließlich Anforderungen und Einschränkungen, in der [Referenzdokumentation für App-Events](/docs/apps/developer-platform/add-features/app-events/reference). |
**3. Änderungen zu HubSpot hochladen**
Laden Sie Ihr Projekt mit dem `hs project upload`-Befehl nach HubSpot hoch.
```shell theme={null}
hs project upload
```
Während der Erstellungsphase validiert HubSpot den Event-Typ. Bei Fehlern bei der Schemavalidierung gibt das CLI eine Fehlermeldung zurück, die angibt, was zu beheben ist.
Standardmäßig setzt HubSpot das Projekt nach einem erfolgreichen Build automatisch ein. Wenn Sie diese Option in Ihren [Projekteinstellungen](/docs/apps/developer-platform/build-apps/manage-apps-in-hubspot#view-your-app-on-the-project-details-page) deaktiviert haben, können Sie mithilfe von `hs project deploy` dies manuell tun.
Danach ist Ihr App-Event-Typ verfügbar und kann zum Empfangen von Daten über das Auftreten von Events verwendet werden.
## fullyQualifiedName abrufen
Um Daten zum Auftreten von Events für den Event-Typ zu senden, müssen Sie den `fullyQualifiedName` über die App-Events-API abrufen. Dieser Name identifiziert den Event-Typ und muss in allen App-Event-API-Operationen enthalten sein.
Um den `eventTypeName` abzurufen, stellen Sie eine `POST`-Anfrage an `https://api.hubapi.com/integrators/timeline/v4/types/projects`. Schließen Sie im Anfragetext Folgendes ein:
* Ein `projectName`-Feld, das durch den `name`-Wert aus der `hsproject.json`-Datei Ihres Projekts bestimmt wird.
* Ein `developerSymbol`-Feld, das durch den `uid`-Wert aus der `*-hsmeta.json`-Event-Typ-Konfigurationsdatei bestimmt wird.
```json theme={null}
{
"projectName": "my-marketplace-app",
"developerSymbol": "customer_login_event"
}
```
Die Antwort enthält den Projektnamen, den Event-Typnamen und den `fullyQualifiedName`.
```json highlight={6} theme={null}
{
"developerQualifiedSymbol": {
"projectName": "marketplace",
"developerSymbol": "customer_login_event"
},
"fullyQualifiedName": "ae000000_integrators-timeline-event-type-id-0000000"
}
```
Der `fullyQualifiedName`-Wert ändert sich nie, sodass Sie ihn bedenkenlos in Ihre Implementierung aufnehmen können. Die API begrenzt die Häufigkeit, mit der dieser Wert pro Tag abrufbar ist, und kann nicht programmgesteuert verwendet werden.
## Event-Typen verwalten
Um einen Event-Typ nach der Erstellung zu aktualisieren, müssen Sie nur das Event-Typschema in Ihrem Projekt aktualisieren und dann erneut hochladen, um die App zu erstellen und einzusetzen.
Wenn Sie einen Event-Typ nicht mehr verwenden möchten, können Sie ihn aus Ihrem Projekt löschen. Bevor Sie jedoch einen Event-Typ löschen, sollten Sie Folgendes beachten:
* Das Löschen eines Event-Typs kann nicht mehr rückgängig gemacht werden.
* Wenn Sie einen Event-Typ löschen, werden sowohl der Event-Typ als auch alle Vorkommnisse dieses Typs von allen Accounts entfernt, die die App installiert haben.
* Nach dem Löschen eines Event-Typs funktionieren andere HubSpot-Tools, die auf diesem Event-Typ basieren, nicht mehr, z. B. Berichte und Workflows.
Zum Löschen eines Event-Typs entfernen Sie die `*-hsmeta.json`-Event-Typ-Konfigurationsdatei aus Ihrem Projekt, laden dann das Projekt hoch und stellen es bereit.
## Einen vorhandenen Chronik-Event-Typ migrieren
Wenn Sie über eine bestehende öffentliche App mit einem Chronik-Event verfügen, können Sie diese mithilfe des CLI auf die Entwicklerplattform migrieren.
> [!WARNING]
>
> Bevor Sie Ihre App migrieren:
>
> * Lesen Sie den [Migrationsleitfaden für öffentliche Apps](/docs/apps/developer-platform/build-apps/migrate-an-app/migrate-an-existing-public-app), um mehr über die aktuellen Aspekte und Einschränkungen der Beta-Version der Entwicklerplattform zu erfahren.
> * Nach der Migration eines bestehenden Chronik-Event-Typs (`v1`/`v3`) auf die Entwicklerplattform haben Sie 7 Tage Zeit, vorhandene `v1`/`v3`-Chronik-Event-API-Anfragen auf die neuen `v4`-Endpunkte zu ändern, einschließlich Event-Typ-Vorkommnisse und Instanz-API-Anfragen. Nach 7 Tagen geben alle vorhandenen Aufrufe von `v1`/`v3`-Event-Endpunkte `401`-Fehler zurück.
> * Zum Erstellen und Aktualisieren von Event-Typen und Vorlagen müssen Sie die API nicht mehr verwenden. Stattdessen verwalten Sie sie direkt im Projekt über die [Event-Typ-Konfigurationsdatei](/docs/apps/developer-platform/add-features/app-events/reference#event-type-schema).
> * Zum Senden von Daten über das Auftreten von Events müssen Sie die `v4`-Endpunkte verwenden, die sowohl über [Single- als auch Batch-Send-Endpunkte](/docs/apps/developer-platform/add-features/app-events/send-event-occurrences) verfügen.
So migrieren Sie Ihre App:
* Führen Sie im Terminal `hs app migrate` aus und folgen Sie dann den Terminalanweisungen, um Ihre App und Chronik-Events zu migrieren.
* Sobald der Migrationsprozess abgeschlossen ist, befindet sich Ihre App in einem Entwicklerprojekt und ein lokales Projektverzeichnis wird für Sie erstellt.
* Um das Projekt in HubSpot zu öffnen, gehen Sie zum lokalen Projektverzeichnis und führen dann `hs project open` aus.
Beachten Sie, dass die generierten Konfigurationsdateien (`*-hsmeta.json`) Felder mit `null`-Werten enthalten können. Diese Felder sind Überreste der Migration und können problemlos entfernt werden.
## Nächste Schritte
Nachdem Sie einen Event-Typ erstellt haben, können Sie nun darüber informieren, wie Sie [Daten beim Auftreten von Events über die API senden](/docs/apps/developer-platform/add-features/app-events/send-event-occurrences).
Sie können auch die [Referenzdokumentation für App-Events](/docs/apps/developer-platform/add-features/app-events/reference) lesen, um weitere App-Events zu erstellen und anzupassen.
# Überblick über App-Events (BETA)
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/app-events/overview
Erfahren Sie, wie Sie App-Events auf der neuesten Version der Entwicklerplattform definieren können.
Mithilfe von App-Events können Sie angereicherte Aktivitätsdaten von Ihren externen Systemen direkt an HubSpot senden. App-Event-Daten werden mit CRM-Datensätzen verknüpft und können in den Automatisierungs-, Analytics- und Berichterstattungstools von HubSpot verwendet werden.
Im Folgenden erfahren Sie mehr über die Funktionsweise von App-Events. So beginnen Sie mit dem Integrieren von App-Events in Ihr Projekt:
* [Erstellen Sie einen Event-Typ](/docs/apps/developer-platform/add-features/app-events/create-and-manage-event-types)
* [Senden Sie Daten zu Event-Vorkommnissen](/docs/apps/developer-platform/add-features/app-events/send-event-occurrences)
* Gehen Sie die Referenzdokumentation für [App-Events](/docs/apps/developer-platform/add-features/app-events/reference) durch
> [!WARNING]
>
> Die in dieser Dokumentation beschriebenen App-Events sind für Apps gedacht, die mithilfe von Entwicklerprojekten für den [App Marketplace](https://ecosystem.hubspot.com/marketplace/apps) erstellt wurden. Um benutzerdefiniertes Event-Reporting für andere Arten von Integrationen zu erstellen, können Sie stattdessen [benutzerdefinierte Events](/docs/api-reference/events-manage-event-definitions-v3/guide) verwenden.
## So funktionieren App-Events
Events sind Datenpunkte, die Ereignisse zu einem bestimmten Zeitpunkt erfassen, oft im Zusammenhang mit Nutzeraktionen, z. B. dem Einsenden eines Formulars, dem Senden einer SMS-Nachricht oder dem Anzeigen einer Seite. Im Gegensatz zu CRM-Datensätzen, die den aktuellen Zustand anzeigen sollen, können Events Ihnen ein besseres Verständnis von Aktivitätsmustern, Verhaltensänderungen im Laufe der Zeit und anderen Trends vermitteln.
> [!TIP]
>
> App-Events sind ideal, wenn Ihre Daten:
>
> * Aktionen oder Aktivitäten darstellen, die wiederholt auftreten
> * im Laufe der Zeit in Bezug auf das Volumen oder Änderungen analysiert werden müssen
> * nach der Erstellung nicht aktualisiert werden müssen
Übergeordnet zusammengefasst besteht ein App-Event aus Folgendem:
* **Definition des Event-Typs:** Dies ist ein JSON-Schema, das die Struktur, Eigenschaften und Validierungsregeln für das Event definiert. Dazu gehören der Event-Name, das Anzeigelabel, das Ziel-CRM-Objekt und die Event-Eigenschaften. Event-Typen enthalten auch Definitionen für Anzeige-Vorlagen für die CRM-Chronik-Darstellung. Event-Typen werden mithilfe von Entwicklerprojekten definiert.
* **Event-Vorkommnisse:** Dies sind einzelne Instanzen von Events, die tatsächliche Daten enthalten, die anhand Ihres Event-Typschemas validiert wurden. Daten zu Event-Vorkommnissen werden über die API für App-Events gesendet und umfassen die Event-Typ-ID, Eigenschaftswerte, Zeitstempel und zusätzliche Metadaten sowie CRM-Objekt-Referenzdaten für die Zuordnung von CRM-Datensätzen.
> [!NOTE]
>
> **Chronik-Events vs. App-Events**
>
> Bisher hat HubSpot Chronik-Events veröffentlicht, damit Sie Event-Daten in CRM-Objekt-Chroniken anzeigen können. App-Events ermöglichen dieselbe Funktionalität für eine erweiterte Liste unterstützter Objekte und sind gleichzeitig auch in anderen HubSpot-Tools verfügbar. App-Events verfügen jetzt neben benutzerdefinierten Events über eine eigene Indexseite, die eine einheitliche Ansicht der Event-Aktivitäten bietet.
>
> Bestehende Integrationen für Chronik-Events funktionieren weiterhin und werden an denselben Stellen wie App-Events angezeigt. Um jedoch neue Event-Typen zu erstellen oder Änderungen an vorhandenen Typen vorzunehmen, müssen Sie sie als App-Event in Ihrem Entwicklerprojekt neu erstellen.
## Unterstützte Objekte und Tools
Wenn Sie einen Event-Typ definieren, konfigurieren Sie ihn so, dass er mit einem bestimmten CRM-Objekt verknüpft wird, damit Sie Event-Daten mit der Quelle verknüpfen können, z. B. mit den Kontakten, die sich auf Ihrer Website anmelden. Event-Vorkommnisse können dann CRM-Datensätzen dieses Typs zugeordnet werden. App-Events können den folgenden CRM-Objekten zugeordnet werden:
* Kontakte
* Unternehmen
* Deals
* Tickets
* Benutzerdefinierte Objekte
* App-Objekte
App-Events können in den folgenden HubSpot-Tools verwendet werden:
* **Event-Management-Schnittstelle:** Zeigen Sie App-Event-Daten im Dashboard für benutzerdefinierte Events zusammen mit benutzerdefinierten Event-Daten an und analysieren Sie sie, indem Sie in Ihrem Account **Datenmanagement** > **Benutzerdefinierte Events** öffnen.
* **CRM-Datensatzchroniken:** Zeigen Sie chronologische App-Event-Aktivitäten in den Chroniken von CRM-Datensätzen an, die Event-Vorkommnissen zugeordnet sind.
* **Reporting-Tools:** Nutzen Sie App-Event-Daten, um benutzerdefinierte Berichte, Customer Journey Analytics und Datensätze zur Analyse und Visualisierung zu erstellen.
* **Leadscores, Listen und Workflows:** Segmentieren Sie Ihre CRM-Datenbank mithilfe von Events für dynamische Listen und Leadscoring sowie zum Auslösen von Workflows.
## Bewährte Methoden
Beim Erstellen von Event-Typen:
* Verwenden Sie eindeutige, aussagekräftige Namen für [Event-Typen](/docs/apps/developer-platform/add-features/app-events/reference#event-type-schema) und [-Eigenschaften](/docs/apps/developer-platform/add-features/app-events/reference#event-properties), da diese als Filter in Workflows, Listen, Berichten und dem Dashboard für benutzerdefinierte Events angezeigt werden.
* Wählen Sie geeignete Eigenschaften (Zeichenfolge, Zahl, Datum/Uhrzeit usw.), die zu Ihren Daten passen und eine ordnungsgemäße Filterung und Analyse ermöglichen.
* Fügen Sie Eigenschaften hinzu, die für die Segmentierung, Berichterstattung und Automatisierung nützlich sind (z. B. Transaktionsbeträge, Benutzerrollen, Aktionskategorien).
* Behalten Sie beim Entwerfen von Event-Typen Anwendungsfälle rund um die Berichterstattung und Workflows im Hinterkopf. Berücksichtigen Sie außerdem, wie Benutzer Event-Daten filtern und gruppieren.
* Vermeiden Sie Breaking Changes an bestehenden Event-Typschemata, da dies vorhandene Workflows und Berichte, die von der Event-Struktur abhängen, stören kann.
So sorgen Sie für eine hohe Qualität Ihrer Event-Daten:
* Überprüfen Sie alle Datenanforderungen für programmatische Event-Vorkommnisse, um sicherzustellen, dass sie ordnungsgemäß mit Ihrem Event-Typschema abgeglichen werden.
* Verwenden Sie eine einheitliche Formatierung für Event-Eigenschaften, insbesondere für Datumsangaben, Zahlen und kategorische Daten.
* Stellen Sie sicher, dass Event-Vorkommnisse [gültigen CRM-Datensatz-IDs](/docs/apps/developer-platform/add-features/app-events/send-event-occurrences#crm-record-association) zugeordnet sind.
* Beobachten Sie Erfolgsquoten von Event-Einsendungen und [Fehlerantworten](/docs/apps/developer-platform/add-features/app-events/reference#occurrence-send-errors).
* Überprüfen Sie regelmäßig in den Chroniken der CRM-Datensätze und im Dashboard für benutzerdefinierte Events die Event-Daten auf ihre Richtigkeit.
Optimieren Sie die Performance von Event-Einsendungen folgendermaßen:
* [Verarbeiten Sie mehrere Event-Vorkommnisse gleichzeitig](/docs/apps/developer-platform/add-features/app-events/send-event-occurrences#sending-event-occurrences) in einzelnen API-Anfragen, wenn möglich (bis zu 500 Events pro Batch).
* Halten Sie die Payloads von Event-Vorkommnissen schlank, indem nur notwendige Eigenschaften berücksichtigt werden.
* Implementierung einer Wiederholungslogik mit exponentiellem Backoff für fehlgeschlagene Event-Einsendungen.
## Beschränkungen
Beachten Sie beim Planen und Erstellen von App-Events bitte die folgenden Einschränkungen.
### Versionsanforderungen
* App-Events können nur über die neueste Version der Entwickler-Projektplattform (`2025.2`) erstellt werden.
* Für bestehende Event-Typen können Sie weiterhin die [v1-](/docs/api-reference/legacy/crm-timeline-v1/get-integrations-v1-application-id-timeline-event-event-typeid-event-id) und [v3-](/docs/api-reference/crm-timeline-v3/guide) Chronik-Events-API verwenden. Sie können jedoch keine neuen Event-Typen mit den `v1`- und `v3`-APIs erstellen.
### Beschränkungen für Event-Typen
* Event-Vorkommnisse müssen dem definierten Event-Typschema entsprechen, sonst werden sie abgelehnt.
* Einige [Event-Typ-Felder](/docs/apps/developer-platform/add-features/app-events/reference#event-type-schema) können nach dem Erstellen des Event-Typs nicht mehr aktualisiert werden (z. B. `name` und `objectType`).
* Neue Event-Typen werden vor der Aktivierung einem Überprüfungsprozess unterzogen.
### Datenbeschränkungen
* Einzelne Eigenschaften sind auf 510 KB beschränkt, wobei die Gesamtgröße des Events auf 1 MB begrenzt ist.
* App-Events sind für App Marketplace-Anbieter gedacht und funktionieren nur mit Apps, die für die Verwendung der OAuth-Authentifizierung konfiguriert sind. Interne Systeme sollten stattdessen [benutzerdefinierte Events](/docs/api-reference/events-manage-event-definitions-v3/guide.mdx) verwenden.
## Erste Schritte
Hier sind die ersten Schritte, die Sie unternehmen müssen, um mit App-Events zu arbeiten:
* [Erstellen Sie einen Event-Typ](/docs/apps/developer-platform/add-features/app-events/create-and-manage-event-types), um die Struktur Ihrer Event-Daten mithilfe eines Entwicklerprojekts zu definieren.
* \[Senden Sie mithilfe der [App-Events-API]() Daten zu Event-Vorkommnissen]\(/en-us/apps/developer-platform/build-apps/features/app-events/send-event-occurrences#send-a-single-occurrence) an die App.
* Nutzen Sie die Daten in HubSpot nach Bedarf mithilfe von Reporting-, Automatisierungs- oder Analytics-Tools.
# Referenz für App-Events (BETA)
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/app-events/reference
Referenzinformationen für App-Events in der neuesten Version der Entwicklerplattform.
Nachfolgend finden Sie Referenzinformationen für die Verwendung von App-Events, einschließlich Event-Typschemata, Vorlagen für das Rendering von Event-Chronik, Felder für das Auftreten von Events und mehr.
## Projektstruktur
Im Kontext eines Projekts legen Sie Event-Typdefinitionen in einem `app-events`-Verzeichnis innerhalb von `app/`ab. Das `app-events`-Verzeichnis sollte eine JSON-Schemadefinitionsdatei für jeden Event-Typ (`*-hsmeta.json`) enthalten.
```shell theme={null}
project-folder/
└── src/
└── app/
├── app-hsmeta.json
└── app-events/
└── my-event-type-hsmeta.json
```
Um Event-Typdefinitionen in ein Projekt aufzunehmen, ist Folgendes erforderlich:
* Ihre App muss die OAuth-Authentifizierung verwenden und für die Verteilung über den App Marketplace konfiguriert sein. Darüber hinaus muss die App eine `timeline` in ihrer `requiredScopes` enthalten. Erfahren Sie mehr über [die App-Konfiguration](/docs/apps/developer-platform/build-apps/app-configuration).
* Erst nach erfolgreichem Deployment Ihres Projekts können Sie eine App-Event-Komponente einbinden.
## Schema des Event-Typs
Im Folgenden finden Sie die Konfigurationsoptionen, die für Event-Typ-Schemata (`*-hsmeta.json`) verfügbar sind. Beachten Sie bitte, dass einige der folgenden Attribute sich nach dem Erstellen des Event-Typs nicht mehr ändern lassen.
> [!WARNING]
>
> Jede App ist auf 750 Event-Typen beschränkt.
```json theme={null}
{
"uid": "customer_login_event",
"type": "app-event",
"config": {
"name": "Customer login",
"headerTemplate": "{{customerName}} logged in.",
"detailTemplate": "{{customerName}} logged in via the {{loginLocation}}.",
"objectType": "CONTACT",
"properties": [
{
"name": "customerName",
"label": "Customer Name",
"type": "string"
},
{
"name": "loginLocation",
"label": "Login location",
"type": "enumeration",
"options": [
{
"value": "mobileApp",
"label": "Mobile app"
},
{
"value": "website",
"label": "Website"
}
]
}
]
}
}
```
Mit \* markierte Felder sind Pflichtfelder.
| Feld | Typ | Beschreibung |
| - | - | - |
| `uid`\* | Zeichenfolge | Eine interne eindeutige ID für den Event-Typ. |
| `type`\* | Zeichenfolge | Der Typ der Komponente. Muss `app-event` sein. |
| `name`\* | Zeichenfolge | Das in HubSpot angezeigte Label (bis zu 50 Zeichen). Dieser Wert lässt sich nach der Erstellung nicht mehr aktualisieren. |
| `objectType`\* | Zeichenfolge | Der vollständig qualifizierte Name des CRM-Objekttyps, dem Event-Vorkommnisse zugeordnet werden können. Dieser Wert kann nach der Erstellung nicht mehr geändert werden. Kann eines der folgenden sein: `COMPANY`, `CONTACT`, `CUSTOM_OBJECT`, `DEAL`, `TICKET`, `APP_OBJECT`. |
| `headerTemplate` | Zeichenfolge | Die [Rendering-Vorlage](#rendering-templates) für den Header der Aktivitätskarte der CRM-Chronik. Kann bis zu 1.000 Zeichen lang sein. |
| `detailTemplate` | Zeichenfolge | Der [Rendering-Vorlage](#rendering-templates) für den Text der CRM Chronik Aktivitätskarte. Kann bis zu 10.000 Zeichen lang sein. |
| `properties` | Array | Eigenschaften, die für den Event-Typ definiert sind, in dem Sie Daten zum Auftreten von Events speichern. Jeder Event-Typ kann über bis zu 500 Eigenschaften verfügen. Erfahren Sie im Folgenden mehr über Event-Eigenschaften. |
### Event-Eigenschaften
Verwenden Sie beim Definieren des Event-Schemas das `properties`-Array, um die Felder zu definieren, an die Sie Daten zum Auftreten von Events senden. Jeder Event-Typ kann über bis zu 500 Eigenschaften verfügen.
```json theme={null}
"properties": [
{
"name": "customerName",
"label": "Customer Name",
"type": "string"
},
{
"name": "loginLocation",
"label": "Login location",
"type": "enumeration",
"options": [
{
"value": "mobileApp",
"label": "Mobile app"
},
{
"value": "website",
"label": "Website"
}
]
}
]
```
Mit \* markierte Felder sind Pflichtfelder.
| Feld | Typ | Beschreibung |
| - | - | - |
| `name`\* | Zeichenfolge | Der interne Name der Eigenschaft. Muss klein geschrieben werden und zwischen 1 und 500 Zeichen enthalten. Eigenschaft Eigenschaftsnamen müssen eindeutig sein pro Event-Typ. Dieser Wert darf nicht mit dem `"[A-Za-z0-9_\\-.]+"`-Regex übereinstimmen oder mit `hs_`beginnen. |
| `label`\* | Zeichenfolge | Das in HubSpot angezeigte Label. Muss klein geschrieben werden und zwischen 1 und 500 Zeichen enthalten. |
| `type`\* | Zeichenfolge | Der Typ der in der Eigenschaft erfassten Daten. Dieser kann einer der folgenden sein: `STRING`, `NUMBER`, `DATE`,`ENUMERATION`. |
| `options` | Array | Für `ENUMERATION`-Typeigenschaften gibt dieses Feld die verfügbaren Optionen an. Muss mindestens eine Option enthalten. Jede Option ist ein Objekt mit Folgendem:
`name`: das Label für die in HubSpot angezeigte Option.
`value`
: der interne Wert, der durch das Auftreten des Events bereitgestellt wird.
Der `name` und das `label` müssen innerhalb des Event-Typs eindeutig sein. |
| `objectPropertyName` | Zeichenfolge | Falls enthalten, der Name der CRM-Objekt Eigenschaft, die aktualisiert werden soll, wenn Event-Daten an HubSpot gesendet werden. Der Wert in dieser Eigenschaft überschreibt alle anderen in dieser Eigenschaft vorhandenen Werte. Im Folgenden erfahren Sie mehr über das automatische Setzen von CRM-Datensatzeigenschaften. |
### Automatisches Setzen von Eigenschaften
In einigen Fällen möchten Sie möglicherweise die Eigenschaften des CRM-Datensatzes auf Grundlage von App-Daten zum Auftreten von Events ändern. Sie können zum Beispiel den Vor- und Nachnamen eines Kontakts mit neuen, durch das Vorkommnis (z. B. Formularübermittlung ) festgelegten Werten aktualisieren.
Um CRM-Datensatzeigenschaften über das Auftreten von Events zu aktualisieren, können Sie eine Event-Eigenschaft mit einer CRM-Eigenschaft innerhalb des Event-Typschemas verknüpfen. Fügen Sie in den Definitionsfeldern für eine bestimmte Event-Eigenschaft das `objectPropertyName`-Feld ein und geben Sie die zu verknüpfende CRM-Eigenschaft an. Sobald eine Eigenschaft verknüpft ist, aktualisiert HubSpot immer den Wert der Eigenschaft im CRM-Datensatz mithilfe des Werts aus dem letzten Vorkommnis basierend auf dem `timestamp`-Feld.
Das folgende Event-Typschema verknüpft beispielsweise die Event-Eigenschaft `customerName` mit einer benutzerdefinierten Kontakteigenschaft namens `custom_property_name`. Wenn die Daten des Event-Vorkommnisses einen Wert für `customerName`enthalten, wird `custom_property_name` im zugehörigen CRM-Datensatz aktualisiert.
```json theme={null}
"properties": [
{
"name": "customerName",
"label": "Customer Name",
"type": "string",
"objectPropertyName": "custom_property_name"
}
]
```
### Rendering von Vorlagen
Event-Typ-Schemata können `headerTemplate`- und `detailTemplate`-Felder enthalten, um zu konfigurieren, wie das Auftreten von Events in CRM-Datensatzchroniken dargestellt wird.
* `headerTemplate`: eine einzeilige Beschreibung des Events oben auf der Aktivitätskarte (bis zu 1.000 Zeichen).
* `detailTemplate`: die Details des Events im Hauptteil der Aktivitätskarte (bis zu 10.000 Zeichen).
Rendering-Vorlagen werden mithilfe von [Markdown](https://www.markdownguide.org/basic-syntax/) mit [Handlebars-Vorlagen](https://handlebarsjs.com/guide/) geschrieben. Diese Vorlagen sind in der Lage, Daten zum Auftreten von Events wie folgt zu rendern:
* In beiden Vorlagen können Sie auf alle `property`-Daten zugreifen, die durch das Auftreten des Events mithilfe der Syntax `{{propertyName}}` übermittelt werden.
* Im `detailTemplate` können Sie zusätzlich auf `extraData`-Werte zugreifen, die durch das Auftreten des Events mithilfe der Syntax `{{extraData.fieldName}}` übermittelt werden. Sie haben auf jede Stufe von Attributen in `extraData` anhand von Punktnotation Zugriff; hier ein Beispiel: `{{extraData.person1.preferredName}}`.
> [!WARNING]
>
> Das `extraData`-Objekt darf nur gültige JSON-Information enthalten. Ist diese faslch formatiert, wird das Vorkommnis abgelehnt und Sie erhalten eine Fehlerantwort.
Die folgenden Vorlagen verwenden beispielsweise die `customerName`- und `loginLocation`-Eigenschaftsdaten zusammen mit dem `surveyData`-Feld von `extraData` [und wurden durch das Event-Vorkommnis übersendet](#event-occurrences).
```json theme={null}
"headerTemplate": "{{customerName}} logged in via the {{loginLocation}}.",
"detailTemplate": "#### Post-login survey\n{{#each extraData.surveyData}}\n- **{{question}}**: {{answer}}\n{{/each}}",
```
Da Vorlagen mit Markdown und Handlebars erstellt werden, können Sie die Vorteile von Handlebars-Helpers nutzen, um den Inhalt dynamischer zu gestalten. Die folgende `detailTemplate`-Vorlage beinhaltet beispielsweise den [`#if` ](https://handlebarsjs.com/guide/builtin-helpers.html#if)-Helper, um Inhalte bedingt wiederzugeben, je nachdem, ob die Daten des Event-Vorkommnisses das `surveyData`-Feld in `extraData` aufweisen.
* Wenn `extraData` `surveyData`enthält, wird die Umfrageantworten nach der Anmeldung angezeigt.
* Wenn im Event-Vorkommnis keine `surveyData` enthalten sind, wird `No additional information.` gerendert.
```json theme={null}
"detailTemplate": "{{#if extraData.surveyData}}#### Post-login survey\n{{#each extraData.surveyData}}\n- **{{question}}**: {{answer}}\n{{/each}}{{else}}No additional information."
```
### Verwenden von iframes
Wenn Daten zum Event-Vorkommnis das `timelineIFrame`-Feld enthalten, verfügt die Aktivitätskarte der Chronik über einen Hyperlink, auf den Benutzer klicken können, um die verlinkten Inhalte in einem iframe zu öffnen.
```json theme={null}
"timelineIFrame": {
"linkLabel": "Click me",
"headerLabel": "This is an iframe",
"url": "https://hubspot.mintlify.io/en-us/apps/developer-platform/build-apps/overview",
"width": 300,
"height": 300
}
```
| Feld | Typ | Beschreibung |
| - | - | - |
| `linkLabel` | Zeichenfolge | Der Hyperlink-Text, der den iframe beim Klicken startet. |
| `headerLabel` | Zeichenfolge | Das Label des modalen Fensters, das die iframe-Inhalte anzeigt. |
| `url` | Zeichenfolge | Die URL des iframe-Contents. |
| `width` | Ganzzahl: | Die Breite des iframe-modalen Dialogfelds. |
| `height` | Ganzzahl: | Die Höhe des modalen iframe. |
## Auftreten von Events
Um Event-Vorkommnisse für einen bestimmten Event-Typ zu senden, führen Sie eine `POST`-Anfrage an die im Folgenden genannten Endpunkte durch. Die App-Events-API enthält Endpunkte zum Senden von einzelnen Vorkommnissen sowie von Batches mit mehreren Vorkommnissen. Für beide Endpunkte müssen die Daten zum Auftreten von Events anhand eines vorhandenen Event-Typschemas validiert werden, das Sie mit `eventTypeName` im Anfragetext angeben.
**Ein einzelnes Vorkommen senden**
Um ein einzelnes Event-Vorkommnis zu senden, stellen Sie eine `POST`-Anfrage an `/integrators/timeline/v4/events`.
Fügen Sie im Anfragetext die Daten über das Auftreten des Events ein und halten Sie sich dabei an das definierte Schema des Event-Typs.
```json theme={null}
{
"eventTypeName": "ae000000_integrators-timeline-event-type-id-0000000",
"objectId": "123456",
"id": "login-1",
"properties": {
"customerName": "Mark S.",
"loginLocation": "mobileApp"
}
},
```
**Ein Batch von Vorkommnissen senden**
Um einen Batch von Event-Vorkommnissen zu senden, führen Sie eine `POST`-Anfrage an `/integrators/timeline/v4/events/batch` durch.
Der Anfragetext kann bis zu 500 durch Kommata getrennte Event-Vorkommnisobjekte innerhalb eines `inputs`-Arrays enthalten. Auch wenn Vorkommnisse nicht validiert werden können, werden erfolgreich validierte weiterhin akzeptiert und beibehalten.
```json theme={null}
{
"inputs": [
{
"EventTypeName": "ae000000_integrators-timeline-event-type-id-0000000",
"id": "login_event_100",
"objectId": "769851",
"properties": {
"customerName": "Tim",
"loginLocation": "mobileApp"
},
"extraData": {
"surveyData": [
{
"question": "How was your login experience?",
"answer": "Fine!"
},
{
"question": "How likely are you to recommend logging in to a co-worker?",
"answer": "Extremely likely"
}
]
}
},
{
"EventTypeName": "ae000000_integrators-timeline-event-type-id-0000000",
"id": "login_event_101",
"objectId": "769851",
"properties": {
"customerName": "Tim",
"loginLocation": "website"
},
"extraData": {}
}
]
}
```
Schließen Sie im Anfragetext Daten basierend auf dem definierten Event-Typschema ein. Der Anfragetext muss den `eventTypeName` enthalten, den Sie [über die API abrufen](/docs/apps/developer-platform/add-features/app-events/create-and-manage-event-types#retrieve-the-fullyqualifiedname) können.
```json theme={null}
{
"eventTypeName": "ae000000_integrators-timeline-event-type-id-0000000",
"objectId": "8675309",
"properties": {
"customerName": "Mark S.",
"loginLocation": "mobileApp"
},
"id": "login-1529a3gda23",
"extraData": {
"surveyData": [
{
"question": "How was your login experience?",
"answer": "Fine!"
},
{
"question": "How likely are you to recommend logging in to a co-worker?",
"answer": "Extremely likely"
}
]
}
}
```
Mit \* markierte Felder sind Pflichtfelder.
| Feld | Typ | Beschreibung |
| - | - | - |
| `eventTypeName`\* | Zeichenfolge | Der vollständig qualifizierte Name des Event-Typs, den Sie verwenden, um das Event über die API zu identifizieren. Dieser Wert wird von HubSpot automatisch festgelegt und lässt sich nach der Erstellung des Event-Typs über [ die API abrufen](/docs/apps/developer-platform/add-features/app-events/create-and-manage-event-types#retrieve-the-fullyqualifiedname). Dieser Wert kann nach der Erstellung nicht mehr geändert werden. |
| `objectId`\* | Zeichenfolge | Die ID des CRM-Datensatzes, der dem Auftreten des Events zugeordnet werden soll. Dieses Feld kann für alle Arten von CRM-Datensätzen verwendet werden und ist die empfohlene ID. Erfahren Sie mehr über [CRM Datensatzzuordnung](#crm-record-association). |
| `email` | Zeichenfolge | Für die Kontakt-Zuordnung können Sie die E-Mail-Adresse des zuzuordnenden Kontakts angeben. Erfahren Sie mehr über [CRM-Datensatzzuordnung](#crm-record-association). |
| `utk` | Zeichenfolge | Für die Kontaktzuordnung können Sie das Benutzer-Token eines vorhandenen Kontakts angeben, der zugeordnet werden soll. Erfahren Sie mehr über [CRM-Datensatzzuordnung](#crm-record-association). |
| `domain` | Zeichenfolge | Für eine Unternehmenszuordnung können Sie die Website Domain eines vorhandenen Unternehmens angeben. Erfahren Sie mehr über [CRM-Datensatzzuordnung](#crm-record-association). |
| `timestamp` | Zeichenfolge | Legt den Zeitpunkt des Auftretens des Events fest ([ISO 8601-Format](https://en.wikipedia.org/wiki/ISO_8601)). Wenn nichts angegeben wird, verwendet HubSpot standardmäßig den Zeitstempel, an dem die Daten des Event-Vorkommnisses gesendet werden. |
| `properties` | Objekt | Schlüsselwert-Paare von Eigenschaftsnamen und -werten für [Eigenschaften](/docs/apps/developer-platform/add-features/app-events/reference#event-properties), die Sie für den Event-Typ definiert haben. |
| `extraData` | Array | Falls eingefügt, werden zusätzliche Informationen für das Rendern der Chronik bereitgestellt. Muss ein gültiges JSON-Format aufweisen. Erfahren Sie mehr über [zusätzliche Daten in Rendering-Vorlagen](#rendering-templates). |
| `timelineIFrame` | Objekt | Wenn dies verwendet wird, enthält die Chronik-Karte einen Hyperlink, der es Benutzern ermöglicht, die verlinkten Inhalte in einem iframe zu öffnen. Erfahren Sie mehr über die [Verwendung von iframes](#using-iframes). |
| `id` | Zeichenfolge | Eine eindeutige ID für das jeweilige Event-Vorkommnis. Muss innerhalb des Event-Typs eindeutig sein. Falls nicht anders angegeben, generiert HubSpot eine zufällige UUID. Wenn mehrere Events die gleiche ID haben, wird die erste akzeptiert und alle anderen abgelehnt. |
Auch wenn Vorkommnisse nicht validiert werden können, werden erfolgreich validierte weiterhin akzeptiert und beibehalten. Die Fehlernachricht gibt Aufschluss darüber, was Sie beheben müssen.
### Zuordnung von Datensätzen
Jedes Auftreten eines Events muss einem CRM-Datensatz zugeordnet werden, wobei der CRM-Objekttyp durch das Event-Typschema definiert ist. Die App-Events-API enthält mehrere Felder, mit denen sich Daten von Event-Vorkommnissen CRM-Datensätzen zuordnen lassen. Für alle unterstützten CRM-Objekte wird empfohlen, das `objectId`-Feld zu verwenden. Es gibt jedoch einige Situationen, in denen Sie vielleicht andere Felder bevorzugen.
* `utk`/`email`: Wenn Sie die ID des Kontakts nicht kennen, verwenden Sie das `utk`-Feld und/oder `email`-Feld zur Identifizierung. Die Angabe dieser beiden IDs ermöglicht es Ihnen auch, Kontakte zu erstellen und zu aktualisieren. Zum Beispiel:
* Wenn `utk` mit einem vorhandenen Kontakt übereinstimmt, jedoch `email` nicht, aktualisiert HubSpot den Kontakt mit der neuen E-Mail-Adresse.
* Ist kein `objectId` angegeben, wird das Auftreten des Events einem vorhandenen Kontakt zugeordnet, der mit `utk`/`email` übereinstimmt, oder HubSpot erstellt einen neuen Kontakt, wenn keine Übereinstimmung vorliegt.
* Beachten Sie bitte, dass anhand von `utk` allein kein neuer Kontakt erstellt werden kann. Sie sollten immer `email` zusammen mit `utk` erwähnen, um eine ordnungsgemäße Zuordnung zu gewährleisten.
* `domain`: Für Unternehmenszuordnungen müssen Sie das `objectId` angeben, können aber auch `domain` einschließen, um die `domain`-Eigenschaft dieses Unternehmens zu aktualisieren.
# Senden von Event-Vorkommnissen (BETA)
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/app-events/send-event-occurrences
Erfahren Sie, wie Sie mithilfe Ihrer festgelegten Event-Typschemata Daten zum Auftreten von Events an HubSpot senden.
Nachdem Sie [ein Event-Typschema definiert](en-us/apps/developer-platform/build-apps/features/app-events/create-and-manage-event-types) und dessen [fullyQualifiedNameabgerufen haben](/docs/apps/developer-platform/add-features/app-events/create-and-manage-event-types#retrieve-the-fullyqualifiedname), können Sie Daten zum Auftreten von Events über die App-Events-API senden. Beim Senden von Event-Daten müssen Sie sich an das zuvor erstellte Schema halten. Anfragen, die nicht mit dem Schema übereinstimmen, schlagen bei der Validierung fehl und werden nicht von der App erfasst.
## Senden von Event-Occurrences
**Ein einzelnes Vorkommnis senden**
Um ein einzelnes Event-Vorkommnis zu senden, stellen Sie eine `POST`-Anfrage an `/integrators/timeline/v4/events`.
Fügen Sie im Anfragetext Ereignisdaten hinzu, die dem definierten Schema des Event-Typs folgen, zusammen mit dem `fullyQualifiedName`-Wert in einem `eventTypeName`-Feld.
```json theme={null}
{
"eventTypeName": "ae000000_integrators-timeline-event-type-id-0000000",
"objectId": "123456",
"id": "login-1",
"properties": {
"customerName": "Mark S.",
"loginLocation": "mobileApp"
}
},
```
**Vorkommnisse gebündelt senden**
Um einen Batch von Event-Vorkommnissen zu senden, stellen Sie eine `POST`-Anfrage an `/integrators/timeline/v4/events/batch`.
Fügen Sie im Anfragetext bis zu 500 durch Kommata getrennte Event-Vorkommnisobjekte in einem `inputs`-Array ein. Wenn Vorkommnisse nicht validiert werden können, werden erfolgreich validierte Vorkommnisse weiterhin akzeptiert und beibehalten.
```json theme={null}
{
"inputs": [
{
"EventTypeName": "ae000000_integrators-timeline-event-type-id-0000000",
"id": "login_event_100",
"objectId": "769851",
"properties": {
"customerName": "Tim",
"loginLocation": "mobileApp"
},
"extraData": {
"surveyData": [
{
"question": "How was your login experience?",
"answer": "Fine!"
},
{
"question": "How likely are you to recommend logging in to a co-worker?",
"answer": "Extremely likely"
}
]
}
},
{
"EventTypeName": "ae000000_integrators-timeline-event-type-id-0000000",
"id": "login_event_101",
"objectId": "769851",
"properties": {
"customerName": "Tim",
"loginLocation": "website"
},
"extraData": {}
}
]
}
```
Mit \* markierte Felder sind Pflichtfelder.
| Feld | Typ | Beschreibung |
| - | - | - |
| `eventTypeName`\* | Zeichenfolge | Der vollständig qualifizierte Name des Event-Typs, den Sie verwenden, um das Event über die API zu identifizieren. Dieser Wert wird von HubSpot automatisch festgelegt und lässt sich nach der Erstellung des Event-Typs über [ die API abrufen](/docs/apps/developer-platform/add-features/app-events/create-and-manage-event-types#retrieve-the-fullyqualifiedname). Dieser Wert kann nach der Erstellung nicht mehr geändert werden. |
| `objectId`\* | Zeichenfolge | Die ID des CRM-Datensatzes, der dem Auftreten des Events zugeordnet werden soll. Dieses Feld kann für alle Arten von CRM-Datensätzen verwendet werden und ist die empfohlene ID. Erfahren Sie mehr über [CRM Datensatzzuordnung](#crm-record-association). |
| `email` | Zeichenfolge | Für die Kontakt-Zuordnung können Sie die E-Mail-Adresse des zuzuordnenden Kontakts angeben. Erfahren Sie mehr über [CRM-Datensatzzuordnung](#crm-record-association). |
| `utk` | Zeichenfolge | Für die Kontaktzuordnung können Sie das Benutzer-Token eines vorhandenen Kontakts angeben, der zugeordnet werden soll. Erfahren Sie mehr über [CRM-Datensatzzuordnung](#crm-record-association). |
| `domain` | Zeichenfolge | Fügen Sie dieses Feld zusätzlich zu `objectId` hinzu, um den `domain`-Eigenschaftswert des Unternehmens festzulegen. Erfahren Sie mehr über [CRM-Datensatzzuordnung](#crm-record-association). |
| `timestamp` | Zeichenfolge | Legt den Zeitpunkt des Auftretens des Events fest ([ISO 8601-Format](https://en.wikipedia.org/wiki/ISO_8601)). Wenn nichts angegeben wird, verwendet HubSpot standardmäßig den Zeitstempel, an dem die Daten des Event-Vorkommnisses gesendet werden. |
| `properties` | Objekt | Schlüsselwert-Paare von Eigenschaftsnamen und Eigenschaftswerte, die Sie für den Event-Typ konfiguriert haben. Erfahren Sie mehr über [Event-Eigenschaften](/docs/apps/developer-platform/add-features/app-events/reference#event-properties). |
| `extraData` | Objekt | Zusätzliche Informationen, die für [Chronik-Rendering-Vorlagen](/docs/apps/developer-platform/add-features/app-events/reference#rendering-templates) verfügbar sind. Muss im gültigen JSON-Format vorliegen. |
| `timelineIFrame` | Objekt | Wenn dies verwendet wird, enthält die Chronik-Karte einen Hyperlink, der es Benutzern ermöglicht, die verlinkten Inhalte in einem iframe zu öffnen. Erfahren Sie mehr über die [Verwendung von iframes](/docs/apps/developer-platform/add-features/app-events/reference#using-iframes). |
| `id` | Zeichenfolge | Eine eindeutige ID für das jeweilige Event-Vorkommnis. Muss innerhalb des Event-Typs eindeutig sein. Falls nicht anders angegeben, generiert HubSpot eine zufällige UUID. Wenn mehrere Events die gleiche ID haben, wird die erste akzeptiert und alle anderen abgelehnt. |
## Zuordnung von Datensätzen
Jedes Auftreten eines Events muss einem CRM-Datensatz zugeordnet werden, wobei der CRM-Objekttyp durch das Event-Typschema definiert ist. Die App-Events-API enthält mehrere Felder, mit denen sich Daten von Event-Vorkommnissen CRM-Datensätzen zuordnen lassen. Für alle unterstützten CRM-Objekte wird empfohlen, das `objectId`-Feld zu verwenden. Es gibt jedoch einige Situationen, in denen Sie vielleicht andere Felder bevorzugen.
* `utk`/`email`: Wenn Sie die ID des Kontakts nicht kennen, verwenden Sie das `utk`-Feld und/oder `email`-Feld zur Identifizierung. Die Angabe dieser beiden IDs ermöglicht es Ihnen auch, Kontakte zu erstellen und zu aktualisieren. Zum Beispiel:
* Wenn `utk` mit einem vorhandenen Kontakt übereinstimmt, jedoch `email` nicht, aktualisiert HubSpot den Kontakt (gemäß `utk`) mit der neuen E-Mail-Adresse.
* Ist kein `objectId` angegeben, wird das Auftreten des Events einem vorhandenen Kontakt zugeordnet, der mit `utk`/`email` übereinstimmt, oder HubSpot erstellt einen neuen Kontakt, wenn keine Übereinstimmung vorliegt.
* Beachten Sie bitte, dass anhand von `utk` allein kein neuer Kontakt erstellt werden kann. Sie sollten immer `email` zusammen mit `utk` erwähnen, um eine ordnungsgemäße Zuordnung zu gewährleisten.
* `domain`: Für Unternehmenszuordnungen müssen Sie das `objectId` angeben, können aber auch `domain` einschließen, um die `domain`-Eigenschaft dieses Unternehmens zu aktualisieren.
Nachfolgend finden Sie die Prioritätenfolge für die Eigenschaftszuordnung von CRM-Datensätzen, wobei die kleinste Zahl die höchste Priorität darstellt:
| Beschreibung der Feldpriorität | | |
| - | - | - |
| `objectId` | 1 | Die CRM-Datensatz-ID (empfohlen) |
| `utk` | 2 | Das Kontaktbenutzertoken (nur Kontakte) |
| `email` | 3 | Die E-Mail-Adresse des Kontakts (nur Kontakte) |
| `domain` | 4 | Die Unternehmen Domain (nur Unternehmen) |
## Zusätzliche Daten senden
Neben dem Senden von Daten an [Event-Eigenschaften](/docs/apps/developer-platform/add-features/app-events/reference#event-properties) und dem [Aktualisieren von CRM-Eigenschaften über das Auftreten von Events](/docs/apps/developer-platform/add-features/app-events/reference#property-stamping) können Sie zusätzliche Daten für das [Chronik-Rendering](/docs/apps/developer-platform/add-features/app-events/reference#rendering-templates) per `extraData`-Objekt einbeziehen.
> [!WARNING]
>
> Das `extraData`-Objekt darf nur gültige JSON-Dateien enthalten. Wenn diese falsch formatiert sind, wird das Event-Vorkommnis abgelehnt und Sie erhalten eine Fehlerantwort.
Auf `extraData`-Feldwerte kann über die `detailTemplate` des Eventtyps unter Verwendung der `{{extraData.fieldName}}`-Syntax zugegriffen werden. Alle Attributebenen von `extraData` sind durch Punktnotation verfügbar, z. B `{{extraData.person1.preferredName}}`.
Die folgenden Vorlagen verwenden beispielsweise die `customerName`- und `loginLocation`-Eigenschaftsdaten zusammen mit dem `surveyData`-Feld von `extraData`, was [über das Event-Vorkommnis gesendet wurde](#event-occurrences).
**Daten zum Event-Vorkommnis**
```json theme={null}
{
"eventTemplateId": "5488733",
"objectId": "769851",
"tokens": {
"customerName": "Tim",
"loginLocation": "mobileApp"
},
"extraData": {
"surveyData": [
{
"question": "How was your login experience?",
"answer": "Fine!"
},
{
"question": "How likely are you to recommend logging in to a co-worker?",
"answer": "Extremely likely"
}
]
}
}
```
**Konfiguration der Chronikvorlage**
```json theme={null}
"headerTemplate": "{{customerName}} logged in via the {{loginLocation}}.",
"detailTemplate": "#### Post-login survey\n{{#each extraData.surveyData}}\n- **{{question}}**: {{answer}}\n{{/each}}",
```
# Überblick über die ersten Schritte
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/app-objects/overview
Erfahren Sie, wie Sie mit dem Entwickeln in HubSpot beginnen können.
'Erfahren Sie, wie Sie mit dem Entwickeln in HubSpot beginnen können.';
Ganz gleich, ob Sie ein neuer HubSpot-Entwickler sind oder Ihre Kenntnisse erweitern möchten, dieser Abschnitt führt Sie durch den Einstieg in das Entwickeln in HubSpot. Sie werden die verschiedenen verfügbaren Entwicklungswege sowie die spezifischen Tools und Accounts kennenlernen, die Sie benötigen, um Ihre Ziele zu erreichen.
## Die Vorteile einer vernetzten Plattform
Zunächst ist es hilfreich, sich vor Augen zu führe, was genau HubSpot zu einer leistungsstarken Plattform für Entwickler macht.
Die Grundlage jedes HubSpot-Accounts ist die CRM-Plattform [](/docs/guides/crm/understanding-the-crm) (Customer Relationship Management), eine Datenbank für Geschäftsbeziehungen und -prozesse. HubSpot bietet verschiedene Möglichkeiten für externe Entwickler und Partner, mit dem CRM zu arbeiten, damit sie einen Mehrwert für HubSpot-Endbenutzer schaffen können. Dazu gehören:
* Erstellen von Integrationen und/oder Erweiterungen mit den APIs von HubSpot, um Daten zwischen HubSpot und externen Plattformen zu synchronisieren.
* Erstellen von benutzerdefinierten Websites mit CMS Hub, dem Contentmanagement-System von HubSpot. CMS Hub verfügt nicht nur über eine vollständige Suite von Contentmanagement-Tools, sondern ist auch vollständig in das CRM integriert. Dies erleichtert das Verwalten von Kampagnen, das Erfassen von Leads und die laufende Kundenkommunikation.
* Anpassen des CRM mit UI-Erweiterungen. Entwickler können React verwenden, um flexible benutzerdefinierte Karten zu erstellen, die sich nahtlos in HubSpot integrieren lassen.
Im nächsten Abschnitt erhalten Sie einen Überblick über die Tools, die für HubSpot-Entwickler verfügbar sind. Anschließend wählen Sie eine Route, um Ihre Customer Journey als HubSpot-Entwickler fortzusetzen.
## 1. Die Tools installieren, die Sie bei der Erstellung unterstützen
Für HubSpot-Entwickler ist eine breite Palette von Tools verfügbar. Welche genau Sie benötigen, hängt von Ihren spezifischen Zielen ab.
* **HubSpot CLI:** Die Installation des HubSpot CLI für die lokale Entwicklung ist ein guter Ausgangspunkt für viele Entwicklungsaufgaben. Das CLI wird bei der Erstellung von UI-Erweiterungen und CMS-Ressourcen verwendet und kann zum Erstellen und Verwalten von Geheimnissen, HubDB-Tabellen und benutzerdefinierten Objekten in Ihrem Account verwendet werden. Es muss [Node.js](https://nodejs.org/en/) installiert sein (Version 18 oder höher ist erforderlich, und die LTS-Version wird empfohlen). Um das CLI global zu installieren, führen Sie den folgenden Befehl aus:
```shell theme={null}
npm i -g @hubspot/cli
```
* **Visual Studio Code:** Wenn Sie [Visual Studio Code](https://code.visualstudio.com/) installieren, können Sie die Vorteile der [HubSpot Visual Studio Code-Erweiterung](https://developers.hubspot.com/docs) nutzen, mit der Sie Ihren Entwicklungs-Workflow zentralisieren können.
* **Client-Bibliotheken**: HubSpot bietet Client-Bibliotheken für [Node](https://github.com/HubSpot/hubspot-api-nodejs), [PHP](https://github.com/HubSpot/hubspot-api-php), [Ruby](https://github.com/HubSpot/hubspot-api-ruby) und [Python](https://github.com/HubSpot/hubspot-api-python).
* **Postman:** Verwenden Sie [Postman](https://www.postman.com/) für den Zugriff auf [die Postman-Filtergruppe von HubSpot](https://www.postman.com/hubspot). In der gesamten API-Dokumentation von HubSpot finden Sie Schaltflächen zum Ausführen von Aufrufen unter Verwendung der Filtergruppe.
Erfahren Sie mehr über [HubSpots Tools für Entwickler](/docs/developer-tooling/overview).
## 2. Entscheiden, was erstellt werden soll
Für die Entwicklung mit HubSpot gibt es kein Patentrezept. Es ist eine flexible Plattform, die eine Vielzahl von Anforderungen erfüllen kann.
Eine der vier unten aufgeführten Kategorien dürfte die meisten dieser Bedürfnisse abdecken. Sie können diejenige auswählen, die für Sie im Moment am wichtigsten ist, um eine kurze Einführung zu erhalten, zusammen mit einigen Sofortmaßnahmen, die Ihnen den Einstieg erleichtern. Sie können sich auch ein Bild davon machen, welche Tools am besten geeignet sind und ob ein bestimmter [Typ von HubSpot-Account](/docs/getting-started/account-types) erforderlich ist.
* [APIs verwenden und Integrationen erstellen](https://developers.hubspot.com#use-apis-and-build-integrations)
* [Apps für den App Marketplace erstellen](https://developers.hubspot.com#build-for-the-app-marketplace)
* [Die Benutzeroberfläche von HubSpot anpassen](https://developers.hubspot.com#customize-the-hubspot-ui)
* [Benutzerdefinierte Websites erstellen](https://developers.hubspot.com#build-custom-websites)
## 3. Sich Gleichgesinnten anschließen
Vernetzen Sie sich mit Peers, die bereits auf Grundlage von HubSpot entwickeln. Stellen Sie Fragen, tauschen Sie Wissen aus, bauen Sie eine Gemeinschaft auf und finden Sie vielleicht sogar Freunde.
* [Entwickler-Community bei Slack (Developer Slack)](https://developers.hubspot.com/community)
* [Entwickler-Foren](https://community.hubspot.com/t5/HubSpot-Developers/ct-p/developers)
* [Entwickler-Advocacy GitHub](https://github.com/hubspotdev)
## 4. Ihren Bedürfnissen entsprechend lernen
Sobald Sie mit der Arbeit begonnen haben, stehen Ihnen zahlreiche Ressourcen zur Verfügung, die Sie bei der Vertiefung Ihrer Kenntnisse unterstützen. Sie können auf ausführliche Leitfäden, detaillierte Referenzdokumente oder [HubSpot Academy-Kurse](https://academy.hubspot.com/courses) zugreifen, je nach Ihrem bevorzugten Lernstil.
# Erste Schritte mit App-Objekten (BETA)
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/app-objects/quickstart-guide-to-app-objects
Erfahren Sie, wie Sie eine neue Proof-of-Concept-Anwendung (BETA) erstellen.
> [!NOTE]
>
> Für diese Funktion ist allerdings die Genehmigung von HubSpot erforderlich. Wenn Sie gerne Zugriff auf App-Objekte beantragen oder mehr über die Funktionalität erfahren möchten, senden Sie bitte [dieses Formular](https://developers.hubspot.com/app-objects-interest) ein.
Erfahren Sie, wie Sie eine Proof-of-Concept-App erstellen, bei der Sie ein App-Objekt konfigurieren, das Sie testen und in einem Entwickler-Test-Account verwenden können.
**1. Die neueste Version des HubSpot CLI installieren**
Sie benötigen die neueste Betaversion des [HubSpot CLI](/docs/developer-tooling/local-development/hubspot-cli/reference), um eine einheitliche App zu erstellen. Führen Sie in einem Terminalfenster den folgenden Befehl aus:
```shell theme={null}
npm install -g @hubspot/cli@next
```
Das CLI muss mindestens die Version `7.4.4-beta.0` sein. Sie können überprüfen, welche Version des CLI Sie haben, indem Sie `hs --version` ausführen.
**2. Entwickler-Account authentifizieren**
Dann müssen Sie Ihren Entwickler-Account anhand des folgenden Befehls authentifizieren:
```shell theme={null}
hs auth
```
* Befolgen Sie die Prompts, um einen persönlichen Zugriffsschlüssel in Ihrem Account zu generieren, kopieren Sie ihn und fügen Sie ihn dann in das Terminal ein, um Ihre Konfiguration zu speichern.
* Während dieser Beta-Phase wird empfohlen, diesen Account zu Ihrem Standard-Account im CLI zu machen. Dadurch werden mögliche Fehler beim Zugriff auf den Account, den Sie für die Beta-Version angemeldet haben, verhindert.
**3. Ein neues Boilerplate-Projekt erstellen**
Führen Sie den folgenden Befehl in Ihrem Terminal aus, um eine neue Projekt- und Marketplace-App entweder mit den derzeit kompatiblen Funktionen oder einem App-Objektreferenzschema zu erstellen.
```shell theme={null}
hs project create --templateSource robrown-hubspot/hubspot-project-components-ua-app-objects-beta
```
**4. Konfigurieren Sie das neu erstellte Projekt und laden Sie es in Ihren Entwickler-Account hoch**
Das Projektframework verschiebt App-Features, die zuvor in der Benutzeroberfläche oder über die API konfiguriert wurden, in Quellcodedateien, die in der Regel als `-hsmeta.json`-Konfigurationsdateien definiert sind.
App-Funktionen werden dann mit einer Kombination aus Unterordnern aus dem `/src/app`-Hauptverzeichnis und anderen Konfigurationsdateien nach Bedarf erstellt. So konfigurieren Sie Ihr Projekt:
* Fügen Sie eine oder mehrere gültige Weiterleitungs-URLs zur `app-hsmeta.json`-Datei hinzu, die auf Ihrer lokalen (oder einer anderen nicht produktionsbezogenen) OAuth-Serverkonfiguration basieren.
> [!TIP]
>
> ### Hinweis:
>
> Für den Anfang können Sie das [OAuth Node.js-Beispiel](http://github.com/hubspot/oauth-quickstart-nodejs) verwenden und lokal ausführen. Alles ist bereits so eingerichtet, dass `https://localhost:3000/oauth-callback` als Weiterleitungs-URL benutzt wird. Diese wurde bereits im Boilerplate-Beispielcode des `hs project create`-Befehls konfiguriert, den Sie im vorherigen Schritt verwendet haben.
* Ändern Sie die `uid`-Eigenschaften der App in der `app-hsmeta.json`-Datei und den anderen `*-hsmeta.json`-Konfigurationsdateien in Ihrem Projekt.
> [!WARNING]
>
> UIDs werden als eindeutige ID für alle Komponenten und Funktionen Ihres Projekts verwendet. Sobald eine Funktion und eine UID erstellt sind, führt das Ändern oder Modifizieren der UID in nachfolgenden Bereitstellungen zwangsläufig dazu, dass die Plattform sie als von früheren Funktionen abweichend erkennt, was möglicherweise nicht beabsichtigt ist.
* Wenn Sie App-Objekte für Ihre einheitliche App verwenden, sind nur die autorisierten „Namen“-Eigenschaftsdefinitonen basierend auf Ihrer Objektanfrage zulässig. Im Rahmen dieser privaten Beta sollten Sie separat eine Bestätigung des genehmigten „Namens“ Ihrer App erhalten haben, der in der `*-object-hsmeta.json`-Konfiguration verwendet werden muss. Als Referenz lautet der vollständig qualifizierte Name (Fully Qualified Name, FQN) für Ihr App-Objekt `a_`. Wenn zum Beispiel Ihre `appId` `16858319` lautet und Ihre `name`-Eigenschaft `CARS` war, dann wäre `a16858319_cars` Ihr FQN.
* Sobald Sie Ihre Änderungen gespeichert haben, führen Sie den `hs project upload`-CLI-Befehl aus, um Ihr Projekt auf die HubSpot-Entwicklerplattform hochzuladen und automatisch einen neuen Build auszulösen.
* Gehen Sie in einem Browserfenster zu `https://app.hubspot.com/developer_projects/`, um die Projekt-Benutzeroberfläche aufzurufen und zu bestätigen, dass die App und das Projekt ordnungsgemäß erstellt, aufgebaut und bereitgestellt wurden.
**5. Fügen Sie die Client-ID und das Client-Geheimnis Ihrer App zu Ihrer App hinzu**
* Nach dem Hochladen Ihres Projekts müssen Sie die Authentifizierungsdetails für Ihre App abrufen, um sie in Ihre OAuth-Konfiguration zu kopieren:
* Klicken Sie im Navigationsmenü *Entwicklung* auf **Projekte**.
* Dann klicken Sie auf den **Namen** Ihres neuen Projekts.
* Anschließend klicken Sie auf die **UID** Ihrer App und danach auf die Registerkarte **Authentifizierung**.
* Kopieren Sie die *Client-ID* und das *Client-Geheimnis* aus Ihrer neuen App, fügen Sie die Angaben an den entsprechenden Stellen in der Konfiguration Ihres lokalen OAuth-Servers ein und starten Sie dann Ihren OAuth-Server neu.
**6. Konfiguration des App-Objektschemas einrichten**
Als Nächstes konfigurieren Sie das Schema Ihres App-Objekts:
* Fügen Sie ein neues App-Objekt hinzu, indem Sie ein Verzeichnis innerhalb des Verzeichnisses `/src/app` erstellen und es `app-objects` nennen. Der resultierende Pfad zum neuen Verzeichnis sollte `/src/app/app-objects` sein .
* Erstellen Sie eine neue Konfigurationsdatei, um das Schema Ihres Objekts darzustellen. Sie sollten den Objektnamen, der Ihrer App während des Vorschauprozesses gegeben wurde, als Präfix für den Dateinamen verwenden, gefolgt von `-object-hsmeta.json`. In der Vorlage des Referenzprojekts lautet der App-Objektname beispielsweise „CAR“, daher heißt die resultierende Konfigurationsdatei `car-object-hsmeta.json`.
* Konsultieren Sie die Referenzdatei für [App-Objektkomponentendefinitionen](/docs/apps/developer-platform/add-features/app-objects/reference#app-schema) und passen Sie die Felder an die entsprechenden Werte für Ihr App-Objekt an.
* Innerhalb des `config`-Objekts Ihrer Definition muss das `name`-Feld mit dem Namen übereinstimmen, der Ihrer App während des Überprüfungsprozesses im `UPPER_SNAKE_CASE`-Format zugewiesen wurde.
* Beachten Sie, dass die Eigenschaften und Felder, sobald sie zu Ihrem App-Objektschema hinzugefügt und im nächsten Schritt in Ihr Projekt hochgeladen wurden, nicht mehr entfernt werden können.
> [!TIP]
>
> ### Hinweis:
>
> Zur Vereinfachung der Tests kann derselbe App-Objektname für mehrere Apps verwendet werden, um Ihren Entwicklungs-Lifecycle zu unterstützen. Beginnen Sie mit dieser Proof-of-Concept-App, und sobald Migrationen verfügbar sind, können Sie denselben Namen und dieselben Schemadefinitionen für Ihre Entwicklungs-, Staging- und Produktions-Apps verwenden. Die UIDs für jede dieser Instanzen müssen eindeutig sein.
* Wenn Sie mit der Bearbeitung Ihrer App-Objektschemadefinition fertig und bereit sind, diese Änderungen zu übernehmen, führen Sie die folgenden Befehle aus, um Ihre Änderungen zu speichern:
```shell theme={null}
hs project upload
hs project deploy
```
* Gehen Sie in einem Browserfenster zu `https://app.hubspot.com/developer_projects/`, um die Projekt-Benutzeroberfläche aufzurufen und zu bestätigen, dass die App und das Projekt ordnungsgemäß erstellt, aufgebaut und bereitgestellt wurden.
**7. App aktualisieren**
Nachdem Ihr App-Objektschema hochgeladen wurde, müssen Sie die in Ihrer `app-hsmeta.json`-Datei definierten Bereiche aktualisieren, um die im vorherigen Schritt erstellten Bereiche widerzuspiegeln. Diese Bereiche sollten in den CLI-Protokollen sichtbar sein, nachdem Sie `hs project upload` ausgeführt haben.
* Bearbeiten Sie die `app-hsmeta.json`-Datei und fügen Sie die neuen Bereiche dem Array von `requiredScopes` innerhalb der `auth`-Definition hinzu. Wenn zum Beispiel Ihre `appId` `a12345` lautete, dann würden Sie die `auth`-Definition wie folgt bearbeiten:
```json theme={null}
"auth": {
"type" : "oauth",
"redirectUrls": ["http://localhost:3000/oauth-callback"],
"requiredScopes": [
"crm.objects.contacts.read",
"crm.objects.contacts.write",
"crm.app.objects.a12345_my_app_object.view",
"crm.app.objects.a12345_my_app_object.create",
"crm.app.objects.a12345_my_app_object.edit",
"crm.app.schemas.a12345_my_app_object.read",
"crm.app.objects.a12345_my_app_object.merge",
"crm.app.objects.a12345_my_app_object.delete",
"crm.app.schemas.a12345_my_app_object.properties.write"
],
"optionalScopes": [],
"conditionallyRequiredScopes": []
},
```
> [!WARNING]
>
> ### Hinweis:
>
>
>
> Kunden können Ihr App-Objekt nur dann sehen, wenn der `schemas.read`-
> Bereich in Ihren App-Einstellungen enthalten ist und wird während der
> Installation/erneuten Autorisierung des OAuth-Ablaufs benötigt. Dies wird dringend empfohlen, auch für
> alle App-Objektbereiche in Ihren Einstellungen. Auf jeden Fall ist `schemas.read` obligatorisch für
> Kunden, damit sie in der Lage sind, darauf zuzugreifen. Zum Beispiel für eine `12345` lautende `appId`,
> schließen Sie `crm.app.schemas.a12345_MY_APP_OBJECT.read` als erforderlichen
> Bereich ein.
>
>
>
> Je nach App, mit der Sie testen (Prototyp, Entwicklung, Staging,
> Produktion), müssen Sie genau darauf achten, wo Sie Ihre bereichsspezifischen
> Definitionen hinzufügen. Obwohl die Bereitstellung einer Produktions-App noch nicht
> in dieser Phase der privaten Beta unterstützt wird, ist es im Allgemeinen am sichersten, diese
> Bereiche als `conditionallyRequiredScopes` einzuschließen, wenn Sie für die Produktion bereit sind.
> Erfahren Sie mehr über diese Bereichstypen in der [Referenzdokumentation
> für öffentliche Apps](/docs/apps/legacy-apps/public-apps/overview#scope-types).
>
>
* Wenn Sie mit dem Hinzufügen dieser Bereiche fertig sind und Ihre Änderungen gespeichert haben, führen Sie die folgenden Befehle aus, um Ihre Änderungen auf der Plattform zu übernehmen:
```shell theme={null}
hs project upload
hs project deploy
```
Nach Abschluss der Bereitstellung können Ihre App und das entsprechende App-Objekt nun mit einem installierten Account getestet werden.
**8. Erstellen Sie einen Entwickler-Test-Account (optional) und installieren Sie Ihre App**
Wenn Sie noch keinen [Test-Account](/docs/getting-started/account-types#developer-test-accounts) haben, können Sie einen in HubSpot erstellen:
* Gehen Sie im Navigationsmenü *Entwicklung* zu **Test-Accounts** und klicken Sie dann auf **Entwickler-Test-Account erstellen**. Folgen Sie den Anweisungen, um Ihren neuen Test-Account zu einzurichten.
* Gehen Sie im Menü der linken Seitenleiste zu **Projekte**, klicken Sie auf den **Namen** Ihres neuen Projekts und dann in der Komponentenliste auf die **UID** Ihrer App.
* Kopieren Sie auf der Registerkarte *Authentifizierung* den Installationslink Ihrer App.
* Verwenden Sie diesen Link, um die App in Ihrem Entwickler-Test-Account zu installieren.
* Öffnen Sie den Test-Account und gehen Sie zur Seite *Verknüpfte Apps*, auf der Ihre installierte App aufgelistet sein sollte.
* Gehen Sie in Ihrem Test-Account zu **CRM** > **Kontakte**, klicken Sie dann auf das Dropdown-Menü „CRM-Objekt“ und bestätigen Sie, dass Ihr App-Objekt verfügbar ist.
* Sie können dann feststellen, ob Ihre Schemadefinition mit Ihrer Konfigurationsdatei übereinstimmt, indem Sie einen neuen Datensatz Ihres App-Objekts erstellen.
**9. Programmgesteuerter Datenzugriff über die HubSpot-Objekt-API**
Nachdem Sie Ihr App-Objekt erfolgreich erstellt und in einem Entwickler-Test-Account getestet haben, können Sie das OAuth-Zugriff-Token der dem installierten Test-Account zugeordnet ist, verwenden, um Anfragen zur Aktualisierung von Daten im Account direkt über die Objekte-API zu stellen.
Lesen Sie sich die Anleitung zur [Objekte-API](/docs/guides/crm/using-object-apis) durch, um weitere Informationen über die API zu erhalten. Alle Anfragen, die sich auf Ihr App-Objekt beziehen, folgen aber den gleichen Konventionen wie andere Standardobjekte in HubSpot auch. Sie müssen die `objectTypeId` Ihres App-Objektes oder den `fullyQualifiedName` als `objectType`-Pfadparameter in Ihrer Anfrage verwenden.
Der folgende Codeblock zeigt beispielsweise, wie Sie eine cURL-Anfrage zum Erstellen eines neuen Datensatzes Ihres App-Objekts durchführen:
```shell theme={null}
curl --request POST \
--url https://api.hubapi.com/crm/v3/objects/ \
--header 'authorization: Bearer YOUR_ACCESS_TOKEN' \
--header 'content-type: application/json' \
--data '{
"properties": {
"additionalProp1": "string",
"additionalProp2": "string",
"additionalProp3": "string"
}
}'
```
Sie können die `objectTypeId` für Ihr App-Objekt über die Indexseite für Datensätze finden:
* Gehen Sie zu **CRM** > **Kontakte** im Entwickler-Test-Account, in dem Sie Ihre App installiert haben.
* Klicken Sie auf das **Dropdown**-Menü oben auf der Seite und wählen Sie Ihr **App-Objekt** aus.
* Die `objectTypeId` wird in der URL zwischen den einzelnen Abschnitten `/objects//views` angezeigt.
## Nächste Schritte
In der [Referenzdokumentation](/docs/apps/developer-platform/add-features/app-objects/reference) finden Sie Informationen zu den nächsten Schritten und dazu wie sich App-Objekten mit verschiedenen Funktionen der Entwicklerplattform verwenden lassen:
* [Eine App-Karte konfigurieren](/docs/apps/developer-platform/add-features/app-objects/reference#app-card-schema)
* [Webhook-Abonnements konfigurieren](/docs/apps/developer-platform/add-features/app-objects/reference#webhooks-component-definition)
* [Zuordnungen mit anderen CRM-Objekttypen aktivieren](/docs/apps/developer-platform/add-features/app-objects/reference#app-object-associations)
# Referenz für App-Objekte (BETA)
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/app-objects/reference
Referenzinformationen zum Erstellen von App-Objekten, einschließlich Konfigurationsoptionen für Apps, App-Objekte und mehr.
> [!NOTE]
>
> Für diese Funktion ist allerdings die Genehmigung von HubSpot erforderlich. Wenn Sie gerne Zugriff auf App-Objekte beantragen oder mehr über die Funktionalität erfahren möchten, senden Sie bitte [dieses Formular](/docs/apps/developer-platform/add-features/app-objects/overview) ein.
Im Folgenden finden Sie Referenzinformationen für App-Funktionen der Entwicklerplattform mit App-Objekten, einschließlich Konfigurationsdateidefinitionen, Details zu Bereichen und mehr.
## Projektstruktur
* Alle App-Funktionen und -Komponenten müssen innerhalb des in der `hsproject.json`-Konfigurationsdatei angegebenen `src`-Verzeichnisses gespeichert werden.
* Alle App-Funktionen und -Komponenten müssen innerhalb des `app/`-Verzeichnisses gespeichert werden.
* App-Objektzuordnungen werden innerhalb des `app-object-associations/`-Verzeichnisses definiert.
* Webhook-Abonnements werden innerhalb des `webhooks/`-Verzeichnisses definiert.
* Benutzerdefinierte Workflow-Aktionen werden innerhalb des `workflow-actions/`-Verzeichnisses definiert.
* Alle Kartenfunktionen müssen im `cards/`-Verzeichnisses gespeichert werden.
* Für alle alle Komponenten- und Feature-Instanzen ist anzugeben, dass sie `*-hsmeta.json`-Dateien verwenden. Stellen Sie dem Dateinamen etwas Aussagekräftiges voran (z. B `my-app-hsmeta.json`). Diese Dateien müssen sich auf der Stammebene ihres jeweiligen Ordners befinden (z. B. `app/my-app-hsmeta.json`, `cards/my-card-hsmeta.json`).
Die folgende Beispielverzeichnisstruktur zeigt alle verfügbaren Funktionen.
```shell theme={null}
my-folder/
├── hsproject.json
├──src
│ ├── app/
│ │ └── app-hsmeta.json/
│ │ └── app-objects/
│ │ └── my-app-object-hsmeta.json
│ │ └── app-object-associations/
│ │ └── my-app-object-association-hsmeta.json
│ │ └── webhooks/
│ │ └── webhooks-hsmeta.json
│ │ └── cards/
│ │ └── my-app-card-hsmeta.json
│ │ └── MyCard.jsx
└──
```
> **[Beispiel auf GitHub anzeigen](https://github.com/robrown-hubspot/hubspot-project-components-ua-app-objects-beta/tree/main/projects/app-object-getting-started-template)**
## App-Objekte
Um ein App-Objekt zu erstellen, fügen Sie ein `app-objects`-Komponentenverzeichnis zusammen mit einer Konfigurationsdatei in das Projekt ein.
```shell theme={null}
...
├──src
│ ├── app/
│ │ └── app-hsmeta.json
│ │ └── ...
│ │ └── app-objects/
│ │ └── my-app-object-hsmeta.json
└──
```
Nachfolgend finden Sie die Konfigurationsoptionen für `*-object-hsmeta.json`.
```json theme={null}
{
"uid": "car-app-object",
"type": "app-object",
"config": {
"name": "CAR",
"appPrefix": "Vroom",
"description": "An automobile in our warehouse.",
"singularForm": "Car",
"pluralForm": "Cars",
"primaryDisplayLabelPropertyName": "model",
"secondaryDisplayLabelPropertyNames": ["make"],
"settings": {
"hasRecordPage": true,
"allowsUserCreatedRecords": true,
"hasEngagements": true
},
"properties": [
{
"type": "string",
"fieldType": "text",
"name": "model",
"label": "Model",
"description": "The model of the car"
},
{
"type": "enumeration",
"fieldType": "select",
"name": "make",
"label": "Make",
"description": "The manufacturer of the car.",
"options": [
{
"label": "Ford",
"value": "ford",
"displayOrder": 0
},
{
"label": "Toyota",
"value": "toyota",
"displayOrder": 1
},
{
"label": "Chevrolet",
"value": "chevrolet",
"displayOrder": 2
}
]
}
]
}
}
```
> **[Beispiel auf GitHub anzeigen](https://github.com/robrown-hubspot/hubspot-project-components-ua-app-objects-beta/blob/main/projects/app-object-getting-started-template/src/app/app-objects/car-object-hsmeta.json)**
Mit \* markierte Felder sind Pflichtfelder.
| Feld | Typ | Beschreibung |
| - | - | - |
| `uid`\* | Zeichenfolge | Eine eindeutige ID für das App-Objekt. Muss innerhalb des Projekts global eindeutig sein. |
| `type`\* | Zeichenfolge | Der Typ der Komponente. Muss mit dem Namen des übergeordneten Ordners (`app-object`) übereinstimmen. |
| `name`\* | Zeichenfolge | Der Name Ihres App-Objekts. Verwenden Sie den genehmigten Namen, den Sie in Ihrer Bestätigung über die genehmigte App erhalten haben. Muss in Snake Case und Großbuchstaben (`MY_OBJECT_NAME`) geschrieben werden. |
| `appPrefix` | Zeichenfolge | Eine Zeichenfolge, die dem Singular- oder Pluralnamen des Objekts in der Benutzeroberfläche von HubSpot vorangestellt ist, um es von anderen Objekten zu unterscheiden. In diesem Beispiel würde das `appPrefix` von `Vroom` und die `singularForm` von `Car` dazu führen, dass „Vroom Car“ auf der Benutzeroberfläche angezeigt wird. |
| `description`\* | String | die Beschreibung des Objekts, das in HubSpot angezeigt wird. |
| `singularForm`\* | Zeichenfolge | Die Singularform des Objektnamens. |
| `pluralForm`\* | Zeichenfolge | Die Pluralform des Objektnamens. |
| `properties`\* | Array | Eine Liste der für das Objekt definierten CRM-Eigenschaften. Eigenschaften werden mit denselben Feldern wie die [Eigenschaften-API](/docs/api-reference/crm-properties-v3/guide) definiert. Den resultierenden Eigenschaften wird bei der Erstellung automatisch `a_` vorangestellt (z. B `a12345_make`). Sie sollten das Präfix nicht in die Konfigurationsdatei aufnehmen. |
| `primaryDisplayLabelPropertyName`\* | Zeichenfolge | Der Name der Eigenschaft, die als [primäre Anzeige-Eigenschaft](https://knowledge.hubspot.com/object-settings/create-custom-objects#:~:text=object%27s%20singular%20name.-,Primary%20display%20property,-%3A%20the%20property%20used) verwendet werden soll. Der Wert muss mit dem in der `properties`-Liste angegebenen Namen übereinstimmen (d. h., er sollte nicht das generierte `a_`-Präfix enthalten). |
| `secondaryDisplayLabelPropertyNames`\* | Array | Die Liste der Eigenschaften, die als [sekundäre Anzeigeeigenschaften](https://knowledge.hubspot.com/object-settings/create-custom-objects#:~:text=Secondary%20properties%3A) verwendet werden sollen. Der Wert muss mit dem in der `properties`-Liste angegebenen Namen übereinstimmen (d. h., er sollte nicht das generierte `a_`-Präfix enthalten). |
| `settings`\* | Objekt | Ein Objekt, das Objekteinstellungen enthält. |
| `hasRecordPage`\* | BoolescherWert | Bestimmt, ob Datensatzseiten für Instanzen dieses App-Objekts vorhanden sind. Bei Festlegung auf `false` ist die Indexseite weiterhin vorhanden, enthält jedoch keine Links zu den einzelnen Datensatzseiten. |
| `allowsUserCreatedRecords`\* | BoolescherWert | Bestimmt, ob Endbenutzer Datensätze mit dem Objekt erstellen können. Wenn diese Option auf `false` festgelegt ist, können Benutzer keine Datensätze in HubSpot erstellen. |
| `hasEngagements`\* | BoolescherWert | Bestimmt, ob die App-Objektdatensätze Aktivitäten/Interaktionen unterstützen. Wenn diese Option auf `false` festgelegt ist, enthalten App-Datensatzseiten keine Interaktionfunktionen wie die Registerkarte „Aktivität“ oder aktivitätsbezogene Chronik-Filter. |
> [!NOTE]
>
> Der vollständig qualifizierte Name (Fully Qualified Name, FQN) für Ihr App-Objekt lautet `a_`. Zum Beispiel: Wenn Ihr `appId` `16858319` und der Name des App-Objekts `CARS` lautet , dann wäre `a16858319_CARS`der FQN. Sie verwenden den FQN, wenn Sie Bereichswerte für Ihre App-Objekte festlegen.
## App-Design
Um ein App-Objekt zu erstellen, fügen Sie eine `app-hsmeta.json`-Konfigurationsdatei in das `app`-Verzeichnis ein.
```shell theme={null}
...
├──src
│ ├── app/
│ │ └── app-hsmeta.json/
└──
```
Nachfolgend finden Sie die Konfigurationsoptionen für `app-hsmeta.json`.
> **Änderungszusammenfassung**
>
> Beachten Sie die folgenden Änderungen für App-Kartenkonfigurationsdateien:
>
> * `uid`-, `type`- und `config`-Felder der obersten Ebene wurden hinzugefügt.
> * `extensions`-Feld wurde entfernt.
> * `distribution`-Feld wurde hinzugefügt.
```json theme={null}
{
"uid": "app_object_poc_app",
"type": "app",
"config": {
"description": "An example to demonstrate how to build an app with an app object on developer projects.",
"name": "my first app object app",
"distribution": "marketplace",
"auth": {
"type": "oauth",
"redirectUrls": ["http://localhost:3000/oauth-callback"],
"requiredScopes": ["crm.objects.contacts.read", "crm.objects.contacts.write"],
"optionalScopes": [],
"conditionallyRequiredScopes": []
},
"permittedUrls": {
"fetch": ["https://api.hubapi.com"],
"iframe": [],
"img": []
},
"support": {
"supportEmail": "support@example.com",
"documentationUrl": "https://example.com/docs",
"supportUrl": "https://example.com/support",
"supportPhone": "+18005555555"
}
}
}
```
> **[Beispiel auf GitHub anzeigen](https://github.com/robrown-hubspot/hubspot-project-components-ua-app-objects-beta/blob/main/projects/app-object-getting-started-template/src/app/app-hsmeta.json)**
### \*-hsmeta.json-Felder für das App-Schema
Mit \* markierte Felder sind Pflichtfelder.
| Feld | Typ | Beschreibung |
| - | - | - |
| `uid`\* | Zeichenfolge | Eine interne eindeutige ID für die App. Sie muss innerhalb des Projekts global eindeutig sein und kann eine beliebige Zeichenfolge mit bis zu 64 Zeichen aufweisen. Zeichen können in Groß- oder Kleinbuchstaben geschrieben werden und Ziffern, Unterstriche (`_`), Bindestriche (`-`) und Punkte (`.`) enthalten. |
| `type`\* | Zeichenfolge | Der Typ der Komponente. Muss mit dem Namen des übergeordneten Ordners (`app`) übereinstimmen. |
| `description`\* | Zeichenfolge | Eine Beschreibung, was die App für den installierenden Benutzer tut. Kann eine beliebige Zeichenfolge mit bis zu 8.192 Zeichen sein. |
| `name`\* | Zeichenfolge | Dies ist der Name der App, der in HubSpot angezeigt wird. Kann eine beliebige Zeichenfolge mit bis zu 200 Zeichen sein. Darf nicht mit einem Leerzeichen beginnen oder enden. |
| `distribution`\* | Zeichenfolge | Die Methode der App-Verteilung. Muss auf `marketplace` festgelegt sein, damit die App für ein App Marketplace-Listing berechtigt ist. |
| `auth`\* | Objekt | Ein Objekt, das die Details der Authentifizierungsmethode der App enthält. Weitere Informationen finden Sie in der [Tabelle zur Authentifizierung](#auth-fields). |
| `permittedUrls` | Objekt | Ein Array, das die URLs enthält, die die App aufrufen darf. URLs müssen dem HTTPS-Schema folgen und eine [Autorität](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Web_mechanics/What_is_a_URL#authority) enthalten, ggf. gefolgt von einem optionalen Pfadpräfix. |
| `supportEmail` | Zeichenfolge | Eine gültige E-Mail-Adresse, an die sich Benutzer wenden können, wenn sie Support benötigen. |
| `documentationUrl` | Zeichenfolge | Die externe URL, zu der Benutzer navigieren können, um die Begleitdokumentation zu erhalten. Muss HTTPS verwenden. |
| `supportUrl` | Zeichenfolge | Die externe URL, zu der Benutzer navigieren können, um zusätzlichen Support zu erhalten. Muss HTTPS verwenden. |
| `supportPhone` | Zeichenfolge | Die Telefonnummer, die Benutzer kontaktieren können, wenn sie Support benötigen. Muss mit einem Pluszeichen (`+`) beginnen. |
### Authentifizierungsfelder
Mit \* markierte Felder sind Pflichtfelder.
| Feld | Typ | Beschreibung |
| - | - | - |
| `type`\* | Zeichenfolge | Die Art der Authentifizierung. Muss auf `oauth` festgelegt sein, damit die App die OAuth-Authentifizierung verwenden kann. |
| `redirectUrls`\* | Array | Eine Liste von URLs, zu denen der OAuth-Prozess zurückleiten darf. Jede App muss über mindestens eine derartige URL verfügen und HTTPS verwenden. Die einzige Ausnahme ist, dass für `http://localhost` das Testen erlaubt ist. |
| `requiredScopes`\* | Array | Eine Liste der erforderlichen Bereiche Ihrer App. Jede App muss mindestens einen Bereich enthalten, wobei es erforderlich ist, dass der installierende Benutzer diese Bereiche zulässt, wenn die App erfolgreich installiert werden soll. [Erfahren Sie im Folgenden mehr über Bereiche](#scopes). |
| `optionalScopes` | Array | Eine Liste der optionalen Bereiche Ihrer App. Diese Bereiche können bei der Installation von der Autorisierung ausgeschlossen werden, wenn der Account oder der Benutzer, der die App installiert, nicht über entsprechende Berechtigungen verfügt. In diesem Fall wird der Bereich nicht in das resultierende Aktualisierungs- oder Zugriffs-Token aufgenommen. [Erfahren Sie im Folgenden mehr über Bereiche](#scopes). |
| `conditionallyRequiredScopes` | Array | Eine Liste von Bereichen, die nur erforderlich sind, wenn sie im `scope`-Abfrageparameter der Installations-URL enthalten sind. [Erfahren Sie im Folgenden mehr über Bereiche](#scopes). |
### Bereiche
Im `auth`-Feld einer App-Konfigurationsdatei können Sie drei [Arten von Bereichen](/docs/apps/legacy-apps/public-apps/overview#scope-types) angeben: erforderliche Bereiche, bedingt erforderliche Bereiche und optionale Bereiche. Für diese Phase der Beta sollten Sie nur Ihre App-Objektbereiche als `conditionallyRequiredScopes`einschließen. Auf diese Weise können Sie Ihre neuen Funktionen für bestimmte Kunden isolieren, indem Sie die App-Objektbereiche in die Installations-URL aufnehmen.
App-Objektbereiche haben das folgende Format:
`crm.app.schemas..read`
Für ein App-Objekt mit dem FQN `a16858319_cars` wäre der `read`-Bereich beispielsweise:
`crm.app.schemas.a16858319_cars.read`.
Ihre App muss mindestens den oben genannten `read`-Bereich enthalten, damit Kunden auf das Objekt zugreifen können. Es wird empfohlen, alle App-Objektbereiche in Ihrer App zu berücksichtigen, wie im Folgenden angegeben.
```json theme={null}
"auth": {
"type" : "oauth",
"redirectUrls": ["http://localhost:3000/oauth-callback"],
"requiredScopes": [
"crm.objects.contacts.read",
"crm.objects.contacts.write",
"crm.app.objects.a12345_MY_APP_OBJECT.view",
"crm.app.objects.a12345_MY_APP_OBJECT.create",
"crm.app.objects.a12345_MY_APP_OBJECT.edit",
"crm.app.schemas.a12345_MY_APP_OBJECT.read",
"crm.app.objects.a12345_MY_APP_OBJECT.merge",
"crm.app.objects.a12345_MY_APP_OBJECT.delete",
"crm.app.schemas.a12345_MY_APP_OBJECT.properties.write"
],
"optionalScopes": [],
"conditionallyRequiredScopes": []
},
```
Eine vollständige Liste der verfügbaren Bereiche finden Sie in der [Referenz zu Bereichen](/docs/apps/legacy-apps/authentication/scopes).
## Definition von Webhooks-Komponenten
Um einen Satz von Webhook-Abonnements für Ihre App zu definieren, müssen Sie ein `webhooks`-Verzeichnis zusammen mit einer `*-hsmeta.json`-Konfigurationsdatei in das Projekt einschließen.
```shell theme={null}
├──src
│ ├── app/
│ │ └── app-hsmeta.json
│ │ └── ...
│ │ └── webhooks/
│ │ └── webhooks-hsmeta.json
└──
```
Nachfolgend finden Sie die verfügbaren Konfigurationsoptionen für die `*-hsmeta.json`-Datei.
```json theme={null}
{
"uid": "webhooks",
"type": "webhooks",
"config": {
"settings": {
"targetUrl": "https://example.com/webhook",
"maxConcurrentRequests": 10
},
"subscriptions": {
"crmObjects": [
{
"subscriptionType": "object.creation",
"objectType": "contact",
"active": true
},
{
"subscriptionType": "object.propertyChange",
"objectType": "car_app_object",
"propertyName": "carProperty",
"active": true
}
],
"legacyCrmObjects": [
{
"subscriptionType": "contact.propertyChange",
"propertyName": "lastname",
"active": true
},
{
"subscriptionType": "contact.deletion",
"active": true
}
],
"hubEvents": [
{
"subscriptionType": "contact.privacyDeletion",
"active": true
}
]
}
}
}
```
### \*-hsmeta.json-Felder für Webhooks
Mit \* markierte Felder sind Pflichtfelder.
| Feld | Typ | Beschreibung |
| - | - | - |
| `uid`\* | Zeichenfolge | Eine interne eindeutige ID für die Webhook-Komponente. |
| `type`\* | Zeichenfolge | Der Typ der Komponente, die in diesem Fall `webhooks` sein sollte. |
| `settings`\* | Objekt | Ein Objekt, das zwei Felder angibt: `targetUrl` ist die öffentlich verfügbare URL für HubSpot-Aufrufe, an die Event-Payloads geliefert werden, und `maxConcurrentRequests` stellt den oberen Schwellenwert von HTTP-Anfragen dar, die HubSpot in einem bestimmten Zeitraum vornimmt. |
| `subscriptions`\* | Objekt | Ein Objekt, das die Abonnementtypen angibt, die Ihre App abonnieren wird. |
| `crmObjects` | Array | Ein Array mit Definitionen für Event-Abonnements. Dies ist das aufzunehmende Standard-Array, das für alle Events im neuen Format (`object.*`) zu verwenden ist. Klassische Webhook-Abonnementtypen sollten aber je nach Event in `legacyCrmObjects`- und `hubEvents` -Arrays enthalten sein. |
| `legacyCrmObjects` | Array | Ein Arraymit klassischen Abonnementtypen wie `contact.creation` und `deal.deletion`. |
| `hubEvents` | Array | Ein Array mit den klassischen Abonnementtypen `contact.privacyDeletion` und `conversation.*` |
Für jedes `subscription` Objekt können die folgenden Felder angegeben werden, je nachdem, welcher Abonnementdefinitionstyp abonniert wird (d. h. `crmObjects`, `legacyCrmObjects`bzw. `hubEvents`) oder abhängig davon, ob Sie eine bestimmte Eigenschaftsänderung abonnieren (z B `contact.propertyChange`).
| Feld | Typ | Beschreibung |
| - | - | - |
| `subscriptionType` | Zeichenfolge | Der Typ des abonnierten Events. |
| `objectType` | Zeichenfolge | Für Abonnements, die innerhalb des `crmObjects`-Arrays angegeben sind, gibt dies das CRM-Objekt an, das Ihre App abonniert. Um Änderungen an einem App-Objekt zu abonnieren, geben Sie den Namen Ihres App-Objekts in dieses Feld ein (z. B. `car_app_object`). |
| `propertyName` | Zeichenfolge | Bei Abonnements von Eigenschaftenänderungen gibt dies an, durch welche Eigenschaft das Webhook-Event ausgelöst wird. |
| `active` | Boolescher Wert | Gibt an, ob Webhook-Events für dieses Abonnement ausgelöst werden. |
## Schema der App-Karte
Um eine App-Karte zu erstellen, die auf einer App-Objekt-Datensatzseite angezeigt wird, schließen Sie ein `cards`-Komponentenverzeichnis zusammen mit einer Konfigurationsdatei in das Projekt ein.
```shell theme={null}
├──src
│ ├── app/
│ │ └── app-hsmeta.json
│ │ └── ...
│ │ └── cards/
│ │ └── my-app-card-hsmeta.json
│ │ └── MyCard.jsx
└──
```
* Stellen Sie sicher, dass Sie `hs project upload` ausgeführt haben, nachdem Sie Ihre App-Objektkomponente und die zugehörigen Konfigurationsdateien erstellt haben.
* Fügen Sie in Ihrer `my-app-card-hsmeta.json`-Datei die UID Ihres App-Objekts zum `objectTypes`-Array hinzu (z. B . hier `"app_object_uid"`). Jedes der verfügbaren Felder in der `.json`-Datei ist in der folgenden [Tabelle](#app-card-*-hsmeta.json-fields) aufgeführt.
> **Änderungszusammenfassung**
>
> Beachten Sie die folgenden Änderungen für App-Kartenkonfigurationsdateien:
>
> * `uid`-, `type`- und `config`-Felder der obersten Ebene wurden hinzugefügt.
> * Das `module`-Feld wurde in `entrypoint` umbenannt.
> * Das `title`-Feld wurde in `name` umbenannt.
> * Das `objectTypes`-Feld wurde vereinfacht, um ein Zeichenfolgen-Array zu akzeptieren.
```json theme={null}
{
"uid": "my-app-card",
"type": "card",
"config": {
"name": "My app card",
"description": "An example description of the card, which lives on contact records.",
"previewImage": {
"file": "./preview.png",
"altText": "A short description of the preview image"
},
"entrypoint": "/app/cards/MyCard.jsx",
"location": "crm.record.tab",
"objectTypes": ["contacts", "app_object_uid"]
}
}
```
* Nachdem Sie die Änderungen an Ihrer `example-card-hsmeta.json`-Datei gespeichert haben, führen Sie `hs project upload` aus.
Karten werden automatisch zur Standardansicht für App-Objekte hinzugefügt. Wenn die Karte nicht automatisch angezeigt wird, erfahren Sie hier, wie Sie [Karten zu CRM-Datensätzen hinzufügen](/docs/apps/developer-platform/add-features/ui-extensibility/app-cards/create-an-app-card#view-the-card-in-hubspot).
> **[Beispiel auf GitHub anzeigen](https://github.com/robrown-hubspot/hubspot-project-components-ua-app-objects-beta/blob/main/projects/app-object-getting-started-template/src/app/app-hsmeta.json)**
### Felder für \*-hsmeta.json-App-Karten
Mit \* markierte Felder sind Pflichtfelder.
| Feld | Typ | Beschreibung |
| - | - | - |
| `uid`\* | Zeichenfolge | Die eindeutige ID der Karte. Sie kann eine beliebige Zeichenfolge sein, sollte aber die Karte sinnvoll identifizieren. HubSpot identifiziert die Karte anhand dieser ID, sodass Sie den Titel der Karte ändern können, ohne historische oder zustandsbehaftete Daten, wie z. B. die Position im CRM-Datensatz, zu entfernen. |
| `type` | Zeichenfolge | Der Typ der Komponente, die in diesem Fall `card` sein sollte. |
| `config` | Objekt | Ein Objekt, das Konfigurationsdetails enthält. |
| `name`\* | Zeichenfolge | Der Titel der Karte, wie auf der Benutzeroberfläche von HubSpot angezeigt. |
| `description` | Zeichenfolge | Eine Beschreibung der Karte. |
| `previewImage` | Objekt: | Ein Objekt, das die `file`- und `altText`-Felder enthält. Das `file`-Feld ist der relative Pfad zum Vorschaubild. Gültige Dateierweiterungen sind png, jpeg, jpg oder gif. Die maximale Dateigröße beträgt 5.0 MB. Das `altText`-Feld ist eine Kurzbeschreibung des Bildes. |
| `entrypoint`\* | Zeichenfolge | Der Dateipfad des Front-End-React-Codes der Karte. |
| `location`\* | `crm.record.tab` \| `crm.record.sidebar` \| `helpdesk.sidebar` | Wo die Karte auf der Benutzeroberfläche von HubSpot angezeigt wird. Erfahren Sie mehr über [den Speicherort der Erweiterung](/docs/apps/developer-platform/add-features/ui-extensibility/app-cards/reference#extension-location). |
| `objectTypes`\* | Array | Die Typen von CRM-Datensätzen, in denen die Karte angezeigt wird. |
## App-Objektzuordnungen
Um Verknüpfungen zwischen Ihrem App-Objekt und anderen CRM-Objekten zu ermöglichen, fügen Sie ein `app-object-associations`-Komponentenverzeichnis zusammen mit einer Konfigurationsdatei in das Projekt ein.
```shell theme={null}
├── src
│ ├── app/
│ │ └── app-hsmeta.json
│ │ └── ...
│ │ └── app-object-associations/
│ │ └── my-app-object-association-hsmeta.json
└──
```
Nachfolgend sind die verfügbaren Konfigurationsoptionen für App-Objekte (`*-association-hsmeta.json`) aufgeführt.
```json theme={null}
{
"uid": "car_to_contact_association",
"type": "app-object-association",
"config": {
"firstObjectType": "car-app-object",
"secondObjectType": "CONTACT"
}
}
```
### \*-Zuordnungs-hsmeta.json-Felder zur Zuordnung
Mit \* markierte Felder sind Pflichtfelder.
| Feld | Typ | Beschreibung |
| - | - | - |
| `uid`\* | Zeichenfolge | Eine interne eindeutige ID für die App. Muss innerhalb des Projekts global eindeutig sein. |
| `type`\* | Zeichenfolge | Der Typ der Komponente. Muss mit dem Namen des übergeordneten Ordners (`app-object-association`) übereinstimmen. |
| `config`\* | Objekt | Ein Objekt, das die Konfiguration der Objekt-Zuordnung enthält. |
| `firstObjectType`\* | Zeichenfolge | Das erste Objekt in der Zuordnung. Kann entweder ein App-Objekt oder ein HubSpot-CRM-Objekt sein. App-Objekte werden mit der in ihrer Quelldatei angegebenen `uid` referenziert. Standardobjekte werden mit ihrem jeweiligen `fullyQualifiedName` referenziert. Die resultierende Zuordnung ist bidirektional, sodass die Reihenfolge der Feldwerte willkürlich ist. |
| `secondObjectType`\* | Zeichenfolge | Das zweite Objekt in der Zuordnung. Siehe `firstObjectType` für Details. |
# Ein Webhook-Abonnement konfigurieren (BETA)
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/configure-webhooks
Erfahren Sie, wie Sie ein Webhook-Abonnement auf der neuesten Version der Entwicklerplattform (BETA) definieren.
Um eine Anzahl von Webhook-Abonnements für eine App auf der neuen Entwicklerplattform zu definieren, fügen Sie dem Projekt ein `webhooks`-Verzeichnis zusammen mit einer `*-hsmeta.json`-Konfigurationsdatei bei.
## Verzeichnisstruktur
```shell theme={null}
├──src
│ ├── app/
│ │ └── app-hsmeta.json
│ │ └── ...
│ │ └── webhooks/
│ │ └── webhooks-hsmeta.json
└──
```
## Webhook-Berichtskonfiguration
Nachfolgend finden Sie die verfügbaren Konfigurationsoptionen für die `*-hsmeta.json`-Datei.
```json theme={null}
{
"uid": "webhooks",
"type": "webhooks",
"config": {
"settings": {
"targetUrl": "https://example.com/webhook",
"maxConcurrentRequests": 10
},
"subscriptions": {
"crmObjects": [
{
"subscriptionType": "object.creation",
"objectType": "contact",
"active": true
}
],
"legacyCrmObjects": [
{
"subscriptionType": "contact.propertyChange",
"propertyName": "lastname",
"active": true
},
{
"subscriptionType": "contact.deletion",
"active": true
}
],
"hubEvents": [
{
"subscriptionType": "contact.privacyDeletion",
"active": true
}
]
}
}
}
```
Mit \* markierte Felder sind Pflichtfelder.
| Feld | Typ | Beschreibung |
| - | - | - |
| `uid`\* | Zeichenfolge | Eine interne eindeutige ID für die Webhook-Komponente. |
| `type`\* | Zeichenfolge | Der Typ der Komponente, die in diesem Fall `webhooks` sein sollte. |
| `settings`\* | Objekt | Ein Objekt, das zwei Felder angibt: `targetUrl` ist die öffentlich verfügbare URL für HubSpot-Aufrufe, an die Event-Payloads geliefert werden, und `maxConcurrentRequests` stellt den oberen Schwellenwert von HTTP-Anfragen dar, die HubSpot in einem bestimmten Zeitraum vornimmt. |
| `subscriptions`\* | Objekt | Ein Objekt, das die Abonnementtypen angibt, die Ihre App abonnieren wird. |
| `crmObjects` | Array | Ein Array mit Definitionen für Event-Abonnements. Dies ist das aufzunehmende Standard-Array, das für alle Events im [neuen Format](/docs/apps/legacy-apps/public-apps/create-generic-webhook-subscriptions) (`object.*`) verwendet werden sollte. [Klassische Webhook-Abonnementtypen](/docs/api-reference/webhooks-webhooks-v3/guide#webhook-subscriptions) sollten aber je nach Event in `legacyCrmObjects`- und `hubEvents` -Arrays enthalten sein. |
| `legacyCrmObjects` | Array | Ein Arraymit [klassischen Abonnementtypen](/docs/api-reference/webhooks-webhooks-v3/guide#webhook-subscriptions) wie `contact.creation` und `deal.deletion`. |
| `hubEvents` | Array | Ein Array mit den klassischen Abonnementtypen `contact.privacyDeletion` und `conversation.*` |
Für jedes `subscription` Objekt können die folgenden Felder angegeben werden, je nachdem, welcher Abonnementdefinitionstyp abonniert wird (d. h. `crmObjects`, `legacyCrmObjects`bzw. `hubEvents`) oder abhängig davon, ob Sie eine bestimmte Eigenschaftsänderung abonnieren (z B `contact.propertyChange`).
| Feld | Typ | Beschreibung |
| - | - | - |
| `subscriptionType` | Zeichenfolge | Der Typ des abonnierten Events. |
| `objectType` | Zeichenfolge | Für Abonnements, die innerhalb des `crmObjects`-Arrays angegeben sind, gibt dies das CRM-Objekt an, das Ihre App abonniert. |
| `propertyName` | Zeichenfolge | Bei Abonnements von Eigenschaftenänderungen gibt dies an, durch welche Eigenschaft das Webhook-Event ausgelöst wird. |
| `active` | Boolescher Wert | Gibt an, ob Webhook-Events für dieses Abonnement ausgelöst werden. |
# Eine benutzerdefinierte Workflow-Aktion definieren (BETA)
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/custom-workflow-actions
Erfahren Sie, wie Sie eine benutzerdefinierte Workflow-Aktion auf der neuesten Version der Entwicklerplattform (BETA) definieren können.
Um eine [benutzerdefinierte Workflow-Aktion](/docs/api-reference/automation-actions-v4-v4/guide) für eine App auf der neuen Entwicklerplattform zu definieren, schließen Sie ein `workflow-actions`-Verzeichnis zusammen mit einer `*-hsmeta.json`-Konfigurationsdatei in das Projekt ein.
## Struktur des Projektverzeichnisses
```shell theme={null}
├──src
│ ├── app/
│ │ └── app-hsmeta.json
│ │ └── ...
│ │ └── workflow-actions/
│ │ └── custom-action-hsmeta.json
└──
```
## Definition einer benutzerdefinierten Workflow-Aktion
Nachfolgend finden Sie die verfügbaren Konfigurationsoptionen für die `*-hsmeta.json`-Datei.
```json theme={null}
{
"uid": "simple_notification_action",
"type": "workflow-action",
"config": {
"actionUrl": "https://example.com",
"isPublished": false,
"supportedClients": [
{
"client": "WORKFLOWS"
}
],
"inputFields": [
{
"typeDefinition": {
"name": "message",
"type": "string",
"fieldType": "textarea"
},
"supportedValueTypes": ["STATIC_VALUE"],
"isRequired": true
},
{
"typeDefinition": {
"name": "priority",
"type": "enumeration",
"fieldType": "select",
"options": [
{
"value": "high",
"label": "High Priority"
},
{
"value": "normal",
"label": "Normal Priority"
},
{
"value": "low",
"label": "Low Priority"
}
]
},
"supportedValueTypes": ["STATIC_VALUE"],
"isRequired": true
}
],
"labels": {
"en": {
"actionName": "My Custom Action (via Projects V2)",
"actionDescription": "Sends a notification with custom message and priority level",
"actionCardContent": "Send {{priority}} priority notification",
"inputFieldLabels": {
"message": "Notification Message",
"priority": "Priority Level"
},
"inputFieldDescriptions": {
"message": "Enter the message to be sent in the notification",
"priority": "Select the priority level for this notification"
}
}
},
"objectTypes": ["CONTACT"]
}
}
```
Mit \* markierte Felder sind Pflichtfelder.
| Feld | Typ | Beschreibung |
| - | - | - |
| `uid`\* | Zeichenfolge | Eine interne eindeutige ID für die Workflow-Aktion. |
| `type`\* | Zeichenfolge | Der Typ der Komponente, die in diesem Fall `workflow-action` sein sollte. |
| `actionUrl`\* | Zeichenfolge | Die Webhook-URL der API zur Übermittlung einer Anfrage zur Ausführung eines Workflows. |
| `isPublished` | BoolescherWert | Bestimmt, ob die Definition in Accounts sichtbar ist, die Ihre App installiert haben. Standardmäßig ist dies auf `false` festgelegt. |
| `supportedClients`\* | Array von Objekten | Gibt die Clients an, die von der benutzerdefinierten Workflow-Aktion unterstützt werden. Jedes Objekt im Array sollte einen Client-Schlüssel mit einem Zeichenfolgenwert haben, der den Client-Typ angibt (z. B. `WORKFLOWS`). |
| `inputFields` | Array | Die Werte für die Eingaben, die der Benutzer ausgefüllt hat. |
| `typeDefinition.name` | Zeichenfolge | Der Name oder Schlüssel des Eingabefelds. |
| `typeDefinition.type` | Zeichenfolge | Der Werttyp, der für das Eingabefeld gelten soll. |
| `typeDefinition.fieldType` | Zeichenfolge | Der Feldtyp, der den Benutzern angezeigt wird, die den Workflow erstellen. |
| `typeDefinition.options` | Array | Dieses Feld enthält für Aufzählungstypen eine Liste von Optionen. Jede Option muss über einen `value` verfügen, der auf den Eingaben des Benutzers basiert, und ein `label`, das die Option im Workflows-Tool erkennen lässt. |
| `inputFieldDependencies` | Array | Eine Liste von Regeln, die die Beziehungen zwischen zwei oder mehr Eingaben basierend auf ihrem `dependencyType` definieren. Erfahren Sie mehr dazu in [diesem Beispiel](/docs/api-reference/automation-actions-v4-v4/guide#example-%233). |
| `labels.`\* | Zeichenfolge | Gebietsschemaschlüssel, der der Gebietsschemadefinition zugeordnet ist. Er muss mindestens ein englisches Label (`en`) umfassen und seine Definition muss klar bestimmt sein. |
| `labels..inputFieldDescriptions` | Objekt | Ein Objekt, das die Details für die Eingaben für Ihre Aktion definiert. Im obigen Beispiel enthält dieses Objekt `message`- und `priority`-Felder. |
| `labels..inputFieldOptionLabels` | Objekt | Ein Objekt, das erforderlich ist, wenn Ihr(e) Eingabefeld(er) über Optionen verfügt/en. Bietet eine Zuordnung von Eingabefeldoptionslabeln, die durch den Wert oder das Label der Option geschlüsselt sind. |
| `labels..outputFieldLabels` | Objekt | Ein Objekt, das die Definitionen von `outputFields` den entsprechenden Label zuordnet, die im Workflows-Tool angezeigt werden. |
| `labels..actionName`\* | Zeichenfolge | Der Name der Aktion, wie im Bereich *Aktion auswählen* im Workflows-Editor angezeigt. |
| `labels..appDisplayName`\* | Zeichenfolge | Der Name des Abschnitts im Bereich *Aktion auswählen*, in dem alle Aktionen für die App angezeigt werden. Wenn `appDisplayName` für mehrere Aktionen definiert ist, wird die erstgefundene verwendet. |
| `labels..actionCardContent` | Zeichenfolge | Eine zusammengefasste Beschreibung, die auf der Karte der Aktion angezeigt wird. |
| `labels..executionRules` | Objekt | Ein Objekt, das die Definitionen von Ihren `executionRules` Nachrichten zuordnet, die im Rahmen der Ausführung im Workflow-Verlauf angezeigt werden. |
| `objectTypes` | Array | Die verfügbaren CRM-Objekttypen, mit denen diese Aktion verwendet werden kann. Ist hier kein Wert vorhanden, ist die Aktion für alle Objekttypen verfügbar. |
| `outputFields` | Array | Die Werte, die die Aktion ausgibt und die bei späteren Aktionen im Workflow verwendet werden können. Eine benutzerdefinierte Aktion kann einen Output von 0, 1 oder mehrere Outputs haben. |
| `executionRules` | Objekt | Eine Liste der Definitionen, die Sie angeben können, damit dem Benutzer, der den Workflow erstellt, Fehler von Ihrem Dienst angezeigt werden. |
| **Verwendete Funktion:** | | |
```json theme={null}
//
exports.main = (event, callback) => {
callback({
"data": {
"myObjectId": event["object"]["objectId"],
"myField": event["inputFields"]["widgetName"]
}
});
}
```
**Erwartete Ausgabe:**
```json theme={null}
//
{
"data": {
"myObjectId": 614,
"myField": "My Widget Name"
}
}
```
## Eingabefelder
Die Eingabefelddefinitionen entsprechen dem folgenden Format:
* `name`: der interne Name des Eingabefelds, getrennt von seinem Label. Das in der Benutzeroberfläche angezeigte Label muss über den [labels-Abschnitt](#labels) der benutzerdefinierten Aktionsdefinition definiert werden.
* `type`: der Typ des Werts, der für die Eingabe erforderlich ist.
* `fieldType`: gibt an, wie das Eingabefeld in der Benutzeroberfläche gerendert werden soll. Eingabefelder imitieren CRM-Eigenschaften. Erfahren Sie in diesem Artikel mehr über [gültige `type`- und `fieldType`-Kombinationen](/docs/api-reference/crm-properties-v3/guide#property-type-and-fieldtype-values)
* `supportedValueTypes` hat zwei gültige Werte:
* `OBJECT_PROPERTY`: Der Benutzer kann eine Eigenschaft vom aufgenommenen Objekt oder eine Ausgabe aus einer vorherigen Aktion auswählen, die als Wert für das Feld verwendet werden soll.
* `STATIC_VALUE`: Dies sollte in allen anderen Fällen verwendet werden. Es bedeutet, dass der Benutzer selbst einen Wert eingeben muss.
* `isRequired`: Hiermit wird festgelegt, ob der Benutzer einen Wert für diese Eingabe angeben muss oder nicht
Eingabefelddefinitionen sollten wie folgt formatiert sein:
```json theme={null}
//
{
"typeDefinition": {
"name": "staticInput",
"type": "string",
"fieldType": "text"
},
"supportedValueTypes": ["STATIC_VALUE"],
"isRequired": true
}
```
Sie können auch Hartcodierungsoptionen für den Benutzer auswählen:
```json theme={null}
//
{
"typeDefinition": {
"name": "widgetColor",
"type": "enumeration",
"fieldType": "select",
"options": [
{
"value": "red",
"label": "Red"
},
{
"value": "blue",
"label": "Blue"
},
{
"value": "green",
"label": "Green"
}
]
},
"supportedValueTypes": ["STATIC_VALUE"]
}
```
### Verwenden externer Daten
Anstelle von Optionen für Hartcodierungsfelder können Sie auch externe Daten mit externen Datenfeldern abrufen. Sie können beispielsweise eine Liste mit Meetingprojekten oder eine Liste mit Produkten als Eingaben abrufen.
Um Eingabedaten an andere Eingaben zu übergeben, müssen Sie `inputFieldDependencies`. Erfahren Sie mehr über das [Festlegen Ihrer benutzerdefinierten Aktion](#define-your-custom-action).
Das Eingabefeld sollte wie folgt formatiert sein:
```json theme={null}
//
{
"typeDefinition": {
"name": "optionsInput",
"type": "enumeration",
"fieldType": "select",
"optionsUrl": "https://your-url-here.com"
},
"supportedValueTypes": ["STATIC_VALUE"]
}
```
Die an das `optionsURL` gesendete Payload ist wie folgt formatiert:
```json theme={null}
//
{
"origin": {
"portalId": 1,
"actionDefinitionId": 2,
"actionDefinitionVersion": 3
},
"objectTypeId": "0-1",
"inputFieldName": "optionsInput",
"inputFields": {
"widgetName": {
"type": "OBJECT_PROPERTY",
"propertyName": "widget_name"
},
"widgetColor": {
"type": "STATIC_VALUE",
"value": "blue"
}
},
"fetchOptions": {
"q": "option label",
"after": "1234="
}
}
```
| Feld | Beschreibung |
| - | - |
| `portalId` | Die ID des HubSpot-Accounts. |
| `actionDefinitionId` | Die Definition-ID Ihrer benutzerdefinierten Aktion. |
| `actionDefinitionVersion` | Die Definitionsversion Ihrer benutzerdefinierten Aktion. |
| `objectTypeId` | Der [Workflow-Objekttyp](/docs/guides/crm/understanding-the-crm#object-type-ids), in dem die Aktion verwendet wird. |
| `inputFieldName` | Das Eingabefeld, für das Sie Optionen abrufen. |
| `inputFields` | Die Werte für die Felder, die bereits vom Benutzer des Workflows ausgefüllt wurden. |
| `q` | Die vom Benutzer angegebene Suchanfrage. Dies sollte verwendet werden, um die zurückgegebenen Optionen zu filtern. Dies wird nur berücksichtigt, wenn der vorherige Optionsabruf zurückgegeben `searchable: true` wurde und der Benutzer eine Suchanfrage eingegeben hat. |
| `after` | Der Paginierungscursor. Dies ist derselbe Paginierungscursor, der vom vorherigen Optionsabruf zurückgegeben wurde. Es kann verwendet werden, um nachzuverfolgen, welche Optionen bereits abgerufen wurden. |
Die erwartete Antwort sollte wie folgt formatiert sein:
```json theme={null}
//
{
"options": [
{
"label": "Big Widget",
"description": "Big Widget",
"value": "10"
},
{
"label": "Small Widget",
"description": "Small Widget",
"value": "1"
}
],
"after": "1234=",
"searchable": true
}
```
| Feld | Beschreibung |
| - | - |
| `q` | Der Paginierungscursor. Wenn dies angegeben ist, rendert die Workflows-App am unteren Rand der Optionsliste eine Schaltfläche zum Laden weiterer Ergebnisse, wenn ein Benutzer eine Option auswählt, und sobald die nächste Seite geladen wird, wird dieser Wert in der Anfrage-Payload unter `fetchOptions.after`berücksichtigt. Dieses Feld ist optional. |
| `after` | Der Standardwert ist `false`. Wenn dies `true` ist, rendert die Workflows-App ein Suchfeld, damit ein Benutzer die verfügbaren Optionen durch eine Suchanfrage filtern kann. Wenn eine Suchanfrage eingegeben wird, werden Optionen mit diesem Suchbegriff in der Anfrage-Payload unter `fetchOptions.q` erneut abgerufen. Dieses Feld ist optional. |
Beachten Sie im obigen Code, dass eine Seitennummerierung festgelegt ist, um die Anzahl der zurückgegebenen Optionen zu begrenzen. Dies weist den Workflow an, dass weitere Optionen geladen werden können.
Darüber hinaus wird die Liste der Optionen durchsuchbar gemacht, indem `searchable:true` eingeschlossen wird.
### Externe Daten ändern
Um externe Daten zu verwalten, können Sie zwei Hooks hinzufügen, um den Lebenszyklus eines Abrufs von Feldoptionen anzupassen:
* **`PRE_FETCH_OPTIONS`:** eine Funktion, die die von HubSpot gesendete Payload konfiguriert.
* **`POST_FETCH_OPTIONS`:** eine Funktion, die die Antwort Ihres Dienstes in ein Format umwandelt, das von HubSpot verstanden wird.
#### PRE\_FETCH\_OPTIONS
Wenn diese Funktion berücksichtigt wird, gilt sie für jedes Eingabefeld. Sie können es auf ein bestimmtes Eingabefeld anwenden, indem Sie eine `id` in der Funktionsdefinition angeben.
```json theme={null}
//
{
"functionType": "PRE_FETCH_OPTIONS",
"functionSource": "...",
"id": "inputField"
}
```
Die von HubSpot gesendete Payload ist wie folgt formatiert:
```json theme={null}
//
{
"origin": {
"portalId": 1,
"actionDefinitionId": 2,
"actionDefinitionVersion": 3
},
"inputFieldName": "optionsInput",
"webhookUrl": "https://myapi.com/hubspot/widget-sizes",
"inputFields": {
"widgetName": {
"type": "OBJECT_PROPERTY",
"propertyName": "widget_name"
},
"widgetColor": {
"type": "STATIC_VALUE",
"value": "blue"
},
"fetchOptions": {
"q": "option label",
"after": "1234="
}
}
}
```
| Feld | Beschreibung |
| - | - |
| `portalId` | Die ID des HubSpot-Accounts. |
| `actionDefinitionId` | Die Definition-ID Ihrer benutzerdefinierten Aktion. |
| `actionDefinitionVersion` | Die Definitionsversion Ihrer benutzerdefinierten Aktion. |
| `objectTypeId` | Der [Workflow-Objekttyp](/docs/guides/crm/understanding-the-crm#object-type-ids), in dem die Aktion verwendet wird. |
| `inputFieldName` | Das Eingabefeld, für das Sie Optionen abrufen. |
| `inputFields` | Die Werte für die Felder, die bereits vom Benutzer des Workflows ausgefüllt wurden. |
| `q` | Die vom Benutzer angegebene Suchanfrage. Dies sollte verwendet werden, um die zurückgegebenen Optionen zu filtern. Dies wird nur berücksichtigt, wenn der vorherige Optionsabruf zurückgegeben `searchable: true` wurde und der Benutzer eine Suchanfrage eingegeben hat. |
| `after` | Der Paginierungscursor. Dies ist derselbe Paginierungscursor, der vom vorherigen Optionsabruf zurückgegeben wurde. Es kann verwendet werden, um nachzuverfolgen, welche Optionen bereits abgerufen wurden. |
Die Antwort sollte dann wie folgt formatiert sein:
```json theme={null}
//
{
"webhookUrl": "https://myapi.com/hubspot",
"body": "{\"widgetName\": \"My new widget\", \"widgetColor\": \"blue\"}",
"httpHeaders": {
"My-Custom-Header": "header value"
},
"contentType": "application/json",
"accept": "application/json",
"httpMethod": "POST"
}
```
| Feld | Beschreibung |
| - | - |
| `webhookUrl` | Die von HubSpot aufzurufende Webhook-URL. |
| `body` | Der Anforderungstext. Dies ist optional. |
| `httpHeaders` | Eine Zuordnung der hinzuzufügenden benutzerdefinierten Anfrage-Header. Dies ist optional. |
| `contentType` | Der `Content-Type` der Anfrage Der Standardwert ist `application/json`. Dies ist optional. |
| `accept` | Die `Accept`-Art der Anfrage Der Standardwert ist `application/json`. Dies ist optional. |
| `httpMethod` | Die HTTP-Methode, mit der die Anfrage durchgeführt werden soll. Der Standardwert ist `POST`, aber andere gültige Werte sind `GET`, `POST`, `PUT`, `PATCH` und `DELETE`. Dies ist optional. |
#### POST\_FETCH\_OPTIONS
Um die Antwort in ein erwartetes Format zu analysieren, verwenden Sie gemäß den externen Datenfeldern eine `POST_FETCH_OPTIONS`-Funktion. Die Definition einer `POST_FETCH_OPTIONS`-Funktion entspricht der einer `PRE_FETCH_OPTIONS`-Funktion. Wenn externe Datenabrufoptionen definiert sind, wird ein Dropdown-Menü in den Eingabeoptionen für die Aktion gerendert.
```json theme={null}
//
{
"functionType": "POST_FETCH_OPTIONS",
"functionSource": "...",
"id": "inputField"
}
```
Die Funktionseingabe ist folgendermaßen formatiert:
```json theme={null}
//
{
// The requested field key
"fieldKey": "widgetSize",
// The webhook response body from your service
"responseBody": "{\"widgetSizes\": [10, 1]}"
}
```
Die Funktionsausgabe ist folgendermaßen formatiert:
```json theme={null}
//
{
"options": [
{
"label": "Big Widget",
"description": "Big Widget",
"value": "10"
},
{
"label": "Small Widget",
"description": "Small Widget",
"value": "1"
}
]
}
```
## Ausgabefelder
Verwenden Sie Ausgabefelder, um Werte von Ihrer benutzerdefinierten Aktion für andere Aktionen auszugeben. Die Definition für Ausgabefelder ähnelt der Definition für Eingabefelder:
* **name:** Wie dieses Feld in anderen Teilen der benutzerdefinierten Aktion referenziert wird. Das in der Benutzeroberfläche angezeigte Label muss über den \`labels\`-Abschnitt der benutzerdefinierten Aktion definiert werden.
* **type:** Der Typ des Werts, der für die Eingabe erforderlich ist.
* **fieldType:** gbt an, wie das Eingabefeld in der Benutzeroberfläche gerendert werden soll. Eingabefelder imitieren CRM-Eigenschaften. Erfahren Sie in diesem Artikel mehr über [gültige `type`- und `fieldType`-Kombinationen](/docs/api-reference/crm-properties-v3/guide#property-type-and-fieldtype-values)
Das Ausgabefeld sollte wie folgt formatiert sein:
```json theme={null}
//
{
"outputFields": [
{
"typeDefinition": {
"name": "myOutput",
"type": "string",
"fieldType": "text"
}
}
]
}
```
Bei Verwendung eines Ausgabefelds werden Werte von der Antwort von der `actionURL` analysiert. Beispielsweise können Sie Ausgabefelder in eine vorhandene Eigenschaft in HubSpot kopieren.
****
## Labels
Verwenden Sie Labels, um Ihren Ausgaben oder Eingaben im Workflow-Editor Text hinzuzufügen. Es kann einige Minuten dauern, bis Labels im Sprachdienst von HubSpot angezeigt werden. Portale, die auf [verschiedene Regionen oder Sprachen festgelegt](https://knowledge.hubspot.com/de/account-management/change-your-language-and-region-settings#customize-default-user-language-date-and-number-format) sind, zeigen die Bezeichnung in der entsprechenden Sprache an, falls verfügbar.
* **`labels`:** Text, der beschreibt, was die Felder der Aktion darstellen und was die Aktion macht. Englische Label sind erforderlich, aber Label können auch in einer der folgenden unterstützten Sprachen angegeben werden: Deutsch (`de`), Französisch (`fr`), Japanisch (`ja`), Spanisch (`es`), Brasilianisches Portugiesisch (`pt-br`) und Niederländisch (`nl`).
* **`actionName`:** der im Bereich „Aktion auswählen“ im Workflow-Editor angezeigte Name der Aktion.
* **`actionDescription`:** eine detaillierte Beschreibung für die Aktion, die beim Konfigurieren der benutzerdefinierten Aktion angezeigt wird.
* **`actionCardContent`:** eine zusammengefasste Beschreibung, die auf der Karte der Aktion angezeigt wird.
* **`appDisplayName`:** Der Name des Abschnitts im Bereich „Aktion auswählen“, in dem alle Aktionen für die App angezeigt werden Wenn appDisplayName für mehrere Aktionen definiert ist, wird die erste gefundene Aktion verwendet.
* **`inputFieldLabels`:** ein Objekt, das die Definitionen von inputFields den entsprechenden Label zuordnet, die der Benutzer beim Konfigurieren der Aktion sieht.
* **`outputFieldLabels`:** ein Objekt, das die Definitionen von den outputFields entsprechenden Label zuordnet, die im Workflows-Tool angezeigt werden.
* **`inputFieldDescriptions`:** ein Objekt, das die Definitionen von inputFields den Beschreibungen unterhalb der entsprechenden Label zuordnet.
* **`executionRules`:** ein Objekt, das die Definitionen von Ihren executionRules den Nachrichten zuordnet, die für die Ergebnisse der Aktionsausführung im Workflow-Verlauf angezeigt werden. In diesen Dokumenten gibt es einen separaten Abschnitt für Ausführungsregeln.
Label-Definitionen sollten wie folgt formatiert sein:
```json theme={null}
// {
"labels":{
"en":{
"actionName":"Create Widget",
"actionDescription":"This action will create a new widget in our system. So cool!",
"actionCardContent":"Create widget {{widgetName}}",
"appDisplayName":"My App Display Name",
"inputFieldLabels":{
"widgetName":"Widget Name",
"widgetOwner":"Widget Owner"
},
"outputFieldLabels":{
"outputOne":"First Output"
},
"inputFieldDescriptions":{
"widgetName":"Enter the full widget name. I support links too."
},
"executionRules":{
"alreadyExists":"The widget with name {{ widgetName }} already exists"
}
}
}
}
```
## Ausführung
Wenn eine Ausführung ausgeführt wird, wird eine https-Anfrage an die `actionUrl` gesendet.
* `callbackId`**:** eine eindeutige ID für die spezifische Ausführung. Wenn die Ausführung der benutzerdefinierten Aktion [blockiert wird](#block), verwenden Sie diese ID.
* **`object`:** die Werte der in `objectRequestOptions` angefragten Eigenschaften.
* **`InputFields`:** die Werte für die Eingaben, die der Benutzer ausgefüllt hat.
Die Payload der Ausführung ist folgendermaßen formatiert:
```json theme={null}
// {
"callbackId": "ap-102670506-56776413549-7-0",
"origin": {
"portalId": 102670506,
"actionDefinitionId": 10646377,
"actionDefinitionVersion": 1
},
"context": {
"source": "WORKFLOWS",
"workflowId": 192814114
},
"object": {
"objectId": 904,
"properties": {
"email": "ajenkenbb@gnu.org"
},
"objectType": "CONTACT"
},
"inputFields": {
"staticInput": "My Static Input",
"objectInput": "995",
"optionsInput": "1"
}
}
```
Die erwartete Antwort sollte wie folgt formatiert sein:
```json theme={null}
//
{
"outputFields": {
"myOutput": "Some value",
"hs_execution_state": "SUCCESS"
}
}
```
Für die Ausführungsantwort gilt:
* **`outputFields`:** die Werte der zuvor definierten Ausgabefelder. Diese Werte können in späteren Aktionen verwendet werden.
* **`hs_execution_state`:** ein optionaler spezieller Wert, der zu outputFields hinzugefügt werden kann. Es ist nicht möglich, einen neuen Versuch anzugeben, es können nur die folgenden Werte hinzugefügt werden:
* SUCCESS
* FAIL\_CONTINUE
* BLOCK
* ASYNC
`SUCCESS` und `FAIL_CONTINUE` zeigen an, dass die Aktion abgeschlossen ist und der Workflow mit der nächsten auszuführenden Aktion fortfahren sollte. Wenn kein Ausführungszustand angegeben ist, werden Statuscodes verwendet, um das Ergebnis einer Aktion zu bestimmen:
* **2xx-Statuscodes:** Die Aktion wurde erfolgreich abgeschlossen.
* **4xx-Statuscodes:** Die Aktion ist fehlgeschlagen. Die Ausnahme sind 429-Statuscodes vom Typ „Rate beschränkt“. Diese werden als erneute Versuche behandelt, und der „Erneut versuchen nach“-Header wird befolgt.
* **5xx-Statuscodes:** Es ist ein vorübergehendes Problem mit Ihrem Dienst aufgetreten und die Aktion wird später erneut versucht. Ein exponentielles Backoff-System wird für erneute Versuche verwendet. Erneute Versuche werden bis zu drei Tage lang fortgesetzt, bevor sie fehlschlagen.
## Ausführungsfunktionen
Verwenden Sie Ausführungsfunktionen, um Daten vor dem Senden an die `actionURL` zu formatieren und Daten von der `actionURL` zu analysieren. Es gibt zwei Typen von Ausführungsfunktionen:
* `PRE_ACTION_EXECUTION`
* `POST_ACTION_EXECUTION`
#### PRE\_ACTION\_EXECUTION-Funktion
Verwenden Sie `PRE_ACTION_EXECUTION`-Funktionen zum Formatieren von Daten, bevor Sie sie an die `actionURL` senden.
Die Funktionsdefinition ist folgendermaßen formatiert:
```json theme={null}
//
{
"functionType": "PRE_ACTION_EXECUTION",
"functionSource": "..."
}
```
Die Funktionseingabe sollte wie folgt formatiert sein:
```json theme={null}
//
{
"webhookUrl": "https://actionurl.com/",
"callbackId": "ap-102670506-56776413549-7-0",
"origin": {
"portalId": 102670506,
"actionDefinitionId": 10646377,
"actionDefinitionVersion": 1
},
"context": {
"source": "WORKFLOWS",
"workflowId": 192814114
},
"object": {
"objectId": 904,
"properties": {
"email": "ajenkenbb@gnu.org"
},
"objectType": "CONTACT"
},
"inputFields": {
"staticInput": "My Static Input",
"objectInput": "995",
"optionsInput": "1"
}
}
```
Die Funktionsausgabe sollte wie folgt formatiert sein:
```json theme={null}
//
{
// The webhook URL for HubSpot to call
"webhookUrl": "https://myapi.com/hubspot",
// Optional. The request body.
"body": "{\"widgetName\": \"My new widget\", \"widgetColor\": \"blue\"}",
// Optional. A map of custom request headers to add.
"httpHeaders": {
"My-Custom-Header": "header value"
},
// Optional. The Content-Type of the request. Default is application/json.
"contentType": "application/json",
// Optional. The Accept type of the request. Default is application/json.
"accept": "application/json",
// Optional. The HTTP method with which to make the request.
// Valid values are GET, POST, PUT, PATCH, and DELETE.
// Default is POST.
"httpMethod": "POST"
}
```
#### POST\_ACTION\_EXECUTION-Funktion
Nachdem Sie eine Antwort von der `actionURL` erhalten haben, verwenden Sie eine `POST_ACTION_EXECUTION`-Funktion, um Daten für HubSpot zu formatieren.
Die Funktionsdefinition ist folgendermaßen formatiert:
```json theme={null}
//
{
"functionType": "POST_ACTION_EXECUTION",
"functionSource": "..."
}
```
Die Funktionseingabe sollte wie folgt formatiert sein:
```json theme={null}
//
{
"responseBody": "{\r\n \"returnValue\":\"Hello World!\"\r\n}"
}
```
Die Funktionsausgabe sollte wie folgt formatiert sein:
```json theme={null}
//
{
"outputFields": {
"myOutput": "Some value",
"hs_execution_state": "SUCCESS"
}
}
```
## Asynchrone Ausführung
Führen Sie benutzerdefinierte Workflow-Aktionen asynchron aus, indem Sie die Aktion blockieren und später abschließen.
### Blockieren der Ausführung einer Aktion
Verwenden Sie benutzerdefinierte Aktionen, um die Ausführung von Workflows zu blockieren. Anstatt nach dem Empfang einer Antwort vom Typ `completed (2xx or 4xx status code)` von Ihrem Dienst die nächste Aktion im Workflow nach Ihrer benutzerdefinierten Aktion auszuführen, hört der Workflow so lange mit dem Ausführen („blockieren“) dieser Aufnahme auf, bis Sie den Workflow zum Fortfahren anweisen.
Wenn blockiert werden soll, können Sie einen Wert für das `hs_default_expiration`-Feld festlegen, nach dem Ihre benutzerdefinierte Aktion als abgelaufen gilt. Die Ausführung des Workflows wird dann wieder aufgenommen, und die Aktion im Anschluss an Ihre benutzerdefinierte Aktion wird ausgeführt, auch wenn die Aktion nicht abgeschlossen ist.
Um eine benutzerdefinierte Aktion zu blockieren, muss Ihre Aktionsausführungsantwort folgendes Format haben:
```json theme={null}
//
{
"outputFields": {
"hs_execution_state": "BLOCK",
"hs_expiration_duration": "P1WT1H"
}
}
```
| Feld | Beschreibung |
| - | - |
| `hs_execution_state` | Um die Ausführung von Workflows zu blockieren, muss dies für Ihre benutzerdefinierte Aktion auf `BLOCK` festgelegt sein. Dies ist ein Pflichtfeld. |
| `hs_expiration_duration` | Die Dauer muss im [ISO 8601-Format „Dauer“](https://en.wikipedia.org/wiki/ISO_8601#Durations) angegeben werden. Wenn nicht angegeben, wird eine Standardablauffrist von 1 Woche verwendet. Dies ist optional. |
### Ausführung einer blockierten Aktion abschließen
Um die blockierte Ausführung einer benutzerdefinierten Aktion abzuschließen, verwenden Sie den folgenden Endpunkt: `/callbacks/{callbackId}/complete`
Formatieren Sie den Anfragetext wie folgt:
```json theme={null}
//
{
"outputFields": {
"hs_execution_state": "SUCCESS"
}
}
```
| Feld | Beschreibung |
| - | - |
| `hs_execution_state` | Der endgültige Ausführungszustand. Dies ist ein Pflichtfeld Die gültigen Werte für dieses Feld sind `SUCCESS`, um anzuzeigen, dass Ihre benutzerdefinierte Aktion erfolgreich abgeschlossen wurde, und `FAIL_CONTINUE`, um anzuzeigen, dass es ein Problem mit der Ausführung Ihrer benutzerdefinierten Aktion gibt. |
## Benutzerdefinierte Ausführungsnachrichten mit Regeln hinzufügen
Geben Sie Regeln für Ihre Aktion an, um festzulegen, welche Nachricht auf der Verlaufsseite des Workflows angezeigt wird, wenn die Aktion ausgeführt wird.
Die Regeln werden mit den Ausgangswerten von Ihrer Aktion abgeglichen. Diese Ausgabewerte sollten im Antworttext der `actionURL` im folgenden Format angegeben werden:
```json theme={null}
//
{
"outputFields": {
"errorCode": "ALREADY_EXISTS",
"widgetName": "Test widget"
}
}
```
Die tatsächlichen Nachrichten können im labels-Abschnitt der benutzerdefinierten Aktion angegeben werden:
```json theme={null}
//
{
"labels": {
"executionRules": {
"alreadyExists": "The widget with name {{ widgetName }} already exists",
"widgetWrongSize": "Wrong widget size",
"widgetInvalidSize": "Invalid widget size"
}
}
}
}
```
Die `executionRules` werden in der angegebenen Reihenfolge getestet. Wenn mehrere Treffer vorhanden sind, wird dem Benutzer nur die Nachricht von der ersten Regel, die übereinstimmt, angezeigt.
Die Regel stimmt überein, wenn die Ausführungsausgabe einem bestimmten Wert in der Regel entspricht. Nehmen Sie beispielsweise diesen Satz an `executionRules`:
```json theme={null}
//
[
{
// This matches the key of a label on the action's `labels.LANGUAGE.executionRules` map
"labelName": "alreadyExists",
"conditions": {
"errorCode": "ALREADY_EXISTS"
}
},
{
"labelName": "widgetWrongSize",
"conditions": {
"errorCode": "WIDGET_SIZE",
"sizeError": ["TOO_SMALL", "TOO_BIG"]
}
},
{
"labelName": "widgetInvalidSize",
"conditions": {
"errorCode": "WIDGET_SIZE"
}
}
]
```
Die folgenden Treffer würden in diesem Fall auftreten:
* `{"errorCode": "ALREADY_EXISTS", "widgetName": "Test widget"}`: Dies würde mit der ersten Regel übereinstimmen, da `errorCode` gleich `ALREADY_EXISTS` ist. In diesem Fall wird, auch wenn eine `widgetName`-Ausgabe vorliegt, diese nicht in der Regel verwendet, sodass jeder Wert zulässig ist.
* `{"errorCode": "WIDGET_SIZE", "sizeError": "TOO_SMALL"}`: Dies würde mit der zweiten Regel übereinstimmen, da `TOO_SMALL` einer der übereinstimmenden Fehler vom Typ `sizeError` ist und `errorCode` `WIDGET_SIZE` ist.
* `{"errorCode": "WIDGET_SIZE", "sizeError": "NOT_A_NUMBER"}`: Dies würde mit der dritten Regel übereinstimmen, da der `sizeError`, auch wenn der `errorCode` `WIDGET_SIZE` ist, keinem der von der zweiten Regel angegebenen Werte entspricht (`TOO_SMALL` oder `TOO_BIG`).
Mit diesem Übereinstimmungsmechanismus können Sie Fallback-Fehler festlegen, damit Sie spezifische Fehler für wichtige Fehlerereignisse haben können, aber auf etwas generischere Fehlermeldungen für weniger häufige Fehler zurückgreifen können. Hier ist ein Beispiel dafür, wie die benutzerdefinierte Nachricht angezeigt wird:
## Ihre benutzerdefinierte Aktion testen und veröffentlichen
Nachdem Sie Ihre neue benutzerdefinierte Aktion erstellt haben, können Sie sie testen und veröffentlichen.
### Testen von benutzerdefinierten Aktionen vor dem Veröffentlichen
Vor der Veröffentlichung Ihrer benutzerdefinierten Aktion können Sie die Ausführung von Aktionen und das Abrufen von Optionen testen, indem Sie die URL auf [webhook.site](https://webhook.site/) verweisen. Dadurch können Sie die Payload überprüfen und eine bestimmte Antwort zurückgeben.
Sie können die Aktion auch in Ihrem Entwicklerportal testen, indem Sie einen Workflow im Workflow-Tool erstellen. [Fügen Sie dann Ihre neue Aktion hinzu](https://knowledge.hubspot.com/de/workflows/choose-your-workflow-actions#add-actions).
Wenn Sie Ihre Tests abgeschlossen haben, empfiehlt es sich, die Testaktionen zu archivieren. In der [Referenzdokumentation](/docs/api-reference/automation-actions-v4-v4/guide) erfahren Sie mehr über Archivierungsaktionen.
### Veröffentlichen von benutzerdefinierten Aktionen
Standardmäßig werden benutzerdefinierte Aktionen in einem unveröffentlichten Zustand erstellt. Unveröffentlichte benutzerdefinierte Aktionen sind nur im Entwicklerportal sichtbar, das der entsprechenden HubSpot-Anwendung zugeordnet ist. Um eine benutzerdefinierte Aktion für Benutzer sichtbar zu machen, aktualisieren Sie das `published`-Flag in Ihrer Aktionsdefinition auf `true`. Wenn eine Aktion unveröffentlicht ist, können Portale, die die Aktion bereits zu ihrem Workflow hinzugefügt haben, bereits hinzugefügte Aktionen weiterhin bearbeiten und ausführen. Aber sie können die Aktion nicht wieder hinzuzufügen.
## Beispiele für eine benutzerdefinierte Aktion
Die folgenden Codeausschnitte enthalten Beispiele für mehrere häufige Anwendungsfälle für benutzerdefinierte Aktionen, z. B. das Definieren eines Widgets oder das Aufrufen einer serverlosen Funktion.
### Beispiel Nr. 1
Dieses Beispiel enthält die folgenden Eingabefelder, die für Kontakt- und Deal-Workflows erstellt wurden:
* `widgetName`: ein statisches Eingabefeld
* `widgetColor`: ein Dropdown-Feld mit Optionen
* `widgetOwner`: ein Feld, das einen zuständigen Mitarbeiter in HubSpot darstellt.
* `widgetQuantity`: ein Feld, das von einer Eigenschaft des aufgenommenen Objekts (die der Benutzer, der den Workflow erstellt, auswählt) abgeleitet ist.
```json theme={null}
//
{
"actionUrl": "https://example.com/hubspot",
"inputFields": [
{
"typeDefinition": {
"name": "widgetName",
"type": "string",
"fieldType": "text"
},
"supportedValueTypes": ["STATIC_VALUE"],
"isRequired": true
},
{
"typeDefinition": {
"name": "widgetColor",
"type": "enumeration",
"fieldType": "select",
"options": [
{ "value": "red", "label": "Red" },
{ "value": "blue", "label": "Blue" },
{ "value": "green", "label": "Green" }
]
},
"supportedValueTypes": ["STATIC_VALUE"]
},
{
"typeDefinition": {
"name": "widgetOwner",
"type": "enumeration",
"referencedObjectType": "OWNER"
},
"supportedValueTypes": ["STATIC_VALUE"]
},
{
"typeDefinition": {
"name": "widgetQuantity",
"type": "number"
},
"supportedValueTypes": ["OBJECT_PROPERTY"]
}
],
"labels": {
"en": {
"actionName": "Create Widget - Example 1",
"actionDescription": "This action will create a new widget in our system. So cool!",
"actionCardContent": "Create widget {{widgetName}}",
"inputFieldLabels": {
"widgetName": "Widget Name",
"widgetColor": "Widget Color",
"widgetOwner": "Widget Owner",
"widgetQuantity": "Widget Quantity"
},
"inputFieldDescriptions": {
"widgetName": "Enter the full widget name. I support links too.",
"widgetColor": "This is the color that will be used to paint the widget."
}
}
},
"objectTypes": ["CONTACT", "DEAL"]
}
```
### Beispiel Nr. 2
Die folgende benutzerdefinierte Aktion verwendet eine serverlose Funktion, um die an die konfigurierte actionUrl gesendete Payload umzuwandeln. Da das `objectTypes`-Feld in der Definition der benutzerdefinierten Aktion nicht angegeben ist, steht diese Aktion in allen Workflows zur Verfügung.
```json theme={null}
//
{
"actionUrl": "https://example.com",
"inputFields": [
{
"typeDefinition": {
"name": "widgetName",
"type": "string",
"fieldType": "text"
},
"supportedValueTypes": ["STATIC_VALUE"],
"isRequired": true
}
],
"labels": {
"en": {
"actionName": "Create Widget - Example 2",
"actionCardContent": "Create widget {{widgetName}}",
"inputFieldLabels": {
"widgetName": "Widget Name"
}
}
},
"functions": [
{
"functionType": "PRE_ACTION_EXECUTION",
"functionSource": "exports.main = function(event, callback) { return callback(transformRequest(event)); }\nfunction transformRequest(request) { return { webhookUrl: request.webhookUrl, body: JSON.stringify(request.fields), contentType: 'application/x-www-form-urlencoded', accept: 'application/json', httpMethod: 'POST' }; }"
}
]
}
```
### Beispiel Nr. 3
Die folgende benutzerdefinierte Aktion verfügt über Feldabhängigkeiten und -optionen, die von einer externen API abgerufen werden. Da die Widget-Größe von der Widget-Farbe abhängig ist, kann der Benutzer so lange keinen Wert für die Widget-Größe eingeben, bis eine Widget-Farbe ausgewählt wurde.
Die Widget-Kosten hängen ebenfalls von der Widget-Farbe ab, sie werden jedoch durch den Wert bedingt, den der Benutzer für die Widget-Farbe auswählt. Der Benutzer kann keinen Wert für die Widget-Kosten eingeben, es sei denn, Rot ist als Widget-Farbe ausgewählt.
```json theme={null}
//
{
"actionUrl": "https://example.com/hubspot",
"inputFields": [
{
"typeDefinition": {
"name": "widgetName",
"type": "string",
"fieldType": "text"
},
"supportedValueTypes": ["STATIC_VALUE"],
"isRequired": true
},
{
"typeDefinition": {
"name": "widgetColor",
"type": "enumeration",
"fieldType": "select",
"options": [
{ "value": "red", "description": "red", "label": "Red" },
{ "value": "blue", "description": "blue", "label": "Blue" },
{ "value": "green", "description": "green", "label": "Green" }
]
},
"supportedValueTypes": ["STATIC_VALUE"]
},
{
"typeDefinition": {
"name": "widgetSize",
"type": "enumeration",
"fieldType": "select",
"optionsUrl": "https://api.example.com/v1/widget-sizes"
},
"supportedValueTypes": ["STATIC_VALUE"]
},
{
"typeDefinition": {
"name": "widgetCost",
"type": "number",
"fieldType": "number"
},
"supportedValueTypes": ["OBJECT_PROPERTY"]
}
],
"inputFieldDependencies": [
{
"dependencyType": "SINGLE_FIELD",
"controllingFieldName": "widgetColor",
"dependentFieldNames": ["widgetSize"]
},
{
"dependencyType": "CONDITIONAL_SINGLE_FIELD",
"controllingFieldName": "widgetColor",
"controllingFieldValue": "red",
"dependentFieldNames": ["widgetCost"]
}
],
"labels": {
"en": {
"actionName": "Create Widget - Example 3",
"actionCardContent": "Create widget {{widgetName}}",
"inputFieldLabels": {
"widgetName": "Widget Name",
"widgetColor": "Widget Color",
"widgetSize": "Widget Size",
"widgetCost": "Widget Cost"
}
}
},
"objectTypes": ["CONTACT", "DEAL"],
"functions": [
{
"functionType": "PRE_FETCH_OPTIONS",
"id": "widgetSize",
"functionSource": "exports.main = function(event, callback) { return callback(transformRequest(event)); }\nfunction transformRequest(request) { return { webhookUrl: request.webhookUrl + '?color=' + request.fields.widgetColor.value, body: JSON.stringify(request.fields), httpMethod: 'GET' }; }"
}
]
}
```
# SCIM für Ihre App einrichten (BETA)
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/scim
# Eine App-Karte (BETA) erstellen
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/app-cards/create-an-app-card
Erfahren Sie, wie Sie eine App-Karte auf der neuesten Version der Entwicklerplattform (BETA) erstellen.
Sie können eine React-basierte App-Karte für Projekte mit der neuesten Version (`2025.2`) der Entwicklerplattform erstellen. App-Karten funktionieren ähnlich wie vorhandene Karten, die Sie [möglicherweise für ältere Apps erstellt](/docs/apps/developer-platform/add-features/ui-extensibility/app-cards/reference) haben, allerdings mit einigen geringfügigen Änderungen an Ihren Konfigurationsdateien.
In dieser Anleitung erfahren Sie, wie Sie eine Boilerplate-App-Karte in einer vorhandenen App erstellen und sie in HubSpot hochladen und in der Vorschau ansehen können. Anschließend laden Sie alle diese Dateien in Ihr Projekt hoch, wo Sie eine Vorschau der Karte in einem Entwickler-Test-Account, in dem Sie Ihre App installiert haben, angezeigt bekommen.
## Voraussetzungen
* Vergewissern Sie sich, dass Sie die neueste Beta-Version des [HubSpot CLI](/docs/developer-tooling/local-development/hubspot-cli/install-the-cli) installiert haben.
* Wenn dies noch nicht geschehen ist, [erstellen Sie eine App](/docs/getting-started/quickstart).
* Es wird empfohlen, [einen konfigurierbaren Test-Account einzurichten](/docs/developer-tooling/local-development/configurable-test-accounts), damit Sie in einer isolierten Umgebung erstellen und testen können.
## Eine App-Karte erstellen
**1. Fügen Sie Ihrem Projekt eine Kartenkomponente hinzu**
Um Ihrem Projekt eine neue App-Kartenkomponente hinzuzufügen, gehen Sie mit dem Terminal in Ihr lokales Projektverzeichnis, und führen dann den folgenden Befehl aus:
```shell theme={null}
hs project add
```
Sobald Sie aufgefordert werden, eine hinzuzufügende Komponente auszuwählen, klicken Sie auf **Karte**.
Falls Ihr Projekt noch keine App-Karten enthält, wird ein `cards/`-Verzeichnis für Sie in diesem `app/`-Verzeichnis erstellt. Das `cards/`-Verzeichnis enthält:
* Eine JSON-Kartenkonfigurationsdatei (`*-hsmeta.json`)
* Eine React-Komponentendatei (`.jsx`)
* Eine `package.json`-Datei
Wenn Ihr Projekt bereits App-Karten enthält, werden die oben genannten Dateien dem vorhandenen `cards/`-Verzeichnis hinzugefügt (es sei denn `package.json`, es existiert bereits).
```shell theme={null}
myProject
└── src/
└── app/
└── cards/
├── NewCard-hsmeta.json
├── NewCard.jsx
└── package.json
```
Erfahren Sie in der [Referenzdokumentation für App-Karten](/docs/apps/developer-platform/add-features/ui-extensibility/app-cards/reference) mehr über diese Dateien.
**2. Zu HubSpot hochladen**
So laden Sie die neue Karte in Ihren HubSpot-Account hoch:
* Führen Sie `hs project install-deps` aus, um die für die App-Karte erforderlichen Abhängigkeiten zu installieren. Dadurch wird das `cards/`-Verzeichnis mit den erforderlichen Node-Modulen und einer `package-lock.json`-Datei aktualisiert, wodurch der Build der hochgeladenen App-Kartenerweiterung beschleunigt und sichergestellt wird, dass alle Abhängigkeiten in Ihrer lokalen Entwicklungsumgebung und Ihrem Produktions-Account übereinstimmen.
* Führen Sie dann `hs project upload` aus, um das Projekt in Ihrem Standard-Account hochzuladen.
* Um einen anderen Account anzugeben (z. B. einen separaten Test-Account), fügen Sie den `--account`-Tag ein und geben Sie die HubID des Accounts an; zum Beispiel: `hs project upload --account 123456`.
* Wenn das Projekt noch nicht hochgeladen wurde, werden Sie aufgefordert zu bestätigen, dass Sie das Projekt in Ihrem Account erstellen möchten. Andernfalls zeigt das Terminal zuerst den Erstellungs- und Bereitstellungsstatus an und bestätigt erst dann, wenn das Projekt erfolgreich hochgeladen wurde.
## Die Karte in HubSpot anzeigen
Nachdem Sie das Projekt hochgeladen haben, können Sie es in HubSpot anzeigen, indem Sie `hs project open`ausführen. Es öffnet sich eine Browser-Registerkarte zur Projektdetailseite, auf der Sie Ihr Projekt, Ihre App und ihre neue Kartenkomponente sehen können.
Wenn Sie die App noch nicht im Account installiert haben, müssen Sie dies tun, bevor Sie die Karte anschauen können. Für die Installation der App:
* Klicken Sie in der Projektzusammenfassung auf der linken Seite oder unter *Projektkomponenten* auf den **Namen** der App.
* Klicken Sie auf die Registerkarte **Verteilung**.
* Dann klicken Sie auf **Jetzt installieren**.
Die von `hs project add` erstellte Boilerplate-App-Karte ist so konfiguriert, dass sie in der mittleren Spalte von Kontaktdatensätzen angezeigt wird. Um die Karte anzuzeigen, müssen Sie sie zunächst der Ansicht des Kontaktdatensatzes hinzufügen:
* Gehen Sie in Ihrem HubSpot-Account zu **CRM** > **Kontakte**.
* Klicken Sie auf den **Namen** eines Kontakts.
* Dann klicken Sie oben in der mittleren Spalte des Kontaktdatensatzes auf **Anpassen**.
* Klicken Sie auf **Standardansicht**.
* Wählen Sie die **Registerkarte** aus, der Sie die Karte hinzufügen möchten. Bewegen Sie dann den Mauszeiger über die Stelle, an der Sie die Karte platzieren wollen, und klicken Sie auf das **Pluszeichen**. Dies kann nach der Ersteinrichtung jederzeit angepasst werden.
* Klicken Sie im rechten Bereich auf die Registerkarte **Kartenbibliothek**. Klicken Sie dann auf das Dropdown-Menü für **Kartentypen** und wählen Sie **App** aus, um nach App-Karten zu filtern.
* Klicken Sie unter der von Ihnen erstellten App-Karte auf **Karte hinzufügen** und dann auf die Schaltfläche zum **Schließen** oben rechts in der Seitenleiste.
* Klicken Sie oben rechts auf **Speichern und beenden**.
Sie werden dann zurück zum Kontaktdatensatz weitergeleitet, in dem Ihre Karte jetzt angezeigt wird. Lassen Sie für den nächsten Schritt, wenn Sie den lokalen Entwicklungsserver starten, die Seite mit dem Kontaktdatensatz in Ihrem Browser geöffnet.
## Lokale Entwicklung einrichten
Nachdem Ihre App-Karte zu allen Kontaktdatensätzen hinzugefügt wurde, können Sie nun mit dem Erstellen der App-Karte fortfahren. Der einfachste Weg, schnell zu iterieren, besteht darin, den lokalen Entwicklungsserver mit dem `hs project dev`-Befehl zu starten:
* Führen Sie im Terminal `hs project dev` aus.
* Folgen Sie den Terminal-Anweisungen, um den **Account** auszuwählen, den Sie für die lokale Entwicklung verwenden möchten.
* Das Terminal startet den lokalen Entwicklungsserver und bestätigt dann, sobald alles funktioniert.
* Gehen Sie bei laufendem Server zurück zur Browser-Registerkarte mit dem Kontaktdatensatz und laden Sie die Seite neu.
Die App-Karte wird mit einem `Developing locally`-Tag angezeigt, was besagt, dass der lokale Entwicklungsserver bereit ist.
Der lokale Entwicklungsserver erkennt automatisch alle Änderungen, die in den Front-End-React-Dateien der App-Karte gespeichert sind (d. h. beliebige `.jsx`- oder `.tsx`-Dateien). Wenn Sie Änderungen an anderen Dateitypen vornehmen wollen, z. B. an einer `.json`-Konfigurationsdatei, müssen Sie das Projekt erneut hochladen und den lokalen Entwicklungsserver neu starten.
## Nächste Schritte
Schauen Sie sich die folgenden Ressourcen an, um das Erscheinungsbild und die Funktionalität der Karte zu erweitern.
* Lesen Sie die [Referenzdokumentation für UI-Erweiterungskomponenten](/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/overview), um der Karte weitere UI-Komponenten hinzuzufügen.
* Alle Konfigurationsoptionen für App-Karten sowie weitere Informationen finden Sie in der [Referenzdokumentation für App-Karten](/docs/apps/developer-platform/add-features/ui-extensibility/app-cards/reference).
* Die [SDK-Referenz für UI-Erweiterungen](/docs/apps/developer-platform/add-features/ui-extensibility/ui-extensions-sdk) enthält alles zu verfügbaren Dienstprogramme und Methoden für UI-Erweiterungen.
### Hinzufügen von hubspot.fetch()-Unterstützung
Um Aufrufe an Ihr Backend oder einen Drittanbieterdienst vorzunehmen, aktualisieren Sie bitte die `*-hsmeta.json`-[Konfigurationsdatei](/docs/apps/developer-platform/build-apps/app-configuration) der App so, dass sie das `permittedUrls`-Feld enthält:
```json theme={null}
"permittedUrls": {
"fetch": ["https://api.example.com"],
"img": [],
"iframe": []
}
```
Das `permittedUrls`-Feld definiert eine Liste von URIs, auf die Ihre App zugreifen darf. Es fügt sowohl Ihrer App als auch HubSpot eine zusätzliche Sicherheitsebene hinzu, da Sie so explizit steuern können, mit welchen externen Ressourcen Ihre App zur Laufzeit interagieren kann.
Das `permittedUrls`-Feld ist ein Objekt mit einem bestimmten Satz unterstützter Eigenschaften, was bedeutet, dass Sie hier keine beliebigen Schlüssel übertragen können. Der wichtigste anzugebende Schlüssel ist `fetch`, der bestimmt, welche URLs über `hubspot.fetch` aufgerufen werden können. Dies entspricht dem `allowedUrls`-Feld, das beim Erstellen älterer öffentlicher Apps benutzt wurde.
Erfahren Sie hier mehr über die Verwendung von `hubspot.fetch` in der entsprechenden Dokumentation [hier](/docs/apps/developer-platform/add-features/ui-extensibility/fetching-data#fetching-data-for-public-apps-beta).
## Eine zuvor erstellten App-Karte migrieren
Wenn Sie ein vorhandenes Projekt mit App-Karten auf die Entwicklerplattform migrieren müssen, lesen Sie bitte die folgenden Anleitungen:
* [Migration einer bestehenden öffentlichen App](/docs/apps/developer-platform/build-apps/migrate-an-app/migrate-an-existing-public-app)
* [Migration einer bestehenden privaten App](/docs/apps/developer-platform/build-apps/migrate-an-app/migrate-an-existing-private-app)
> [!WARNING]
>
> Wenn in Ihrem bestehenden Projekt eine Karte mit verbundenen benutzerdefinierten Objekten vorhanden ist, sollten Sie sich vergewissern, dass Sie vor der Migration über den `crm.objects.custom.read`-Bereich in Ihrer App verfügen. Bei Projekten, die vor der aktuellen Version `2025.2` erstellt wurden, war zur Erstellung von Karten mit benutzerdefinierten Objekten nur der `crm.schemas.custom.read`-Bereich nötig. In der neuesten Version (`2025.2`) der Entwicklerplattform, ist hingegen `crm.objects.custom.read` erforderlich. Wenn Sie diesen Bereich nicht einschließen, schlägt der Build während der Migration fehl und es wird der folgende Fehler angezeigt:
>
> **\[FEHLER] Der Build ist fehlgeschlagen oder abgelaufen. Überprüfen Sie das beim Aktualisieren Ihrer App aufgetretene Problem und versuchen Sie die Migration erneut.**
>
> Ihre kundenseitige App ist trotz des Status auf der Projektdetailseite nicht davon betroffen. Um das Problem zu beheben, fügen Sie den `crm.objects.custom.read`-Bereich zu den Bereichen Ihrer alten App hinzu, erstellen die App anhand der Version `2023.2` ein weiteres Mal und versuchen dann die Migration erneut.
# Überblick über App-Karten (BETA)
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/app-cards/overview
Ein Überblick über das Erstellen von Karten zum Anpassen der HubSpot-Benutzeroberfläche.
Passen Sie die Benutzeroberfläche Ihrer App noch individueller an – mithilfe von App-Karten, die Daten anzeigen, Benutzern das Ausführen von Aktionen ermöglichen können und vieles mehr. Sie können App-Karten erstellen, die in CRM-Datensätzen, in Vorschaubereichen, im Helpdesk-Workspace und im Sales-Workspace angezeigt werden.
In Bezug auf die Implementierung werden App-Karten ähnlich wie andere App-Funktionen über eine `*-hsmeta.json`-Datei in Ihrem Projekt konfiguriert.
```json theme={null}
```
So legen Sie mit dem Erstellen von App-Karten los:
* Nutzen Sie die [Schnellanleitung](/docs/apps/developer-platform/build-apps/create-an-app), um mit einer neuen App loszulegen.
* Folgen Sie der [Anleitung zum Erstellen einer App-Karte](/docs/apps/developer-platform/add-features/ui-extensibility/app-cards/create-an-app-card) für einen vollständigen Überblick über das Erstellen, Hochladen und Testen Ihrer App.
* Führen Sie den `hs project add`-Befehl aus, um eine neue Kartenkomponente zu einem vorhandenen Projekt hinzuzufügen.
* Eine vollständige Aufschlüsselung der App-Kartenoptionen und -funktionen finden Sie in der [Referenzdokumentation für App-Karten](/docs/apps/developer-platform/add-features/ui-extensibility/app-cards/create-an-app-card) .
# Referenz für App-Karten (BETA)
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/app-cards/reference
Referenzinformationen für das Erstellen von App-Karten in der neuesten Version der Entwicklerplattform.
Im Folgenden finden Sie Referenzinformationen für das Erstellen von App-Karten
## Projektstruktur
Im Kontext eines Projekts werden App-Kartenkomponenten in einem `cards`-Verzeichnis innerhalb von `app/`definiert. Das `cards`-Verzeichnis sollte Folgendes enthalten:
* Eine JSON-Schemadefinitionsdatei für jeden Kartentyp (`*-hsmeta.json`).
* Eine React-Datei, die das Frontend der Karte darstellt. Dies kann eine `.jsx`- oder `.tsx`-Datei sein.
* Eine `package.json`-Datei zur Handhabung aller erforderlichen Abhängigkeiten.
```shell theme={null}
project-folder/
└── src/
└── app/
├── app-hsmeta.json
└── cards/
└── my-app-card-hsmeta.json
└── my-app-card.jsx
└── package.json
```
## Schema der App-Karte
Fügen Sie in der `*-hsmeta.json`-Konfigurationsdatei für Ihre App-Karte die folgenden Eigenschaften hinzu.
```json theme={null}
{
"uid": "example-card",
"type": "card",
"config": {
"name": "Hello Example App",
"description": "A description of the card's purpose.",
"location": "crm.record.tab",
"entrypoint": "/app/cards/ExampleCard.jsx",
"objectTypes": ["contacts"]
}
}
```
Mit \* markierte Felder sind Pflichtfelder.
| Feld | Typ | Beschreibung |
| - | - | - |
| `uid`\* | Zeichenfolge | Die eindeutige ID der Karte. Sie kann eine beliebige Zeichenfolge sein, sollte aber die Karte sinnvoll identifizieren. HubSpot identifiziert die Karte anhand dieser ID, sodass Sie den Titel der Karte ändern können, ohne historische oder zustandsbehaftete Daten, wie z. B. die Position im CRM-Datensatz, zu entfernen. |
| `type` | Zeichenfolge | Der Typ der Komponente, die in diesem Fall `card` sein sollte. |
| `config` | Objekt | Ein Objekt, das Konfigurationsdetails enthält. |
| `name`\* | Zeichenfolge | Der Titel der Karte, wie auf der Benutzeroberfläche von HubSpot angezeigt. |
| `description` | Zeichenfolge | Eine Beschreibung der Karte. |
| `previewImage` | Objekt: | Ein Objekt, das die `file`- und `altText`-Felder enthält. Das `file`-Feld ist der relative Pfad zum Vorschaubild. Gültige Dateierweiterungen sind png, jpeg, jpg oder gif. Die maximale Dateigröße beträgt 5.0 MB. Das `altText`-Feld ist eine Kurzbeschreibung des Bildes. |
| `entrypoint`\* | Zeichenfolge | Der Dateipfad des Front-End-React-Codes der Karte. |
| `location`\* | `crm.record.tab` \| `crm.record.sidebar` \| `crm.preview` \|`helpdesk.sidebar` | Wo die Karte auf der Benutzeroberfläche von HubSpot angezeigt wird. Sie können nur einen Ortswert angeben, aber einige `location`- und `objectTypes`-Kombinationen führen zu einer Unterstützung mehrerer Speicherorte. Weitere Informationen finden Sie im Abschnitt [*Unterstützte Speicherorte*](#supported-locations) weiter unten. |
| `objectTypes`\* | Array | Die Typen von CRM-Datensätzen, in denen die Karte angezeigt wird. Weitere Informationen finden Sie im Abschnitt [*Unterstützte Objekte*](#supported-objects) weiter unten. |
### Unterstützte Objekte
Geben Sie im `objectTypes`-Array der `*-hsmeta.json`-Konfigurationsdatei der Karte an, in welchen Arten von CRM-Datensätzen, die Karte angezeigt werden soll. Nachfolgend finden Sie die derzeit unterstützten CRM-Objekte, deren `objectType`-Wert und den [Mindestbereich](/docs/apps/legacy-apps/public-apps/overview#scope-types), der Ihrer App hinzugefügt werden soll.
> [!NOTE]
>
> Bei Standardobjekten von HubSpot wird in Hinblick auf `objectType` nicht zwischen Groß- und Kleinschreibung unterschieden und sowohl der Singular als auch der Plural unterstützt. Zum Beispiel: `"CONTACT"` und `"contacts"` sind beide gültig.
| CRM-Objekt | objectType-Wert | Verwandter Bereich |
| - | - | - |
| Kontakte | `CONTACT` | `crm.objects.contacts.read` |
| Unternehmen | `COMPANY` | `crm.objects.companies.read` |
| Deals | `DEALS` | `crm.objects.deals.read` |
| Tickets | `TICKETS` | `tickets` |
| Benutzerdefinierte Objekte | `p_objectName` (Groß-/Kleinschreibung beachten) | `crm.objects.custom.read` |
| App-Objekte | `app_object_uid` | Siehe [App-Objekt-Bereiche](/docs/apps/developer-platform/add-features/app-objects/reference#scopes) |
Darüber hinaus werden die folgenden CRM-Objekte unterstützt, wenn sie [in der Objektbibliothek aktiviert wurden](https://knowledge.hubspot.com/object-settings/use-the-object-library):
| CRM-Objekt | objectType Wert | Zugehörige Bereiche |
| - | - | - |
| Verabredungen | `APPOINTMENTS` | `crm.objects.appointments.read` |
| Kurse | `COURSES` | `crm.objects.courses.read` |
| Listings | `LISTINGS` | `crm.objects.listings.read` |
| Dienstleistungen | `SERVICES` | `crm.objects.services.read` |
### Unterstützte Speicherorte
Geben Sie im `location`-Feld der `*-hsmeta.json`-Konfigurationsdatei der Karte an, wo die sie in HubSpot angezeigt werden soll. Nachfolgend finden Sie die derzeit unterstützten Speicherorte.
* `crm.record.tab`: Platziert die Erweiterung in der mittleren Spalte von CRM-Datensatzseiten, entweder in einer der Standardregisterkarten von HubSpot oder in einer benutzerdefinierten Registerkarte. Wenn `objectType` auf `COMPANIES` festgelegt ist, ist die Karte auch im [Vorschaubereich des Sales-Workspace für Zielaccounts](https://knowledge.hubspot.com/prospecting/manage-companies-in-the-sales-workspace) verfügbar.
> [!TIP]
>
> Falls Sie die mittlere Spalte zuvor angepasst haben, müssen Sie die [Ansicht der mittleren Spalte anpassen](https://knowledge.hubspot.com/object-settings/customize-records), um alle neu erstellten Erweiterungen sichtbar zu machen.
**Screenshot**
* `crm.record.sidebar`: Zeigt die Erweiterung in der rechten Seitenleiste von CRM-Datensatzseiten an. Erweiterungen in der Seitenleiste können keine [CRM-Datenkomponenten](/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/crm-data-components/overview) verwenden. Wenn `objectType` auf `DEALS` festgelegt wurde, ist die Karte auch in der [Deal-Seitenleiste des Sales-Workspace](https://knowledge.hubspot.com/prospecting/create-and-manage-deals-in-the-sales-workspace) verfügbar.
**Screenshot**
* `crm.preview`: Zeigt die App-Karte im Vorschaubereich an, auf den Sie im gesamten CRM zugreifen können. Falls Sie diesen Speicherort verwenden, ist die Erweiterung in der `objectTypes`-Vorschau, wie in der [JSON-Konfigurationsdatei](#example-card-json) angegeben, verfügbar. Dazu gehört die Vorschau von Datensätzen innerhalb von CRM-Datensatzseiten, Indexseiten, Board-Ansichten und dem Listentool. Erfahren Sie mehr über das [Anpassen von Dashboards](https://knowledge.hubspot.com/object-settings/customize-record-previews).
**Screenshot**
* `helpdesk.sidebar`: Zeigt die Karte in den Ticket-Seitenleisten innerhalb des Helpdesk an. Dazu gehören sowohl die Ticket-Vorschau auf der Startseite des Helpdesks als auch die dortige rechte Seitenleiste der Ticket-Ansicht. Um eine Karte zu diesem Ort hinzuzufügen, müssen Sie [Ihre Helpdesk-Einstellungen so konfigurieren](https://knowledge.hubspot.com/help-desk/customize-the-right-sidebar-of-help-desk), dass die Karte enthalten ist.
> [!WARNING]
>
> Wenn Sie eine Erweiterung für diesen Speicherort erstellen, müssen Sie auch sicherstellen, dass die [JSON-Konfigurationsdatei der App](/docs/apps/developer-platform/build-apps/app-configuration) `tickets` im `scopes`-Array und die [JSON-Konfigurationsdatei der Karte](#app-card-schema) `tickets` im `objectTypes`-Feld enthält.
**screenshots**
* Helpdesk-Startseite:
* Helpdesk Ticke-Ansicht:
## Erstellen des React-Frontends
Die Benutzeroberfläche einer App-Karte wird durch eine React-Komponentendatei erstellt, entweder durch `.jsx` oder `.tsx`. Diese Datei befindet sich in dem `cards/`-neben der [JSON-Datei für die Kartenkonfiguration](#app-card-schema) (`*-hsmeta.json`). In der Kartenkonfigurationsdatei geben Sie den Pfad der React-Datei im `entrypoint` Feld an.
Nachfolgend finden Sie ein Beispiel für eine einfache App-Karte, die und `Button` [UI-Komponenten](/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/overview) zum Rendern des Karteninhalts sowie eine `Flex` Komponente zum Verwalten des Layouts enthält `Text` .
```jsx theme={null}
import React from "react";
import { Text, Button, Flex, hubspot } from "@hubspot/ui-extensions";
// Define the extension to be run within the Hubspot CRM
hubspot.extend(() => );
// Define the Extension component
const Extension = () => {
return (
This is a simple getting started UI extension with static text.
);
};
```
Die folgende Referenzdokumentation wird bereitgestellt, um das Erscheinungsbild und die Funktionalität von Karten zu verbessern:
* [Referenzdokumentation für UI-Erweiterungskomponenten](/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/overview)
* [SDK für UI-Erweiterungen](/docs/apps/developer-platform/add-features/ui-extensibility/ui-extensions-sdk)
## E-Mail-Abhängigkeiten
Sie können Abhängigkeiten für Ihre App-Karte in einer `package.json`-Datei innerhalb des `cards/` Verzeichnisses aufnehmen. Wenn Sie eine App-Karte den `hs project add`-Befehl hinzufügen, wird standardmäßig eine `package.json` Datei mit den folgenden Abhängigkeiten für Sie erstellt:
* `@hubspot/ui-extensions`
* `react`
* `typescript`
Um Abhängigkeiten für Projektkomponenten mit einer `package.json`–Datei zu installieren, können Sie den `hs project install-deps`-Befehl in Ihrem Projektverzeichnis verwenden.
```json theme={null}
{
"name": "hubspot-example-extension",
"version": "0.1.0",
"license": "MIT",
"dependencies": {
"@hubspot/ui-extensions": "latest",
"react": "^18.2.0"
},
"devDependencies": {
"typescript": "^5.3.3"
}
}
```
# Eine Einstellungsseite erstellen (BETA)
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/create-a-settings-component
Erfahren Sie, wie Sie eine Einstellungsseite für Ihre App erstellen (BETA).
Sie haben die Möglichkeit, eine React-basierte Einstellungsseite für Ihre App auf der neuesten Version (`2025.2`) der Entwicklerplattform zu erstellen, zu der Benutzer, die Ihre App installieren, navigieren und diese für ihren Account anpassen können.
In dieser Anleitung erfahren Sie, wie Sie mit React eine Einstellungskomponente erstellen, die die [vorherigen Einstellungen](/docs/apps/legacy-apps/public-apps/create-an-app-settings-page) ersetzt. Wenn Sie Ihre neue Einstellungskomponente einsetzen, wird Benutzern, die Ihre App später installieren, sofort Ihre neue Einstellungserweiterung statt einer zuvor erstellten Einstellungsseite angezeigt.
Bevor Sie beginnen, berücksichtigen Sie bitte die [Schnellanleitung](/docs/apps/developer-platform/add-features/app-objects/quickstart-guide-to-app-objects), um Ihre erste App auf der neuesten Version der Entwicklerplattform zu erstellen.
> [!WARNING]
>
> **Hinweis:**
>
> Wenn Sie bereits eine [Einstellungsseite](/docs/apps/legacy-apps/public-apps/create-an-app-settings-page) für Ihre App erstellt haben, müssen Sie Ihre Einstellungen mithilfe der in diesem Leitfaden beschriebenen neuen Konfigurationsoptionen verändern. Es wird empfohlen, dass Sie sich alle Oberflächenelemente in der aktuellen Produktionsversion Ihrer App notieren, bevor Sie mit der Konfiguration der neuen Einstellungskomponente auf der neuesten Version der Entwicklerplattform beginnen. Sobald Sie zur neuen Einstellungskomponente für Ihre App wechseln, verlieren Sie nämlich den Zugriff auf die vorherige WYSIWYG-Konfigurationsbenutzeroberfläche, die Sie bislang verwendet haben.
## Dateien der Einstellungskomponenten erstellen und einrichten
Erstellen Sie zunächst in Ihrem `/app`-Verzeichnis ein `/settings/`-Verzeichnis und fügen Sie dann die folgenden drei Dateien hinzu:
```shell theme={null}
├──src
│ ├── app/
│ │ └── settings/
│ │ └── Settings.tsx
│ │ └── settings-hsmeta.json
│ │ └── package.json
└──
```
Bearbeiten Sie diese drei Dateien, um den Boilerplate-Code in die folgenden Snippets aufzunehmen.
### Settings.tsx
```js theme={null}
import React from "react";
import { EmptyState, Text } from "@hubspot/ui-extensions";
import { hubspot } from "@hubspot/ui-extensions";
hubspot.extend <
"settings" >
(({ context }) => {
return ;
});
const Settings = ({ context }) => {
// TODO: Update this JSX code to include the components that fit your settings page.
return (
Contact '{context.extension.appName}' for upcoming development plans.
);
};
```
### settings-hsmeta.json
```js theme={null}
{
"uid": "settings_extension",
"type": "settings",
"config": {
"entrypoint": "/app/settings/Settings.tsx"
}
}
```
### package.json
```js theme={null}
{
"name": "hubspot-settings-extension",
"version": "0.1.0",
"license": "MIT",
"dependencies": {
"@hubspot/ui-extensions": "latest",
"react": "^18.2.0"
},
"devDependencies": {
"typescript": "^5.3.3"
}
}
```
## Einstellungskomponente hochladen und installieren
So laden Sie Ihre Einstellungen-Komponente in Ihr Projekt hoch:
* Führen Sie in Ihrem `app/`-Verzeichnis `hs project install-deps` aus, um eine `package-lock.json`-Datei zu erstellen, die die Erstellung der hochgeladenen Einstellungserweiterung beschleunigt und sicherstellt, dass alle Abhängigkeiten in Ihrer lokalen Entwicklungsumgebung und der Produktion übereinstimmen.
* Führen Sie dann `hs project upload` aus. Rufen Sie anschließend die Detailseite Ihres Entwicklerprojekts auf, indem Sie dazu zu **Entwicklung** > **Projekte** gehen und dann auf den **Namen** Ihres Projekts klicken.
* Ihre Einstellungskomponente sollte jetzt auf der Detailseite aufgeführt sein.
## Anzeigen der Einstellungsseite in Ihrem Entwickler-Test-Account
* Um zu überprüfen, ob die Einstellungskomponente ordnungsgemäß funktioniert, gehen Sie bitte zu dem Entwickler-Test-Account, wo Sie Ihre App installiert haben, klicken dann auf das **Marketplace**-Symbol und danach auf **Verknüpfte Apps**.
* Klicken Sie auf den **Namen** Ihrer App, woraufhin Sie auf die Einstellungsseite Ihrer App gelangen sollten.
Sie können nun Ihre Einstellungskomponente – genauso wie bei einer App-Karte – weiter erstellen. Alle bestehenden Erstellungseinschränkungen von UI-Erweiterungen gelten auch für das Erstellen einer Einstellungsseite.
* Verwenden Sie `hubspot.fetch`, um Ihr Backend zum Speichern und Abrufen von Einstellungen zu nutzen. Erfahren Sie in der älteren Dokumentation mehr über die Anwendung dieses Ansatzes.
* Informieren Sie sich in der Referenzdokumentation zu [Standardkomponenten](/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/overview) darüber, wie Sie React-Komponenten beim Erstellen Ihrer Erweiterung verwenden können, oder benutzen Sie die Komponente im [Figma Design Kit](/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/figma-design-kit).
* Verwenden Sie den `hs project dev`-Befehl, um Ihre Einstellungsseite iterativ zu erstellen und eine lokale Vorschau Ihrer Änderungen anzuzeigen.
## Best Practices für Komponente
In den folgenden Abschnitten werden einige bewährte Methoden beschrieben, die Sie beim Erstellen der Einstellungen für Ihre App beachten sollten.
### Kontakte verwalten
Wenn Sie über so viel Content in Ihrer Einstellungserweiterung verfügen, dass es notwendig ist, alle Einstellungsdaten des Benutzers zu trennen und zu organisieren, sollten Sie die jeweilige Verwendung der Komponenten [Panel](/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/panel), [Modal](/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/modal), [Accordion](/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/accordion) und [Tabs](/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/tabs) in Betracht ziehen. Überlegen Sie, wie Sie Ihre Einstellungen darstellen und anordnen möchten und welche Daten für jede Komponente abgerufen werden sollen.
### Registerkarten
Wenn Sie [Tabs](/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/tabs) einsetzen, verwenden Sie bitte die `default`-Tab-Variante. Die Einstellungserweiterung ist bereits in einem geschlossenen Varianten-Tab enthalten und eine zweite Ebene geschlossener Tabs kollidiert optisch mit dem Design.
Das folgende Snippet zeigt, wie Ihre Tabs strukturiert sein sollten.
```js theme={null}
Here is the content of the first tab.This is where the content of the second tab goes.;
```
# Eine App-Startseite erstellen
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/create-an-app-home-page
# Daten in App-Karten werden abgerufen (BETA)
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/fetching-data
# CrmActionButton
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/crm-action-components/crm-action-button
# CrmActionLink
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/crm-action-components/crm-action-link
# CrmCardActions
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/crm-action-components/crm-card-actions
# Überblick über die ersten Schritte
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/crm-action-components/overview
Erfahren Sie, wie Sie mit dem Entwickeln in HubSpot beginnen können.
'Erfahren Sie, wie Sie mit dem Entwickeln in HubSpot beginnen können.';
Ganz gleich, ob Sie ein neuer HubSpot-Entwickler sind oder Ihre Kenntnisse erweitern möchten, dieser Abschnitt führt Sie durch den Einstieg in das Entwickeln in HubSpot. Sie werden die verschiedenen verfügbaren Entwicklungswege sowie die spezifischen Tools und Accounts kennenlernen, die Sie benötigen, um Ihre Ziele zu erreichen.
## Die Vorteile einer vernetzten Plattform
Zunächst ist es hilfreich, sich vor Augen zu führe, was genau HubSpot zu einer leistungsstarken Plattform für Entwickler macht.
Die Grundlage jedes HubSpot-Accounts ist die CRM-Plattform [](/docs/guides/crm/understanding-the-crm) (Customer Relationship Management), eine Datenbank für Geschäftsbeziehungen und -prozesse. HubSpot bietet verschiedene Möglichkeiten für externe Entwickler und Partner, mit dem CRM zu arbeiten, damit sie einen Mehrwert für HubSpot-Endbenutzer schaffen können. Dazu gehören:
* Erstellen von Integrationen und/oder Erweiterungen mit den APIs von HubSpot, um Daten zwischen HubSpot und externen Plattformen zu synchronisieren.
* Erstellen von benutzerdefinierten Websites mit CMS Hub, dem Contentmanagement-System von HubSpot. CMS Hub verfügt nicht nur über eine vollständige Suite von Contentmanagement-Tools, sondern ist auch vollständig in das CRM integriert. Dies erleichtert das Verwalten von Kampagnen, das Erfassen von Leads und die laufende Kundenkommunikation.
* Anpassen des CRM mit UI-Erweiterungen. Entwickler können React verwenden, um flexible benutzerdefinierte Karten zu erstellen, die sich nahtlos in HubSpot integrieren lassen.
Im nächsten Abschnitt erhalten Sie einen Überblick über die Tools, die für HubSpot-Entwickler verfügbar sind. Anschließend wählen Sie eine Route, um Ihre Customer Journey als HubSpot-Entwickler fortzusetzen.
## 1. Die Tools installieren, die Sie bei der Erstellung unterstützen
Für HubSpot-Entwickler ist eine breite Palette von Tools verfügbar. Welche genau Sie benötigen, hängt von Ihren spezifischen Zielen ab.
* **HubSpot CLI:** Die Installation des HubSpot CLI für die lokale Entwicklung ist ein guter Ausgangspunkt für viele Entwicklungsaufgaben. Das CLI wird bei der Erstellung von UI-Erweiterungen und CMS-Ressourcen verwendet und kann zum Erstellen und Verwalten von Geheimnissen, HubDB-Tabellen und benutzerdefinierten Objekten in Ihrem Account verwendet werden. Es muss [Node.js](https://nodejs.org/en/) installiert sein (Version 18 oder höher ist erforderlich, und die LTS-Version wird empfohlen). Um das CLI global zu installieren, führen Sie den folgenden Befehl aus:
```shell theme={null}
npm i -g @hubspot/cli
```
* **Visual Studio Code:** Wenn Sie [Visual Studio Code](https://code.visualstudio.com/) installieren, können Sie die Vorteile der [HubSpot Visual Studio Code-Erweiterung](https://developers.hubspot.com/docs) nutzen, mit der Sie Ihren Entwicklungs-Workflow zentralisieren können.
* **Client-Bibliotheken**: HubSpot bietet Client-Bibliotheken für [Node](https://github.com/HubSpot/hubspot-api-nodejs), [PHP](https://github.com/HubSpot/hubspot-api-php), [Ruby](https://github.com/HubSpot/hubspot-api-ruby) und [Python](https://github.com/HubSpot/hubspot-api-python).
* **Postman:** Verwenden Sie [Postman](https://www.postman.com/) für den Zugriff auf [die Postman-Filtergruppe von HubSpot](https://www.postman.com/hubspot). In der gesamten API-Dokumentation von HubSpot finden Sie Schaltflächen zum Ausführen von Aufrufen unter Verwendung der Filtergruppe.
Erfahren Sie mehr über [HubSpots Tools für Entwickler](/docs/developer-tooling/overview).
## 2. Entscheiden, was erstellt werden soll
Für die Entwicklung mit HubSpot gibt es kein Patentrezept. Es ist eine flexible Plattform, die eine Vielzahl von Anforderungen erfüllen kann.
Eine der vier unten aufgeführten Kategorien dürfte die meisten dieser Bedürfnisse abdecken. Sie können diejenige auswählen, die für Sie im Moment am wichtigsten ist, um eine kurze Einführung zu erhalten, zusammen mit einigen Sofortmaßnahmen, die Ihnen den Einstieg erleichtern. Sie können sich auch ein Bild davon machen, welche Tools am besten geeignet sind und ob ein bestimmter [Typ von HubSpot-Account](/docs/getting-started/account-types) erforderlich ist.
* [APIs verwenden und Integrationen erstellen](https://developers.hubspot.com#use-apis-and-build-integrations)
* [Apps für den App Marketplace erstellen](https://developers.hubspot.com#build-for-the-app-marketplace)
* [Die Benutzeroberfläche von HubSpot anpassen](https://developers.hubspot.com#customize-the-hubspot-ui)
* [Benutzerdefinierte Websites erstellen](https://developers.hubspot.com#build-custom-websites)
## 3. Sich Gleichgesinnten anschließen
Vernetzen Sie sich mit Peers, die bereits auf Grundlage von HubSpot entwickeln. Stellen Sie Fragen, tauschen Sie Wissen aus, bauen Sie eine Gemeinschaft auf und finden Sie vielleicht sogar Freunde.
* [Entwickler-Community bei Slack (Developer Slack)](https://developers.hubspot.com/community)
* [Entwickler-Foren](https://community.hubspot.com/t5/HubSpot-Developers/ct-p/developers)
* [Entwickler-Advocacy GitHub](https://github.com/hubspotdev)
## 4. Ihren Bedürfnissen entsprechend lernen
Sobald Sie mit der Arbeit begonnen haben, stehen Ihnen zahlreiche Ressourcen zur Verfügung, die Sie bei der Vertiefung Ihrer Kenntnisse unterstützen. Sie können auf ausführliche Leitfäden, detaillierte Referenzdokumente oder [HubSpot Academy-Kurse](https://academy.hubspot.com/courses) zugreifen, je nach Ihrem bevorzugten Lernstil.
# CrmAssociationPivot
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/crm-data-components/crm-association-pivot
# CrmAssociationPropertyList
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/crm-data-components/crm-association-property-list
# CrmAssociationStageTracker
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/crm-data-components/crm-association-stage-tracker
# CrmAssociationTable
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/crm-data-components/crm-association-table
# CrmDataHighlight
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/crm-data-components/crm-data-highlight
# CrmPropertyList
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/crm-data-components/crm-property-list
# CrmReport
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/crm-data-components/crm-report
# CrmStageTracker
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/crm-data-components/crm-stage-tracker
# CrmStatistics
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/crm-data-components/crm-statistics
# Überblick über die ersten Schritte
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/crm-data-components/overview
Erfahren Sie, wie Sie mit dem Entwickeln in HubSpot beginnen können.
'Erfahren Sie, wie Sie mit dem Entwickeln in HubSpot beginnen können.';
Ganz gleich, ob Sie ein neuer HubSpot-Entwickler sind oder Ihre Kenntnisse erweitern möchten, dieser Abschnitt führt Sie durch den Einstieg in das Entwickeln in HubSpot. Sie werden die verschiedenen verfügbaren Entwicklungswege sowie die spezifischen Tools und Accounts kennenlernen, die Sie benötigen, um Ihre Ziele zu erreichen.
## Die Vorteile einer vernetzten Plattform
Zunächst ist es hilfreich, sich vor Augen zu führe, was genau HubSpot zu einer leistungsstarken Plattform für Entwickler macht.
Die Grundlage jedes HubSpot-Accounts ist die CRM-Plattform [](/docs/guides/crm/understanding-the-crm) (Customer Relationship Management), eine Datenbank für Geschäftsbeziehungen und -prozesse. HubSpot bietet verschiedene Möglichkeiten für externe Entwickler und Partner, mit dem CRM zu arbeiten, damit sie einen Mehrwert für HubSpot-Endbenutzer schaffen können. Dazu gehören:
* Erstellen von Integrationen und/oder Erweiterungen mit den APIs von HubSpot, um Daten zwischen HubSpot und externen Plattformen zu synchronisieren.
* Erstellen von benutzerdefinierten Websites mit CMS Hub, dem Contentmanagement-System von HubSpot. CMS Hub verfügt nicht nur über eine vollständige Suite von Contentmanagement-Tools, sondern ist auch vollständig in das CRM integriert. Dies erleichtert das Verwalten von Kampagnen, das Erfassen von Leads und die laufende Kundenkommunikation.
* Anpassen des CRM mit UI-Erweiterungen. Entwickler können React verwenden, um flexible benutzerdefinierte Karten zu erstellen, die sich nahtlos in HubSpot integrieren lassen.
Im nächsten Abschnitt erhalten Sie einen Überblick über die Tools, die für HubSpot-Entwickler verfügbar sind. Anschließend wählen Sie eine Route, um Ihre Customer Journey als HubSpot-Entwickler fortzusetzen.
## 1. Die Tools installieren, die Sie bei der Erstellung unterstützen
Für HubSpot-Entwickler ist eine breite Palette von Tools verfügbar. Welche genau Sie benötigen, hängt von Ihren spezifischen Zielen ab.
* **HubSpot CLI:** Die Installation des HubSpot CLI für die lokale Entwicklung ist ein guter Ausgangspunkt für viele Entwicklungsaufgaben. Das CLI wird bei der Erstellung von UI-Erweiterungen und CMS-Ressourcen verwendet und kann zum Erstellen und Verwalten von Geheimnissen, HubDB-Tabellen und benutzerdefinierten Objekten in Ihrem Account verwendet werden. Es muss [Node.js](https://nodejs.org/en/) installiert sein (Version 18 oder höher ist erforderlich, und die LTS-Version wird empfohlen). Um das CLI global zu installieren, führen Sie den folgenden Befehl aus:
```shell theme={null}
npm i -g @hubspot/cli
```
* **Visual Studio Code:** Wenn Sie [Visual Studio Code](https://code.visualstudio.com/) installieren, können Sie die Vorteile der [HubSpot Visual Studio Code-Erweiterung](https://developers.hubspot.com/docs) nutzen, mit der Sie Ihren Entwicklungs-Workflow zentralisieren können.
* **Client-Bibliotheken**: HubSpot bietet Client-Bibliotheken für [Node](https://github.com/HubSpot/hubspot-api-nodejs), [PHP](https://github.com/HubSpot/hubspot-api-php), [Ruby](https://github.com/HubSpot/hubspot-api-ruby) und [Python](https://github.com/HubSpot/hubspot-api-python).
* **Postman:** Verwenden Sie [Postman](https://www.postman.com/) für den Zugriff auf [die Postman-Filtergruppe von HubSpot](https://www.postman.com/hubspot). In der gesamten API-Dokumentation von HubSpot finden Sie Schaltflächen zum Ausführen von Aufrufen unter Verwendung der Filtergruppe.
Erfahren Sie mehr über [HubSpots Tools für Entwickler](/docs/developer-tooling/overview).
## 2. Entscheiden, was erstellt werden soll
Für die Entwicklung mit HubSpot gibt es kein Patentrezept. Es ist eine flexible Plattform, die eine Vielzahl von Anforderungen erfüllen kann.
Eine der vier unten aufgeführten Kategorien dürfte die meisten dieser Bedürfnisse abdecken. Sie können diejenige auswählen, die für Sie im Moment am wichtigsten ist, um eine kurze Einführung zu erhalten, zusammen mit einigen Sofortmaßnahmen, die Ihnen den Einstieg erleichtern. Sie können sich auch ein Bild davon machen, welche Tools am besten geeignet sind und ob ein bestimmter [Typ von HubSpot-Account](/docs/getting-started/account-types) erforderlich ist.
* [APIs verwenden und Integrationen erstellen](https://developers.hubspot.com#use-apis-and-build-integrations)
* [Apps für den App Marketplace erstellen](https://developers.hubspot.com#build-for-the-app-marketplace)
* [Die Benutzeroberfläche von HubSpot anpassen](https://developers.hubspot.com#customize-the-hubspot-ui)
* [Benutzerdefinierte Websites erstellen](https://developers.hubspot.com#build-custom-websites)
## 3. Sich Gleichgesinnten anschließen
Vernetzen Sie sich mit Peers, die bereits auf Grundlage von HubSpot entwickeln. Stellen Sie Fragen, tauschen Sie Wissen aus, bauen Sie eine Gemeinschaft auf und finden Sie vielleicht sogar Freunde.
* [Entwickler-Community bei Slack (Developer Slack)](https://developers.hubspot.com/community)
* [Entwickler-Foren](https://community.hubspot.com/t5/HubSpot-Developers/ct-p/developers)
* [Entwickler-Advocacy GitHub](https://github.com/hubspotdev)
## 4. Ihren Bedürfnissen entsprechend lernen
Sobald Sie mit der Arbeit begonnen haben, stehen Ihnen zahlreiche Ressourcen zur Verfügung, die Sie bei der Vertiefung Ihrer Kenntnisse unterstützen. Sie können auf ausführliche Leitfäden, detaillierte Referenzdokumente oder [HubSpot Academy-Kurse](https://academy.hubspot.com/courses) zugreifen, je nach Ihrem bevorzugten Lernstil.
# Figma-Design-Kit | UI-Erweiterungen
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/figma-design-kit
# UI-Erweiterungslayout verwalten (BETA)
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/manage-ui-extension-layout
# Überblick über die ersten Schritte
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/overview
Erfahren Sie, wie Sie mit dem Entwickeln in HubSpot beginnen können.
'Erfahren Sie, wie Sie mit dem Entwickeln in HubSpot beginnen können.';
Ganz gleich, ob Sie ein neuer HubSpot-Entwickler sind oder Ihre Kenntnisse erweitern möchten, dieser Abschnitt führt Sie durch den Einstieg in das Entwickeln in HubSpot. Sie werden die verschiedenen verfügbaren Entwicklungswege sowie die spezifischen Tools und Accounts kennenlernen, die Sie benötigen, um Ihre Ziele zu erreichen.
## Die Vorteile einer vernetzten Plattform
Zunächst ist es hilfreich, sich vor Augen zu führe, was genau HubSpot zu einer leistungsstarken Plattform für Entwickler macht.
Die Grundlage jedes HubSpot-Accounts ist die CRM-Plattform [](/docs/guides/crm/understanding-the-crm) (Customer Relationship Management), eine Datenbank für Geschäftsbeziehungen und -prozesse. HubSpot bietet verschiedene Möglichkeiten für externe Entwickler und Partner, mit dem CRM zu arbeiten, damit sie einen Mehrwert für HubSpot-Endbenutzer schaffen können. Dazu gehören:
* Erstellen von Integrationen und/oder Erweiterungen mit den APIs von HubSpot, um Daten zwischen HubSpot und externen Plattformen zu synchronisieren.
* Erstellen von benutzerdefinierten Websites mit CMS Hub, dem Contentmanagement-System von HubSpot. CMS Hub verfügt nicht nur über eine vollständige Suite von Contentmanagement-Tools, sondern ist auch vollständig in das CRM integriert. Dies erleichtert das Verwalten von Kampagnen, das Erfassen von Leads und die laufende Kundenkommunikation.
* Anpassen des CRM mit UI-Erweiterungen. Entwickler können React verwenden, um flexible benutzerdefinierte Karten zu erstellen, die sich nahtlos in HubSpot integrieren lassen.
Im nächsten Abschnitt erhalten Sie einen Überblick über die Tools, die für HubSpot-Entwickler verfügbar sind. Anschließend wählen Sie eine Route, um Ihre Customer Journey als HubSpot-Entwickler fortzusetzen.
## 1. Die Tools installieren, die Sie bei der Erstellung unterstützen
Für HubSpot-Entwickler ist eine breite Palette von Tools verfügbar. Welche genau Sie benötigen, hängt von Ihren spezifischen Zielen ab.
* **HubSpot CLI:** Die Installation des HubSpot CLI für die lokale Entwicklung ist ein guter Ausgangspunkt für viele Entwicklungsaufgaben. Das CLI wird bei der Erstellung von UI-Erweiterungen und CMS-Ressourcen verwendet und kann zum Erstellen und Verwalten von Geheimnissen, HubDB-Tabellen und benutzerdefinierten Objekten in Ihrem Account verwendet werden. Es muss [Node.js](https://nodejs.org/en/) installiert sein (Version 18 oder höher ist erforderlich, und die LTS-Version wird empfohlen). Um das CLI global zu installieren, führen Sie den folgenden Befehl aus:
```shell theme={null}
npm i -g @hubspot/cli
```
* **Visual Studio Code:** Wenn Sie [Visual Studio Code](https://code.visualstudio.com/) installieren, können Sie die Vorteile der [HubSpot Visual Studio Code-Erweiterung](https://developers.hubspot.com/docs) nutzen, mit der Sie Ihren Entwicklungs-Workflow zentralisieren können.
* **Client-Bibliotheken**: HubSpot bietet Client-Bibliotheken für [Node](https://github.com/HubSpot/hubspot-api-nodejs), [PHP](https://github.com/HubSpot/hubspot-api-php), [Ruby](https://github.com/HubSpot/hubspot-api-ruby) und [Python](https://github.com/HubSpot/hubspot-api-python).
* **Postman:** Verwenden Sie [Postman](https://www.postman.com/) für den Zugriff auf [die Postman-Filtergruppe von HubSpot](https://www.postman.com/hubspot). In der gesamten API-Dokumentation von HubSpot finden Sie Schaltflächen zum Ausführen von Aufrufen unter Verwendung der Filtergruppe.
Erfahren Sie mehr über [HubSpots Tools für Entwickler](/docs/developer-tooling/overview).
## 2. Entscheiden, was erstellt werden soll
Für die Entwicklung mit HubSpot gibt es kein Patentrezept. Es ist eine flexible Plattform, die eine Vielzahl von Anforderungen erfüllen kann.
Eine der vier unten aufgeführten Kategorien dürfte die meisten dieser Bedürfnisse abdecken. Sie können diejenige auswählen, die für Sie im Moment am wichtigsten ist, um eine kurze Einführung zu erhalten, zusammen mit einigen Sofortmaßnahmen, die Ihnen den Einstieg erleichtern. Sie können sich auch ein Bild davon machen, welche Tools am besten geeignet sind und ob ein bestimmter [Typ von HubSpot-Account](/docs/getting-started/account-types) erforderlich ist.
* [APIs verwenden und Integrationen erstellen](https://developers.hubspot.com#use-apis-and-build-integrations)
* [Apps für den App Marketplace erstellen](https://developers.hubspot.com#build-for-the-app-marketplace)
* [Die Benutzeroberfläche von HubSpot anpassen](https://developers.hubspot.com#customize-the-hubspot-ui)
* [Benutzerdefinierte Websites erstellen](https://developers.hubspot.com#build-custom-websites)
## 3. Sich Gleichgesinnten anschließen
Vernetzen Sie sich mit Peers, die bereits auf Grundlage von HubSpot entwickeln. Stellen Sie Fragen, tauschen Sie Wissen aus, bauen Sie eine Gemeinschaft auf und finden Sie vielleicht sogar Freunde.
* [Entwickler-Community bei Slack (Developer Slack)](https://developers.hubspot.com/community)
* [Entwickler-Foren](https://community.hubspot.com/t5/HubSpot-Developers/ct-p/developers)
* [Entwickler-Advocacy GitHub](https://github.com/hubspotdev)
## 4. Ihren Bedürfnissen entsprechend lernen
Sobald Sie mit der Arbeit begonnen haben, stehen Ihnen zahlreiche Ressourcen zur Verfügung, die Sie bei der Vertiefung Ihrer Kenntnisse unterstützen. Sie können auf ausführliche Leitfäden, detaillierte Referenzdokumente oder [HubSpot Academy-Kurse](https://academy.hubspot.com/courses) zugreifen, je nach Ihrem bevorzugten Lernstil.
# Button-Designmuster
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/patterns/buttons
# Marketing-API | Formulare
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/patterns/forms
Diese Endpunkte werden verwendet, um Formulare in Ihrem HubSpot-Account zu erstellen und zu verwalten.
'Diese Endpunkte werden verwendet, um Formulare in Ihrem HubSpot-Account zu erstellen und zu verwalten.';
Verwenden Sie ein HubSpot-Formular, um Lead-Informationen über Ihre Besucher und Kontakte zu sammeln. Sie können die hier beschriebenen Endpunkte verwenden, um neue Formulare einzurichten oder um Details zu Formularen abzurufen, die Sie zuvor erstellt haben. Wenn Sie Formulareinsendungsdaten senden möchten, können Sie stattdessen den [Endpunkt für das Senden von Daten an ein Formular](/docs/api-reference/legacy/forms-v3-legacy/post-submissions-v3-integration-secure-submit-portalId-formGuid) verwenden.
Der Typ des Formulars gibt seinen Zweck an und ist standardmäßig auf `hubspot` festgelegt. Sie können die folgenden Werte für Ihren `formType` verwenden:
* `hubspot`: Diese Formulare bieten eine Vielzahl von Feldtypen und Formatierungsoptionen und können entweder auf HubSpot-Seiten oder auf externen Seiten eingebettet verwendet werden. Diese Formulare können mithilfe der hier beschriebenen Endpunkte erstellt und bearbeitet werden. Sie können diese Formulare auch in Ihrem HubSpot-Account erstellen. [Hier](https://knowledge.hubspot.com/de/forms/create-forms) erfahren Sie mehr über das Erstellen von HubSpot-Formularen.
* `captured`: Diese Formulare entsprechen HTML-Formularen auf externen Websites. Wenn das Drittanbieter-Formulare-Tool aktiviert ist und die Einsendung des Formulars auf [einer nachverfolgten Seite](https://knowledge.hubspot.com/de/reports/install-the-hubspot-tracking-code) erfolgt, wird das Formular automatisch in HubSpot erstellt. [Hier](https://knowledge.hubspot.com/de/forms/use-non-hubspot-forms) erfahren Sie mehr über das Verwenden von Drittanbieter-Formularen.
* `flow`: Dies sind Pop-up-Formulare, die entweder auf HubSpot-Seiten oder auf externen Seiten verwendet werden können. Erfahren Sie mehr über das [Pop-up-Formulare-Tool von HubSpot](https://knowledge.hubspot.com/de/forms/edit-and-manage-pop-up-forms-legacy).
* `blog_comment`: Diese Formulare werden automatisch für HubSpot-Blogseiten erstellt, um Kommentare zu Blogbeiträgen zu sammeln. Erfahren Sie mehr darüber, wie Sie [Blogkommentare weiter einrichten und moderieren können](https://knowledge.hubspot.com/de/blog/set-up-and-moderate-your-blog-comments).
# Tabellendesignmuster
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/patterns/tables
# Accordion
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/accordion
# Warnung
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/alert
# Box
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/box
# Button
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/button
# ButtonRow
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/button-row
# BarChart | UI-Komponenten (BETA)
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/charts/bar-chart
# LineChart | UI-Komponenten (BETA)
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/charts/line-chart
# Überblick über die ersten Schritte
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/charts/overview
Erfahren Sie, wie Sie mit dem Entwickeln in HubSpot beginnen können.
'Erfahren Sie, wie Sie mit dem Entwickeln in HubSpot beginnen können.';
Ganz gleich, ob Sie ein neuer HubSpot-Entwickler sind oder Ihre Kenntnisse erweitern möchten, dieser Abschnitt führt Sie durch den Einstieg in das Entwickeln in HubSpot. Sie werden die verschiedenen verfügbaren Entwicklungswege sowie die spezifischen Tools und Accounts kennenlernen, die Sie benötigen, um Ihre Ziele zu erreichen.
## Die Vorteile einer vernetzten Plattform
Zunächst ist es hilfreich, sich vor Augen zu führe, was genau HubSpot zu einer leistungsstarken Plattform für Entwickler macht.
Die Grundlage jedes HubSpot-Accounts ist die CRM-Plattform [](/docs/guides/crm/understanding-the-crm) (Customer Relationship Management), eine Datenbank für Geschäftsbeziehungen und -prozesse. HubSpot bietet verschiedene Möglichkeiten für externe Entwickler und Partner, mit dem CRM zu arbeiten, damit sie einen Mehrwert für HubSpot-Endbenutzer schaffen können. Dazu gehören:
* Erstellen von Integrationen und/oder Erweiterungen mit den APIs von HubSpot, um Daten zwischen HubSpot und externen Plattformen zu synchronisieren.
* Erstellen von benutzerdefinierten Websites mit CMS Hub, dem Contentmanagement-System von HubSpot. CMS Hub verfügt nicht nur über eine vollständige Suite von Contentmanagement-Tools, sondern ist auch vollständig in das CRM integriert. Dies erleichtert das Verwalten von Kampagnen, das Erfassen von Leads und die laufende Kundenkommunikation.
* Anpassen des CRM mit UI-Erweiterungen. Entwickler können React verwenden, um flexible benutzerdefinierte Karten zu erstellen, die sich nahtlos in HubSpot integrieren lassen.
Im nächsten Abschnitt erhalten Sie einen Überblick über die Tools, die für HubSpot-Entwickler verfügbar sind. Anschließend wählen Sie eine Route, um Ihre Customer Journey als HubSpot-Entwickler fortzusetzen.
## 1. Die Tools installieren, die Sie bei der Erstellung unterstützen
Für HubSpot-Entwickler ist eine breite Palette von Tools verfügbar. Welche genau Sie benötigen, hängt von Ihren spezifischen Zielen ab.
* **HubSpot CLI:** Die Installation des HubSpot CLI für die lokale Entwicklung ist ein guter Ausgangspunkt für viele Entwicklungsaufgaben. Das CLI wird bei der Erstellung von UI-Erweiterungen und CMS-Ressourcen verwendet und kann zum Erstellen und Verwalten von Geheimnissen, HubDB-Tabellen und benutzerdefinierten Objekten in Ihrem Account verwendet werden. Es muss [Node.js](https://nodejs.org/en/) installiert sein (Version 18 oder höher ist erforderlich, und die LTS-Version wird empfohlen). Um das CLI global zu installieren, führen Sie den folgenden Befehl aus:
```shell theme={null}
npm i -g @hubspot/cli
```
* **Visual Studio Code:** Wenn Sie [Visual Studio Code](https://code.visualstudio.com/) installieren, können Sie die Vorteile der [HubSpot Visual Studio Code-Erweiterung](https://developers.hubspot.com/docs) nutzen, mit der Sie Ihren Entwicklungs-Workflow zentralisieren können.
* **Client-Bibliotheken**: HubSpot bietet Client-Bibliotheken für [Node](https://github.com/HubSpot/hubspot-api-nodejs), [PHP](https://github.com/HubSpot/hubspot-api-php), [Ruby](https://github.com/HubSpot/hubspot-api-ruby) und [Python](https://github.com/HubSpot/hubspot-api-python).
* **Postman:** Verwenden Sie [Postman](https://www.postman.com/) für den Zugriff auf [die Postman-Filtergruppe von HubSpot](https://www.postman.com/hubspot). In der gesamten API-Dokumentation von HubSpot finden Sie Schaltflächen zum Ausführen von Aufrufen unter Verwendung der Filtergruppe.
Erfahren Sie mehr über [HubSpots Tools für Entwickler](/docs/developer-tooling/overview).
## 2. Entscheiden, was erstellt werden soll
Für die Entwicklung mit HubSpot gibt es kein Patentrezept. Es ist eine flexible Plattform, die eine Vielzahl von Anforderungen erfüllen kann.
Eine der vier unten aufgeführten Kategorien dürfte die meisten dieser Bedürfnisse abdecken. Sie können diejenige auswählen, die für Sie im Moment am wichtigsten ist, um eine kurze Einführung zu erhalten, zusammen mit einigen Sofortmaßnahmen, die Ihnen den Einstieg erleichtern. Sie können sich auch ein Bild davon machen, welche Tools am besten geeignet sind und ob ein bestimmter [Typ von HubSpot-Account](/docs/getting-started/account-types) erforderlich ist.
* [APIs verwenden und Integrationen erstellen](https://developers.hubspot.com#use-apis-and-build-integrations)
* [Apps für den App Marketplace erstellen](https://developers.hubspot.com#build-for-the-app-marketplace)
* [Die Benutzeroberfläche von HubSpot anpassen](https://developers.hubspot.com#customize-the-hubspot-ui)
* [Benutzerdefinierte Websites erstellen](https://developers.hubspot.com#build-custom-websites)
## 3. Sich Gleichgesinnten anschließen
Vernetzen Sie sich mit Peers, die bereits auf Grundlage von HubSpot entwickeln. Stellen Sie Fragen, tauschen Sie Wissen aus, bauen Sie eine Gemeinschaft auf und finden Sie vielleicht sogar Freunde.
* [Entwickler-Community bei Slack (Developer Slack)](https://developers.hubspot.com/community)
* [Entwickler-Foren](https://community.hubspot.com/t5/HubSpot-Developers/ct-p/developers)
* [Entwickler-Advocacy GitHub](https://github.com/hubspotdev)
## 4. Ihren Bedürfnissen entsprechend lernen
Sobald Sie mit der Arbeit begonnen haben, stehen Ihnen zahlreiche Ressourcen zur Verfügung, die Sie bei der Vertiefung Ihrer Kenntnisse unterstützen. Sie können auf ausführliche Leitfäden, detaillierte Referenzdokumente oder [HubSpot Academy-Kurse](https://academy.hubspot.com/courses) zugreifen, je nach Ihrem bevorzugten Lernstil.
# Kontrollkästchen
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/checkbox
# DateInput | UI-Komponenten
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/date-input
# DescriptionList | UI-Komponenten
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/description-list
# Abgrenzung
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/divider
# Dropdown | UI-Komponenten
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/dropdown
# EmptyState | UI-Komponenten
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/empty-state
# Fehlerzustand | UI-Komponenten
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/error-state
# Flex
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/flex
# Formular
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/form
# Überschrift
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/heading
# Symbol
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/icon
# Illustration
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/illustration
# Bild
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/image
# Eingabe
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/input
# Verknüpfen
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/link
# Liste
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/list
# LoadingButton | UI-Komponenten
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/loading-button
# LoadingSpinner
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/loading-spinner
# Modalfenster
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/modal
# MultiSelect
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/multi-select
# NumberInput
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/number-input
# Bereich
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/panel
# ProgressBar
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/progress-bar
# RadioButton
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/radio-button
# SearchInput | UI-Komponenten
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/search-input
# Auswählen
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/select
# Statistik
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/statistics
# StatusTag | UI-Komponenten
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/status-tag
# StepIndicator
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/step-indicator
# StepperInput
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/stepper-input
# Table | UI-Komponenten
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/table
# Tabs | UI-Komponenten
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/tabs
# Tag
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/tag
# Text
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/text
# TextArea
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/text-area
# Kachel
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/tile
# Schalter
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/toggle
# ToggleGroup
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/toggle-group
# Tooltip | UI-Komponenten
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/tooltip
# Referenz für SDK für UI-Erweiterungen (BETA)
Source: https://developers.hubspot.de/docs/apps/developer-platform/add-features/ui-extensibility/ui-extensions-sdk
# App-Konfiguration (BETA)
Source: https://developers.hubspot.de/docs/apps/developer-platform/build-apps/app-configuration
Referenzinformationen zu Konfigurationsoptionen für Apps, die auf der neuen Entwicklerplattform (BETA) basieren
Im Folgenden finden Sie Referenzinformationen zu App-Funktionen der Entwicklerplattform, einschließlich Definitionen für Konfigurationsdateien, Details zu Bereichen und mehr.
## Projektstruktur
* Alle Projektkomponenten müssen sich in dem `src`-Verzeichnis befinden, das in der `hsproject.json`-Konfigurationsdatei der obersten Ebene angegeben ist.
* Alle App-Funktionen und -Komponenten müssen innerhalb des Verzeichnisses `src/app/`-gespeichert werden. In diesem `app/`-Verzeichnis definieren Sie Unterverzeichnisse für jede Funktion, die Ihre App unterstützen soll:
* App-Events sind in `app-events/` konfiguriert.
* App-Objekte sind in `app-objects/` definiert.
* Alle Kartenfunktionen sind in `cards/` definiert.
* Die Funktionen der Einstellungsseite sind innerhalb von `settings/` definiert.
* Die Telemetriedaten sind in `telemetry/` konfiguriert.
* Webhook-Abonnements sind innerhalb von `webhooks/` definiert.
* Benutzerdefinierte Workflow-Aktionen sind innerhalb von `workflow-actions/` definiert.
* In jedem Unterverzeichnis für Funktionen konfigurieren Sie die jeweiligen Funktionen mithilfe einer `*-hsmeta.json`-Datei. Sie können dem Dateinamen etwas voranstellen, das für Ihre App sinnvoll ist (z. B. `my-app-hsmeta.json`), solange die Datei mit `-hsmeta.json` endet. Diese Dateien müssen sich auf der Stammebene ihres jeweiligen Ordners befinden (z. B. `app/my-app-hsmeta.json`, `cards/my-card-hsmeta.json`).
Die folgende Beispielverzeichnisstruktur zeigt alle verfügbaren Funktionen. Einzelheiten zum Konfigurieren der `app-hsmeta.json`-App-Schemadatei der obersten Ebene finden Sie unten im [Abschnitt App-Schema](#app-schema). Um App-Funktionen hinzuzufügen, lesen Sie bitte den Abschnitt [Hinzufügen von App-Funktionen](#adding-app-features).
```shell theme={null}
my-project-folder/
└── hsproject.json
└── src
└── app/
└── app-hsmeta.json/
└── app-events/
└── my-event-type-hsmeta.json
└── cards/
└── MyCard.jsx
└── my-app-card-hsmeta.json
└── package.json
└── settings/
└── Settings.tsx
└── settings-hsmeta.json
└── package.json
└── telemetry/
└── telemetry-hsmeta.json
└── webhooks/
└── webhooks-hsmeta.json
└── workflow-actions/
└── custom-action-hsmeta.json
```
> **[Beispiel auf GitHub anzeigen](https://github.com/robrown-hubspot/hubspot-project-components-ua-app-objects-beta/tree/main/projects/app-object-getting-started-template)**
Die HubSpot Visual Studio Code-Erweiterung bietet eine [Typüberprüfung](/docs/developer-tooling/local-development/vs-code-extension#validate-hs-meta-json-config-files) für jede Eigenschaft in Ihren `*-hsmeta.json`-Konfigurationsdateien.
## Angeben von UIDs
Das `uid`-Feld ist eine intern eindeutige ID für Ihre spezifische App und muss auch innerhalb des Projekts global eindeutig sein. Für alle [App-Funktionen](#adding-app-features) ist jeweils eine eigene `uid`-Datei in ihren jeweiligen `*-hsmeta.json`-Dateien definiert, die sich von der entsprechenden `uid` der obersten Ebene unterscheiden muss, welche Sie in der `app-hsmeta.json`-Datei Ihrer App auswählen.
## App-Schema
Die Konfiguration der obersten Ebene für Ihre App wird in einer `app-hsmeta.json`-Konfigurationsdatei im `app`-Verzeichnis angegeben.
```shell theme={null}
my-project-folder/
└── src
└── app/
└── app-hsmeta.json/
```
Nachfolgend finden Sie die Konfigurationsoptionen für `app-hsmeta.json`.
```json theme={null}
{
"uid": "new_developer_platform_app",
"type": "app",
"config": {
"description": "An example to demonstrate how to build an app with developer projects.",
"name": "my first app",
"distribution": "marketplace",
"auth": {
"type": "oauth",
"redirectUrls": ["http://localhost:3000/oauth-callback"],
"requiredScopes": ["crm.objects.contacts.read", "crm.objects.contacts.write"],
"optionalScopes": [],
"conditionallyRequiredScopes": []
},
"permittedUrls": {
"fetch": ["https://api.hubapi.com"],
"iframe": [],
"img": []
},
"support": {
"supportEmail": "support@example.com",
"documentationUrl": "https://example.com/docs",
"supportUrl": "https://example.com/support",
"supportPhone": "+18005555555"
}
}
}
```
> **[Beispiel auf GitHub anzeigen](https://github.com/robrown-hubspot/hubspot-project-components-ua-app-objects-beta/blob/main/projects/app-object-getting-started-template/src/app/app-hsmeta.json)**
Die einzelnen Konfigurationsoptionen sind in der folgenden Tabelle aufgeführt. Weitere Informationen zum [Verteilen Ihrer App](#distribution), zum Konfigurieren der [Authentifizierung](#authentication) und zum Angeben von [Bereichen](#scopes) finden Sie in den Abschnitten unterhalb der Tabelle.
Mit \* markierte Felder sind Pflichtfelder.
| Feld | Typ | Beschreibung |
| - | - | - |
| `uid`\* | Zeichenfolge | Eine interne eindeutige ID für die App. Sie muss innerhalb des Projekts global eindeutig und kann eine beliebige Zeichenfolge mit bis zu 64 Zeichen sein. Zeichen können in Groß- oder Kleinbuchstaben geschrieben werden und Ziffern, Unterstriche (`_`), Bindestriche (`-`) und Punkte (`.`) enthalten. |
| `type`\* | Zeichenfolge | Der Typ der Komponente. Muss mit dem Namen des übergeordneten Ordners (`app`) übereinstimmen. |
| `description`\* | Zeichenfolge | Eine Beschreibung, was die App für den installierenden Benutzer tut. Kann eine beliebige Zeichenfolge mit bis zu 8.192 Zeichen sein. |
| `name`\* | Zeichenfolge | Dies ist der Name der App, der in HubSpot angezeigt wird. Kann eine beliebige Zeichenfolge mit bis zu 200 Zeichen sein. Darf nicht mit einem Leerzeichen beginnen oder enden. |
| `distribution`\* | Zeichenfolge | Die Methode der App-Verteilung, die auf eine der folgenden Optionen festgelegt werden kann:
`marketplace`: wird verwendet, wenn die App für ein Listing im HubSpot App Marketplace in Frage kommen soll.
`private`: wird verwendet, wenn Sie Ihre App nur in einer bestimmten Gruppe von Accounts der Zulassungsliste oder jeweils in einem einzelnen Account installieren möchten.
Weitere Informationen finden Sie im Abschnitt [Verteilung](#distribution) weiter unten. |
| `auth`\* | Objekt | Ein Objekt, das die Details der Authentifizierungsmethode der App enthält. Weitere Informationen finden Sie im [Abschnitt zur Authentifizierung](#authentication) weiter unten. |
| `permittedUrls` | Objekt | Ein Array, das die URLs enthält, die die App aufrufen darf. URLs müssen dem HTTPS-Schema folgen und eine [Autorität](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Web_mechanics/What_is_a_URL#authority) enthalten, ggf. gefolgt von einem optionalen Pfadpräfix. |
| `supportEmail` | Zeichenfolge | Eine gültige E-Mail-Adresse, an die sich Benutzer wenden können, wenn sie Support benötigen. |
| `documentationUrl` | Zeichenfolge | Die externe URL, zu der Benutzer navigieren können, um die Begleitdokumentation zu erhalten. Muss HTTPS verwenden. |
| `supportUrl` | Zeichenfolge | Die externe URL, zu der Benutzer navigieren können, um zusätzlichen Support zu erhalten. Muss HTTPS verwenden. |
| `supportPhone` | Zeichenfolge | Die Telefonnummer, die Benutzer kontaktieren können, wenn sie Support benötigen. Muss mit einem Pluszeichen (`+`) beginnen. |
### Verteilung
Mit dem `distribution`-Feld in Ihrem App-Schema können Sie konfigurieren, wie Sie Ihre App verteilen möchten:
* Wenn Sie Ihre App im [HubSpot App Marketplace](https://ecosystem.hubspot.com/marketplace/apps) listen wollen, legen Sie das `distribution`-Feld auf `"marketplace"` fest. Ein Beispiel für ein App-Schema für diese Option finden Sie [hier](https://github.com/robrown-hubspot/hubspot-project-components-ua-app-objects-beta/blob/main/projects/public-app-getting-started-template/src/app/app-hsmeta.json). Wenn Sie diese Option wählen, stellen Sie sicher, dass Sie innerhalb dem `type` der `auth`-Eigenschaft den Wert auf `oauth`setzen, wie im Abschnitt [Authentifizierung](#authentication) weiter unten beschrieben.
* Wenn Sie zulassen möchten, dass Ihre App in einer bestimmten Gruppe von Accounts der Zulassungsliste installiert werden darf, oder falls Sie die Installation jeweils auf einen einzelnen Account beschränken möchten, wählen Sie für den `distribution`-Wert `"private"`. Stellen Sie sicher, dass Sie den `type` innerhalb der `auth`-Eigenschaft genauso bestimmen:
* Wenn Sie Ihre App basierend auf [einer Zulassungsliste, die Sie in Ihren Projekteinstellungen konfiguriert haben,](/docs/apps/developer-platform/build-apps/manage-apps-in-hubspot#manage-authentication-for-your-app) und somit in mehreren Accounts installieren möchten, muss der `type` der Authentifizierung `oauth` lauten. Ein Beispiel für dieses App-Schema-Option finden [Sie hier](https://github.com/robrown-hubspot/hubspot-project-components-ua-app-objects-beta/blob/main/projects/private-app-oauth-getting-started-template/src/app/app-hsmeta.json).
* Um die Installation auf einen einzelnen Account zu beschränken (entweder auf den Account, den Sie für die Entwicklung verwenden, oder auf einen anderen, auf den der installierende Benutzer Zugriff hat), setzen Sie den `type` der Authentifizierung auf `static`. Ein Beispiel für ein App-Schema für statische Authentifizierung finden Sie [hier](https://github.com/robrown-hubspot/hubspot-project-components-ua-app-objects-beta/blob/main/projects/private-app-static-getting-started-template/src/app/app-hsmeta.json).
### Authentifizierung
Die Authentifizierung für Ihre App wird über die `auth`-Eigenschaft in Ihrem App-Schema konfiguriert. Sie können dabei die Bereichsanforderungen Ihrer App, Weiterleitungs-URLs und den Authentifizierungstyp angeben.
Mit \* markierte Felder sind Pflichtfelder.
| Feld | Typ | Beschreibung |
| - | - | - |
| `type`\* | Zeichenfolge | Die Art der Authentifizierung, für die folgende Optionen infrage kommen:
`oauth`: Installation über OAuth zulassen, entweder für eine bestimmte Gruppe von Accounts der Zulassungsliste oder als im HubSpot App Marketplace gelistet.
`static`: Beschränkte Installation Ihrer App auf einen einzigen Account, auf den der installierende Benutzer Zugriff hat.
|
| `redirectUrls`\* | Array | Eine Liste von URLs, zu denen der OAuth-Prozess zurückleiten darf. Jede App muss über mindestens eine derartige URL verfügen und HTTPS verwenden. Die einzige Ausnahme ist, dass für `http://localhost` das Testen erlaubt ist. |
| `requiredScopes`\* | Array | Eine Liste der erforderlichen Bereiche Ihrer App. Jede App muss mindestens einen Bereich enthalten, wobei es erforderlich ist, dass der installierende Benutzer diese Bereiche zulässt, wenn die App erfolgreich installiert werden soll. [Erfahren Sie im Folgenden mehr über Bereiche](#scopes). |
| `optionalScopes` | Array | Eine Liste der optionalen Bereiche Ihrer App. Diese Bereiche können bei der Installation von der Autorisierung ausgeschlossen werden, wenn der Account oder der Benutzer, der die App installiert, nicht über entsprechende Berechtigungen verfügt. In diesem Fall wird der Bereich nicht in das resultierende Aktualisierungs- oder Zugriffs-Token aufgenommen. [Erfahren Sie im Folgenden mehr über Bereiche](#scopes). |
| `conditionallyRequiredScopes` | Array | Eine Liste von Bereichen, die nur erforderlich sind, wenn sie im `scope`-Abfrageparameter der Installations-URL enthalten sind. [Erfahren Sie im Folgenden mehr über Bereiche](#scopes). |
### Bereiche
Im `auth`-Feld einer App-Konfigurationsdatei können Sie drei [Arten von Bereichen](/docs/apps/legacy-apps/public-apps/overview#scope-types) angeben: erforderliche Bereiche, bedingt erforderliche Bereiche und optionale Bereiche.
Ihre App muss mindestens den `read`-Bereich enthalten, damit Kunden auf den zugehörigen CRM-Objekttyp zugreifen können.
```json theme={null}
"auth": {
"type" : "oauth",
"redirectUrls": ["http://localhost:3000/oauth-callback"],
"requiredScopes": [
"crm.objects.contacts.read",
"crm.objects.contacts.write"
],
"optionalScopes": [],
"conditionallyRequiredScopes": []
},
```
Eine vollständige Liste der verfügbaren Bereiche finden Sie in der [Referenz zu Bereichen](/docs/apps/legacy-apps/authentication/scopes).
## App-Features hinzufügen
Um App-Funktionen wie Webhook-Abonnements, benutzerdefinierte Workflow-Aktionen und App-Karten zu konfigurieren, lesen Sie bitte die folgenden Anleitungen, um Näheres zum Hinzufügen der zugehörigen `*-hsmeta.json`-Dateien zu Ihrem Projekt zu erfahren:
* [Eine App-Karte erstellen](/docs/apps/developer-platform/add-features/ui-extensibility/app-cards/create-an-app-card)
* [App-Events definieren](/docs/apps/developer-platform/add-features/app-events/overview)
* [App-Objekte erstellen](/docs/apps/developer-platform/add-features/app-objects/quickstart-guide-to-app-objects)
* [Eine Einstellungskomponente erstellen](/docs/apps/developer-platform/add-features/ui-extensibility/create-a-settings-component)
* [Eine benutzerdefinierte Workflow-Aktion einrichten](/docs/apps/developer-platform/add-features/custom-workflow-actions)
* [Ein Webhook-Abonnement konfigurieren](/docs/apps/developer-platform/add-features/configure-webhooks)
* [Telemetriedaten hinzufügen](/docs/apps/developer-platform/add-features/add-telemetry)
# Arbeiten mit OAuth | OAuth-Schnellanleitung
Source: https://developers.hubspot.de/docs/apps/developer-platform/build-apps/authentication/oauth/oauth-quickstart-guide
In dieser Schnellanleitung erfahren Sie, wie Sie OAuth für Ihre App einrichten (inkl. eines Node.js-App-Beispiels).
'In dieser Schnellanleitung erfahren Sie, wie Sie OAuth für Ihre App einrichten (inkl. eines Node.js-App-Beispiels).';
## Bevor Sie loslegen
Bevor Sie OAuth mit HubSpot verwenden können, müssen Sie über Folgendes verfügen:
* [Ein Entwickler-Account](https://app.hubspot.com/signup-hubspot/developers)
* [Eine App](/docs/apps/legacy-apps/public-apps/overview), die mit Ihrem Entwickler-Account verknüpft ist Ein HubSpot-Account, um Ihre App zu installieren (Sie können einen vorhandenen Account verwenden oder - einen [Test-Account erstellen](/docs/getting-started/account-types))
Sie müssen ein [Super-Admin](https://knowledge.hubspot.com/de/user-management/hubspot-user-permissions-guide#super-admin) sein, um eine App in einem HubSpot-Account zu installieren.
### So funktioniert das Ganze
HubSpot unterstützt den [OAuth 2.0 Grant-Type „Autorisierungscode“](https://developer.okta.com/blog/2018/04/10/oauth-authorization-code-grant-type), der in vier grundlegende Schritten unterteilt werden kann:
1. Ihre App öffnet ein Browser-Fenster, um den Benutzer an den HubSpot OAuth 2.0-Server weiterzuleiten.
2. Der Benutzer prüft die angeforderten Berechtigungen und gewährt der App Zugriff.
3. Der Benutzer wird mit einem Autorisierungscode in der Abfragezeichenfolge zurück zur App geleitet.
4. Die App sendet eine Anfrage an den OAuth 2.0-Server, um den Autorisierungscode gegen ein Zugriffstoken auszutauschen.
### In diesem Leitfaden
* [Schnellanleitungs-App](#quickstart-app): Eine Node.js-Demo-App, die sich beim OAuth 2.0-Server von HubSpot authentifiziert
* [Abrufen von OAuth-Token](#getting-oauth-tokens): So autorisieren Sie Ihre App bei Benutzern
* [Verwenden von OAuth-Token](#using-oauth-tokens): So erstellen Sie Abfragen mit einem Token
* [Aktualisieren von OAuth-Token](#refreshing-oauth-tokens): So verwenden Sie das von HubSpot bereitgestellte Aktualisierungstoken
Alle Code-Beispiele in diesem Leitfaden sind in JavaScript (Node.js) geschrieben
## Schnellanleitungs-App
Wenn Sie zum ersten Mal die OAuth-Authentifizierung mit den APIs von HubSpot verwenden, sollten Sie sich vorher unbedingt mit der in Node.js geschriebenen [OAuth 2.0 Schnellanleitungs-App](https://github.com/HubSpot/oauth-quickstart-nodejs) beschäftigen. Diese Beispiel-App ermöglicht einen schnellen Einstieg in die Verwendung von OAuth 2.0, da alle unten im [Abschnitt Abrufen von OAuth-Token](#getting-oauth-tokens) beschriebenen Schritte erläutert werden.
[Holen Sie sich die Schnellanleitungs-App.](https://github.com/HubSpot/oauth-quickstart-nodejs)
## Abrufen von OAuth-Token
### 1. Autorisierungs-URL erstellen und den Benutzer zum OAuth 2.0-Server von HubSpot weiterleiten
Wenn Sie einen Benutzer an den OAuth 2.0-Server von HubSpot verweisen, wird im ersten Schritt die Autorisierungs-URL erstellt. Dadurch wird Ihre App identifiziert und es werden die Ressourcen (Bereiche) definiert, auf die diese im Namen des Benutzers Zugriff anfordert. Die Abfrageparameter, die Sie als Teil einer Autorisierungs-URL übergeben können, werden unten in der Tabelle angezeigt. Weitere Informationen zu diesem Schritt finden Sie in der [Referenzdokumentation](/docs/apps/legacy-apps/authentication/working-with-oauth).
Mit \* markierte Felder sind
Pflichtfelder.
| Parameter | Beschreibung | Beispiel |
| - | - | - |
| `client_id`\* | Die Client-ID identifiziert Ihre App. Sie finden sie auf der Einstellungsseite Ihrer App. | `7fff1e36-2d40-4ae1-bbb1-5266d59564fb` |
| `scope`\* | Die [Bereiche](/docs/apps/legacy-apps/authentication/scopes#list-of-available-scopes), die Ihre Anwendung anfordert, getrennt durch URL-codierte Leerzeichen`%20`. | `oauth%20crm.objects.contacts.read` |
| `redirect_uri`\* | Die URL, zu der der Benutzer weitergeleitet wird, nachdem er Ihre App für die angeforderten Bereiche autorisiert hat. **Für Produktionsanwendungen ist `https` erforderlich.** | `https://www.example.com/auth-callback` |
| `optional_scope` | Die Bereiche, die für Ihre App optional sind und verworfen werden, wenn das ausgewählte HubSpot-Portal keinen Zugriff auf diese Produkte hat | `automation` |
| `state` | Ein eindeutiger Zeichenfolgenwert, der zur Aufrechterhaltung des Status des Benutzers verwendet werden kann, wenn er zurück zu Ihrer App weitergeleitet wird. | `WeHH_yy2irpl8UYAvv-my` |
Nachdem Sie Ihre URL erstellt haben, starten Sie den OAuth-Verknüpfungsprozess, indem Sie den Benutzer dorthin verweisen.
Die folgenden Code-Blöcke enthalten Beispiele für die Verwendung verschiedener Weiterleitungstypen:
**Mithilfe einer serverseitigen Weiterleitung:**
```js theme={null}
// Build the auth URL
const authUrl =
"https://app.hubspot.com/oauth/authorize" +
`?client_id=${encodeURIComponent(CLIENT_ID)}` +
`&scope=${encodeURIComponent(SCOPES)}` +
`&redirect_uri=${encodeURIComponent(REDIRECT_URI)}` +
`&state=${encodeURIComponent(STATE)}`;
// Redirect the user
return res.redirect(authUrl);
```
**Mithilfe eines HTML-Links:**
```html theme={null}
Install
```
**Codierung eines zusätzlichen Status der Weiterleitung eines Benutzers:**
Einige Apps müssen den Benutzer möglicherweise an andere Orte weiterleiten. Beispielsweise kann eine App Benutzer auf verschiedene Subdomains ihrer Integration weiterleiten (z. B. `userA.integration.com` und `userB.integration.com`). Verwenden Sie dazu den `state`-Parameter, um weitere Informationen zum Benutzerstatus zu codieren:
1\. Generieren und speichern Sie einen Nonce-Wert für den state-Parameter.
2\. Speichern Sie den Status des Benutzers in einem lokalen Datenspeicher mit dem Nonce-Wert als dessen Schlüssel.
3\. Schließen Sie den Nonce-Wert als state-Parameter in der Autorisierungs-URL ein.
4\. Wenn sich der Benutzer authentifiziert und zu Ihrer Weiterleitungs-URL weitergeleitet wird, validieren Sie den state-Parameter und verwenden Sie ihn als Schlüssel, um den gespeicherten Benutzerstatus abzurufen.
5\. Leiten Sie den Benutzer von dort aus nach Bedarf weiter (z. B. durch erneutes Weiterleiten zu einer benutzerspezifischen URL).
### 2. HubSpot fordert Benutzer zur Einwilligung auf
HubSpot zeigt dem Benutzer ein Einwilligungsfenster an, in dem der Name Ihrer App und eine kurze Beschreibung der HubSpot API-Dienste angezeigt werden, für die eine Zugriffsberechtigung angefordert wird. Der Benutzer kann dann Zugriff auf Ihre App gewähren.
**Hinweis:** Der Benutzer, der die App installiert, muss Zugriff auf alle angeforderten Bereiche haben. Wenn er nicht die erforderlichen Zugriffsrechte besitzt, schlägt die Installation fehl und er wird zu einer Fehlerseite weitergeleitet. Sieht ein Benutzer diese Seite für einen Berechtigungsfehler, muss er einen Super-Admin bitten, die App zu installieren.
Ihre Anwendung funktioniert in dieser Phase nicht. Sobald der Zugriff gewährt ist, sendet der HubSpot OAuth 2.0-Server eine Anfrage an den in der Autorisierung der Autorisierungs-URL definierten Calback-URI.
### 3. Die OAuth-Serverantwort verarbeiten
Wenn der Benutzer die Aufforderung zur Einwilligung von Schritt 2 abgeschlossen hat, sendet der OAuth 2.0-Server eine `GET`-Anfrage an den in Ihrer Authentifizierungs-URL angegebenen Weiterleitungs-URI. Falls keine Fehler auftreten und der Benutzer die Zugriffsanfrage akzeptiert, wird die Anfrage mit einem angehängten `code`-Abfrageparameter an den Weiterleitungs-URI zurückgegeben. Gewährt der Benutzer keinen Zugriff, wird keine Anfrage gesendet.
**Beispiel:**
```js theme={null}
app.get("/oauth-callback", async (req, res) => {
if (req.query.code) {
// Handle the received code
}
});
```
### 4. Autorisierungscode für Token austauschen
Nachdem Ihre App einen Autorisierungscode aus dem OAuth 2.0-Server empfangen hat, kann sie den Code für ein Zugriffs- und Aktualisierungstoken tauschen, indem eine im URL-Format codierte `POST`-Anfrage mit den unten aufgeführten Werten an `https://api.hubapi.com/oauth/v1/token` gesendet wird. Weitere Informationen zu diesem Schritt erhalten Sie in diesem [Referenzdokument](/docs/apps/developer-platform/build-apps/authentication/oauth/working-with-oauth).
| Parameter | Beschreibung | Beispiel |
| - | - | - |
| `grant_type` | Muss sein `authorization_code` | `authorization_code` |
| `client_id` | Die Client-ID Ihrer App | `7fff1e36-2d40-4ae1-bbb1-5266d59564fb` |
| `client_secret` | Das Client-Geheimnis Ihrer App | `7c3ce02c-0f0c-4c9f-9700-92440c9bdf2d` |
| `redirect_uri` | Die Weiterleitungs-URI vom Autorisieren Ihrer App durch den Benutzer | `https://www.example.com/auth-callback` |
| `code` | Der Autorisierungscode, der vom OAuth 2.0-Server empfangen wurde | `5771f587-2fe7-40e8-8784-042fb4bc2c31` |
**Beispiel:**
```js theme={null}
const formData = {
grant_type: 'authorization_code',
client_id: CLIENT_ID,
client_secret: CLIENT_SECRET,
redirect_uri: REDIRECT_URI,
code: req.query.code
};
request.post('https://api.hubapi.com/oauth/v1/token', { form: formData }, (err, data) => {
// Handle the returned tokens
}
```
Der Text der Token-Antwort besteht aus JSON-Daten mit folgendem Format:
```json theme={null}
{
"refresh_token": "6f18f21e-a743-4509-b7fd-1a5e632fffa1",
"access_token": "CN2zlYnmLBICAQIYgZXFLyCWp1Yoy_9GMhkAgddk-zDc-H_rOad1X2s6Qv3fmG1spSY0Og0ACgJBAAADAIADAAABQhkAgddk-03q2qdkwdXbYWCoB9g3LA97OJ9I",
"expires_in": 1800
}
```
Das Zugriffstoken läuft nach der Anzahl der Sekunden ab, die im `expires_in`-Feld der Antwort angegeben ist. Aktuell sind dies 30 Minuten. Details zum Erhalt eines neuen Zugriffs Token finden Sie weiter unten im Abschnitt [Aktualisieren von OAuth-Token](#refreshing-oauth-tokens).
## Verwenden von OAuth-Token
Sobald der Autorisierungscode-Prozess abgeschlossen ist, ist Ihre App autorisiert, Anfragen im Namen des Benutzers vorzunehmen. Stellen Sie dazu das Token als ein Bearer-Token im `Authorization`-HTTP-Header bereit. Spezifische Details dazu finden Sie im [Referenzdokument](/docs/apps/developer-platform/build-apps/authentication/oauth/working-with-oauth).
**Beispiel:**
```js theme={null}
request.get(
"https://api.hubapi.com/contacts/v1/lists/all/contacts/all?count=1",
{
headers: {
Authorization: `Bearer ${ACCESS_TOKEN}`,
"Content-Type": "application/json",
},
},
(err, data) => {
// Handle the API response
}
);
```
Zugriffstoken spiegeln die von der App angeforderten Bereiche wider. Sie spiegeln nicht die Berechtigungen oder Einschränkungen dessen wider, was ein Benutzer in seinem HubSpot-Account tun kann. Wenn beispielsweise ein Benutzer die Berechtigung hat, nur eigene Kontakte anzuzeigen, aber eine Anfrage für den `crm.objects.contacts.read`-Bereich autorisiert, kann das resultierende Zugriffstoken alle Kontakte im Account anzeigen und nicht nur die, die dem autorisierenden Benutzer gehören.
## Aktualisieren von OAuth-Token
OAuth-Zugriffstoken laufen in regelmäßigen Abständen ab. So ist sichergestellt, dass Angreifer bei einem kompromittierten Token nur für eine kurze Zeit Zugriff haben. Die Gültigkeitsdauer des Tokens in Sekunden wird im `expires_in`-Feld angegeben, wenn ein Autorisierungscode gegen ein Zugriffstoken getauscht wird.
Ihre App kann das empfangene Aktualisierungstoken gegen ein neues Zugriffstoken tauschen, indem eine im URL-Format codierte `POST`-Anfrage mit den unten aufgeführten Werten an `https://api.hubapi.com/oauth/v1/token` gesendet wird. Weitere Informationen zu diesem Schritt finden Sie in der [Referenzdokumentation](/docs/apps/developer-platform/build-apps/authentication/oauth/working-with-oauth).
\| Parameter | Beschreibung | Beispiel |
\| --- | --- | --- | --- |
\| `grant_type` | Muss `refresh_token` | `refresh_token` | sein. |
\| `client_id` | Die Client-ID Ihrer App | `7fff1e36-2d40-4ae1-bbb1-5266d59564fb` |
\| `client_secret` | Das Client-Geheimnis Ihrer App | `7c3ce02c-0f0c-4c9f-9700-92440c9bdf2d` |
\| `redirect_uri` | Die Weiterleitungs-URI vom Autorisieren Ihrer App durch den Benutzer | `https://www.example.com/auth-callback` |
\| `refresh_token` | Das Aktualisierungstoken, dass bei der Autorisierung Ihrer App durch den Benutzer empfangen wurde | `b9443019-30fe-4df1-a67e-3d75cbd0f726` |
**Beispiel:**
```js theme={null}
const formData = {
grant_type: 'refresh_token',
client_id: CLIENT_ID,
client_secret: CLIENT_SECRET,
redirect_uri: REDIRECT_URI,
refresh_token: REFRESH_TOKEN
};
request.post('https://api.hubapi.com/oauth/v1/token', { form: formData }, (err, data) => {
// Handle the returned tokens
}
```
Der Text der Token-Antwort besteht aus JSON-Daten mit folgendem Format:
```json theme={null}
{
"refresh_token": "6f18f21e-a743-4509-b7fd-1a5e632fffa1",
"access_token": "CN2zlYnmLBICAQIYgZXFLyCWp1Yoy_9GMhkAgddk-zDc-H_rOad1X2s6Qv3fmG1spSY0Og0ACgJBAAADAIADAAABQhkAgddk-03q2qdkwdXbYWCoB9g3LA97OJ9I",
"expires_in": 1800
}
```
Das neue Zugriffstoken kann dann verwendet werden, um Aufrufe im Namen des Benutzers vorzunehmen. Wenn das neue Token abläuft, können Sie anhand der gleichen Schritte ein neues abrufen.
## Verwandte Artikel
[Authentifizierungsmethoden in HubSpot](/docs/apps/developer-platform/build-apps/authentication/overview)
[Arbeiten mit OAuth](/docs/apps/legacy-apps/authentication/working-with-oauth)
[Verwalten von Token](/docs/apps/developer-platform/build-apps/authentication/oauth/working-with-oauth)
# Arbeiten mit OAuth
Source: https://developers.hubspot.de/docs/apps/developer-platform/build-apps/authentication/oauth/working-with-oauth
OAuth ist eine sichere Methode der Authentifizierung für Ihre App. Sie verwendet Autorisierungstoken anstelle eines Passworts, um Ihre App mit einem Kunden-Account zu verknüpfen.
'OAuth ist eine sichere Methode der Authentifizierung für Ihre App. Sie verwendet Autorisierungstoken anstelle eines Passworts, um Ihre App mit einem Kunden-Account zu verknüpfen. ';
OAuth ist eine sichere Authentifizierungsmethode, die Autorisierungstoken anstelle eines Passworts verwendet, um Ihre App mit einem Kunden-Account zu verknüpfen. Das Initiieren von OAuth-Zugriff ist der erste Schritt, um Benutzern das [Installieren Ihrer App](/docs/apps/legacy-apps/public-apps/overview#install-an-app) in ihren HubSpot-Accounts zu ermöglichen.
* Jede App, die für die Installation durch mehrere HubSpot-Accounts oder für ein Listing im App Marketplace entwickelt wurde, muss OAuth verwenden.
* Benutzer, die Apps in ihrem HubSpot-Account installieren, müssen entweder ein [Super-Admin](https://knowledge.hubspot.com/de/user-management/hubspot-user-permissions-guide#super-admin) sein oder über Berechtigungen für [Zugriff auf den App-Marketplace](https://knowledge.hubspot.com/de/user-management/hubspot-user-permissions-guide#settings) verfügen.
## Empfohlene Ressourcen
* Die [OAuth-Schnellanleitung](/docs/apps/legacy-apps/authentication/oauth-quickstart-guide) ermöglicht Ihnen mithilfe einer Arbeitsbeispiel-App einen schnellen Einstieg.
* Dieses [HubSpot Academy-Tutorial](https://app.hubspot.com/l/academy/tracks/71/593/2967) bietet eine schnelle Einführung in die Verwendung von OAuth mit HubSpot, einschließlich einer ausführlichen Darstellung des HubSpot-OAuth-Prozesses und der Aktualisierung eines Zugriffstokens.
## OAuth-Authentifizierung einrichten
So richten Sie die OAuth-Authentifizierung für Ihre App ein:
* Zuerst müssen Sie eine [App erstellen](/docs/apps/legacy-apps/public-apps/overview) in einem [HubSpot-Entwickler-Account](/docs/getting-started/account-types#developer-accounts). Nach dem Erstellen der App finden Sie die Client-ID und das Client-Geheimnis der App auf der Seite zur *Authentifizierung* Ihrer App-Einstellungen.
* Verwenden Sie die Client-ID und das Client-Geheimnis zusammen mit den unten beschriebenen [Abfrageparametern](#query-parameters) und [Bereichen](#scopes), um Ihre Autorisierungs-URL zu erstellen.
* Leiten Sie Benutzer, die Ihre App installieren, zur Autorisierungs-URL weiter, wo ihnen ein Bildschirm angezeigt wird, auf dem sie ihren Account auswählen können und Zugriff auf Ihre Integration gewährt werden kann. Sie können die Autorisierungs-URL für einen bestimmten HubSpot-Account festlegen, indem Sie die Account-ID zwischen `/oauth/` und `/authorize` hinzufügen, wie unten gezeigt. Nachdem Sie Zugriff gewährt haben, gelangen sie über eine `redirect_url`, der ein Code-Abfrageparameter angehängt ist, zurück zu Ihrer Anwendung. Sie verwenden diesen Code und das Client-Geheimnis, um ein [access\_token und refresh\_token](/docs/apps/developer-platform/build-apps/authentication/oauth/working-with-oauth) von HubSpot zu erhalten.
* **Beispiel-Autorisierungs-URLs**
* **Alle Accounts:** `https://app.hubspot.com/oauth/authorize?client_id=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx&scope=contacts%20automation&redirect_uri=https://www.example.com/`
* **Spezifischer Account (ID 123456):** `https://app.hubspot.com/oauth/123456/authorize?client_id=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx&scope=contacts%20automation&redirect_uri=https://www.example.com/`
* **Beispiel-Weiterleitungs-URL:** `https://example.com/?code=xxxx`
* **Beispielfehler:** `https://www.example.com/?error=error_code&error_description=Human%20readable%20description%20of%20the%20error`
* Verwenden Sie `access_token`, um API-Aufrufe zu authentifizieren, die für diesen HubSpot-Account vorgenommen wurden.
* Nachdem das `access_token` abgelaufen ist, verwenden Sie das `refresh_token`, mum ein neues `access_token` zu generieren.
- Ihre App wird nicht als *verknüpfte App* im Account eines Benutzers angezeigt, es sei denn, Sie generieren das Aktualisierungstoken und das Token für den ersten Zugriff.
- Zugriffstoken spiegeln die von der App angeforderten Bereiche wider. Sie spiegeln nicht die Berechtigungen oder Einschränkungen dessen wider, was ein Benutzer in seinem HubSpot-Account tun kann. Wenn beispielsweise ein Benutzer die Berechtigung hat, nur eigene Kontakte anzuzeigen, aber eine Anfrage für den `crm.objects.contacts.read`-Bereich autorisiert, kann das resultierende Zugriffstoken alle Kontakte im Account anzeigen und nicht nur die, die dem autorisierenden Benutzer gehören.
## Abfrageparameter
Die folgenden Abfrageparameter sind erforderlich, wenn Sie eine Autorisierungs-URL für Ihre App erstellen:
| **Parameter** | **Beschreibung** | **Anwendung** |
| - | - | - |
| `client_id` | Eine ID, die als eindeutige ID für Ihre App dient. | Sie erhalten diese von der Seite mit den Authentifizierungseinstellungen Ihrer App (wie oben beschrieben). |
| `redirect_uri` | Die URL, zu der Besucher weitergeleitet werden, nachdem Zugriff auf Ihre App gewährt wurde. | Sie bestimmen diese ebenfalls auf der Seite mit den Authentifizierungseinstellungen Ihrer App. **Hinweis:** Aus Sicherheitsgründen muss diese URL `https` zur Produktion verwenden. (Beim Testen mithilfe von localhost`localhost` kann `http` verwendet werden.) Sie müssen auch eine Domain verwenden, da IP-Adressen nicht unterstützt werden. |
| `scope` | Ein durch Leerzeichen getrennter Satz an Berechtigungen, auf die Ihre App Zugriff benötigt. | Alle Bereiche, die Sie in den Einstellungen zur *Authentifizierung* Ihrer App aktiviert haben, werden als erforderlich behandelt. Sie müssen sie in diesem Parameter berücksichtigen oder die Autorisierungsseite zeigt einen Fehler an. Benutzern wird außerdem ein Fehler angezeigt, wenn sie versuchen, Ihre App in einem Account zu installieren, der keinen Zugriff auf einen berücksichtigten Bereich hat. Weitere Informationen darüber, welche Endpunkte durch spezifische Bereiche aufgerufen werden können, finden Sie in der [Referenzdokumentation für Bereiche](/docs/apps/legacy-apps/authentication/scopes#list-of-available-scopes). |
Die folgenden Parameter sind optional:
| **Parameter** | **Anwendung** | **Beschreibung** |
| - | - | - |
| `optional_scope` | Ein durch Leerzeichen getrennter Satz an optionalen Berechtigungen für Ihre App. | Optionale Bereiche werden automatisch aus der Autorisierungsanforderung ausgeschlossen, wenn der Benutzer einen HubSpot-Account auswählt, der keinen Zugriff auf dieses Tool hat (z. B. Autorisierung eines ***Content Hub**-Enterprise-Bereichs* in einem kostenlosen HubSpot-Account). Wenn Sie optionale Bereiche verwenden, müssen Sie das Zugriffstoken und das Aktualisierungstoken überprüfen, um zu sehen, welche gewährt wurden. Weitere Informationen finden Sie in der [Referenzdokumentation zu Bereichen](/docs/apps/legacy-apps/authentication/scopes). |
| `state` | Wenn dieser Parameter in der Autorisierungs-URL enthalten ist, wird der Wert in einem state-Abfrageparameter berücksichtigt, wenn der Benutzer zur `redirect_uri` weitergeleitet wird. | Ein Zeichenfolgenwert, der zur Aufrechterhaltung des Status des Benutzers verwendet werden kann, wenn er zurück zu Ihrer App weitergeleitet wird. |
## Bereiche konfigurieren
OAuth erfordert, dass Sie Bereiche, oder Berechtigungen, für Ihre App festlegen. Jeder Bereich bietet Zugriff auf eine Reihe von HubSpot-API-Endpunkten und ermöglicht Benutzern, Ihrer App Zugriff auf bestimmte Tools in ihrem HubSpot-Account zu gewähren.
Der Zugriff auf bestimmte APIs oder Endpunkte hängt von der HubSpot-Account-Stufe ab. Wenn Ihre App mit mehreren Typen von HubSpot-Accounts arbeitet, können Sie den `optional_scope`-Parameter verwenden, um alle Stufen-Bereiche zu bierücksichtigen, mit denen Sie arbeiten. Auf diese Weise können Kunden, die kostenlose HubSpot-Accounts verwenden, weiterhin Ihre App autorisieren, selbst wenn sie nicht auf alle ihre Bereiche Zugriff haben. Ihre App muss auf alle Bereiche überprüfen, für die sie nicht autorisiert wird, und diese verarbeiten.
Eine vollständige Liste der Bereiche finden Sie [hier](/docs/apps/legacy-apps/authentication/scopes).
## Verwandte Dokumente
[Authentifizierungsmethoden in HubSpot](/docs/apps/developer-platform/build-apps/authentication/overview)
[OAuth-Schnellanleitung](/docs/apps/legacy-apps/authentication/oauth-quickstart-guide)
[Verwalten von Token](/docs/apps/developer-platform/build-apps/authentication/oauth/working-with-oauth)
# Überblick über die ersten Schritte
Source: https://developers.hubspot.de/docs/apps/developer-platform/build-apps/authentication/overview
Erfahren Sie, wie Sie mit dem Entwickeln in HubSpot beginnen können.
'Erfahren Sie, wie Sie mit dem Entwickeln in HubSpot beginnen können.';
Ganz gleich, ob Sie ein neuer HubSpot-Entwickler sind oder Ihre Kenntnisse erweitern möchten, dieser Abschnitt führt Sie durch den Einstieg in das Entwickeln in HubSpot. Sie werden die verschiedenen verfügbaren Entwicklungswege sowie die spezifischen Tools und Accounts kennenlernen, die Sie benötigen, um Ihre Ziele zu erreichen.
## Die Vorteile einer vernetzten Plattform
Zunächst ist es hilfreich, sich vor Augen zu führe, was genau HubSpot zu einer leistungsstarken Plattform für Entwickler macht.
Die Grundlage jedes HubSpot-Accounts ist die CRM-Plattform [](/docs/guides/crm/understanding-the-crm) (Customer Relationship Management), eine Datenbank für Geschäftsbeziehungen und -prozesse. HubSpot bietet verschiedene Möglichkeiten für externe Entwickler und Partner, mit dem CRM zu arbeiten, damit sie einen Mehrwert für HubSpot-Endbenutzer schaffen können. Dazu gehören:
* Erstellen von Integrationen und/oder Erweiterungen mit den APIs von HubSpot, um Daten zwischen HubSpot und externen Plattformen zu synchronisieren.
* Erstellen von benutzerdefinierten Websites mit CMS Hub, dem Contentmanagement-System von HubSpot. CMS Hub verfügt nicht nur über eine vollständige Suite von Contentmanagement-Tools, sondern ist auch vollständig in das CRM integriert. Dies erleichtert das Verwalten von Kampagnen, das Erfassen von Leads und die laufende Kundenkommunikation.
* Anpassen des CRM mit UI-Erweiterungen. Entwickler können React verwenden, um flexible benutzerdefinierte Karten zu erstellen, die sich nahtlos in HubSpot integrieren lassen.
Im nächsten Abschnitt erhalten Sie einen Überblick über die Tools, die für HubSpot-Entwickler verfügbar sind. Anschließend wählen Sie eine Route, um Ihre Customer Journey als HubSpot-Entwickler fortzusetzen.
## 1. Die Tools installieren, die Sie bei der Erstellung unterstützen
Für HubSpot-Entwickler ist eine breite Palette von Tools verfügbar. Welche genau Sie benötigen, hängt von Ihren spezifischen Zielen ab.
* **HubSpot CLI:** Die Installation des HubSpot CLI für die lokale Entwicklung ist ein guter Ausgangspunkt für viele Entwicklungsaufgaben. Das CLI wird bei der Erstellung von UI-Erweiterungen und CMS-Ressourcen verwendet und kann zum Erstellen und Verwalten von Geheimnissen, HubDB-Tabellen und benutzerdefinierten Objekten in Ihrem Account verwendet werden. Es muss [Node.js](https://nodejs.org/en/) installiert sein (Version 18 oder höher ist erforderlich, und die LTS-Version wird empfohlen). Um das CLI global zu installieren, führen Sie den folgenden Befehl aus:
```shell theme={null}
npm i -g @hubspot/cli
```
* **Visual Studio Code:** Wenn Sie [Visual Studio Code](https://code.visualstudio.com/) installieren, können Sie die Vorteile der [HubSpot Visual Studio Code-Erweiterung](https://developers.hubspot.com/docs) nutzen, mit der Sie Ihren Entwicklungs-Workflow zentralisieren können.
* **Client-Bibliotheken**: HubSpot bietet Client-Bibliotheken für [Node](https://github.com/HubSpot/hubspot-api-nodejs), [PHP](https://github.com/HubSpot/hubspot-api-php), [Ruby](https://github.com/HubSpot/hubspot-api-ruby) und [Python](https://github.com/HubSpot/hubspot-api-python).
* **Postman:** Verwenden Sie [Postman](https://www.postman.com/) für den Zugriff auf [die Postman-Filtergruppe von HubSpot](https://www.postman.com/hubspot). In der gesamten API-Dokumentation von HubSpot finden Sie Schaltflächen zum Ausführen von Aufrufen unter Verwendung der Filtergruppe.
Erfahren Sie mehr über [HubSpots Tools für Entwickler](/docs/developer-tooling/overview).
## 2. Entscheiden, was erstellt werden soll
Für die Entwicklung mit HubSpot gibt es kein Patentrezept. Es ist eine flexible Plattform, die eine Vielzahl von Anforderungen erfüllen kann.
Eine der vier unten aufgeführten Kategorien dürfte die meisten dieser Bedürfnisse abdecken. Sie können diejenige auswählen, die für Sie im Moment am wichtigsten ist, um eine kurze Einführung zu erhalten, zusammen mit einigen Sofortmaßnahmen, die Ihnen den Einstieg erleichtern. Sie können sich auch ein Bild davon machen, welche Tools am besten geeignet sind und ob ein bestimmter [Typ von HubSpot-Account](/docs/getting-started/account-types) erforderlich ist.
* [APIs verwenden und Integrationen erstellen](https://developers.hubspot.com#use-apis-and-build-integrations)
* [Apps für den App Marketplace erstellen](https://developers.hubspot.com#build-for-the-app-marketplace)
* [Die Benutzeroberfläche von HubSpot anpassen](https://developers.hubspot.com#customize-the-hubspot-ui)
* [Benutzerdefinierte Websites erstellen](https://developers.hubspot.com#build-custom-websites)
## 3. Sich Gleichgesinnten anschließen
Vernetzen Sie sich mit Peers, die bereits auf Grundlage von HubSpot entwickeln. Stellen Sie Fragen, tauschen Sie Wissen aus, bauen Sie eine Gemeinschaft auf und finden Sie vielleicht sogar Freunde.
* [Entwickler-Community bei Slack (Developer Slack)](https://developers.hubspot.com/community)
* [Entwickler-Foren](https://community.hubspot.com/t5/HubSpot-Developers/ct-p/developers)
* [Entwickler-Advocacy GitHub](https://github.com/hubspotdev)
## 4. Ihren Bedürfnissen entsprechend lernen
Sobald Sie mit der Arbeit begonnen haben, stehen Ihnen zahlreiche Ressourcen zur Verfügung, die Sie bei der Vertiefung Ihrer Kenntnisse unterstützen. Sie können auf ausführliche Leitfäden, detaillierte Referenzdokumente oder [HubSpot Academy-Kurse](https://academy.hubspot.com/courses) zugreifen, je nach Ihrem bevorzugten Lernstil.
# Anfragen werden validiert
Source: https://developers.hubspot.de/docs/apps/developer-platform/build-apps/authentication/request-validation
# Bereiche
Source: https://developers.hubspot.de/docs/apps/developer-platform/build-apps/authentication/scopes
# Eine neue App mithilfe des CLI erstellen (BETA)
Source: https://developers.hubspot.de/docs/apps/developer-platform/build-apps/create-an-app
# Apps in HubSpot verwalten (BETA)
Source: https://developers.hubspot.de/docs/apps/developer-platform/build-apps/manage-apps-in-hubspot
Erfahren Sie, wie Sie die Authentifizierung und andere Einstellungen für Ihre App auf der neuen Entwicklerplattform verwalten
Nachdem Sie Ihre App mithilfe der [Schnellanleitung](/docs/apps/developer-platform/build-apps/create-an-app) nach HubSpot hochgeladen, sie von einer Legacy-App migriert oder den Befehl `hs project upload` manuell ausgeführt haben, können Sie Ihre App auf der Indexseite für Projekte in Ihrem HubSpot-Account verwalten. Auf der Detailseite für Ihre App haben Sie die Möglichkeit, den Erstellungs- und Bereitstellungsverlauf einzusehen, aktive App-Funktionen zu bestätigen und die Authentifizierung zu verwalten.
## Ihre App auf der Projektdetailseite anzeigen
So überprüfen Sie Ihre App-Details:
* Gehen Sie in Ihrem HubSpot-Account zu **Entwicklung**.
* Klicken Sie auf der **Projekte**-Seite auf den **Namen** Ihres Projekts. Überprüfen und verwalten Sie auf der Seite mit den Projektdetails Ihre App:
* Klicken Sie im linken Seitenleistenmenü auf **Details**, um direkt zum aktuellen Erstellungs- und Bereitstellungsverlauf zu gelangen, oder auf eine App-Funktion, um die Konfiguration gemäß der zugehörigen `*-hsmeta.json`-Datei zu überprüfen.
* Dann klicken Sie auf die Registerkarte **Einstellungen**, wo Sie Ihre Einstellungen für die automatische Bereitstellung ändern oder Ihre App falls nötig löschen können.
* Klicken Sie unter *Projektkomponenten* auf den Namen Ihrer App (wie im [Schema der obersten Ebene](/docs/apps/developer-platform/build-apps/app-configuration#app-schema) Ihrer App angegeben), um das zuletzt bereitgestellte App-Schema und die aktuell konfigurierten App-Funktionen zu überprüfen und die Authentifizierungseinstellungen zu verwalten.
## Authentifizierung für Ihre App verwalten
So zeigen Sie Ihre App-Anmeldeinformationen an und verwalten die Authentifizierung:
* Klicken Sie auf der Registerkarte *Übersicht* der Seite mit den Projektdetails unter *Projektkomponenten* auf den Namen der App der höchsten Ebene, wie er im `name`-Feld in der [Schemadatei der obersten Ebene](/docs/apps/developer-platform/build-apps/app-configuration#app-schema) Ihrer App definiert ist.
* Dann klicken Sie auf die Registerkarte **Authentifizierung**, um die Anmeldeinformationen, konfigurierten Bereiche und Weiterleitungs-URLs Ihrer App angezeigt zu bekommen.
Wenn die Verteilung Ihrer App in Ihrer [App-Schemadatei](/docs/apps/developer-platform/build-apps/app-configuration#app-schema) auf `private` festgelegt ist, können Sie die Einstellungen für die Zulassungsliste verwalten, indem Sie auf die Registerkarte **Verteilung** klicken:
* Daraufhin wird eine Zusammenfassung der derzeit installierten Accounts oben auf der Seite angezeigt. Apps mit einer `private`-Verteilung können in maximal 10 HubSpot-Accounts installiert werden.
* Um auf der Zulassungsliste zugelassene Accounts hinzuzufügen, klicken Sie auf **Genehmigte(n) Account(s) hinzufügen**.
* Überprüfen Sie im rechten Bereich unter *Andere Produktions-Accounts* die Liste der Produktions-Accounts, auf die Ihr HubSpot-Benutzer derzeit Zugriff hat.
* Aktivieren Sie das **Kontrollkästchen** neben jedem Account, den Sie zu den auf der Zulassungslisten aufgeführten Accounts hinzufügen möchten.
* Wenn Sie fertig sind, klicken Sie auf **Änderungen speichern**.
* In der Liste der genehmigten Accounts können Sie den Mauszeiger über einen Account bewegen, um den Installationslink zu kopieren oder den Account aus den in der Zulassungsliste aufgeführten Accounts zu entfernen.
# HubSpot-Account-Typen
Source: https://developers.hubspot.de/docs/getting-started/account-types
Erfahren Sie mehr über die verschiedenen Typen von HubSpot-Accounts und wozu sie jeweils verwendet werden.
Es gibt mehrere Typen von HubSpot-Accounts, die jeweils einen bestimmten Zweck haben. Nachfolgend erfahren Sie mehr über die einzelnen Account-Typen und für was sie gedacht sind.
## Standard-HubSpot-Accounts
Ein Standard-HubSpot-Account ist der gebräuchlichste Account-Typ. Dort finden Sie alle Tools, Funktionen und Einstellungen, die in Ihrer HubSpot-Version enthalten sind. Er kann kostenlos oder kostenpflichtig sein und wird als Ihre Produktionsumgebung verwendet.
Ein Standard-HubSpot-Account hat Zugriff auf alle Tools und Funktionen, die in Ihrer Version enthalten sind.
## App-Entwickler-Accounts
App-Entwickler-Accounts sind kostenlose Accounts und für das Erstellen und Verwalten von Apps, Integrationen und Entwickler-Test-Accounts vorgesehen. Sie sind auch der Ort, an dem Sie App Marketplace-Listings erstellen und verwalten können. App-Entwickler-Accounts und die zugehörigen Test-Accounts sind jedoch nicht mit einem Standard-HubSpot-Account verknüpft. Sie können keine Daten oder Elemente mit oder von einem anderen HubSpot-Account synchronisieren.
App-Entwickler-Accounts können durch ein Banner oben auf jeder Seite identifiziert werden, auf dem *Dies* *ist ein Account für App* *-Entwickler* steht.
Legen Sie los, indem Sie einen [App-Entwickler-Account](https://developers.hubspot.com/get-started) erstellen.
## Entwickler-Test-Accounts
Innerhalb von [App-Entwickler-Accounts](#app-developer-accounts) können Sie Entwickler-Test-Accounts erstellen, um Apps und Integrationen zu testen, ohne dass sich dies auf echte HubSpot-Daten auswirkt. Entwickler-Test-Accounts spiegeln keine Produktionskonten wider. Sie sind vielmehr kostenlose HubSpot-Accounts mit Zugriff auf einen 90-tägigen Testlauf vieler Enterprise-Funktionen, mit den folgenden Beschränkungen:
* **Marketing** **Hub:** Sie können Marketing-E-Mails nur an Adressen von Benutzern senden, die Sie Ihrem Entwickler-Test-Account hinzugefügt haben.
* **Content Hub:** Die Anzahl der Seiten, die Sie erstellen können, unterliegt den folgenden Beschränkungen:
* **Website-Seiten:** 25
* **Blog-Tools:** 1 Blog mit bis zu 100 Blogbeiträgen
* **Landingpages:** 25
* **Workflows:** Maximal 100.000 Datensätze können pro Tag in Workflows aufgenommen werden, die in einem Entwickler-Test-Account erstellt wurden. Wenn dieses Tageslimit erreicht wird:
* Jeder weitere versuchte Aufnahme, der über dieses Limit hinausgeht, wird verworfen.
* Die Benutzer werden in der App darüber informiert, dass sie das tägliche Aufnahmelimit für Datensätze erreicht haben und wann das Limit aktualisiert wird.
Sie können bis zu 10 Test-Accounts pro Entwickler-Account erstellen. Dieser Typ von Account kann keine Daten mit anderen Accounts synchronisieren und sie können nicht mit einem Standard-HubSpot-Account verbunden werden. Test-Accounts können durch ein Banner oben auf der Seite identifiziert werden, das angibt, wie viele Tage noch verbleiben, bevor sie ablaufen.
Im Folgenden erfahren Sie mehr über das Erstellen und Verwalten von Test-Accounts.
### Einen Entwickler-Test-Account erstellen
So erstellen Sie einen Entwickler-Test-Account:
* Klicken Sie in der linken Navigationsseitenleiste Ihres App-Entwickler-Accounts auf **Test-Accounts**.
* Klicken Sie oben rechts auf **App-Test-Account erstellen**.
* Geben Sie einen **Account-Namen** ein und klicken Sie dann auf **Erstellen**.
So greifen Sie auf Ihre Entwickler-Test-Accounts zu und verwalten sie:
* Klicken Sie in der oberen Navigationsleiste Ihres App-Entwickler-Accounts auf **Testen**.
* Bewegen Sie den Mauszeiger über den **Account**, den Sie verwalten möchten, und wählen Sie dann eine Aktion aus:
* Um den Account zu löschen, klicken Sie auf **Löschen**.
* Um die Account-ID zu kopieren, den Account zu verlängern oder ihn umzubenennen, klicken Sie auf das Dropdown-Menü **Mehr**.
### Einen Entwickler-Test-Account verlängern
Entwickler-Test-Accounts laufen nach 90 Tagen ab, wenn keine API-Aufrufe an das Account erfolgen. Sie können den Account entweder manuell von der *Testseite* in HubSpot aus verlängern oder einen API-Aufruf an das Account vornehmen. Beachten Sie Folgendes, wenn Sie versuchen, den Account per API-Aufruf zu verlängern:
* Dies gilt nur für API-Anfragen, die mithilfe von [OAuth-Token](/docs/api-reference/auth-oauth-v1/guide) gestellt werden, die von einer Anwendung im selben Entwickler-Account wie der zu verlängernde Test-Account generiert wurden.
* Verlängerungen müssen bis zu 30 Tage vor dem Ablaufdatum des Test-Accounts erfolgen.
## Sandbox-Accounts
Mithilfe von Sandbox-Accounts können Sie Änderungen testen, ohne dass dies Auswirkungen auf Ihren Standard-Account hat. Erfahren Sie in den folgenden Abschnitten mehr über die verschiedenen Arten von Sandbox-Accounts.
### Standard-Sandbox-Accounts
Wenn Sie ein *Enterprise*-Abonnement haben, können Sie einen Standard-Sandbox-Account erstellen, der eine sichere Umgebung bietet, in der Sie neue Workflows, Integrationen, Website-Seiten und andere wichtige Änderungen testen können, ohne dass dies Auswirkungen auf Ihren Standard-Account hat. Diese Sandboxes kopieren die Struktur Ihres Standard-Accounts.
Diese Accounts können durch ein gelbes Banner oben auf der Seite identifiziert werden, das folgendes Label enthält: *Sie befinden sich in\[\[Name der Sandbox], einem Standard-Sandbox-Account.*. Das Banner enthält auch einen Link zurück zu Ihrem Produktions-Account für einen einfachen Wechsel.
Erfahren Sie [in der Wissensdatenbank von HubSpot](https://knowledge.hubspot.com/account/set-up-a-hubspot-standard-sandbox-account) mehr über Standard-Sandbox-Accounts.
### CMS-Sandbox-Accounts
CMS-Sandboxes sind kostenlose Accounts und dienen dem Erstellen und Testen von Website-Änderungen, ohne dass dies Auswirkungen auf Ihren Standard-Account oder Ihre Live-Website hat. Ähnlich wie bei App-Entwickler-Accounts sind CMS-Sandbox-Accounts nicht mit Ihrem Standard-HubSpot-Account verknüpft.
Sie können [kostenlos einen CMS-Sandbox-Account erstellen](https://offers.hubspot.com/free-cms-developer-sandbox).
CMS-Sandboxes haben kein Banner, sondern nur Zugriff auf die kostenlosen Tools von HubSpot und ***CMSContent Hub*** *Enterprise* (abzüglich der Möglichkeit, eine Domain zu verknüpfen).
### Entwicklungs-Sandbox-Accounts (BETA)
Wenn Sie ein ***Sales Hub*** oder ***Service Hub*** *Enterprise*-Abonnement haben, können Sie über das CLI für lokale Entwicklung einen Entwicklungs-Sandbox-Account erstellen. Sie erhalten Sie Zugriff auf Entwicklungs-Sandbox-Accounts, indem [Sie sich in Ihrem HubSpot-Standard-Account für die Betaversion der CRM-Entwickler-Tools anmelden](https://knowledge.hubspot.com/account/opt-your-hubspot-account-into-a-beta-feature).
Entwicklungs-Sandboxes können durch folgendes gelbes Banner oben auf der Seite identifiziert werden: *Sie befinden sich in \[Name der Sandbox], einem Entwicklungs-Sandbox-Account.* Erfahren Sie mehr über das Erstellen und Verwenden von [Entwickler-Sandbox-Accounts](/docs/developer-tooling/overview#create-and-use-development-sandboxes).
## Marketplace-Anbieter-Accounts
Marketplace-Anbieter-Accounts sind für das Erstellen und Verwalten von [Vorlagen-Marketplace-Listings](/docs/cms/marketplace/template-guidelines) und -Transaktionen vorgesehen. Um mit dem Verkauf im HubSpot-Marketplace für Vorlagen zu beginnen, [erstellen Sie einen Anbieter-Account für den Vorlagen-Marketplace](https://app.hubspot.com/signup-hubspot/asset-provider). Wenn Sie ein [HubSpot-Partner](https://www.hubspot.com/partners) sind, verfügen Sie in Ihrem Partner-Account bereitsüber die Marketplace-Anbieter-Funktionen.
Ein Marketplace-Anbieter-Account kann durch ein **Marketplace für Vorlagen**-Element im oberen Navigationsmenü identifiziert werden.
# Entwicklerübersicht
Source: https://developers.hubspot.de/docs/getting-started/developer-overview
# Erste Schritte mit Modulen
Source: https://developers.hubspot.de/docs/getting-started/quickstart
Erstellen Sie eine Komponente, die für alle Ihre Seiten und Vorlagen wiederverwendbar ist, ein so genanntes benutzerdefiniertes Modul. Sie lernen etwas über Felder und deren Verwendung in HubL.
'Erstellen Sie eine Komponente, die für alle Ihre Seiten und Vorlagen wiederverwendbar ist, ein so genanntes benutzerdefiniertes Modul. Sie lernen etwas über Felder und deren Verwendung in HubL.';
'[https://cdn2.hubspot.net/hubfs/327485/Module%20Editor-1-1.png](https://cdn2.hubspot.net/hubfs/327485/Module%20Editor-1-1.png)';
In diesem Tutorial lernen Sie anhand des CMS Hub-Boilerplate-Designs, wie Sie ein Modul erstellen und wie Sie es in Vorlagen und Seiten als Teil eines Designs verwenden können. Am Ende des Tutorials haben Sie ein Kundentestimonial-Modul erstellt, das ein Textfeld, ein Bildfeld und ein Rich-Text-Feld enthält.
Wenn Sie zum ersten Mal mit CMS Hub entwickeln, empfehlen wir:
**Schneller Einstieg in die CMS Hub-Entwicklung**
Wenn Sie ein Modul für die Verwendung in einem Design entwickeln möchten, das Sie im HubSpot-Marketplace für Vorlagen hinzufügen möchten, sehen Sie sich die [Modulanforderungen für den HubSpot-Marketplace für Vorlagen](https://developers.hubspot.com/docs) an.
## Bevor Sie loslegen
Bevor Sie mit diesem Tutorial loslegen:
* Richten Sie eine [CMS Hub-Entwickler-Sandbox](https://offers.hubspot.com/free-cms-developer-sandbox) ein. Sie können stattdessen Ihren bestehenden Account verwenden, aber in der Sandbox können Sie entwickeln, ohne dass sich dies auf die Elemente in Ihrem Haupt-Account auswirkt.
* Installieren Sie [Node.js](https://nodejs.org/en/), das die Tools zur lokalen Entwicklung von HubSpot aktiviert. Unterstützt wird Version 10 oder höher.
Sie können sich auch schon eine Vorschau der fertigen [Projektdateien](https://github.com/HubSpot/cms-modules-getting-started/tree/3b9159334f8c6204c7d2d34d8945d71b6ba402ea) anschauen. Da sich der Code des CMS-Boilerplate-Designs im Laufe der Zeit ändern kann, sind nur die wichtigsten Dateien enthalten, die Entwickler während des Tutorials erstellen oder bearbeiten müssen. Diese Dateien umfassen:
1. **Testimonial.module:** der Ordner mit den Dateien, aus denen das benutzerdefinierte Modul besteht, das Sie im Rahmen des Tutorials erstellen.
2. **homepage.html:** die Vorlage, die Sie bearbeiten, um das benutzerdefinierte Modul einzuschließen.
3. **images:** der Ordner mit den Profilbildern, die Sie im Modul verwenden.
## Lokale Entwicklungsumgebung einrichten
In diesem Tutorial entwickeln Sie das Modul lokal. Um mit HubSpot über die Befehlszeilenschnittstelle zu interagieren, müssen Sie das [CLI von HubSpot](/docs/developer-tooling/local-development/hubspot-cli/install-the-cli) installieren und es für den Zugriff auf Ihren Account konfigurieren.
* Führen Sie im Terminal den folgenden Befehl aus, um das CLI global zu installieren. Um das CLI stattdessen nur in Ihrem aktuellen Verzeichnis zu installieren, führen Sie `npm install @hubspot/cli` aus.
```shell theme={null}
npm install -g @hubspot/cli
```
* Authentifizieren Sie im Verzeichnis, in dem Sie Ihre Designdateien speichern, Ihren HubSpot-Account, damit Sie über das CLI damit interagieren können.
```shell theme={null}
hs account auth
```
* Drücken Sie die **Eingabetaste**, um die Seite mit dem persönlichen Zugriffsschlüssel in Ihrem Browser zu öffnen.
* Wählen Sie den **Account** aus, in dem Sie bereitstellen möchten, und klicken Sie dann auf **Mit diesem Account fortfahren**. Sie werden dann zur Seite mit dem persönlichen Zugriffsschlüssel des Accounts weitergeleitet.
* Klicken Sie neben *Persönlicher Zugriffsschlüssel* auf **Anzeigen**, um Ihren Schlüssel zu sehen. Klicken Sie dann auf **Kopieren**, um ihn in Ihre Zwischenablage zu kopieren.
* Fügen Sie den kopierten Schlüssel im Terminal ein und drücken Sie dann die **Eingabetaste**.
* Geben Sie einen eindeutigen **Namen** für den Account ein. Dieser Name wird nur von Ihnen gesehen und verwendet, wenn Sie Befehle ausführen. Drücken Sie dann die **Eingabetaste**, um die Tools zur lokalen Entwicklung mit Ihrem Account zu verknüpfen:
Sie sehen dann eine Erfolgsmeldung, die bestätigt, dass die `~/.hscli/config.yml`-Datei erstellt wurde.
## Die CMS-Boilerplate zu Ihrem Account hinzufügen
* Führen Sie den folgenden Befehl aus, um ein neues Design mit dem Namen `my-theme` zu erstellen. Daraufhin wird ein Designordner mit dem Namen `my-theme` in Ihrem Arbeitsverzeichnis erstellt, der die Boilerplate-Elemente enthält.
```shell theme={null}
hs create website-theme my-theme
```
* Laden Sie die Dateien in Ihren Account hoch.
```shell theme={null}
hs upload
```
| Parameter | Beschreibung |
| - | - |
| | Der Pfad zu lokalen Dateien, relativ zu Ihrem aktuellen Arbeitsverzeichnis. |
| | Der Zielpfad in Ihrem HubSpot-Account. Dies kann ein neuer Ordner sein. |
Zum Beispiel lädt `hs upload my-theme my-new-theme` den Ordner `my-theme` von Ihrem Rechner in den Ordner `my-new-theme` in HubSpot hoch.
Standardmäßig lädt HubSpot in den Standard-Account in Ihrer `hubspot.config,yml`-Datei hoch. Sie können jedoch auch einen Account angeben, indem Sie ein `--account=`-Flag im Befehl einschließen. Zum Beispiel: `hs upload --portal=mainProd`.
Weitere Informationen finden Sie in der [CLI-Befehlsreferenz](/docs/developer-tooling/local-development/hubspot-cli/install-the-cli).
## Ein Modul in HubSpot erstellen
Mit der CMS-Boilerplate in Ihrer lokalen Umgebung erstellen Sie jetzt ein neues Modul für das Design.
Für die Zwecke dieses Tutorials erstellen Sie das Modul in HubSpot und übernehmen es dann mithilfe des CLI in das Design. Sie können jedoch auch Module lokal mit dem [hs create module](/docs/developer-tooling/local-development/hubspot-cli/install-the-cli)-Befehl von Grund auf neu erstellen.
* Melden Sie sich bei Ihrem HubSpot-Account an und gehen Sie dann zum Design-Manager, indem Sie zu **Marketing > Dateien und Vorlagen > Design-Manager** navigieren.
* Öffnen Sie in der linken Seitenleiste des Design-Managers den soeben hochgeladenen **Designordner**.
* Öffnen Sie im Designordner den **Ordner für Module**.
* Klicken Sie oben links auf **Datei > Neue Datei**, um ein neues Modul in diesem Ordner zu erstellen.
* Klicken Sie im Dialogfeld auf das **Dropdown-Menü**, wählen Sie **Modul** aus und klicken Sie dann auf **Weiter**.
* Aktivieren Sie das Kontrollkästchen **Seiten**, um das Modul für Website-Seiten und Landingpages verfügbar zu machen.
* Geben Sie dem Modul den Namen **Testimonial** und klicken Sie dann auf **Erstellen**.
### Felder zum Modul hinzufügen
Fügen Sie als Nächstes dem Modul drei Felder hinzu:
* Ein Textfeld zum Speichern des Namens des Kunden, der das Testimonial abgibt.
* Ein Bildfeld, in dem das Profilbild des Kunden gespeichert wird.
* Ein Rich-Text-Feld, in dem das Testimonial des Kunden gespeichert wird.
#### Das Textfeld für den Kundennamen hinzufügen
* Klicken Sie in der rechten Seitenleiste des Modul-Editors auf das Dropdown-Menü **Feld hinzufügen** und wählen Sie dann **Text** aus.
* Klicken Sie in der rechten Seitenleiste oben rechts auf das **Bleistift-Symbol**, um das Feld zu benennen. Geben Sie für dieses Tutorial den **Kundennamen** ein. Der Name der HubL-Variable ändert sich dann in **customer\_name**.
* Legen Sie den **Standardtext** auf **Sally** fest.
* Klicken Sie in der rechten Seitenleiste auf das **Breadcrumb**-Symbol, um zum Hauptmenü des Moduls zurückzukehren.
#### Das Bildfeld für das Kundenprofilbild hinzufügen
* Fügen Sie auf die gleiche Weise ein weiteres Feld hinzu, wobei Sie diesmal den Feldtyp **Bild** auswählen.
* Geben Sie dem Bildfeld das Label **Profilbild** und legen Sie dann den **Namen der HubL-Variablen** auf **profile\_pic** fest.
* Wählen Sie unter **Standardbild** das Profilbild aus, das für Sally im Ordner **Bilder** der fertigen [Projektdateien](https://github.com/HubSpot/cms-modules-getting-started/tree/3b9159334f8c6204c7d2d34d8945d71b6ba402ea/images) bereitgestellt wurde.
* Legen Sie den **ALT-Text** auf **Sallys Profilbild** fest.
#### Das Rich-Text-Feld für Sallys Testimonial hinzufügen
* Fügen Sie auf die gleiche Weise ein weiteres Feld hinzu, wobei Sie dieses Mal den Feldtyp **Rich-Text** auswählen.
* Versehen Sie das Rich-Text-Feld mit dem Label **Testimonial**.
* Klicken Sie auf das Feld **Standard-Rich-Text** und geben Sie „Ich habe mit diesem Unternehmen nur gute Erfahrungen gemacht" ein.
Bislang haben Sie Daten in mehrere Modulfelder eingegeben. Zu diesem Zeitpunkt enthält das Modul jedoch keinerlei HTML, um diese Daten zu rendern. Im Modul-Editor wird dies durch den leeren Zustand des Abschnitts `module.html` widergespiegelt. 
Fügen Sie als Nächstes HubL zu `module.html` hinzu, um die Felddaten anzuzeigen.
### HubL hinzufügen, um Felddaten anzuzeigen
Um Daten aus den zuvor erstellten Feldern anzuzeigen, fügen Sie folgenden HubL zum Bereich `module.html` hinzu:
```hubl theme={null}
{{module.customer_name}}
{{module.testimonial}}
```
Die obigen HubL-Token verwenden Punktnotation, um Daten aus jedem Feld aufzurufen. Da wir Daten aus Modulfeldern abrufen möchten, beginnt jedes Token in diesem Fall mit `module`, gefolgt vom HubL-Variablennamen des Feldes. Sie können Punktnotation verwenden, um auf bestimmte Eigenschaften eines Feldes zuzugreifen, die Sie in den `profile_pic`-Token in Zeile 3 oben sehen können.
* Wenn der HubL zu Ihrem Modul hinzugefügt wurde, klicken Sie oben rechts auf **Vorschau**, um zu sehen, wie das Modul bisher aussieht.
* Klicken Sie dann oben rechts auf **Änderungen veröffentlichen**.
Nachdem Sie das Modul in HubSpot erstellt und veröffentlicht haben, verwenden Sie nun das CLI, um das Modul in Ihre lokale Umgebung zu holen, damit Sie seinen Content anzeigen und weitere Änderungen vornehmen können.
## Das Modul lokal anzeigen und ändern
Um das Modul lokal anzuzeigen, müssen Sie es zunächst in Ihr lokales Design holen:
* Führen Sie im Terminal den folgenden Befehl aus: `hs fetch `:
* `` steht für den Dateipfad des Moduls in HubSpot. Um den Dateipfad abzurufen, klicken Sie mit der rechten Maustaste auf das Modul in der linken Seitenleiste im Design-Manager und wählen Sie dann **Pfad kopieren** aus.
* `` steht für den Pfad zu dem lokalen Verzeichnis, in dem sich Ihr Design befindet. Wird dies nicht angegeben, verwendet der Befehl das aktuelle Arbeitsverzeichnis.
Wenn Sie sich beispielsweise bereits im Arbeitsverzeichnis befinden, kann Ihr FETCH-Befehl wie folgt aussehen:
```shell theme={null}
hs fetch my-theme/modules/testimonial.module
```
### Den Modulordner in Ihrer lokalen Umgebung öffnen
Gehen Sie in Ihrem bevorzugten Code-Editor zu dem Modulordner, den Sie gerade von Ihrem HubSpot-Account geholt haben. In Ihrem Modulordner finden Sie fünf verschiedene Dateien:
| Parameter | Beschreibung |
| - | - |
| `fields.json` | Ein JSON-Objekt, das die Felder Ihres Moduls enthält. |
| `meta.json` | Ein JSON-Objekt, das Meta-Informationen zu Ihrem Modul enthält. |
| `module.css` | Die CSS-Datei, die Ihr Modul formatiert. |
| `module.html` | Den HTML- und HubL-Code für Ihr Modul. |
| `module.js` | Das JavaScript für Ihr Modul. |
Ausführlichere Informationen finden Sie in unserer Dokumentation zur [Dateistruktur des Moduls](https://developers.hubspot.com/docs), insbesondere zu den Dateien `fields.json` und `meta.json`. In diesem Tutorial konzentrieren wir uns auf die Dateien `fields.json`, `module.css` und `module.html` und wie sie vom Modul-Editor im Design-Manager generiert, heruntergeladen und hochgeladen werden.
### Die fields.json-Datei des Moduls anzeigen
Öffnen Sie die `fields.json`-Datei des Moduls. Abgesehen von einigen der `id`-Nummern, dem `src`-Attribut des Bildfeldes und möglicherweise der Reihenfolge der Felder sollte die Datei ein JSON-Objekt ähnlich dem folgenden enthalten:
```json theme={null}
//fields.json
[
{
"label": "Customer Name",
"name": "customer_name",
"id": "2a025cd5-7357-007f-ae2f-25ace762588e",
"type": "text",
"required": true,
"locked": false,
"validation_regex": "",
"allow_new_line": false,
"show_emoji_picker": false,
"default": "Sally"
},
{
"label": "Profile Picture",
"name": "profile_pic",
"id": "7877fb84-eb8a-d2c7-d939-77e6e9557d8f",
"type": "image",
"required": false,
"locked": false,
"responsive": true,
"resizable": true,
"default": {
"src": "https://cdn2.hubspotqa.net/hubfs/101140939/profile-pic-sally.svg",
"alt": "Sally Profile Picture",
"width": 100,
"height": 100,
"max_width": 100,
"max_height": 100
}
},
{
"label": "Testimonial",
"name": "testimonial",
"id": "c5524ece-1ab5-f92d-a5de-e2bf53199dfa",
"type": "richtext",
"required": false,
"locked": false,
"default": "
I’ve had nothing but wonderful experiences with this company.
"
}
]
```
Die Werte für die folgenden Felder entsprechen den Werten, die Sie in Schritt 3 hinzugefügt haben:
* `name`: der Name des Feldes.
* `label`: das Label des Feldes.
* `default`: der Standardwert des Feldes.
### Die module.html-Datei des Moduls anzeigen
Die `module.html`-Datei sollte den HubL- und HTML-Code enthalten, den Sie zuvor im HubL + HTML-Modul-Editor geschrieben haben.
Um diesen Code interessanter zu gestalten und bereit für CSS-Styling zu machen, kopieren Sie den folgenden Code und fügen ihn in die Datei ein:
```hubl theme={null}
{{ module.customer_name }}
{{ module.testimonial }}
```
Wenn Sie Ihren HTML wie oben beschrieben schreiben, verwenden Sie die [BEM-Klassenstruktur](https://css-tricks.com/bem-101/) in Übereinstimmung mit dem [Styleguide](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/STYLEGUIDE.md#css-code-formatting) des CMS Hub-Boilerplate-Designs.
### Die module.css-Datei des Moduls anzeigen
Die `module.css`-Datei sollte zu diesem Zeitpunkt leer sein. Kopieren Sie den folgenden Code und fügen Sie ihn in die Datei ein, um Stile hinzuzufügen:
```css theme={null}
.testimonial {
text-align: center;
}
.testimonial__header {
font-weight: bold;
}
.testimonial__picture {
display: block;
margin: auto;
}
```
Nachdem Sie den Code hinzugefügt haben, speichern Sie die Datei.
## Lokale Änderungen für Ihren HubSpot-Account übernehmen
Übernehmen Sie Ihre lokalen Änderungen nach dem Speichern wieder in Ihren HubSpot-Account.
* Gehen Sie zu Ihrem Terminal und stellen Sie sicher, dass Sie sich im richtigen Verzeichnis befinden.
* Führen Sie den watch-Befehl aus, um Änderungen beim Speichern an HubSpot zu übertragen: `hs watch `.
```shell theme={null}
hs watch my-theme my-theme
```
## Ihre lokalen Änderungen in HubSpot in einer Vorschau anzeigen
* Gehen Sie in Ihrem HubSpot-Account zu **Marketing** > **Dateien und Vorlagen** > **Design-Manager**.
* Gehen Sie in der linken Seitenleiste zu dem von Ihnen erstellten **Design**, öffnen Sie dann den **Modulordner** und wählen Sie das **Testimonial**-Modul aus.
* Wenn das Modul geöffnet ist, sollten Sie Ihre Änderungen in den Bereichen `module.html` und `module.css` sehen.
* Klicken Sie oben rechts auf **Vorschau**. Daraufhin öffnet sich eine neue Registerkarte, auf der die Modulvorschau angezeigt wird.
Fassen wir den bisherigen Verlauf des Tutorials zusammen. Sie haben:
* ein Modul in HubSpot erstellt.
* dieses Modul in Ihre lokale Umgebung geholt.
* mithilfe Ihrer Tools zur lokalen Entwicklung Änderungen am HubL + HTML und CSS vorgenommen.
Im nächsten Teil des Tutorials erfahren Sie, wie Sie das Modul in einer Vorlage verwenden.
## Das Modul zu einer Vorlage hinzufügen
In diesem Teil des Tutorials arbeiten Sie hauptsächlich in den Ordnern `modules` und `templates` innerhalb Ihrer lokalen Designdateien. 
Gemäß ihrer einfachsten Definition sind Module bearbeitbare Bereiche von HubSpot-Vorlagen und -Seiten. In HubSpot können Sie über den Design-Manager Module in Vorlagen einfügen, aber hier verwenden wir dann HubL, um das Modul zur Vorlage in Ihrer lokalen Umgebung hinzuzufügen.
* Öffnen Sie in Ihrem Code-Editor den `templates`-Ordner und dann die `home.html`-Datei.
* Gehen Sie in der `home.html`-Datei zum letzten `dnd_section`, der etwa in Zeile 28 beginnt. Diesem Abschnitt fügen Sie Ihr neues Modul hinzu.
* Kopieren Sie innerhalb dieses `dnd_section` und über den anderen `dnd_modules` das folgende HubL-Modul-Tag und fügen Sie es ein:
```hubl theme={null}
{% dnd_module
path= “../modules/Testimonial.module”,
offset=0,
width=4
%}
{% end_dnd_module %}
```
Dieses HubL-Tag referenziert Ihr neues Modul anhand seines relativen Dateipfades. Damit das Modul gleichmäßig zu den anderen beiden Modulen im `dnd_section` passt, weist es auch einen `width`- und `offset`-Wert für das Modul zu:
* Das CMS von HubSpot verwendet ein [12-Spalten-Rastersystem.](https://developers.hubspot.com/docs#columns) Um dieses Modul gleichmäßig mit den anderen beiden zu platzieren, müssen Sie daher jedes Modul im `dnd_section` aktualisieren, damit es eine Breite von `4` hat.
* Dann hat das erste `dnd_module` in der Gruppe (`testimonial`) einen Versatz von `0`, um es zuerst zu positionieren.
* Das zweite `dnd_module` (`linked_image`) hat einen Versatz von `4`, um es als zweites zu positionieren.
* Das dritte `dnd_module` (`rich_text`) hat einen Versatz von `8`, um es als drittes zu positionieren.
Nachdem Sie den `offset`- und `width`-Wert von jedem `dnd_module` festgelegt haben, sieht Ihr Code wie folgt aus:
```hubl theme={null}
{% dnd_section
background_color="#f8fafc",
vertical_alignment="MIDDLE"
%}
{% dnd_module
path= “../modules/Testimonial.module”,
offset=0,
width=4
%}
{% end_dnd_module %}
{% dnd_module
path="@hubspot/linked_image",
img={
"alt": "Stock placeholder image with grayscale geometrical mountain landscape",
"loading": "lazy",
"max_height": 451,
"max_width": 605,
"size_type": "auto_custom_max",
"src": get_asset_url("../images/grayscale-mountain.png")
},
offset=4,
width=4
%}
{% end_dnd_module %}
{% dnd_module
path="@hubspot/rich_text",
html="
Provide more details here.
Use text and images to tell your company’s story. Explain what makes your product or service extraordinary.
"
offset=8,
width=4
%}
{% end_dnd_module %}
{% end_dnd_section %}
```
Beim Hinzufügen eines Moduls zu einem Drag-&-Drop-Bereich ist für das Modul-Tag kein eindeutiger Name erforderlich. Wenn Sie jedoch ein Modul zu einer HTML-Datei außerhalb von Drag-&-Drop-Bereichen hinzufügen, müssen Sie dem Modul einen eindeutigen Namen zuweisen. Sie würden auch eine etwas andere Syntax verwenden, zum Beispiel:
`{% module "testimonial_one" path="../modules/Testimonial.module" %}`
Erfahren Sie mehr über die [Verwendung von Modulen in Vorlagen](/docs/cms/reference/modules/using-modules-in-templates).
## Ihre Änderungen in HubSpot in einer Vorschau anzeigen
* Wenn Sie den `watch`-Befehl nicht ausgeführt haben lassen, um Ihre Arbeit automatisch nachzuverfolgen, führen Sie `hs watch ` aus. Stellen Sie sicher, dass dieser Befehl weiter ausgeführt wird, während Sie die nächsten Schritte abschließen.
* Öffnen Sie in Ihrem HubSpot-Account den Design-Manager (**Marketing** > **Dateien und Vorlagen** > **Design-Manager**).
* Wählen Sie in der linken Seitenleiste des Design-Managers die **home.html**-Datei aus.
* Klicken Sie oben rechts auf **Vorschau** und wählen Sie dann **Live-Vorschau mit Anzeigeoptionen** aus, um die Vorschau der Vorlage in einem neuen Fenster zu öffnen.
* Öffnen Sie in der neuen Registerkarte die Vorlagenvorschau, die Ihr neu hinzugefügtes Testimonial-Modul enthalten sollte.
## Das Modul lokal in der Vorlage anpassen
So können Sie die Startseitenvorlage interessanter gestalten:
* Gehen Sie zurück zu Ihrem Code-Editor und öffnen Sie die `home.html`-Datei.
* Fügen Sie dem Tag des Testimonial-Moduls die folgenden Parameter hinzu:
```hubl theme={null}
{% dnd_module
path='../modules/Testimonial.module',
customer_name = "Mary",
profile_pic = {
src: "{{
get_asset_url('../images/profile-pic-mary.svg') }}",
alt: "Mary Profile Picture"
},
testimonial = "Wow, what a product! I can't wait to recommend this to all my family and friends!",
offset=0,
width=4
%}
{% end_dnd_module %}
```
Die obigen Parameter setzen die Standardwerte außer Kraft, die Sie den drei Feldern ursprünglich zugewiesen haben. Jeder Parameter verwendet den HubL-Variablennamen, den Sie zuvor den einzelnen Feldern zugewiesen haben:
* `customer_name`**:** dieser Parameter übergibt den Namen `Mary` an das Feld für den Kundennamen. Dabei wird der Originalwert `Sally` überschrieben.
* `profile_pic`**:** dieser Parameter ist ein Objekt, das zwei Eigenschaften enthält:
* Die `src`-Eigenschaft verwendet die HubL-Funktion `get_asset_url`, um die URL für das neue Profilbild abzurufen. Beachten Sie, dass der Dateipfad des Bildes relativ zu Ihrem Arbeitsverzeichnis ist. Sie müssen dieses Bild zunächst dem `images`-Ordner in Ihren lokalen Designdateien hinzufügen. Sie finden das Bild im `images`-Ordner der abgeschlossenen [Projektdateien](https://github.com/HubSpot/cms-modules-getting-started/tree/3b9159334f8c6204c7d2d34d8945d71b6ba402ea/images).
* Die `alt`-Eigenschaft weist den ALT-Text des Bildes zu.
* `testimonial`**:** dieser Parameter übergibt neuen Text in das Testimonial-Feld.
Alternativ können Sie für das Rich-Text-Feld auch die HubL-Block-Syntax verwenden, um einen großen HTML- oder Textblock zu schreiben:
```hubl theme={null}
{% dnd_module
path='../modules/Testimonial.module',
customer_name = "Mary",
profile_pic = {
src: "{{
get_asset_url('../images/profile-pic-mary.svg') }}",
alt: "Mary Profile Picture"
},
offset=0,
width=4
%}
{% module_attribute "testimonial" %}
Wow, what a product! I can't wait to recommend this to all my family and friends!
{% end_module_attribute %}
{% end_dnd_module %}
```
Erfahren Sie mehr über die [Block-Syntax von Modulen](/docs/cms/reference/modules/using-modules-in-templates).
Wenn Sie den `watch`-Befehl in Ihrem Terminal ausgeführt haben lassen, werden Ihre Änderungen, durch Speichern an HubSpot gesendet. Sie können dann zum Design-Manager zurückkehren, um eine Vorschau der Vorlage anzuzeigen.
## Zwei weitere Testimonial-Module zur Vorlage hinzufügen
In diesem Schritt fügen Sie der Vorlage zwei weitere Testimonial-Module hinzu, indem Sie die gleichen Schritte wie zuvor ausführen:
* Gehen Sie zu Ihrem Code-Editor und öffnen Sie die `home.html`-Datei.
* Fügen Sie unter dem zuvor hinzugefügten Testimonial-Modul eine weitere Instanz des Moduls hinzu, indem Sie den Code des Moduls kopieren und einfügen. Geben Sie im neuen Testimonial-Modul die folgenden Details an, indem Sie die gleichen Schritte wie oben ausführen:
* Der Name des Kunden ist `Ollie`.
* Ollies Testimonial lautet wie folgt: `I can't believe that I ever conducted business without the use of this product!`
* Für das Bild von Ollie fügen Sie den relativen Dateipfad für die Datei im `images`-Ordner hinzu. Sie können das Bild selbst aus den fertigen [Projektdateien](https://github.com/HubSpot/cms-modules-getting-started/tree/3b9159334f8c6204c7d2d34d8945d71b6ba402ea) abrufen. Geben Sie dann Ollies Bild das `alt`-Attribut `Ollie Profile Picture`.
* Um den Abstand beizubehalten, legen Sie `offset` auf `4` und `width` auf `4` fest.
* Fügen Sie unter dem zweiten Testimonial-Modul ein drittes mit den folgenden Angaben hinzu:
* Der Name des Kunden ist `Erin`.
* Erins Testimonial lautet: `My business has nearly tripled since I began to use this product! Don't wait, start now!`
* Für das Bild von Erin fügen Sie den relativen Dateipfad für die Datei im `images`-Ordner hinzu. Geben Sie dann Erins Bild das `alt`-Attribut `Erin Profile Picture`.
* Um den Abstand beizubehalten, legen Sie `offset` auf `8` und `width` auf `4` fest.
* Speichern Sie Ihre Änderungen.
Wenn Sie den `watch`-Befehl in Ihrem Terminal ausgeführt haben lassen, können Sie zum Design-Manager zurückkehren, um eine Vorschau Ihrer Änderungen an der Vorlage anzuzeigen. Die Vorschau der Vorlage sollte nun alle drei Testimonial-Module enthalten.
Bereiten Sie als letzten Schritt das Design für die Verwendung auf einer Live-Seite vor, indem Sie die `theme.json`-Datei bearbeiten.
## Den Designnamen ändern
Wenn Sie den Standardnamen des Designs ändern möchten, können Sie dies tun, indem Sie die `name` Felder und `label` in der `theme.json` Datei konfigurieren.
```json theme={null}
// example theme.json
{
"name": "my_first_theme",
"label": "My first theme"
}
```
Nachdem Sie diesen Code hinzugefügt haben, speichern Sie Ihre Änderungen, damit der `watch`-Befehl Ihre Änderungen an HubSpot sendet.
## Nächste Schritte
Nachdem Sie nun ein benutzerdefiniertes Modul erstellt, es der `home.html`-Vorlage hinzugefügt und optional den Designnamen angepasst haben, können Sie eine Live-Seite aus dem Design erstellen.
Wenn Sie einem ähnlichen Tutorial folgen möchten, das sich auf Designs konzentriert, sehen Sie sich das [Tutorial „Erste Schritte mit Designs“](/docs/cms/start-building/building-blocks/themes/getting-started) an. Andernfalls erfahren Sie in der Wissensdatenbank von HubSpot mehr über das [Erstellen und Anpassen von Seiten](https://knowledge.hubspot.com/de/website-and-landing-pages/create-and-customize-pages).
Wenn Sie mehr über Module erfahren möchten, sehen Sie sich die folgenden Modulanleitungen an:
* [Konfigurieren eines Moduls](/docs/cms/reference/modules/configuration)
* [Verwenden von Modulen in Vorlagen](/docs/cms/reference/modules/using-modules-in-templates)
* [Standardmodule](/docs/cms/reference/modules/default-modules)
## Sonstige Tutorials
* [Erste Schritte mit Designs](/docs/cms/start-building/building-blocks/themes/getting-started)
* [Erste Schritte mit serverlosen Funktionen](https://developers.hubspot.com/docs)
* [Erstellen eines effizienten Entwickler-Workflows](/docs/cms/start-building/introduction/developer-environment/creating-an-efficient-development-workflow)
* [Barrierefreiheit](/docs/cms/best-practices/improve-existing-sites/accessibility)
* [Verwenden von JavaScript-Frameworks in CMS Hub](/docs/cms/start-building/introduction/developer-environment/js-frameworks)
* [Verwenden von Webkomponenten in benutzerdefinierten Modulen](https://developers.hubspot.com/blog/use-web-components-in-hubspot-cms-development)
* [Erstellen einer Code-Block-Webkomponente](https://developers.hubspot.com/blog/how-to-build-a-code-block-web-component)
# HubSpot-Entwicklerdokumentation
Source: https://developers.hubspot.de/docs/index
Produktivität steigern durch Code
Suchen oder eine Frage stellen …
Willkommen bei der Hub-Entwicklerdokumentation. Erstellen Sie benutzerdefinierte CRM- und datengestützte Weberlebnisse in HubSpot. Führen Sie die unten aufgeführten Schritte aus, um loszulegen, oder wechseln Sie direkt zu einer Schnellstartanleitung, die zu Ihrem Build passt.
> **Jetzt loslegen**
>
> 1. Installieren Sie das HubSpot CLI global
> 2. Autorisieren Sie Ihren HubSpot-Account
> 3. Beginnen Sie mit dem Erstellen
```bash npm theme={null}
npm install -g @hubspot/cli && hs init
```
```bash yarn theme={null}
yarn global add @hubspot/cli && hs init
```
```bash pnpm theme={null}
pnpm add -g @hubspot/cli && hs init
```
```bash ruby theme={null}
gem install hubspot-cli && hs init
```
```bash Build your first project theme={null}
hs get-started
```
## Daten in HubSpot in- und exportieren
Migrieren Sie Daten mit modernen APIs und Datentools ganz einfach zu und aus HubSpot.
## Visualisieren Sie Daten in HubSpot
Fügen Sie benutzerdefinierte UI-Elemente (z. B. CRM-Karten) hinzu, um Ihre Daten direkt in HubSpot anzuzeigen.
## Auf der Grundlage von Daten in HubSpot handeln
Automatisieren Sie Aktionen, lösen Sie Workflows aus und passen Sie die HubSpot-Logik an die Bedürfnisse Ihres Unternehmens an.
## Ressourcen
> **[Jetzt loslegen](https://developers.hubspot.com/docs/getting-started/overview)**
>
> Erstellen Sie Ihre erste App oder Vorlage in wenigen Minuten.
> **[API-Referenz](/docs/api-reference/overview)**
>
> Integrieren Sie mithilfe der APIs von HubSpot.
> **[Änderungsprotokoll](https://developers.hubspot.com/changelog)**
>
> Erfahren Sie mehr über neue Änderungen und Releases.
> **[Überblick über die Plattform](https://developers.hubspot.com/docs/getting-started/overview)**
>
> Lernen Sie die Entwicklungsplattform und -tools von HubSpot kennen.
> **[HubSpot Academy](https://academy.hubspot.com/)**
>
> Sehen Sie sich die zahlreichen Lernressourcen an.
> **[Beispiel-Apps](https://github.com/HubSpot/ui-extensions-examples/tree/main)**
>
> Lassen Sie sich Codebeispiele für die CRM-Anpassung anzeigen.
# Anforderungen für Agent-Tool-Listings
Source: https://developers.hubspot.de/docs/apps/developer-platform/list-apps/agent-tool-listing-requirements
Überprüfen Sie die App Marketplace-Anforderungen für das Hinzufügen einer App, die Agent-Tools enthält.
Im Folgenden erfahren Sie mehr über die zusätzlichen Anforderungen für das Hinzufügen einer App mit KI-Tools im App Marketplace und wie [Sie Ihre App zur Genehmigung einreichen](#submitting-tools-for-approval).
## Listing-Voraussetzungen
Alle für den App Marketplace entwickelten Apps unterliegen den [Anforderungen für Listings im App Marketplace](/docs/apps/developer-platform/list-apps/listing-your-app/app-marketplace-listing-requirements), und zertifizierte Apps unterliegen den zusätzlichen [Anforderungen für die App Marketplace-Zertifizierung](/docs/apps/developer-platform/list-apps/apply-for-certification/certification-requirements). Wenn Sie ein KI-Tool zu einer App hinzufügen, die für den App Marketplace bestimmt ist, müssen Sie einige zusätzliche Kriterien erfüllen.
### Sicherheit und Datenschutz
* **Bereiche:** Wenn ein Agent-Tool einen Objekttyp unterstützt, muss der entsprechende `.read`-Bereich [der Konfiguration der erforderlichen Bereiche Ihrer App](/docs/apps/developer-platform/build-apps/app-configuration#app-schema) hinzugefügt werden. Wenn ein Tool beispielsweise Deals unterstützt, muss die App den `crm.objects.deals.read`-Bereich verlangen.
* **Eingaben:** Tools dürfen nur Kontext und Eingaben sammeln, die für ihre Ausgaben erforderlich sind. Zum Beispiel:
* Ein Tool zum Zusammenfassen von Kontaktdatensätzen kann Eingaben wie Kontakteigenschaften und Daten von zugehörigen Meetings und Aufgaben berücksichtigen.
* Für ein Tool zum Erstellen eines Angebots sollte kein Kontext zum Meeting-Verlauf eines Kontakts erforderlich sein.
* **LLM-spezifische Schwachstellen:** Ihre App wird auf Best Practices im Zusammenhang mit LLM-spezifischen Risiken überprüft (z. B. indirekte Prompt-Injektion oder Jailbreaks).
* **Vertrauliche Daten:** Ihre App darf nicht [auf Bereiche mit vertraulichen Daten](/docs/api-reference/crm-sensitive-data/guide) zugreifen, diese anfordern oder verwenden.
### Compliance
Die Agent-Tools dürfen keine Systeme oder Anwendungsfälle mit „inakzeptablem Risiko“ oder „hohem Risiko“ unterstützen, wie sie in der [europäischen Verordnung über künstliche Intelligenz (KI-Verordnung)](https://digital-strategy.ec.europa.eu/en/policies/regulatory-framework-ai) beschrieben sind.
Zum Beispiel:
* **Akzeptabel:** Tools, um Kontaktdatensätze zusammenzufassen oder Angebote zu erstellen
* **Inakzeptabel:** Tools mit Themen wie „Social Scoring“, „Einstellungsentscheidung“ oder „Elternzeitvorhersage“
### Sicherheit
* **Testvideo:** Sie müssen ein kurzes Video bereitstellen, in dem die von Ihnen durchgeführten Funktionstests beschrieben werden (siehe Abschnitt [Ihre Tools zur Genehmigung einreichen](#submitting-your-tools-for-approval) unten).
* **Funktionstests:** Ihre Tools müssen alle Funktionstests bestehen, die das HubSpot Ecosystem Quality-Team durchführt.
### Benutzerfreundlichkeit
* **Namensgebung:** Die Namen Ihrer Tools sollten die externe Plattform angeben, mit der sie interagieren. Sie sollten jedoch keine Angaben zu Ihrer Organisation im Tool-Namen enthalten, da die Kennzeichnung und Zuordnung über die App Marketplace-Benutzeroberfläche erfolgt. Zum Beispiel:
* **Akzeptabel:** „Slack-Benachrichtigung senden“ oder „Acme-Angebot erstellen"
* **Inakzeptabel:** „Slack-Benachrichtigung von Alpha Co. senden“ oder „Acme-Angebot erstellen von Omega Inc."
* **Text:** Beschreibungen der Tools, Labels, Optionen, Tools und andere kundenorientierte Texte sind klar und intuitiv.
### Zweck
Derzeit sollten Tools Anwendungsfälle im Frontoffice (z. B. Marketing, Vertrieb und Kundenservice) unterstützen. Zum Beispiel:
* **Akzeptabel:** Tools wie „Xero-Rechnung erstellen“ und „Omega-Geschenk senden“
* **Inakzeptabel:** Tools vom Typ „HubSpot-Setup für neue Mitarbeitende“
***
## Ihre Tools zur Genehmigung einreichen
Um Ihre Tools zur Genehmigung einzureichen, führen Sie bitte die folgenden Schritte innerhalb der angegebenen Zeiträume durch.
### 2. bis 9. Juni 2025 (privater Beta-Kickoff/-Checkpoint #1)
Richten Sie zwischen dem 2. und 9. Juni 2025 Ihren Entwickler-Test-Account ein.
* Wählen Sie im Entwickler-Account, in dem Sie Ihre Tools erstellen werden (der Account wurde am 2. Juni auf die Entwicklerplattform umgestellt), einen Entwickler-Test-Account aus oder [erstellen Sie einen neuen](/docs/getting-started/account-types#developer-test-accounts).
* Installieren Sie in diesem Entwickler-Test-Account die Test-App, die Ihre Tools enthalten wird.
* Teilen Sie dem Beta-Programm-Manager von HubSpot die HubID des Entwickler-Test-Accounts mit. Dies ist die im folgenden Screenshot hervorgehobene ID, die sich von Ihrer Entwickler-Account-ID und Ihrer Test-App-ID unterscheidet. HubSpot gibt die Sperre des Accounts frei, sodass Ihre Tools in Agents verwendet werden können.
### 20. Juni 2025 (privater Beta-Checkpoint #2)
Stellen Sie bis zum 20. Juni 2025 Testanmeldeinformationen bereit und testen Sie Ihre Tools, damit das HubSpot Ecosystem Quality-Team Ihre Tools überprüfen und genehmigen kann.
* **Bereitstellung von Testanmeldeinformationen:**
* Füllen Sie den Entwickler-Test-Account mit den CRM-Daten, die Sie zum ordnungsgemäßen Testen der Tools benötigen.
* Laden Sie [ecosystem-quality-review@hubspot.com](mailto:ecosystem-quality-review@hubspot.com) als [Super-Admin](https://knowledge.hubspot.com/user-management/hubspot-user-permissions-guide#super-admin) in den Account ein.
* Geben Sie alle erforderlichen Berechtigungen für [ecosystem-quality-review@hubspot.com](mailto:ecosystem-quality-review@hubspot.com) auf Ihrer externen Plattform frei, um die Tools in HubSpot-Workflows und -Agents ordnungsgemäß zu testen.
* **Testen der Tools in den freigeschalteten Entwickler-Test-Accounts:** Implementieren und testen Sie die Tools mit Ihrer Test-/Entwicklungs-App durchgängig innerhalb der Workflows und Agents im Entwickler-Test-Account.
* **Testvideo:** Nehmen Sie ein kurzes Video auf, in dem Sie die von Ihnen durchgeführten Funktionstests beschreiben, und teilen Sie es anschließend mit [ecosystem-quality-review@hubspot.com](mailto:ecosystem-quality-review@hubspot.com). Das Demovideo muss die folgenden Anforderungen erfüllen:
* Es dauert mindestens drei Minuten.
* Es umfasst Audio- (bevorzugt) oder Textbeschreibungen.
* Es enthält Beschreibungen des Tools und häufiger Anwendungsfälle.
* Es werden die Testläufe beschrieben, die Sie durchgeführt haben. Das Ecosystem Quality-Team sollte in der Lage sein, diese Schritte mit den im Entwickler-Test-Account vorhandenen Daten zu replizieren.
Zwischen dem 20. und 25. Juni 2025 wird das HubSpot Ecosystem Quality-Team Ihre Tools überprüfen und ein erstes Feedback geben. Bitte reagieren Sie so schnell wie möglich auf dieses Feedback, da für die endgültige Genehmigung möglicherweise einige Überprüfungen erforderlich sind.
# Beantragen einer App-Zertifizierung
Source: https://developers.hubspot.de/docs/apps/developer-platform/list-apps/apply-for-certification/applying-for-app-certification
In der App-Zertifizierung erfahren Benutzer, dass Ihre App von HubSpot überprüft und genehmigt wurde. So bauen Sie Vertrauen auf und liefern potenziellen Benutzern einen Nachweis von deren Qualität.
'In der App-Zertifizierung erfahren Benutzer, dass Ihre App von HubSpot überprüft und genehmigt wurde. So bauen Sie Vertrauen auf und liefern potenziellen Benutzern einen Nachweis von deren Qualität.';
### Was ist eine App-Zertifizierung?
Die App-Zertifizierung beinhaltet, dass das HubSpot Ecosystem Quality-Team überprüft und bestätigt, dass Ihre gelistete App [diese Anforderungen](https://developers.hubspot.com/docs) an Sicherheit, Datenschutz, Zuverlässigkeit, Leistung, Benutzerfreundlichkeit, Barrierefreiheit und Wert erfüllt. Sobald sie genehmigt ist, wird auf Ihrer App-Listing-Seite ein „Von HubSpot zertifizierte App“-Abzeichen angezeigt.
### Warum ist das wichtig?
Anhand eines Zertifizierungsabzeichens in Ihrem App-Listing wissen vorhandene und potenzielle Kunden, dass das HubSpot Ecosystem Quality-Team Ihre App überprüft und genehmigt hat. Letztendlich ist es eine Möglichkeit, Qualität zu symbolisieren und Vertrauen bei App-Benutzern aufzubauen. Erfahren Sie [hier](https://developers.hubspot.com/blog/how-to-build-customer-trust-through-certification) mehr darüber, wie Sie durch eine App-Zertifizierung Kundenvertrauen aufbauen.
### Wie funktionieren das?
Jeder [berechtigte](https://developers.hubspot.com/docs) App-Partner kann über seinen App-Entwickler-Account eine Zertifizierung beantragen. Das HubSpot Ecosystem Quality-Team überprüft dann Ihre Einreichung und kontaktiert Sie, um Feedback zu geben oder die Zertifizierung Ihrer App zu bestätigen.
### Ist meine App für eine Zertifizierung berechtigt?
Lesen Sie sich unsere [Zertifizierungsvoraussetzungen](https://developers.hubspot.com/docs) durch, um sicherzustellen, dass Ihre App für eine Zertifizierung in Frage kommt. Sie können keine Zertifizierung beantragen, es sei denn, Ihre App verfügt über mindestens 60 aktive Installationen und das erforderliche Volumen an API-Traffic. Aktive Installationen sind die Anzahl der einzigartigen HubSpot-Produktions-Accounts, die nicht mit Ihrer Organisation verbunden sind und die erfolgreiche App-Aktivitäten in den letzten 30 Tagen zeigen.
### Wie kann ich eine Zertifizierung beantragen?
Sie können jeweils nur eine App zur Zertifizierung einreichen. Wenn Sie mehr als eine App gleichzeitig zur Zertifizierung einreichen, werden diese basierend auf der Reihenfolge der Einreichung abgelehnt. Sobald Ihre App zertifiziert ist, können Sie eine weitere zur Zertifizierung einreichen.
So beantragen Sie eine Zertifizierung:
* [Melden Sie sich in Ihrem Entwickler-Account an](https://knowledge.hubspot.com/de/account-management/why-can-t-i-log-into-hubspot) und gehen Sie zu **Marketplace** > **App-Listings**.
* Bewegen Sie den Mauszeiger über die App, die Sie zertifizieren möchten, und klicken Sie auf **Mehr**. Wählen Sie dann **App zertifizieren** aus.
* Geben Sie im Dialogfeld Folgendes ein:
* **YouTube-URL für Demovideo:** Geben Sie die **URL** für das Demovideo ein. Sehen Sie sich [unten](#app-demo) die notwendigen Anforderungen an das App-Demovideo an.
* **Testanmeldeinformationen:** Geben Sie die Testanmeldedaten für Ihre App ein, damit das HubSpot Ecosystem Quality-Team deren Funktionen bewerten kann.
* Klicken Sie unten auf **Antrag zur Zertifizierung einreichen**.
### Anforderungen für das App-Demovideo
Demovideos helfen dem HubSpot Ecosystem Quality-Team, Ihre App zu testen. Das Team überprüft Ihre App erst, wenn ein Demovideo eingereicht wurde, das alle Anforderungen erfüllt. Werbe- und Marketingvideos werden abgelehnt. HubSpot wird Ihre Demovideos nicht teilen oder veröffentlichen.
Das Demovideo muss die folgenden Anforderungen erfüllen:
* Es dauert mindestens drei Minuten.
* Es umfasst Audio- (bevorzugt) oder Textbeschreibungen.
* Es umfasst Beschreibungen des Zwecks Ihrer App und häufiger Anwendungsfälle.
* Beispiel: „Die Acme-App hilft Vertriebs- und Onboarding-Mitarbeitern bei der CRM-übergreifenden Koordination. Abgeschlossene gewonnene Deals in einem der von Acme unterstützten CRM-Systeme können automatisch Tickets und Onboarding-Aufgaben in HubSpot generieren."
* Es wird demonstriert und beschrieben, wie neue Benutzer Folgendes durchführen sollten:
* Ihre App installieren
* Beispiel: „ Klicken Sie im Acme App-Listing im HubSpot App Marketplace auf „App installieren“, wählen Sie Ihr CRM aus, geben Sie Ihre Anmeldeinformationen ein, klicken Sie auf „Fertig“, wählen Sie Ihren HubSpot-Account aus, überprüfen Sie die angeforderten Bereiche und klicken Sie auf „App verknüpfen“."
* Ihre App nach der Installation einrichten oder sie konfigurieren.
* Beispiel: „Sobald die App installiert ist, wählen Sie eine Ticket-Pipeline aus, indem Sie zu „Einstellungen“ > „Integrationen > „Verknüpfte Apps“ > „Acme-App“ > „Ticket-Pipeline“ gehen. Konfigurieren Sie dann im Abschnitt „Aufgabenvorlagen“ bis zu 10 Standardaufgaben. Wenn Sie bereit sind, die Synchronisierung zu aktivieren, aktivieren Sie den Schalter für die Ticket-Synchronisierung."
* Mithilfe der primären Funktionen Ihrer App gängige Anwendungsfälle unterstützen.
* Beispiel: „Für jeden abgeschlossenen und gewonnenen Deal im verknüpften CRM erstellt die Ticket-Synchronisierungsfunktion einen Ticket-Datensatz in HubSpot mit allen zugehörigen Kontakten und Ihren konfigurierten Aufgaben. Dies ermöglicht es Ihrem Onboarding-Team, sofort mit dem neuen Kunden in Kontakt zu treten."
* In ihrem HubSpot-Account anhand Ihrer App gängige Anwendungsfälle unterstützen (falls zutreffend).
* Beispiel: „Um Onboarding-Tickets über HubSpot-Deals zu erstellen, verwenden Sie die benutzerdefinierte Workflow-Aktion „Acme-Ticket erstellen“ in dealbasierten Workflows. Diese Aktionen ermöglichen mehr Anpassungen als die App-Einstellungen für andere CRM-Systeme."
* Die Verknüpfung Ihrer App von ihrem HubSpot-Account entfernen.
* Ihre App von ihrem HubSpot-Account deinstallieren (einschließlich einer Beschreibung, wie sich dies auf die HubSpot-Accounts und Daten von Benutzern auswirkt).
**Tipp:** [Loom](https://www.loom.com/) ist ein kostenloses Tool, das Sie verwenden können, um ein Demovideo aufzunehmen.
### Warum wird der Zertifizierungs-CTA nicht für meine App angezeigt?
Die Schaltfläche „App zertifizieren“ wird nur angezeigt, wenn Ihre App für einen Antrag berechtigt ist. Bitte lesen Sie sich unsere [Zertifizierungsanforderungen](https://developers.hubspot.com/docs) durch oder wenden Sie sich an Ihren [App-Partner-Manager](https://developers.hubspot.com/docs#related-resources), wenn Sie Fragen zu Ihrer Berechtigung haben.
### Wie erfahren Benutzer, dass meine App zertifiziert ist?
Sobald sie zertifiziert ist, wird in Ihrem App Marketplace-Listing ein gut sichtbares „Von HubSpot zertifizierter App-Partner“-Abzeichnen angezeigt.
Wenn ein Kunde den Mauszeiger über das Abzeichen bewegt, sieht er zusätzliche Informationen dazu, wie Apps zertifiziert werden.
Finden Sie Ihren **App-Partner-Manager** und seine E-Mail-Informationen, indem Sie sich bei Ihrem Entwickler-Account anmelden und zu **App Marketplace** > **Listings** navigieren. Bewegen Sie den Mauszeiger über Ihre App und klicken Sie auf **Mehr** > **Listing-Details anzeigen**.
***
#### Verwandte Dokumente
[Voraussetzungen für die App-Zertifizierung](https://developers.hubspot.com/docs)
[App-Listing-Voraussetzungen](https://developers.hubspot.com/docs)
# Voraussetzungen für die App-Zertifizierung
Source: https://developers.hubspot.de/docs/apps/developer-platform/list-apps/apply-for-certification/certification-requirements
In diesem Artikel erfahren Sie, was App-Partner für ein Listing ihrer App-Zertifizierung im App Marketplace von HubSpot benötigen.
'App Marketplace | Voraussetzungen für die App-Zertifizierung';
'In diesem Artikel erfahren Sie, was App-Partner für ein Listing ihrer App-Zertifizierung im App Marketplace von HubSpot benötigen.';
Die App-Zertifizierung beinhaltet, dass das HubSpot Ecosystem Quality-Team überprüft und bestätigt, dass Ihre [gelistete App](https://developers.hubspot.com/docs) die folgenden Anforderungen an Sicherheit, Datenschutz, Zuverlässigkeit, Leistung, Benutzerfreundlichkeit, Barrierefreiheit und Wert erfüllt.
Zertifizierte Apps zeichnen sich im [App Marketplace](https://ecosystem.hubspot.com/marketplace/apps) durch einen guten Ruf für Qualität und Vertrauenswürdigkeit aus. Außerdem erhält Ihre App [besondere Vorteile](#certification-benefits) und konstruktives Feedback vom HubSpot Ecosystem Quality-Team während der Überprüfung der App-Zertifizierung.
* Diese Anforderungen können sich ändern, da HubSpot seinen App Marketplace und sein Ökosystem kontinuierlich verbessert. HubSpot kann eine App-Zertifizierungsanfrage nach eigenem Ermessen ablehnen, wenn sie nicht den festgelegten Standards entspricht.
* HubSpot überprüft Ihre App nicht, es sei denn, Sie reichen ein Demo-Video ein, wie beim [Beantragen einer App-Zertifizierung](https://developers.hubspot.com/docs) angewiesen.
* Sie können jeweils nur eine App zur Zertifizierung einreichen. Wenn Sie mehr als eine App gleichzeitig zur Zertifizierung einreichen, werden diese basierend auf der Reihenfolge der Einreichung abgelehnt.
* App-Zertifizierungen sind fortlaufend zwei Jahre gültig und müssen dann erneuert werden. Wenn Sie dies unterlassen, wird Ihnen der zertifizierte Status entzogen.
* Sie erhalten drei Monate vor dem für die Zertifizierungsverlängerung Ihrer App relevanten Datum eine Benachrichtigung.
* Wenn Ihre App die Zertifizierungsstandards nicht mehr erfüllt, arbeitet das HubSpot Ecosystem Quality-Team bis zu sechzig Tage lang mit Ihnen zusammen, um alle Probleme zu lösen.
## Überblick
Nachfolgend finden Sie eine Übersicht über die Anforderungen an die App-Zertifizierung. Weitere Informationen hierzu finden Sie im [Abschnitt mit den Überprüfungskriterien](#review-criteria).
Ihre App muss Folgendes erfüllen:
* Sie muss mit einer einzigen HubSpot-App-ID verknüpft sein.
* Ihre gelistete öffentliche App muss eindeutig sein. Wenn bereits eine App von Ihnen gelistet ist und Sie diese ersetzen möchten, sollten Sie die bestehende App aktualisieren, anstatt eine neue zu listen.
* Erstellen Sie nicht mehrere Apps, die für denselben Anwendungsfall eine Lösung bieten. Apps mit ähnlicher Funktionalität und Verwendung der gleichen APIs sollten in einer einzigen App konsolidiert werden.
* Sie muss [OAuth-Authentifizierung](/docs/apps/legacy-apps/authentication/working-with-oauth) sowie alle erforderlichen Bereiche verwenden.
* Sie muss mit einer [verifizierten Domain](/docs/apps/legacy-apps/public-apps/overview) verknüpft sein.
* Öffentliche Inhaltselemente, die mit Ihrer App verknüpft sind, müssen die bewährten Sicherheitsmethoden einhalten.
Ihre App keine keine [klassischen CRM-Karten](/docs/api-reference/crm-public-app-crm-cards-v3/guide) mehr verwenden, da diese ab dem 16. Juni 2025 nicht mehr unterstützt werden. Erfahren Sie im [HubSpot-Entwickler-Änderungsprotokoll](https://community.hubspot.com/t5/Developer-Announcements/Deprecating-Support-for-Classic-Legacy-CRM-Cards/m-p/1153039#M1048) mehr darüber.
Sehen Sie sich die [ausführliche Liste der Sicherheits- und Datenschutzanforderungen](#security-privacy) an.
App-Aktivitäten werden durch OAuth-authentifizierte Anfragen an HubSpot-[APIs](/docs/api-reference/overview) und [signierte Anfragen](/docs/apps/legacy-apps/authentication/validating-requests) von HubSpot-[Webhook-Abonnements](/docs/api-reference/webhooks-webhooks-v3/guide) und Erweiterungen (z. B. Anfragen zum Abrufen der Daten von [CRM-Karten](/docs/api-reference/crm-public-app-crm-cards-v3/guide)) definiert.
Aktive Installationen sind die Anzahl der einzigartigen HubSpot-Produktions-Accounts, die nicht mit Ihrer Organisation verbunden sind und die erfolgreiche\*\* App-Aktivitäten \*\*in den letzten 30 Tagen zeigen.
## Vorteile einer Zertifizierung
Zusätzlich zu den [Vorteilen eines Listings Ihrer App](https://www.hubspot.com/partners/app) profitieren zertifizierte Apps von Folgendem:
* Ein „Von HubSpot zertifizierte App“-Abzeichen, das in ihrem App Marketplace-Listing präsentiert wird
* Bessere Sichtbarkeit im HubSpot App Marketplace
* Aufnahme in den „Von HubSpot zertifizierte App“-Suchfilter.
* Berechtigung für die Aufnahme in kuratierte App Marketplace-Sammlungen.
* Zugriff auf das „Von HubSpot zertifizierte App“-Abzeichen und Social-Media-Bilder, um die Zertifizierungsleistung der App zu teilen.
* Günstige Berücksichtigung in den Partnerschafts- und Verstärkungsinitiativen von HubSpot.
## Überprüfungskriterien
Um eine Zertifizierung zu erhalten, muss Ihre App Qualität nachweisen, indem sie quantitative Kennzahlen und qualitative Deskriptoren für Sicherheit, Datenschutz, Zuverlässigkeit, Leistung, Benutzerfreundlichkeit, Barrierefreiheit und Wert erfüllt. Die folgenden Anforderungen sind nach diesen Kategorien gegliedert und enthalten Beispiele für konstruktives Feedback, das Sie erhalten können.
### Sicherheit und Datenschutz
Ihre App muss Folgendes erfüllen:
* Sie muss mit einer einzigen HubSpot-App-ID verknüpft sein. Ihre App muss API-Anfragen mit der öffentlichen HubSpot App-ID (und [OAuth-Client-ID](/docs/apps/legacy-apps/authentication/working-with-oauth)), die mit Ihrem App-Listing verknüpft ist, autorisieren.
* Ein Listing darf nicht zu einer anderen öffentlichen oder privaten App weiterleiten.
* Ihre gelistete öffentliche App darf keine andere öffentliche oder private App benötigen, um zu funktionieren.
* Sie muss durch [den OAuth-Prozess mit Autorisierungscode](/docs/apps/legacy-apps/authentication/working-with-oauth) authentifiziert sein.
* Benutzer aufzufordern, OAuth-Codes oder -Token zu kopieren und einzufügen, ist untersagt. Benutzer sollten nur aufgefordert werden, Zugriff zu gewähren.
* Apps müssen Zugriffstoken ohne Beteiligung des Benutzers anfordern, verwalten und aktualisieren.
* Sie verwendet alle [Bereiche](/docs/apps/legacy-apps/authentication/working-with-oauth), die sie für die Installation anfordert (d. h. sowohl im erforderlichen `scope`-Parameter als auch im `optional_scope`-Parameter).
* [Erweiterte Bereichseinstellungen](/docs/apps/legacy-apps/public-apps/overview#configure-scopes) sind aktiviert und alle erforderlichen, bedingt erforderlichen und optionalen Bereiche, die die App für die Installation anfordert, sind ausgewählt.
* Irrelevante Bereiche müssen entfernt werden.
* Wenn bestimmte Bereiche nur für eine Teilmenge der Benutzerbasis Ihrer App gelten, sollten sie als bedingt erforderliche oder optionale Bereiche enthalten sein.
* Sie muss mit einer [verifizierten Domain](/docs/apps/legacy-apps/public-apps/overview) verknüpft sein.
* Ihre öffentlichen Inhaltselemente werden auf bewährte Sicherheitspraktiken im Zusammenhang mit veralteter Software und verschiedenen Schwachstellen und Erkenntnissen im Webserver überprüft.
#### Feedback-Beispiel
Ihre App erfordert derzeit vier Bereiche: `contacts`, `timeline`, `forms` und `content`. Unseren Protokollen zufolge wurden jedoch nur in den letzten 30 Tagen Anfragen an die CRM-Kontakte- und Chronik-Event-APIs gestellt. Da die Bereiche `forms` und `content` für keine dieser Funktionen erforderlich sind, entfernen Sie sie bitte nach Bedarf aus den Einstellungen der App, um die Berechtigungen zu minimieren, die Benutzer akzeptieren müssen.
### Zuverlässigkeit und Leistung
Ihre App muss Folgendes erfüllen:
* Sie muss in folgender Hinsicht einwandfrei sein:
* Sie muss allen geltenden Bedingungen entsprechen.
* Sie wurde in den letzten sechs Monaten nicht zur Zertifizierung abgelehnt.
* Sie hat keine ungelösten Support-Eskalationen mit gemeinsamen Kunden.
* Sie verwendet stabile, öffentliche Versionen der APIs und Erweiterungen von HubSpot.
* Die Verwendung der neuesten öffentlichen Versionen wird empfohlen.
* Nicht dokumentierte, Beta- und Entwicklervorschau-APIs gelten als instabil und dürfen nicht in Ihrer Produktions-App verwendet werden.
* Wenn Ihre App APIs verwendet, die nicht stabil oder öffentlich sind, geben Sie dies bitte während der Zertifizierungsprüfung bekannt oder wenden Sie sich an das App-Partner-Manager-Team, um Ihre Optionen zu besprechen.
* Sie halten ein angemessenes Volumen an [Aktivitäten](#activity) von HubSpot-Kunden-Accounts aufrecht, die nicht mit Ihrem Unternehmen verbunden sind.
* Ihre App muss die [Richtlinien zur API-Nutzung](https://developers.hubspot.com/docs) sowie bewährte Methoden einhalten, einschließlich:
* Einhaltung von Ratenlimits (d. h. 100 eingehende Anfragen alle 10 Sekunden pro verknüpftem HubSpot-Account).
* Aktualisieren von OAuth-Zugriffstoken vor deren Ablauf.
* Zwischenspeichern von Daten für wiederholte Anrufe, sofern möglich.
* Verwendung von Batch-APIs und Webhook-Abonnements, um das Anforderungsvolumen zu reduzieren, wenn möglich.
* Verwenden von APIs zum Erstellen von Eigenschaften, Workflows und benutzerdefinierten Workflow-Aktionen, anstatt Benutzeraktionen zu verlangen.
* Ihre App muss bei allen [Aktivitäten](#activity) durchgängig eine durchschnittliche Erfolgsquote von über **95 %** aufweisen
* Anfragen, die zu Fehlerantworten führen, werden auf diese Erfolgsquote angerechnet.
* Einige unvermeidbare oder erwartete Fehler können ausgeschlossen werden, wenn Erfolgsquoten über alle [Aktivitäten](https://developers.hubspot.com/docs#activity) hinweg berechnet werden.
* Ihre App verfügt möglicherweise über eine Browsererweiterung, um Kunden zusätzliche Funktionen und einen Mehrwert zu bieten:
* Browsererweiterungen dürfen nicht speziell für die HubSpot-Benutzeroberfläche oder als Workaround für die HubSpot-APIs erstellt werden.
* Browsererweiterungen dürfen keine Funktionen oder Komponenten in die Benutzeroberfläche von HubSpot einfügen.
* Offiziell unterstützte UI-Erweiterungen (z. B. [CRM-Karten](/docs/api-reference/crm-public-app-crm-cards-v3/guide) und [benutzerdefinierte Workflow-Aktionen](/docs/api-reference/automation-actions-v4-v4/guide)) bieten Kunden ein konsistenteres Nutzererlebnis
* Ihre App wird einer zusätzlichen Sicherheitsbewertung unterzogen, wenn sie eine Browsererweiterung enthält.
#### Feedback-Beispiele
Die API-Erfolgsquote Ihrer App fällt unter die für eine Zertifizierung erforderliche Schwelle von 95 %. Unsere Protokolle zeigen eine Erfolgsquote von 83 % in den letzten 30 Tagen. Bei der überwiegenden Mehrheit dieser Anfragen wurden `429`-Fehler bezüglich des Burst-Ratenlimits zurückgegeben. Um diese Fehlerrate zu reduzieren, empfehlen wir, Anfragen auf 100 Anfragen pro 10 Sekunden für jeden Account zu drosseln.
Beim Versuch, Kontakte mit einer E-Mail-Adresse mit dem Wert `undefined` zu aktualisieren, die nicht mit diesem Endpunkt funktioniert, generiert Ihre App Fehler. Ihre App sollte diese Anfragen überspringen, wenn ein Datensatz keine E-Mail-Adresse enthält.
Ihre App stellt Anfragen mit abgelaufenen OAuth-Token und empfängt `401`-Fehler, bevor das Token aktualisiert wird. Um diese Fehler zu minimieren, empfehlen wir, dass Ihre App nachverfolgt, wann Token ablaufen, oder Token aktualisiert, bevor Anfragen gestellt werden. Wenn Sie bei sämtlichen Anfragen einen `401`-Fehler erhalten und das Zugriffstoken nicht aktualisieren können, gehen Sie von einer Deinstallation der App aus und stellen Sie so lange keine Anfragen mehr für den Account, bis ein Benutzer Ihre App erneut authentifiziert.
Beim Versuch, die Kontaktlisten-API mit kostenlosen Marketing Hub-Accounts zu verwenden, die keinen Zugriff auf Kontaktlisten haben, generiert Ihre App `403`-Fehler. Wenn Ihre App wiederholt `403`-Fehler verursacht, weil sie die richtigen Bereiche verpasst, sollten mit ihr keine Aufrufe zum Abrufen von Listen von diesem Account mehr vorgenommen werden.
Die Webhook-Abonnements Ihrer App verursachen häufig `500`- und `503`-Fehler. Stellen Sie sicher, dass Ihr Server das Anfragevolumen (derzeit auf 150 pro Sekunde begrenzt) bewältigen kann, damit Kundendaten nicht verloren gehen.
Ihre App übernimmt die Daten von zu vielen Kontakten gleichzeitig, anstatt sie sich in Batches zu holen. Wir empfehlen stattdessen die Verwendung von [Batch-Endpunkten](/docs/api-reference/crm-contacts-v3/guide).
### Benutzerfreundlichkeit und Barrierefreiheit | App
* Ihre App muss mindestens sechs Monate im HubSpot [App Marketplace](https://ecosystem.hubspot.com/marketplace/apps) [gelistet](https://developers.hubspot.com/docs) sein.
* Ihre App muss die [bewährten Methoden in Bezug auf Benutzerfreundlichkeit](https://www.nngroup.com/articles/ten-usability-heuristics/) befolgen.
* Die Installation und die Verwendung sollten nicht zu Irritationen und Frustration der gemeinsamen Kunden führen oder sich anderweitig negativ auf das grundlegende HubSpot-Nutzererlebnis auswirken.
#### Feedback-Beispiel
Ihre App erfordert derzeit, dass Benutzer Workflow-Webhook-Aktionen zum Senden von Textnachrichten manuell konfigurieren. Erstellen Sie benutzerdefinierte Workflow-Aktionen über die App, die flexibel genug sind, um viele Anwendungsfälle abzudecken.
### Benutzerfreundlichkeit und Barrierefreiheit | App Marketplace-Listing
Ihr App Marketplace-Listing muss Folgendes erfüllen:
* Es muss die aktuelle Funktionalität Ihrer App genau beschreiben.
* Ändert sich die Funktionalität basierend auf der Produkt- oder Abonnementebene eines Benutzers, entweder für HubSpot oder Ihre Lösung, müssen die Unterschiede eindeutig benannt werden.
* Sie enthält klare und genaue Preisinformationen, einschließlich eines Links zu Ihrer aktuellen Preisseite.
* Wenn mehrere Pakete Ihre App unterstützen, muss das App Marketplace-Listing mindestens die kostengünstigste Option enthalten.
* Verwenden Sie Platzhalterdaten oder blenden Sie Daten aus, um keine personenbezogenen Daten (PII) anzuzeigen.
* Fügen Sie Folgendes hinzu:
* Informative und aktuelle visuelle Hilfsmittel, die Screenshots oder ein Video umfassen können. Auf der Seite [How to Make a Great App Demo Video](https://www.hubspot.com/partners/apps/resources/how-to-make-a-great-app-demo-video) (So machen Sie ein großartiges App-Demo-Video) finden Sie Best Practices und Beispiele zum Erstellen eines Demo-Videos.
* Eine aktuelle „URL der Setup-Dokumentation“, die direkt zu einer vollständigen Setup-Anleitung für Ihre App führt. [Hier können Sie die vollständigen Anforderungen für die Setup-Dokumentation](https://developers.hubspot.com/docs) einsehen. Dieser Leitfaden enthält auch eine Beispielvorlage, die alle Anforderungen erfüllt.
* Fügen Sie Folgendes nicht hinzu:
* Daten oder Statistiken, es sei denn, es wird eine Fallstudie als Ressource angegeben.
#### Feedback-Beispiele
Ihr App Marketplace-Listing enthält nur wenige spezifische Details über die Funktionalität Ihrer App. Bitte verbessern Sie das Listing mit Screenshots, die die App-Funktionalität zeigen, und fügen Sie ausführlichere Beschreibungen gängiger Anwendungsfälle und des In-App-Verhaltens hinzu.
HubSpot-Kunden sind es gewohnt, dass sie unserer Produkte und Services vor einem Kauf testen können. Aus diesem Grund empfehlen wir, dass Ihre App eine kostenlosen Testlauf oder eine Freemium-Anmeldung anbietet. Einige App-Partner ohne Preisseiten oder kostenlose Testläufe haben Übersichten über die verschiedenen HubSpot-Produktversionen erstellt und bieten unseren gemeinsamen Kunden so transparente Preise, berührungslose Registrierungen und andere Vorteile.
### Benutzerfreundlichkeit und Barrierefreiheit | Unterstützende Dokumentation
Die begleitende Dokumentation für Ihre App muss Folgendes erfüllen:
* Sie muss auf einer öffentlich zugänglichen Live-URL (d. h., es gibt keine Paywall und es ist keine Anmeldung erforderlich) gehostet werden und die aktuellen Standards in Bezug auf Barrierefreiheit, Datenschutz und DSGVO einhalten.
* Sie muss stets auf dem Laufenden sein und sich auf die aktuelle Version Ihrer App beziehen.
* Sie muss Folgendes eindeutig beschreiben:
* Was die App leistet.
* Wie Ihre App installiert wird und ein HubSpot-Account verknüpft wird, mit Screenshots von jedem Schritt, einschließlich des Bildschirms für Bereichsgenehmigungen.
* Wie Ihre App nach der Installation konfiguriert wird.
* Wie Ihre App verwendet wird, einschließlich manueller und automatisierter Interaktionen.
* Wie HubSpots Verknüpfung von Ihrer App getrennt wird.
* Wie Ihre App von einem HubSpot-Account deinstalliert wird.
* Wie sich das Entfernen und Deinstallieren auf die HubSpot-Accounts und Daten von Benutzern auswirkt.
* Sie umfasst Bilder. Alle Bilder, die Screenshots der Benutzeroberfläche von HubSpot enthalten, sollten aktuell sein und in Einklang mit unserem [Design-System](https://canvas.hubspot.com/) stehen.
* Videos werden ebenfalls empfohlen, sind jedoch nicht zwingend. Videos sollten regelmäßig aktualisiert werden und die aktuelle Version Ihrer App widerspiegeln.
#### Feedback-Beispiel
* Die Anleitung für die Einrichtung Ihrer App enthält einen Screenshot, der die Bereiche zeigt, die Ihre App für die Installation erfordert. - Dieser Screenshot zeigt nicht den `business-intelligence`-Bereich, der in den Einstellungen Ihrer App ausgewählt ist. - Bitte aktualisieren Sie den Screenshot so, dass er die aktuell erforderlichen Bereiche wiedergibt.
### Wert
* Die aktive Anzahl der Installationen, die Kundenbindung und die Bewertungen im HubSpot App Marketplace werden als Indikatoren für den Wert bewertet, den Ihre App für gemeinsame Kunden darstellt.
* Ihre App muss über mindestens 60 [aktive](#activity), einmalige Installationen verfügen, um sich für die Zertifizierung zu qualifizieren und diese zu behalten. Die Accounts mit Installationen müssen nicht mit Ihrem Unternehmen verbunden sein. Test-Accounts werden ebenfalls ausgeschlossen.
* Wenn Ihre App über weniger als 60 aktive Installationen verfügt, werden Sie aufgefordert, die Zertifizierungsanfrage zu stornieren.
* Wenn Ihre App weniger als die drei aktiven Installationen aufweist, die gelistet werden müssen, wird Ihre App möglicherweise vom App Marketplace entfernt.
* Ihr App-Listing muss Antworten von Ihrem Team für jegliche negative Bewertungen Ihrer App haben.
#### Feedback-Beispiel
Ihre App hat in den letzten sechs Monaten nicht mindestens 60 aktive Installationen beibehalten. Daher wird sein zertifizierter Status entfernt. Sie können sich in sechs Monaten erneut für eine Zertifizierung bewerben.
## Der Überprüfungsprozess zur Zertifizierung und Neuzertifizierung einer App
Das HubSpot Ecosystem Quality-Team antwortet innerhalb von **10 Werktagen** auf [Anfragen zur App-Zertifizierung](https://developers.hubspot.com/docs). Der gesamte Überprüfungs- und Feedback-Prozess der App sollte nicht länger als \*\*60 Tage \*\*ab dem Übermitteln des Feedbacks dauern. Überprüfen Sie die [hier aufgeführten Kriterien](https://developers.hubspot.com/docs) für die Bereitstellung von Testanmeldeinformationen für Ihre App.
Wenn Ihre App alle Anforderungen erfüllt, erhält sie den zertifizierten Status und Kunden und Interessenten wird im App Marketplace ein „Von HubSpot zertifizierte App“-Abzeichen angezeigt. Außerdem wird Ihre App angezeigt, wenn Benutzer den „Von HubSpot zertifizierte App“-Filter auswählen.
Sollte Ihre App die Bewertung nicht erfolgreich abschließen können Sie sich nach sechs Monaten erneut bewerben.
Nach einjähriger Zertifizierung kann das HubSpot Ecosystem Quality-Team Ihre App überprüfen, um sicherzustellen, dass sie weiterhin die strengen Zertifizierungsanforderungen erfüllt. Wenn Ihre App diese Standards nicht mehr erfüllt, arbeitet das Team bis zu sechzig Tage lang mit Ihnen zusammen, um alle Probleme zu lösen.
Wenn Ihre App die oben aufgeführten Zertifizierungsanforderungen zu irgendeinem Zeitpunkt nicht mehr erfüllt, leitet HubSpot möglicherweise sofort einen Neuzertifizierungsprozess ein, auch wenn Ihre App noch kein volles Jahr zertifiziert ist. Wie in der [Vereinbarung für das App-Partnerprogramm](https://legal.hubspot.com/app-program-agreement) angegeben, behält sich HubSpot auch das Recht vor, die Veröffentlichung Ihrer App jederzeit rückgängig zu machen.
## Häufig gestellte Fragen
> **Sind mit der App-Zertifizierung Kosten verbunden?**
>
> Nein, wir berechnen Ihnen keine Gebühr für das Listen oder Zertifizieren Ihrer Apps im App Marketplace und keine Gebühr für Installationen, die über den App Marketplace generiert wurden. Es gibt keine Umsatzbeteiligung. Wir möchten Sie dabei unterstützen, dass Ihre App qualitativ hochwertig ist.
> **Erhalte ich eine Benachrichtigung, wenn meine App, nachdem sie abgelehnt wurde, wieder für eine Zertifizierung in Frage kommt?**
>
> Nein. Derzeit haben wir keine Benachrichtigungen aktiviert, um Sie darüber zu informieren, ob und wann Sie sich erneut bewerben können. Wenden Sie sich am besten an Ihren [App-Partner-Manager](#app-partner-manager), um zu erfahren, ob Sie berechtigt sind, bevor Sie sich erneut bewerben.
> **Wie soll ich meine zertifizierte App bei meinen Kunden bewerben?**
>
> Sie können die Vorlage für Pressemitteilungen auf [dieser Seite](https://www.hubspot.com/partners/app/resources) verwenden, um mitzuteilen, dass Ihre App die Zertifizierung erhalten hat.
>
> Wenn Sie einen Beitrag in Social Media veröffentlichen, sollten Sie HubSpot unbedingt taggen – wir freuen uns, gemeinsam mit unseren App-Partnern zu feiern!
> **Ich experimentiere gerne mit den neuesten Beta-APIs. Ist eine App-Zertifizierung das Richtige für mich?**
>
> Wir empfehlen Ihnen, sich an Ihren [App-Partner-Manager](#app-partner-manager) zu wenden, um herauszufinden, ob die App-Zertifizierung für Ihre App geeignet ist.
>
> Wir möchten sicherstellen, dass Ihre App für unsere gemeinsamen Kunden gut entwickelt ist und Probleme minimiert werden. Dies setzt voraus, dass Ihre App die neuesten stabilen APIs verwendet. Wir freuen uns auch über Unternehmer, Early Adopter und Entwickler, die wir beim Experimentieren mit den neuesten Beta-APIs unterstützen möchten.
> **Ich möchte, dass meine App im App Marketplace angemessen präsentiert wird. Ist das der Zweck der App-Zertifizierung?**
>
> Die Vorteile, die sich aus der Präsentation in Sammlungen ergeben und es Kunden ermöglichen, im App Marketplace einfach nach einer zertifizierten App zu filtern, entwickeln sich ständig weiter. Wir möchten mehr darüber erfahren, welche Art der Präsentation Sie am hilfreichsten finden würden (z. B. App Marketplace, HubSpot-Community, von HubSpot kuratierte Newsletter oder andere Formate).
>
> Ihr [App-Partner-Manager](#app-partner-manager) ist der beste Ansprechpartner, um mögliche zukünftige Vorteile zu besprechen und diese Konversation zu beginnen.
> **Warum und wie werden meine öffentlichen Elemente auf Best Practices in Bezug auf die Sicherheit geprüft?**
>
> Da durchschnittliche Kunden mehr als fünf Integrationen verwendet, müssen die Apps im Laufe der Zeit überwacht und Datenschutz-, Sicherheits- und Qualitätsstandards eingehalten werden. Alle öffentlichen Elemente werden anhand von Informationen bewertet, die bereits während eines Listing-Prozesses zur Verfügung gestellt wurden, und die Ergebnisse werden mit einer nicht invasiven Methode analysiert.
> **Meine App wurde vor über einem Jahr zertifiziert. Was muss ich tun, um meinen Zertifizierungsstatus zu behalten, und was bedeutet es, mich erneut zertifizieren zu lassen?**
>
> Das HubSpot Ecosystem Quality-Team wird sich mit Ihnen bezüglich der nächsten Schritten in Verbindung setzen, wenn Ihre App nicht mehr konform ist oder eine jährliche Neuzertifizierung ansteht.
>
> Wir empfehlen Ihnen, die Performance Ihrer App, die Zertifizierungsanforderungen, das [Entwickler-Änderungsprotokoll](https://developers.hubspot.com/changelog) und alle zusätzlichen HubSpot-Ressourcen im Blick zu behalten, die mit Änderungen der verwendeten Technologie zusammenhängen und damit, wie Ihre App auf dem neuesten Stand gehalten werden kann.
Finden Sie Ihren **App-Partner-Manager** und seine E-Mail-Informationen, indem Sie sich bei Ihrem Entwickler-Account anmelden und zu **App Marketplace** > **Listings** navigieren. Bewegen Sie den Mauszeiger über Ihre App und klicken Sie auf **Mehr** > **Listing-Details anzeigen**.
***
## Weiterführende Ressourcen
[So beantragen Sie eine App-Zertifizierung](https://developers.hubspot.com/docs)
[So listen Sie Ihre App](/docs/apps/developer-platform/list-apps/listing-your-app/listing-your-app)
[App-Listing-Voraussetzungen](https://developers.hubspot.com/docs)
[Entwickler-Community-Forum](https://community.hubspot.com/t5/APIs-Integrations/bd-p/integrations)
[App-Partnerteam kontaktieren](https://www.hubspot.com/partners/app/join)
# App-Listing-Voraussetzungen
Source: https://developers.hubspot.de/docs/apps/developer-platform/list-apps/listing-your-app/app-marketplace-listing-requirements
App-Partner können jetzt die Richtlinien und Voraussetzungen von HubSpot für ein Listing Ihrer App im App Marketplace an einem zentralen Ort einsehen.
'App Marketplace | Voraussetzungen für ein Listing im App Marketplace';
'App-Partner können jetzt die Richtlinien und Voraussetzungen von HubSpot für ein Listing Ihrer App im App Marketplace an einem zentralen Ort einsehen. ';
App-Listing-Einreichungen werden manuell vom HubSpot Ecosystem Quality-Team überprüft. Wenn die unten aufgeführten Kriterien nicht erfüllt sind, werden sie abgelehnt. Sobald Ihre App diese Anforderungen erfüllt, können Sie über Ihren App-Entwickler-Account Ihr [App-Listing erstellen](/docs/apps/developer-platform/list-apps/listing-your-app/listing-your-app).
## Mindestanforderungen
* **Zugriff:** Das Listing darf weder zu einer anderen öffentlichen oder privaten App weiterleiten noch eine andere öffentliche oder private App benötigen, um zu funktionieren.
* **Eindeutigkeit:** Ihre gelistete öffentliche App muss eindeutig sein. Wenn bereits eine App von Ihnen gelistet ist und Sie diese ersetzen möchten, sollten Sie die bestehende App aktualisieren, anstatt eine neue zu listen.
* **Anwendungsfall:** Jede App, die Sie erstellen, sollte einen anderen Anwendungsfall behandeln. Apps mit ähnlicher Funktionalität und Verwendung der gleichen APIs sollten in einer einzigen App konsolidiert werden.
* **Einzelne HubSpot-App-ID:** Ihre App muss API-Anfragen mit der öffentlichen HubSpot-App-ID (und [OAuth-Client-ID](/docs/apps/legacy-apps/authentication/working-with-oauth)) autorisieren, die Ihrem App-Listing zugeordnet ist.
* **OAuth:** Ihre App darf nur OAuth als Autorisierungsmethode verwenden. Erfahren Sie mehr über das [Arbeiten mit OAuth](/docs/apps/legacy-apps/authentication/working-with-oauth).
* **Installationen:** Ihre App muss über mindestens drei [aktive, eindeutige Installationen](https://developers.hubspot.com/docs#:~:text=Active%20installs%20are%20the%20number%20of%20unique%20HubSpot%20production%20accounts%2C%20unaffiliated%20with%20your%20organization%2C%20showing%20successful%20app%20activity%20within%20the%20past%2030%20days.) verfügen.
* **Bereiche:** Sie dürfen nur Zugriff auf Bereiche anfordern, die Ihre App benötigt. In Ihrer App müssen [erweiterte Bereichseinstellungen](/docs/apps/legacy-apps/public-apps/overview#configure-scopes) aktiviert sein. Um Fehler zu vermeiden sollten alle erforderlichen, bedingt erforderlichen und optionalen Bereiche ausgewählt werden.
* **Bedingungen:** Sie müssen sich die Bedingungen in der [Vereinbarung für das App-Partnerprogramm von HubSpot](https://legal.hubspot.com/app-program-agreement) durchlesen und ihnen zustimmen.
* **Eingeschränkte Branchen:** Ihre App darf keine Funktionen enthalten oder bereitstellen, die ausschließlich Kunden in einer der [eingeschränkten Branchen](https://legal.hubspot.com/acceptable-use#Restricted-Industries) von HubSpot dienen.
* **Eingeschränkte Funktionalität:** Ihre App kann [keine klassischen CRM-Karten ](/docs/api-reference/crm-public-app-crm-cards-v3/guide) mehr verwenden, da diese ab dem 16. Juni 2025 nicht mehr unterstützt werden. Erfahren Sie im [HubSpot-Entwickler-Änderungsprotokoll](https://community.hubspot.com/t5/Developer-Announcements/Deprecating-Support-for-Classic-Legacy-CRM-Cards/m-p/1153039#M1048) mehr darüber.
### HubSpot-Markenanforderungen
* Ihre App und die zugehörigen Materialien (Dokumentation, Landingpages usw.) müssen die [Branding-Richtlinien von HubSpot erfüllen](https://www.hubspot.com/partners/app/branding-guidelines). Nutzen Sie beispielsweise das „S“ in „HubSpot“ immer dann, wenn Sie auf HubSpot verweisen.
* Ihre App und die zugehörigen Materialien (Dokumentation, Landingpages usw.) dürfen nicht gegen die [Markennutzungsrichtlinien von HubSpot](https://legal.hubspot.com/tm-usage-guidelines) verstoßen. Kombinieren Sie beispielsweise nicht den Namen von HubSpot (einschließlich „Hub“ und „HubSpot“) mit Ihrem App-Namen oder -Logo.
### Listing-Voraussetzungen
Wenn Sie die Mindestanforderungen erfüllt haben, können Sie Ihr App-Listing einreichen. Beim Einreichen Ihres App-Listings müssen Sie alle Informationen vollständig und genau angeben. Diese Felder sind besonders wichtig und bei Nichteinhaltung dieser Anforderungen wird Ihr Listing nur im Entwurfsmodus angezeigt:
* Der Inhalt Ihres Eintrags sollte spezifisch für die Integration sein, im Gegensatz zu allgemeinen Produktinformationen. Er sollte Informationen über den Wert enthalten, den Kunden speziell vom Herunterladen und Verwenden dieser Integration erwarten können. Gute Beispiele sind: [Aircall](https://ecosystem.hubspot.com/marketplace/apps/aircall), [CloudFiles](https://ecosystem.hubspot.com/marketplace/apps/cloudfiles), [Reveal](https://ecosystem.hubspot.com/marketplace/apps/reveal-191193).
* Alle URLs in Ihrem App Marketplace-Listing müssen auf aktive, öffentlich verfügbare und funktionsfähige Seiten verweisen.
* Dies wird mit [den SEO-Tools von HubSpot](https://knowledge.hubspot.com/de/seo/understand-seo-crawling-errors) überprüft, wozu die mit dem Listing verbundenen Seiten gecrawlt werden.
* Um unnötige Verzögerungen im Überprüfungsprozess zu vermeiden, empfehlen wir Ihnen dringend, mit Ihrem Website-Administrator zusammenzuarbeiten und den Benutzer-Agent des HubSpot-Crawlers, *HubSpot Crawler*, als Ausnahme zur Zulassungsliste hinzuzufügen, bevor Sie Ihr App-Listing einreichen.
* Ein Link zur öffentlich zugänglichen Setup-Dokumentation für Ihre HubSpot-Integration.
* Lesen Sie sich die [vollständigen Anforderungen für die Setup-Dokumentation](https://developers.hubspot.com/docs) durch. Dieser Leitfaden enthält auch eine Beispielvorlage, die alle Anforderungen erfüllt.
* Sehen Sie sich als Live-Beispiel die [Setup-Anleitung von OrgChartHub](https://orgcharthub.com/guides/setup) an.
* Fügen Sie eine entsprechende URL der Installationsschaltfläche hinzu, die Kunden zu einer Seite führt, auf der sie Ihre App ganz einfach mit HubSpot verknüpfen können.
* URLs für die Support-Ressourcen Ihrer App (Support-Website, HubSpot Community-Forum, Fallstudie) müssen veröffentlicht, auf dem neuesten Stand und öffentlich zugänglich sein.
* URLs für die Nutzungsbedingungen und Datenschutzrichtlinie Ihrer App müssen veröffentlicht und auf dem neuesten Stand sein.
* Alle URL-Felder unterliegen einer Beschränkung von 250 Zeichen.
* *„Geteilte Daten“*, die Benutzer informieren, wie Daten zwischen Ihrer App und HubSpot ausgetauscht werden, müssen genau und auf dem aktuellen Stand sein und die [Bereiche](https://developers.hubspot.com/docs#:~:text=Webhooks%20API.-,Scopes,-%3A%20You%20must) darstellen, die Ihre App anfragt.
* Alle in Ihren OAuth-Bereichen ausgewählten Objekte sollten in der Tabelle *Geteilte Daten* dokumentiert sein.
* Wenn Ihre App sowohl Lese- als auch Schreibobjektbereiche anfragt, sollte die Datensynchronisierung für diese spezifischen Objekte bidirektional beworben werden.
* Ihre App Marketplace-Listing muss klare und genaue Preisinformationen enthalten.
* Der Preisplan im Listing muss mit den auf Ihrer Website veröffentlichten Preisinformationen übereinstimmen.
* Der Preisplan im Listing darf nur Preispläne enthalten, die die Nutzung Ihrer HubSpot-Integration ermöglichen.
* Wenn ein Preisplan die Integration nicht unterstützt, sollte sie nicht in Ihrem Listing enthalten sein.
* Falls Sie beispielsweise über *Plan A* und *Plan B* für Ihre App verfügen, aber nur *Plan B* mit der Integration verwendet werden kann, dürfen nur die Preisdetails für *Plan B* in der Auflistung enthalten sein.
* Kostenlose Preispläne sollten nur für „Kostenlos, auf unbegrenzte Zeit“- oder Freemium-Preismodelle verwendet werden.
* Sie müssen mindestens eine Support-Kontaktmethode einschließen.
* Befolgen Sie die [hier aufgeführten Richtlinien](https://developers.hubspot.com/docs) für die Bereitstellung von Testanmeldedaten für Ihr App-Listing.
## Überprüfung, Feedback und Genehmigung
Nachdem Sie Ihr Listing eingereicht haben, führt das HubSpot Ecosystem Quality-Team innerhalb von 10 Werktagen eine erste Überprüfung durch. Wenn eine der übermittelten Angaben falsch, irreführend oder unvollständig ist, werden Sie von uns diesbezüglich kontaktiert. Der gesamte Überprüfungs- und Feedback-Prozess der App sollte nicht länger als 60 Tage ab dem Übermitteln des Feedbacks dauern. Wie in den [App Marketplace-Bedingungen](https://legal.hubspot.com/app-program-agreement) angegeben, behält sich HubSpot das Recht vor, jederzeit die Veröffentlichung Ihres App-Listings rückgängig zu machen oder abzulehnen.
**Hinweis:** Sie können jeweils nur eine App zur Zertifizierung einreichen. Alle zusätzlichen Apps, die während der Verarbeitung der ursprünglichen App eingereicht werden, werden automatisch abgelehnt.
## Boni für gelistete App-Partner
* Eigenes HubSpot App Marketplace-Listing
* Exklusiver Zugriff auf Entwickler-Support über einen fest zugeordneten Support-Alias
* Zugang zu Ressourcen der Entwickler-Community, einschließlich Webinare, Foren und mehr
* Kuratierte Marketing-Ressourcen, einschließlich PR-Vorlagen und Startleitfäden
* Rabatt auf INBOUND-Event-Sponsoring, -Stände und -Tickets
* Rabatt auf Software über das „HubSpot for Startups“-Seed-Phasen-Programm
* Monatlicher Newsletter mit Marketing-Updates, Produkt-Releases und mehr
## Weiterführende Ressourcen
* [So listen Sie Ihre App](/docs/apps/developer-platform/list-apps/listing-your-app/listing-your-app)
* [Voraussetzungen für die App-Zertifizierung](https://developers.hubspot.com/docs)
* [API-Referenzdokumentation](/docs/api-reference/overview)
* [So verwenden Sie die HubSpot-APIs](/docs/api-reference/overview)
* [Entwickler-Community-Forum](https://community.hubspot.com/t5/APIs-Integrations/bd-p/integrations)
* [App-Partnerteam kontaktieren](https://www.hubspot.com/partners/app/join)
# Eine Anleitung zur App-Listing-Einrichtung erstellen
Source: https://developers.hubspot.de/docs/apps/developer-platform/list-apps/listing-your-app/create-an-app-listing-setup-guide
# App Marketplace | Listing Ihrer App
Source: https://developers.hubspot.de/docs/apps/developer-platform/list-apps/listing-your-app/listing-your-app
Befolgen Sie diese Schritte, um eine App für ein Listing im HubSpot Marketplace einzureichen.
'Befolgen Sie diese Schritte, um eine App für ein Listing im HubSpot Marketplace einzureichen.';
Nachdem Sie eine App in Ihrem Entwickler-Account erstellt haben, die die [Anforderungen an Listings im App Marketplace](https://developers.hubspot.com/docs) erfüllen, können Sie ein Listing einreichen, um es zum [App Marketplace von HubSpot](https://ecosystem.hubspot.com/marketplace/apps) hinzuzufügen. Das HubSpot Ecosystem Quality-Team überprüft Ihre Einsendung und benachrichtigt Sie per E-Mail, wenn die App genehmigt oder abgelehnt wurde.
Sie müssen ein [Super-Admin](https://knowledge.hubspot.com/de/user-management/hubspot-user-permissions-guide#super-admin) sein, um ein App-Listing zu aktualisieren und einzureichen.
## Ein App-Listing erstellen und einreichen
Bevor Sie ein App-Listing einreichen, sehen Sie sich die [Seite mit den App-Listing-Voraussetzungen](https://developers.hubspot.com/docs) an, um zu verstehen, was Sie für Ihr Listing angeben müssen.
* Gehen Sie in Ihrem [App-Entwickler-Account](https://developers.hubspot.com/docs) zu **Marketplace** > **App-Listings**.
* Klicken Sie oben rechts auf **Listing erstellen**. Wenn diese Schaltfläche ausgegraut ist, wurden bereits Listings für alle Ihre vorhandenen Apps erstellt.
* Wählen Sie die **App** aus, für die Sie ein Listing erstellen möchten, und klicken Sie auf **Weiter**. Apps, die bereits im App Marketplace gelistet sind, werden hier nicht angezeigt.
* Klicken Sie auf das Dropdown-Menü \*\*„Primäre Listing-Sprache für \[App-Name]“\*\*und wählen Sie die **Standardsprache** aus, die Benutzer dann beim Durchsuchen des App Marketplace sehen.
* Klicken Sie auf **Weiter**.
Der App-Listing-Assistent enthält sieben Registerkarten mit Informationen zum Ausfüllen:
* [Listing-Informationen](#listing-info)
* [App-Details](#app-details)
* [Preise](#pricing)
* [App-Funktionen](#app-features)
* [Support-Informationen](#support-info)
* [Test-Informationen](#testing-info)
* [Informationen zur Bewertung](#review-info)
### Listing-Informationen
Auf der Registerkarte *Listing-Informationen*:
* Fügen Sie im Abschnitt *App-Informationen* den **Namen Ihrer öffentlichen App**, den **Unternehmensnamen**, den **Slogan** und die **URL der Installationsschaltfläche** hinzu. Für Accounts, die nach dem 5. März 2025 erstellt wurden, müssen Sie die URL der Installationsschaltfläche aus den in den [App-Einstellungen](guides/apps/public-apps/overview) festgelegten Weiterleitungs-URLs auswählen.
* Laden Sie im Abschnitt *App-Symbol* ein Symbol von 800 x 800 Pixel für Ihre App hoch. Dieses wird im App Marketplace und in den Accounts verknüpfter Benutzer angezeigt. Beachten Sie beim Erstellen Ihres Icons bitte Folgendes:
* **Richtig**: Verwenden Sie eine JPG-, JPEG- oder PNG-Datei und füllen Sie den gesamten Bereich (800 x 800 Pixel) aus – Ihr Bild sollte mindestens zwei Ränder berühren, und ein unverpixeltes Bild in einer höheren Auflösung verwenden.
* **Falsch**: Fügen Sie keinen Text in Ihr Symbol ein, verwenden Sie keine Wortmarke oder lassen Sie keinen zusätzlichen Leerraum um Ihr Symbol herum.
* Im Abschnitt *App kategorisieren* können Sie bis zu zwei **Kategorien** für Ihre App auswählen. Erfahren Sie mehr über die [verschiedenen verfügbaren Kategorien](https://developers.hubspot.com/docs).
* Sie können auch einen **URL-Pfad** prüfen und festlegen sowie beliebige **Suchbegriffe** hinzufügen, mit denen Ihre App im App Marketplace gefunden werden kann.
### App-Details
Auf der Registerkarte *App-Details*:
* Laden Sie im Abschnitt *Demo-Video* ein **Video** hoch, das zeigt, wie Ihre App funktioniert. Auf der Seite [How to Make a Great App Demo Video](https://www.hubspot.com/partners/apps/resources/how-to-make-a-great-app-demo-video) (So machen Sie ein großartiges App-Demo-Video) finden Sie Best Practices und Beispiele zum Erstellen eines Demo-Videos.
* Fügen Sie im Abschnitt *Screenshots* **Bilder** und **ALT-Text** hinzu, die zeigen, wie Ihre App funktioniert. Sie können bis zu acht Bilder hinzufügen.
* Geben Sie im Abschnitt *App-Übersicht* eine **Beschreibung** für Ihre App ein. Ihre Übersicht sollte Informationen darüber enthalten, was Ihre App leistet, die wichtigsten Geschäftsprobleme, die Ihre App löst, und warum Benutzer Ihre App installieren sollten.
* Klicken Sie auf **Geteilte Daten hinzufügen**. Informieren Sie im Abschnitt *Geteilte Daten* die Benutzer über den Datenfluss zwischen HubSpot und Ihrer App.
* Wählen Sie im rechten Bereich aus, welches App-Objekt mit welchem HubSpot-Objekt synchronisiert wird und in welche Richtung die Synchronisierung erfolgen soll. Stellen Sie im Abschnitt *App-Übersicht* eine kurze **Beschreibung** bereit, wie Ihre App Benutzern helfen kann, ihre Ziele umzusetzen.
* Um ein weiteres Objekt zu synchronisieren, klicken Sie auf **Weiteres Objekt hinzufügen**.
* Klicken Sie auf das Dropdown-Menü **HubSpot-Funktionen, mit denen Ihre App arbeitet** und markieren Sie die **Kontrollkästchen** neben den entsprechenden HubSpot-Funktionen. Sie können bis zu zehn HubSpot-Tools und -Funktionen hinzufügen.
* Klicken Sie auf das Dropdown-Menü **Andere Tools, mit denen Ihre Software integriert ist** und markieren Sie die **Kontrollkästchen** neben allen entsprechenden externen Tools oder Apps. Sie können bis zu sechs andere Tools oder Apps auswählen.
* Wählen Sie im Abschnitt **Sprachen, in denen Ihre App verfügbar ist** alle entsprechenden **Sprachen** aus. Zusätzliche App Marketplace-Listings können nur in diesen Sprachen erstellt werden.
### Preise
Auf der Registerkarte *Preise*:
* Klicken Sie auf das Dropdown-Menü **Währung** und markieren Sie die **Kontrollkästchen** neben den Währungen, in denen Sie die App listen möchten. Sie können aus über 100 Währungen auswählen.
* Sie können auch Preispläne für Ihre App einrichten, indem Sie das **Preismodell**, den **Namen des Plans**, den **Slogan**, die **Preisdetails** und die **Liste der Funktionen** hinzufügen.
* Je nach gewähltem Preismodell müssen Sie möglicherweise weitere Informationen hinzufügen, z. B. das Zahlungsintervall, einmalige Gebühren oder monatliche Preise. Bewegen Sie den Mauszeiger über das **Info-Symbol**, um mehr über die einzelnen Preismodelle zu erfahren.
* Um andere Preispläne hinzuzufügen, klicken Sie auf **Weiteren Plan hinzufügen**. Sie können bis zu fünf Preispläne hinzufügen.
* Geben Sie im Abschnitt *Link zu den Preisplänen Ihrer Software* die **URL** ein, unter der Benutzer weitere Informationen zu Ihren Preisplänen finden können.
* Geben Sie im Abschnitt *Agenturpreispläne* die **URL** ein, unter der die Benutzer mehr über die Preise für Partner- oder Beratungsdienste erfahren können.
### App-Funktionen
Auf der Registerkarte *App-Funktionen* können Sie Funktionen hinzufügen und Kunden erklären, wie sie diese nutzen können. Es gibt kein Limit für die Anzahl der App-Funktionen, die für Ihre App erstellt werden können.
* Klicken Sie oben rechts auf **Funktion hinzufügen**.
* Konfigurieren Sie Ihre App-Funktionen auf der Seite *Details der Funktion*:
* **Funktionsname:** Geben Sie den Namen der Funktion ein. Dieser sollte beschreiben, was Ihre Funktion leistet.
* **Bereiche:** Wählen Sie alle Bereichsgruppen aus, die ein Kunde benötigt, um diese Funktion zu nutzen. Bereichsgruppen werden verwendet, um zu bestimmen, ob der HubSpot-Account des Kunden mit den App-Funktionen kompatibel ist.
* **Beschreibung:** Geben Sie eine detaillierte Beschreibung für Ihre Funktion ein und beschreiben Sie, wie sie die Geschäftsprobleme von Kunden lösen kann.
* **Bild:** Fügen Sie ein Bild für Ihre Funktion hinzu. Nachdem Sie Ihr Bild hinzugefügt haben, klicken Sie zum Umschalten auf **Im Marketplace-Listing Ihrer App** oder als **„Funktionen entdecken“-Karte**, um zu konfigurieren, wo Ihre Bilder angezeigt wird.
* Wenn Sie ausgewählt haben, dass die Funktion als „Funktionen entdecken“-Karte angezeigt werden soll:
* Wählen Sie eine Option für Ihre primäre Schaltfläche aus:
* **Link zu einer Funktion:** Wählen Sie aus, zu welcher HubSpot-Funktion die Schaltfläche verlinken soll.
* **Benutzerdefinierte erstellen**: Geben Sie den **Schaltflächentext** und die **URL der Schaltfläche** ein.
* **Keine primäre Schaltfläche:** Auf Ihrer „Funktionen entdecken“-Karte wird keine Schaltfläche angezeigt.
* Wählen Sie eine Anleitung für das Onboarding Ihrer Kunden aus:
* **Komplett neue Anleitung erstellen:** Geben Sie einen **Titel**, eine **Beschreibung** und ein **Bild oder Video** ein.
* **Externer Link zur Anleitung:** Geben Sie eine **Leitfaden-URL** ein.
* **Nur-Video-Anleitung:** Laden Sie ein **Video** hoch.
* Um eine weitere Anleitung hinzuzufügen, klicken Sie auf **Weiteren Abschnitt hinzufügen**.
### Support-Informationen
Auf der Registerkarte *Support-Informationen*:
* Fügen Sie im Abschnitt *Kontaktinformationen* eine Support-Kontaktmethode für Benutzer hinzu, die bei der Verwendung Ihrer App Fragen haben. Es ist erforderlich, eine **Support-E-Mail-Adresse** und die **Sprachen** hinzuzufügen, in denen Kundenservice angeboten wird. Sie können auch Links zu Ihrer Unternehmen Website, Ihrem Livechat, Ihrer Facebook-Seite und einer Telefonnummer beifügen.
* Geben Sie im Abschnitt *Support-Ressourcen* **Links** zur Setup-Dokumentation Ihrer App an.
* Fügen Sie im Abschnitt *Nutzungsbedingungen und Datenschutzrichtlinie* **Links** zu Ihrer Datenschutzdokumentation hinzu.
### Test-Informationen
Auf der Registerkarte *Test-Informationen*:
* Geben Sie im Feld *Anweisungen zur App-Überprüfung* Schritte ein, mit denen die Entwickler von HubSpot die App im Rahmen des Überprüfungsprozesses testen können. Erfahren Sie, wie Sie [Testdetails und Anmeldeinformationen für Ihre App bereitstellen](https://developers.hubspot.com/docs).
* Fügen Sie im Abschnitt *Kontakte für das App-Partnerprogramm* Details für Ihre Teammitglieder hinzu, die Listing-, Technik- und Programminformationen zu Ihrem App-Listing erhalten sollen.
* Sie müssen mindestens einen *Hauptansprechpartner für das App-Partnerprogramm* und einen *Entwickler* als Kontakt angeben. Dazu sind die **Rolle** der Person, deren **Vorname**, **Nachnamen** und **E-Mail-Adresse** sowie das **Land**, in dem diese ansässig ist, zu nennen.
* Um einen weiteren Ansprechpartner hinzuzufügen, klicken Sie auf **Weiteren Ansprechpartner hinzufügen**.
### Informationen zur Bewertung
Auf der Registerkarte *Informationen überprüfen*:
Im Abschnitt *App-Rezensionen* wird eine Liste aller Listing-Fehler angezeigt:
* Um Details für alle Listing-Fehler zu überprüfen, klicken Sie oben auf **Alle ausklappen**.
* Um die Details für alle Listing-Fehler auszublenden, klicken Sie oben auf **Alle einklappen**.
* Um einen Fehler zu beheben, klicken Sie auf den **Fehlernamen**. Dadurch werden Sie zur entsprechenden Registerkarte und zum entsprechenden Abschnitt weitergeleitet, wo Sie den Fehler beheben können.
* Ist die Schaltfläche *Validieren und senden* ausgegraut, müssen Sie sicherstellen, dass Sie alle erforderlichen Eigenschaftsfelder ausgefüllt haben und über *Super-Admin*-Berechtigungen verfügen.
* Wenn Sie ein Pflichtfeld übersehen haben, wird in der Registerkartenüberschrift eine Zahl angezeigt, die die Anzahl der übersehenen Felder angibt. Klicken Sie auf jede **Registerkarte**, um die fehlenden Informationen einzugeben. Kehren Sie dann zur Registerkarte *Informationen überprüfen* zurück.
* Klicken Sie unten auf **Validierung durchführen**.
## Ein lokalisiertes Listing für ein bestehendes App-Listing erstellen und aktualisieren
Sie müssen eine primäre Sprache für Ihr bestehendes App-Listing festlegen und Ihr primäres Listing muss bereits im HubSpot Marketplace veröffentlicht sein, um Listings in anderen Sprachen erstellen zu können.
* Klicken Sie in Ihrem App-Entwickler-Account von HubSpot auf **Marketplace** > **App-Listings**.
* Wenn Sie bereits eine App im Marketplace gelistet haben, sehen Sie ein gelbes Banner über der gelisteten App, in dem Sie aufgefordert werden, die Sprache Ihres primären Listings festzulegen. Klicken Sie auf **Jetzt festlegen**. Sie müssen die primäre Listing-Sprache für das App-Listing festlegen, bevor Sie Listings in neuen Sprachen erstellen können.
* Klicken Sie im Dialogfeld auf das Dropdown-Menü **Sprachen auswählen, in denen Ihre App verfügbar ist** und wählen Sie die **Sprachen** aus, in denen Ihre App-Software verfügbar ist.
* Klicken Sie auf das Dropdown-Menü \*\*„Primäre Listing-Sprache für \[App-Name]“\*\*und wählen Sie die **Standardsprache** aus, die Benutzer dann beim Durchsuchen des App Marketplace sehen.
* Klicken Sie auf **Speichern**.
Sobald Sie eine primäre Sprache festgelegt haben, können Sie ein neues, lokalisiertes Listing hinzufügen:
* Bewegen Sie den Mauszeiger über das **App-Listing** und klicken Sie auf **Mehr** > **Listing in einer anderen Sprache erstellen**.
* Wenn Sie Ihr Listing automatisch in andere Sprachen übersetzen lassen möchten, klicken Sie auf den Schalter **Automatisch übersetzen**, um ihn zu aktivieren.
* Falls Sie diese Option auswählen, werden alle übersetzten Listings automatisch und sofort auf dem Marketplace veröffentlicht. Die automatisch übersetzten Listings werden nicht vom Admin überprüft.
* Klicken Sie auf das Dropdown-Menü **Sprache für dieses Listing** und wählen Sie die **Sprache** aus, in der Sie das Listing erstellen möchten.
* Wenn ein Benutzer die Sprache in seinem Account eingestellt hat, wird ihm das Listing automatisch in derselben Sprache angezeigt. Wenn Sie beispielsweise ein Listing auf Spanisch erstellt haben und ein Benutzer Spanisch als [Standardsprache für seinen Account](https://knowledge.hubspot.com/de/account-management/change-your-language-and-region-settings) festgelegt hat, wird das Listing dem Benutzer auf Spanisch angezeigt.
* Wenn die Option *Automatisch übersetzen* aktiviert wurde, werden die ausgewählten Sprachen automatisch übersetzt und als neue Listings veröffentlicht.
* Klicken Sie auf **Erstellen**. Falls Sie ein Listing manuell erstellen, befolgen Sie bitte die Schritten, um ein Listing in der ausgewählten Sprache zu erstellen und einzureichen.
## Ein Live-App-Listing bearbeiten
Sobald ein App-Listing im App Marketplace veröffentlicht ist, können Sie das Listing bearbeiten:
* Gehen Sie in Ihrem Entwickler-Account zu **Marketplace** > **App-Listings**.
* Bewegen Sie den Mauszeiger über das Listing, das Sie bearbeiten möchten, und klicken Sie auf **Mehr**. Wählen Sie dann **Bearbeiten** aus.
* Nachdem Sie Ihre Änderungen vorgenommen haben, klicken Sie oben rechts auf **Validieren und senden**.
* Lesen Sie sich im Dialogfeld die Nutzungsbedingungen durch und aktivieren Sie dann die **Kontrollkästchen**.
* Um alle Änderungen automatisch für lokalisierte Listings zu übersetzen, aktivieren Sie das Kontrollkästchen **Alle meine unterstützten lokalisierbaren Listings automatisch übersetzen**. Bewegen Sie den Mauszeiger über *meine unterstützten lokalisierbaren Listings*, um zu sehen, welche Listings automatisch übersetzt werden.
* Klicken Sie auf **Zustimmen und senden**.
## Die Veröffentlichung eines Live-App-Listing rückgängig machen
* Gehen Sie in Ihrem Entwickler-Account zu **Marketplace** > **App-Listings**.
* Bewegen Sie den Mauszeiger über das Listing, das Sie veröffentlichen möchten, und klicken Sie auf **Mehr**. Wählen Sie dann **Veröffentlichung von Live-Listing aufheben**.
* Geben Sie im Dialogfeld den Grund für das Rückgängigmachen der Veröffentlichung der App ein und klicken Sie auf **Anfrage zum Rückgängigmachen der Veröffentlichung übermitteln**.
Anfrage zum Rückgängigmachen einer Veröffentlichung werden vom HubSpot Marketplace-Team innerhalb von 10 Werktagen nach Einreichung bearbeitet.
# App Marketplace | App-Kategorien verstehen
Source: https://developers.hubspot.de/docs/apps/developer-platform/list-apps/listing-your-app/understand-app-categories
# Vereinbaren von Demos über die App-Listing-Seite einrichten
Source: https://developers.hubspot.de/docs/apps/developer-platform/list-apps/set-up-demo-scheduling-from-the-app-listing-page
Erfahren Sie, wie Kontakte über Ihre App-Listing-Seite ein Formular übermitteln oder ein Meeting vereinbaren können.
Beim Einrichten Ihrer App-Listing-Seite können Sie eine Terminplanungsseite und/oder ein Formular hinzufügen, damit potenzielle Kundinnen und Kunden eine Demo mit Ihnen vereinbaren können.
## Eine Terminplanungsseite und/oder ein Formular zu einem App-Listing hinzufügen
* Gehen Sie in Ihrem Entwickler-Account zu **Marketplace** > **App-Listings**.
* Bewegen Sie den Mauszeiger über ein Listing und klicken Sie auf **Mehr**, dann wählen Sie **Bearbeiten** aus. Erfahren Sie mehr über [das Erstellen eines App-Listings](/docs/apps/developer-platform/list-apps/listing-your-app).
* Fügen Sie auf der Registerkarte *Listing-Informationen* Optionen für die Planung einer Demo hinzu:
* Um einen Meetinglink hinzuzufügen, klicken Sie auf das Dropdown-Menü **Meetings-URL hinzufügen** und wählen dann eine **Terminplanungsseite** aus. Zum Erstellen einer neuen Terminplanungsseite klicken Sie auf **Meetinglink erstellen**. Erfahren Sie mehr über das Arbeiten mit [Terminplanungsseiten](https://knowledge.hubspot.com/meetings-tool/create-and-edit-scheduling-pages).
* Um ein Formular hinzuzufügen, klicken Sie auf das Dropdown-Menü **Kontaktformular hinzufügen** und wählen dann ein **Formular** aus. Zum Erstellen eines neuen Formulars klicken Sie auf **Kontaktformular erstellen**. Erfahren Sie mehr über das [Arbeiten mit Kontaktformularen](https://knowledge.hubspot.com/forms/create-and-edit-forms).
* Klicken Sie oben rechts auf **Validieren & einreichen**.
Sobald Ihre Änderungen genehmigt wurden, sieht Ihre Kundschaft oben rechts in Ihrem App-Listing eine Option, über die eine Demo vereinbart oder eine Kontaktaufnahme beantragt werden kann. Wenn Sie eine Terminplanungsseite und ein Kontaktformular hinzugefügt haben, sind beide Optionen im Dropdown-Menü *Demo vereinbaren* verfügbar.
# App Marketplace | Anmeldeinformationen für Tests für Ihre App bereitstellen
Source: https://developers.hubspot.de/docs/apps/developer-platform/list-apps/testing-credentials
# Über den Marketplace erstellte Kontakte anzeigen
Source: https://developers.hubspot.de/docs/apps/developer-platform/list-apps/view-contacts-created-from-the-marketplace
Erfahren Sie, wie Sie auf eine Liste der Kontakte zugreifen, die mit IhrenApp-Listings auf HubSpot Marketplace interagiert haben.
Wenn Kontakte mit Ihrem HubSpot Marketplace-App-Listings interagieren, werden sie zu einer bestimmten Kontaktliste im zugehörigen Entwickler-Account hinzugefügt. Sie können dann mit ihnen in Kontakt treten, um zu sehen, ob die App ihre Anforderungen erfüllen.
## Bevor Sie loslegen
Bevor Sie mit der Arbeit mit dieser Funktion beginnen, sollten Sie sich im Voraus ein genaues Bild davon machen, welche Schritte Sie zuvor unternehmen müssen und welche Beschränkungen es gibt.
### Anforderungen verstehen
* Der mit der App verknüpfte Entwickler-Account muss die kostenlosen Tools von HubSpot verwenden.
* Kontakte werden in der Liste angezeigt, wenn sie eine der folgenden Aktionen in Ihrem App-Listing ausführen:
* auf ein Video oder einen Screenshot klicken
* auf „Setup-Anleitung anzeigen“ klicken
* auf „Unternehmenswebsite“ klicken
### Näheres zu Einschränkungen und Wissenswertem
* Nur Kontakte, die bei HubSpot angemeldet sind, wenn sie das App-Listing aufrufen, werden der Liste hinzugefügt.
## Auf Kontakte des App-Listings zugreifen
* Gehen Sie in dem Entwickler-Account von HubSpot, der Ihrer App zugeordnet ist, zu **CRM** > **Listen.**
* Klicken Sie auf die **Liste** mit dem Namen „App Marketplace – \[App-Name].“ Wenn Sie mehrere Apps haben, besitzt jede App eine eigene Liste.
* Sie können die folgenden Informationen für die Kontakte sehen:
* Vorname
* Nachname
* Unternehmen
* E-Mail
# Felder für Module und Designs
Source: https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields
HubSpot verfügt über viele verschiedene Feldtypen, die Sie verwenden können, um Ihre Designs und Module flexibler und individueller zu gestalten.
Fügen Sie Felder zu Modulen und Designs hinzu, damit Content-Autoren verschiedene Aspekte einer Seite im Seiten-Editor steuern können. Im Folgenden erfahren Sie mehr über die Felder, die für Module und Design verfügbar sind, sowie deren verfügbare Eigenschaften.
Weitere Informationen zur Implementierung von Modul- und Designfeldern, einschließlich Feldgruppen und Wiederholfeldern, finden Sie im [Überblick über Modul- und Designfelder](https://developers.hubspot.de/docs/cms/reference/fields/overview).
## Von allen Feldern verwendete Eigenschaften
Alle Felder haben eine Reihe gemeinsamer Eigenschaften. Dies sind allgemeine Felder, z. B. der Name des Feldes oder der Hilfetext, der für Content-Autoren angezeigt wird, die das Feld im Modul oder Design verwenden.
```json theme={null}
{
"name" : "is_teaser_img",
"label" : "Enable Teaser Image",
"required" : false,
"locked" : false,
"type" : "boolean",
"inline_help_text" : "Shows Teaser image when toggled on",
"help_text" : "Teaser images are used to help provide visual context to the post.",
"default" : false
"alias_mapping": {
"property_aliases_paths": {
"is_teaser_img": ["old_boolean_field_name"]
}
}
}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `name` | Zeichenfolge | Der Name des Feldes, auf den Sie sich beziehen, wenn Sie das Feld und seine Werte im Modul oder Design einbinden. Darf keine Leerzeichen oder Sonderzeichen enthalten. | `richtext_field, date_field, etc.` |
| `label` | Zeichenfolge | Der Text, den der Content-Autor sieht und der das Feld beschreibt. Kann Leerzeichen enthalten. | `Rich text field, Date field, etc.` |
| `required` | Boolesch | Legt fest, ob das Feld im Editor leer gelassen werden kann. Bei `true` kann der Inhalt nicht ohne einen Wert im Feld veröffentlicht werden. | `false` |
| `locked` | Boolesch | Legt fest, ob das Feld im Content-Editor bearbeitet werden kann. Wenn `true`, erscheint das Feld nicht im Content-Editor. | `false` |
| `type` | Zeichenfolge | Der Typ des Feldes Feldtypen sind pro Feld eindeutig. In der Dokumentation unten ist der Typ für jedes Feld aufgeführt. | |
| `inline_help_text` | Zeichenfolge | Text, der inline unter dem Label des Feldes angezeigt wird (maximal 400 Zeichen). Eignet sich am besten für Informationen, die für die Verwendung des Feldes erforderlich sind. Sie können die folgenden HTML-Tags einfügen (andere Tags werden beim Rendern ignoriert): `a`, `b`, `br`, `small``em``p``strong``i``span`. | |
| `help_text` | Zeichenfolge | Text, der im Editor innerhalb eines Tooltips beim Darüberbewegen des Mauszeigers angezeigt wird, um den Content-Autor zu unterstützen (maximal 300 Zeichen). Eignet sich am besten für zusätzliche Informationen, die für die Verwendung des Feldes nicht erforderlich sind. Sie können die folgenden HTML-Tags einfügen (andere Tags werden beim Rendern ignoriert): `a`, `b`, `br`, `small``em``p``strong``i``span`. | |
| `id` | Zeichenfolge | Die eindeutige ID des Feldes, die von HubSpot festgelegt wird. Wenn Sie lokal entwickeln, müssen Sie diese ID nicht angeben. | |
| `visibility` | Array | Legt die Anzeigebedingungen des Feldes fest. Sie können beispielsweise festlegen, dass ein Feld nur angezeigt wird, wenn ein anderes Kontrollkästchen ausgewählt wurde. Erfahren Sie mehr über [Sichtbarkeit](https://developers.hubspot.de/docs/cms/reference/fields/overview#field-visibility). | |
| `display_width` | Zeichenfolge | Standardmäßig werden die Felder im Editor in voller Breite angezeigt. Wenn zwei aufeinanderfolgende Felder in der `fields.json`-Datei auf `half_width` festgelegt sind, werden sie stattdessen nebeneinander im Editor angezeigt. | |
| `alias_mapping` | Zeichenfolge | Ein Alias für das Feld, der vorhandene Feldwerte einer neuen Position zuordnet, ohne vorhandenen Content zu beschädigen. Dies kann hilfreich sein, wenn Sie ein Feld aktualisieren müssen, das derzeit in Live-Content verwendet wird, z. B. wenn Sie ein Feld von der Registerkarte *Content* auf die Registerkarte *Stile* verschieben. Erfahren Sie mehr über [Aliaszuordnung](/docs/cms/start-building/building-blocks/fields/alias-mapping). | `False` |
## Ausrichtung
Ermöglicht Content-Autoren, ein Element innerhalb eines Containers zu positionieren. Um die Textausrichtung zu aktivieren, verwenden Sie stattdessen das [Textausrichtungsfeld](/docs/cms/reference/fields/module-theme-fields#text-alignment).
Ausrichtungsfelder werden in [Modulen](https://developers.hubspot.de/docs/cms/start-building/building-blocks/modules/overview) unterstützt und können nur als [Stilfelder](https://developers.hubspot.de/docs/cms/reference/fields/overview#style-fields) verwendet werden.
**JSON**
```json theme={null}
{
"name": "img_position",
"label": "Position Image",
"help_text": "Position the image within it's container.",
"required": false,
"type": "alignment",
"default": {
"horizontal_align": "CENTER",
"vertical_align": "TOP"
}
}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `default` | Objekt | Objekt, das `horizontal_align` und `vertical_align` enthält. | |
| `alignment_direction` | Zeichenfolge | Legt fest, ob nur horizontale, nur vertikale oder beide Ausrichtungssteuerelemente angezeigt werden sollen. Kann Folgendes sein:
`HORIZONTAL`
`VERTICAL`
`BOTH`
| `BOTH` |
**React**
```jsx theme={null}
import { ModuleFields, AlignmentField } from "@hubspot/cms-components/fields";
```
| Eigenschaft | Typ | Beschreibung | Standard |
| - | - | - | - |
| `default` | Objekt | Objekt, das `horizontal_align` und `vertical_align` enthält. | |
| `alignmentDirection` | Zeichenfolge | Legt fest, ob nur horizontale, nur vertikale oder beide Ausrichtungssteuerelemente angezeigt werden sollen. Kann Folgendes sein:
`HORIZONTAL`
`VERTICAL`
`BOTH`
| `BOTH` |
## Hintergrundbild
Dieses Feld enthält ein Feld für ein Hintergrundbild mit Unterfeldern für die Hintergrundposition und die Hintergrundgröße. Hintergrundbildfelder haben eine `.css`-Eigenschaft, die CSS basierend auf dem Wert des Feldes zurückgibt. [Erfahren Sie mehr über die generierte CSS-Eigenschaft.](https://developers.hubspot.de/docs/cms/reference/fields/overview#generated-css)
Hintergrundbildfelder werden in [Modulen](https://developers.hubspot.de/docs/cms/start-building/building-blocks/modules/overview) unterstützt und können nur als [Stilfelder](https://developers.hubspot.de/docs/cms/reference/fields/overview#style-fields) verwendet werden.
**JSON**
```json theme={null}
{
"name": "bg_image",
"label": "Background image",
"required": false,
"type": "backgroundimage",
"default": {
"src": "https://example.com/img.png",
"background_position": "MIDDLE_CENTER",
"background_size": "cover"
}
}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `default` | Objekt | Objekt, das das src-Attribut, die Hintergrundposition und die Hintergrundgröße des Bildes enthält. | `null` |
**React**
```jsx theme={null}
import { ModuleFields, BackgroundImageField } from "@hubspot/cms-components/fields";
```
| Eigenschaft | Typ | Beschreibung | Standard |
| - | - | - | - |
| `default` | Objekt | Objekt, das das src-Attribut, die Hintergrundposition und die Hintergrundgröße des Bildes enthält. | `null` |
## Blog
Dieses Feld stellt eine Möglichkeit für Content-Editoren bereit, einen Blog auszuwählen. So können Sie als Entwickler die ID des Blogs abrufen. Dies ist z. B. nützlich, um Teaser-Informationen für vorgestellte Blogs in Modulen abzurufen. Sie können die Blog-ID in blog-bezogenen [HubL-Funktionen](/docs/cms/reference/hubl/functions) verwenden, um Informationen wie [Blog-Autoren](/docs/cms/reference/hubl/functions#blog-authors), [aktuelle Blogbeiträge](/docs/cms/reference/hubl/functions#blog-recent-posts), [aktuelle Blogbeiträge mit einem bestimmten Tag](/docs/cms/reference/hubl/functions#blog-recent-tag-posts) und vieles mehr zu erhalten.
Blog-Felder werden in Modulen unterstützt.
**JSON**
```json theme={null}
{
"name": "blog",
"label": "Blog",
"required": false,
"locked": false,
"type": "blog",
"default": 1234567890
}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `default` | "default" / Blog-ID | Gibt an, welcher Blog standardmäßig ausgewählt wird. Dieser Parameter akzeptiert als Argumente entweder „Standard“ oder eine Blog-ID (verfügbar in der URL des Blog-Dashboards). | `null` |
**React**
```jsx theme={null}
import { ModuleFields, BlogField } from "@hubspot/cms-components/fields";
```
| Eigenschaft | Typ | Beschreibung | Standard |
| - | - | - | - |
| `default` | "default" / Blog-ID | Gibt an, welcher Blog standardmäßig ausgewählt wird. Dieser Parameter akzeptiert als Argumente entweder „Standard“ oder eine Blog-ID (verfügbar in der URL des Blog-Dashboards). | `null` |
## Boolesch
Dieses Feld stellt eine Möglichkeit für Content-Editoren bereit, Funktionen zu aktivieren/deaktivieren. Boolesche Werte können nur `true` oder `false` sein. Oft ist es sinnvoll, Gruppen oder Felder auf der Grundlage von booleschen Feldern bedingt zu machen. Wenn Sie davon ausgehen, dass Sie irgendwann einmal mehr als zwei Zustände bereitstellen müssen, ist ein [Auswahlfeld](#choice) vielleicht die bessere Option, da Sie es mit weniger Aufwand ausbauen können, falls sich die Anforderungen später ändern.
Boolesche Felder werden sowohl in Designs als auch in Modulen unterstützt. Boolesche Felder können als [Stilfelder](https://developers.hubspot.de/docs/cms/reference/fields/overview#style-fields) verwendet werden.
**JSON**
```json theme={null}
{
"name": "is_teaser_img",
"label": "Enable Teaser Image",
"required": false,
"locked": false,
"type": "boolean",
"display": "checkbox",
"inline_help_text": "Shows Teaser image when toggled on",
"help_text": "Teaser images are used to help provide visual context to the post.",
"default": false
}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `default` | Boolesch | Legt fest, ob der Standardzustand dieses Feldes `true` oder `false` ist. | `false` |
| `display` | Zeichenfolge | Wählen Sie den visuellen Anzeigestil für das Feld aus. Kann entweder als a `toggle` oder als `checkbox` angezeigt werden. | `checkbox` |
**React**
```jsx theme={null}
import { ModuleFields, BooleanField } from "@hubspot/cms-components/fields";
```
| Eigenschaft | Typ | Beschreibung | Standard |
| - | - | - | - |
| `default` | Boolesch | Legt fest, ob der Standardzustand dieses Feldes `true` oder `false` ist. | `false` |
| `display` | Zeichenfolge | Wählen Sie den visuellen Anzeigestil für das Feld aus. Kann entweder als a `toggle` oder als `checkbox` angezeigt werden. | `checkbox` |
> [!TIP]
>
> Ein Umschalter kann sinnvoll sein, wenn der Wert des Feldes andere Felder aktiviert/deaktiviert, die bedingt angezeigt werden. Ein anderer Fall, in dem eine Umschaltfunktion nützlich sein kann, ist, wenn das Feld eine größere Designänderung für das Modul darstellt.
>
> Kontrollkästchen sind sinnvoll für kleinere Änderungen, die sich nicht so drastisch auf die Darstellung des Moduls auswirken, z. B. das Ein- oder Ausblenden einzelner kleiner Elemente.
## Rahmen
Dieses Feld bietet Content-Autoren eine Benutzeroberfläche für die Erstellung eines Rahmens um ein Element. Rahmenfelder haben eine `.css`-Eigenschaft, die CSS basierend auf dem Wert des Feldes zurückgibt. [Erfahren Sie mehr über die generierte CSS-Eigenschaft.](https://developers.hubspot.de/docs/cms/reference/fields/overview#generated-css)
Rahmenfelder werden in [Modulen](https://developers.hubspot.de/docs/cms/start-building/building-blocks/modules/overview) unterstützt. Rahmenfelder können nur als [Stilfelder](https://developers.hubspot.de/docs/cms/reference/fields/overview#style-fields) verwendet werden.
**JSON**
```json theme={null}
{
"id": "styles.border",
"name": "border",
"label": "border",
"required": false,
"locked": false,
"allow_custom_border_sides": false,
"type": "border",
"default": {
"top": {
"width": {
"value": 1,
"units": "px"
},
"opacity": 100,
"style": "solid",
"color": "#ffffff"
},
"bottom": {
"width": {
"value": 1,
"units": "px"
},
"opacity": 100,
"style": "solid",
"color": "#ffffff"
},
"left": null,
"right": null
}
}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `default` | Boolesch | Objekt mit Schlüssel für Rahmenradius, obere, untere, linke und rechte Seite. | `{}` |
**React**
```jsx theme={null}
import { ModuleFields, BorderField } from "@hubspot/cms-components/fields";
```
| Eigenschaft | Typ | Beschreibung | Standard |
| - | - | - | - |
| `default` | Boolesch | Objekt mit Schlüssel für Rahmenradius, obere, untere, linke und rechte Seite. | `{}` |
## Auswahl
Mit Auswahlfeldern kann ein Content-Autor ein oder mehrere Elemente aus einer Liste von Optionen auswählen. Mit der `display`-Eigenschaft können Sie festlegen, dass die Optionen in einem Dropdown-Menü, in einer Optionsfeld-Auswahl, in Kontrollkästchen oder in einer Reihe von Schaltflächen angezeigt werden. Erfahren Sie unten mehr über [Anzeigeoptionen für Auswahlfelder](#choice-button-presets).
Auswahlfelder werden sowohl in Designs als auch in Modulen unterstützt. Auswahlfelder können als [Stilfelder](https://developers.hubspot.de/docs/cms/reference/fields/overview#style-fields) verwendet werden.
**JSON**
```json theme={null}
{
"name": "img_position",
"label": "Image Position",
"required": false,
"locked": false,
"multiple": "true",
"display": "select",
"choices": [
["img--left", "Image Left - Text Right"],
["img--right", "Text Left - Image Right"]
],
"type": "choice",
"default": "img--left"
}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `choices` | Array | Array mit den auswählbaren Optionen, formatiert als eindeutiger interner Wert, gefolgt von Label. | `[ [ "value 1", "Label 1" ], [ "value 2", "Label 2" ] ]` |
| `default` | Wert | Legt den standardmäßig ausgewählten Wert aus dem Auswahl-Array fest. | |
| `multiple` | Boolesch | Optionales Feld, mit dem mehrere Optionen ausgewählt werden können, wenn es auf `true` festgelegt ist. Legen Sie `display` auf `checkbox` oder `select` fest, um zu konfigurieren, ob das Feld als Liste von Kontrollkästchen oder als Dropdown-Menü angezeigt werden soll. | `false` |
| `display` | Zeichenfolge | Legt das Erscheinungsbild des Feldes mithilfe eines der folgenden Werte fest:
`select`: rendert ein Dropdown-Menü. Ermöglicht die Auswahl mehrerer Optionen, wenn `multiple` auf `true` festgelegt ist.
`checkbox`: rendert eine Liste auswählbarer Kontrollkästchen. Ermöglicht die Auswahl mehrerer Optionen, wenn `multiple` auf `true` festgelegt ist und `reordering_enabled` auf `false`.
`radio`: rendert eine Liste von Radiobutton-Optionen. Ermöglicht nicht die Auswahl mehrerer Optionen.
`buttons`: rendert eine Reihe von Schaltflächen basierend auf der angegebenen `preset`. Ermöglicht nicht die Auswahl mehrerer Optionen.
| `"select"` |
| `reordering_enabled` | Boolesch | Wenn diese Option auf `true` festgelegt ist, können Content-Autoren die Optionen des Feldes im Editor neu anordnen. Um dies zu ermöglichen, muss auch `multiple` auf `true` festgelegt werden. | `false` |
| `preset` | Zeichenfolge | Konfiguriert die zu verwendende Schaltflächenvoreinstellung, wenn `display` auf `buttons` festgelegt ist. Für jede Voreinstellung müssen Sie die `choices`-Label so konfigurieren, dass sie mit einem bestimmten Satz von Werten übereinstimmen. Erfahren Sie unten mehr über diese [Voreinstellungsoptionen](#choice-button-presets). | |
**React**
```jsx theme={null}
import { ModuleFields, ChoiceField } from "@hubspot/cms-components/fields";
```
| Eigenschaft | Typ | Beschreibung | Standard |
| - | - | - | - |
| `choices` | Array | Array mit den auswählbaren Optionen, formatiert als eindeutiger interner Wert, gefolgt von Label. | `[ [ "value 1", "Label 1" ], [ "value 2", "Label 2" ] ]` |
| `default` | Wert | Legt den standardmäßig ausgewählten Wert aus dem Auswahl-Array fest. | |
| `multiple` | Boolesch | Optionales Feld, mit dem mehrere Optionen ausgewählt werden können, wenn es auf `true` festgelegt ist. Legen Sie `display` auf `checkbox` oder `select` fest, um zu konfigurieren, ob das Feld als Liste von Kontrollkästchen oder als Dropdown-Menü angezeigt werden soll. | `false` |
| `display` | Zeichenfolge | Legt das Erscheinungsbild des Feldes mithilfe eines der folgenden Werte fest:
`select`: rendert ein Dropdown-Menü. Ermöglicht die Auswahl mehrerer Optionen, wenn `multiple` auf `true` festgelegt ist.
`checkbox`: rendert eine Liste auswählbarer Kontrollkästchen. Ermöglicht die Auswahl mehrerer Optionen, wenn `multiple` auf `true` festgelegt ist und `reordering_enabled` auf `false`.
`radio`: rendert eine Liste von Radiobutton-Optionen. Ermöglicht nicht die Auswahl mehrerer Optionen.
`buttons`: rendert eine Reihe von Schaltflächen basierend auf der angegebenen `preset`. Ermöglicht nicht die Auswahl mehrerer Optionen.
| `"select"` |
| `reorderingEnabled` | Boolesch | Wenn diese Option auf `true` festgelegt ist, können Content-Autoren die Optionen des Feldes im Editor neu anordnen. Um dies zu ermöglichen, muss auch `multiple` auf `true` festgelegt werden. | `false` |
| `preset` | Zeichenfolge | Konfiguriert die zu verwendende Schaltflächenvoreinstellung, wenn `display` auf `buttons` festgelegt ist. Für jede Voreinstellung müssen Sie die `choices`-Label so konfigurieren, dass sie mit einem bestimmten Satz von Werten übereinstimmen. Erfahren Sie unten mehr über diese [Voreinstellungsoptionen](#choice-button-presets). | |
### Voreinstellungen für Auswahlschaltflächen
Um ein Auswahlfeld so zu konfigurieren, dass Schaltflächen anstelle eines Dropdown-Menüs, Kontrollkästchens oder einer Optionsfeld-Auswahl angezeigt werden, können Sie eine der folgenden Voreinstellungen verwenden. Jede Voreinstellung ermöglicht einen bestimmten Satz von Optionslabeln, die Sie in das `choices`-Array aufnehmen müssen. Diese Label können nicht angepasst werden.
```json example.json theme={null}
{
"name": "layout",
"type": "choice",
"label": "Layout",
"required": false,
"locked": false,
"display": "buttons",
"preset": "layout",
"choices": [
["cards_value", "cards"],
["tiles_value", "tiles"],
["minimal_value", "minimal"]
]
}
```
```text react.txt theme={null}
import { ModuleFields, ChoiceField } from '@hubspot/cms-components/fields';
```
| Voreinstellung | Auswahlabel | Beispiel |
| - | - | - |
| `case` | `none` \| `upper` \| `lower` | |
\| | `expand_icon` | `caret` | `plus` | `chevron` |
\| | `icon_background_shape` | `none` | `square` | `rounded` | `circle` |
\| | `icon_size` | `small` | `medium` | `large` |
\| | `layout` | `cards` | `tiles` | `minimal` |
\| | `social_icon_background_shape` | `none` | `square` | `rounded` | `circle` |
\| | `social_icon_size` | `small` | `medium` | `large` |
|
## Farbe
Farbfelder bieten eine Benutzeroberfläche zur Farbauswahl für Content-Autoren. Sie unterstützen sowohl Volltonfarben als auch Transparenz. Sie sind die perfekte Wahl, wenn Sie Content-Autoren die volle Kontrolle über die Farben innerhalb eines Moduls geben wollen.
Standardmäßig ist die Deckkrafteingabe eines Farbfelds für E-Mail-Module ausgeblendet, da einige E-Mail-Clients die Deckkraftregeln nicht einhalten. Sie können das Deckkraftfeld für E-Mail-Module anzeigen, indem Sie `show_opacity` auf `true` festlegen.
Farbfelder werden sowohl in Designs als auch in Modulen unterstützt. Farbfelder können als [Stilfelder](https://developers.hubspot.de/docs/cms/reference/fields/overview#style-fields) verwendet werden.
**JSON**
```json theme={null}
{
"name": "bg_color",
"label": "Background color",
"required": false,
"locked": false,
"type": "color",
"default": {
"color": "#ff0000",
"opacity": 100
},
"limited_options": ["#000000", "#ffffff"]
}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `default` | Objekt | Legt die standardmäßig ausgewählte Farbe und Deckkraft fest. | `{ "color" : "#ffffff", "opacity" : 100 }` |
| `show_opacity` | Boolesch | Legt fest, ob die Deckkrafteingabe angezeigt wird.
`true`: Die Deckkrafteingabe wird angezeigt.
`false`: Die Deckkrafteingabe wird ausgeblendet.
Wenn nicht definiert, werden Deckkrafteingaben nicht in E-Mail-Modulen, aber in anderen Modultypen angezeigt.
| `undefined` |
| `limited_options` | Array | Ein Array von Zeichenfolgen, das das Standardfarbraster ausblendet und die Liste der Favoritenfarben überschreibt (das Label „Favoriten“ wird zu „Verfügbare Farben“). Die Werte im Array müssen entweder ein Hex-Code oder ein `color`-Hex-Wert in einem beliebigen Vererbungspfad sein. | `undefined` |
**React**
```jsx theme={null}
import { ModuleFields, ColorField } from "@hubspot/cms-components/fields";
```
| Eigenschaft | Typ | Beschreibung | Standard |
| - | - | - | - |
| `default` | Objekt | Legt die standardmäßig ausgewählte Farbe und Deckkraft fest. | `{ "color" : "#ffffff", "opacity" : 100 }` |
| `showOpacity` | Boolesch | Legt fest, ob die Deckkrafteingabe angezeigt wird.
`true`: Die Deckkrafteingabe wird angezeigt.
`false`: Die Deckkrafteingabe wird ausgeblendet.
Wenn nicht definiert, werden Deckkrafteingaben nicht in E-Mail-Modulen, aber in anderen Modultypen angezeigt.
| `undefined` |
| `limitedOptions` | Array | Ein Array von Zeichenfolgen, das das Standardfarbraster ausblendet und die Liste der Favoritenfarben überschreibt (das Label „Favoriten“ wird zu „Verfügbare Farben“). Die Werte im Array müssen entweder ein Hex-Code oder ein `color`-Hex-Wert in einem beliebigen Vererbungspfad sein. | `undefined` |
## CTA
Call-To-Action (CTA)-Felder bieten Benutzern die Möglichkeit, einen CTA auszuwählen, der angezeigt werden soll. CTAs sind im Wesentlichen nachverfolgbare Schaltflächen oder Links. Content-Autoren [erstellen CTAs](https://knowledge.hubspot.com/de/ctas/create-calls-to-action-ctas), die auf der gesamten Website verwendet werden können.
CTA-Felder werden in Modulen unterstützt. CTA-Felder sind in **Content Hub** *Professional* und *Enterprise* verfügbar.
**JSON**
```json theme={null}
{
"name": "cta",
"label": "CTA",
"required": false,
"locked": false,
"type": "cta",
"default": null
}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `default` | Zeichenfolge | Der standardmäßig ausgewählte CTA. Erwartet eine CTA-ID, die in der URL zu finden ist, wenn ein CTA im [CTA-Manager](https://app.hubspot.com/l/ctas) bearbeitet wird. | `null` |
**React**
```jsx theme={null}
import { ModuleFields, CTAField } from "@hubspot/cms-components/fields";
```
| Eigenschaft | Typ | Beschreibung | Standard |
| - | - | - | - |
| `default` | Zeichenfolge | Der standardmäßig ausgewählte CTA. Erwartet eine CTA-ID, die in der URL zu finden ist, wenn ein CTA im [CTA-Manager](https://app.hubspot.com/l/ctas) bearbeitet wird. | `null` |
## CRM-Objekt
CRM-Objektfelder bieten den Benutzern die Möglichkeit, eine individuelle Instanz eines CRM-Objekts zur Anzeige auszuwählen.
`module.fieldname.properties` gibt die von dieser Objektinstanz abgerufenen Eigenschaften zurück. Dadurch müssen Sie nicht die `crm_object()`–Funktion verwenden, um die Daten für die ausgewählte Objektinstanz zu erhalten.
`module.fieldname.id` gibt die Objektinstanz-ID zurück.
CRM-Objektfelder werden in Modulen unterstützt. CRM-Objektfelder sind in **Content Hub** *Professional* und *Enterprise* verfügbar.
**JSON**
```json theme={null}
{
"name": "crmobject_field",
"label": "CRM object",
"required": false,
"locked": false,
"object_type": "CONTACT",
"properties_to_fetch": [],
"type": "crmobject",
"default": {
"id": 1
}
}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `object_type` | Zeichenfolge | Typ von CRM-Objekt, von dem der Benutzer wählen kann [Unterstützte CRM-Objekttypen](/docs/cms/start-building/features/data-driven-content/crm-objects#supported-crm-object-types) | |
| `properties_to_fetch` | Array | Array von Eigenschaftsnamen, die dem Objekttyp zugeordnet sind, in Form einer Zeichenfolge. Beispiel: `"date_of_birth"` ist eine Eigenschaft, die mit einem Kontakt verknüpft ist. Verwenden Sie diese Option, um die auf der Seite verfügbaren Informationen auf das zu beschränken, was Sie benötigen. | |
| `default` | Objekt | Objekt mit der ID der standardmäßig ausgewählten Objektinstanz. Kontakt-ID, Unternehmens-ID usw. | `null` |
**React**
```jsx theme={null}
import { ModuleFields, CRMObjectField } from "@hubspot/cms-components/fields";
```
| Eigenschaft | Typ | Beschreibung | Standard |
| - | - | - | - |
| `objectType` | Zeichenfolge | Typ von CRM-Objekt, von dem der Benutzer wählen kann. [Unterstützte CRM-Objekttypen](/docs/cms/start-building/features/data-driven-content/crm-objects#supported-crm-object-types) | |
| `propertiesToFetch` | Array | Array von Eigenschaftsnamen, die dem Objekttyp zugeordnet sind, in Form einer Zeichenfolge. Bsp.: `"date_of_birth"` ist eine Eigenschaft, die mit einem Kontakt verknüpft ist. Verwenden Sie diese Option, um die auf der Seite verfügbaren Informationen auf das zu beschränken, was Sie benötigen. | |
| `default` | Objekt | Objekt mit der ID der standardmäßig ausgewählten Objektinstanz. Kontakt-ID, Unternehmens-ID usw. | `null` |
## CRM-Objekteigenschaft
Verwenden Sie das CRM-Objekteigenschaftsfeld, um auf Eigenschaftsmetadaten, z. B. das Label und den Eigenschaftsnamen, von einem angegebenen Objekttyp zuzugreifen. Dadurch können Content-Autoren aus Objekteigenschaften auswählen, wenn Eigenschaftsdetails auf einer Seite angezeigt werden müssen.
Beispielsweise können Sie dieses Feld zu einem benutzerdefinierten Tabellenmodul hinzufügen, um Tabellenüberschriften basierend auf den ausgewählten Eigenschaften auszufüllen.
CRM-Objektfelder werden in Modulen unterstützt.
**JSON**
```json theme={null}
{
"name": "crmobjectproperty_field",
"label": "CRM object property",
"required": true,
"locked": false,
"object_type": "contact",
"type": "crmobjectproperty",
"default": {
"property": "field_of_study"
}
}
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `object_type` | Zeichenfolge | Typ von CRM-Objekt, von dem der Benutzer wählen kann. Hier erfahren Sie mehr über [unterstützte CRM-Objekttypen](/docs/cms/start-building/features/data-driven-content/crm-objects#supported-crm-object-types). |
| `default` | Objekt | Enthält die Standardeigenschaft, die angezeigt werden soll. |
Darüber hinaus können Sie die folgenden Snippets verwenden, um andere Objektdetails zurückzugeben:
* `{{ module.fieldname.property }}`: gibt den internen Namen der Eigenschaft zurück.
* `{{ module.fieldname.property_definition.label }}`: gibt das Label der Eigenschaft zurück.
* `{{ module.fieldname.property_definition.type }}`: gibt den Eigenschaftstyp (z. B. Zeichenfolge) zurück.
**React**
```jsx theme={null}
import { ModuleFields, CRMObjectPropertyField } from "@hubspot/cms-components/fields";
```
| Eigenschaft | Typ | Beschreibung |
| - | - | - |
| `objectType` | Zeichenfolge | Typ von CRM-Objekt, von dem der Benutzer wählen kann. Hier erfahren Sie mehr über [unterstützte CRM-Objekttypen](/docs/cms/start-building/features/data-driven-content/crm-objects#supported-crm-object-types). |
| `default` | Objekt | Enthält die Standardeigenschaft, die angezeigt werden soll. |
## Datum
Datumsfelder bieten eine Benutzeroberfläche zur leichteren Auswahl eines Datums für Content-Autoren. Gibt einen Zeitstempel zurück, den Sie in Ihrem Code verwenden können.
Datumsfelder werden in Modulen unterstützt.
**JSON**
```json theme={null}
{
"name": "event_start_date",
"label": "Event Date",
"required": false,
"locked": false,
"type": "date",
"default": 1577854800000
}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `default` | Zeitstempel | Der Unix-Epoch-Zeitstempel für das Datum und die Uhrzeit, das bzw. die Sie als Standard verwenden möchten. Lassen Sie dies leer, damit der Content-Autor bei der Datums- und Uhrzeitauswahl mit dem aktuellen Datum und der aktuellen Uhrzeit in der Auswahl starten kann. | `null` |
**React**
```jsx theme={null}
import { ModuleFields, DateField } from "@hubspot/cms-components/fields";
```
| Eigenschaft | Typ | Beschreibung | Standard |
| - | - | - | - |
| `default` | Zeitstempel | Der Unix-Epoch-Zeitstempel für das Datum und die Uhrzeit, das bzw. die Sie als Standard verwenden möchten. Lassen Sie dies leer, damit der Content-Autor bei der Datums- und Uhrzeitauswahl mit dem aktuellen Datum und der aktuellen Uhrzeit in der Auswahl starten kann. | `null` |
## Datum und Uhrzeit
Datums- und Uhrzeitfelder bieten wie das Datumsfeld eine Benutzeroberfläche für die Datumsauswahl sowie eine Uhrzeitauswahl, die es Content-Autoren erleichtert, ein Datum und eine Tageszeit auszuwählen. Gibt einen Zeitstempel zurück, den Sie in Ihrem Code verwenden können.
Datums- und Uhrzeitfelder werden in Modulen unterstützt.
**JSON**
```json theme={null}
{
"name": "event_start",
"label": "Event Start",
"required": false,
"locked": false,
"type": "datetime",
"default": 1577854800000
}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `default` | Zeitstempel | Der Unix-Epoch-Zeitstempel für das Datum und die Uhrzeit, das bzw. die Sie als Standard verwenden möchten. Lassen Sie dies leer, damit der Content-Autor bei der Datums- und Uhrzeitauswahl mit dem aktuellen Datum und der aktuellen Uhrzeit in der Auswahl starten kann. | `null` |
**React**
```jsx theme={null}
import { ModuleFields, DateTimeField } from "@hubspot/cms-components/fields";
```
| Eigenschaft | Typ | Beschreibung | Standard |
| - | - | - | - |
| `default` | Zeitstempel | Der Unix-Epoch-Zeitstempel für das Datum und die Uhrzeit, das bzw. die Sie als Standard verwenden möchten. Lassen Sie dies leer, damit der Content-Autor bei der Datums- und Uhrzeitauswahl mit dem aktuellen Datum und der aktuellen Uhrzeit in der Auswahl starten kann. | `null` |
## E-Mail-Adresse
In E-Mail-Adressfeldern kann der Benutzer mehrere E-Mail-Adressen auswählen. Dies könnte für die Anzeige von Kontaktinformationen verwendet werden. Das E-Mail-Feld gibt ein Array ausgewählter E-Mail-Adressen zurück, die in einer Schleife durchlaufen werden können.
E-Mail-Felder werden in Modulen unterstützt.
**JSON**
```json theme={null}
{
"name": "emails",
"label": "Email address",
"required": false,
"locked": false,
"type": "email",
"default": null
}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `default` | Array | Array von E-Mail-Adresszeichenfolgen `["bob@example.com", "dennis@example.com"]` | `null` |
**React**
```jsx theme={null}
import { ModuleFields, EmailField } from "@hubspot/cms-components/fields";
```
| Eigenschaft | Typ | Beschreibung | Standard |
| - | - | - | - |
| `default` | Array | Array von E-Mail-Adresszeichenfolgen `["bob@example.com", "dennis@example.com"]` | `null` |
## Einbettung
Mithilfe von Einbettungsfeldern kann der Benutzer eine URL von einer [oEmbed-fähigen Website](https://oembed.com/#section7) hinzufügen oder einen Einbettungscode von einer anderen Website einfügen. Um mehr über die Verwendung von oEmbed bei HubSpot zu erfahren und Anwendungsfälle zu sehen, besuchen Sie unser [oEmbed-Dokument](/docs/cms/start-building/building-blocks/fields/oembed).
**JSON**
```json theme={null}
{
"name": "embed_field",
"label": "Embed",
"required": false,
"locked": false,
"supported_source_types": ["oembed", "html"],
"supported_oembed_types": ["photo", "video", "link", "rich"],
"type": "embed",
"default": {
"source_type": "oembed"
}
}
```
\| Parameter | Typ | Beschreibung | Standard |
\| --- | --- | --- | --- | --- |
\| `supported_source_types` | Array | Unterstützte Quellentypen für oEmbed-URLs (`oembed`), HTML-eingebetteten Code (`html`) oder Media Bridge (`media_bridge`). | `["oembed", "html"]` |
\| `supported_oembed_types` | Array | Unterstützter oEmbed-Typ, einschließlich `"photo"`, `"video"`, `"link"` und `"rich"`. Gilt nicht für die supported\_source\_types von HTML | `[ "photo", "video", "link", "rich" ]` |
\| `supported_media_bridge_providers` | Array | Array von Anbieter-IDs, die bestimmen, von welchen Media Bridge-Anbietern Inhalte ausgewählt werden können. Hinweis: Dieser Parameter wird auch bei der Installation der [App eines Media Bridge-Anbieters](https://ecosystem.hubspot.com/marketplace/apps/apps-for-media) ausgefüllt. | |
\| `type` | Zeichenfolge | Dieser Parameter wird immer auf `"embed"` | `"embed"` | festgelegt. |
\| `default` | Dict | Ein Array, das den `"source_type"`-Parameter enthält. Dieser Parameter hat einen zeichenfolgenbasierten Wert aus den im `"supported_source_types"`-Parameter angegebenen Optionen. | `oembed` |
**React**
```jsx theme={null}
import { ModuleFields, EmbedField } from "@hubspot/cms-components/fields";
```
\| Eigenschaft | Typ | Beschreibung | Standard |
\| --- | --- | --- | --- | --- |
\| `supportedSourceTypes` | Array | Unterstützte Quellentypen für oEmbed-URLs (`oembed`), HTML-eingebetteten Code (`html`) oder Media Bridge (`media_bridge`). | `["oembed", "html"]` |
\| `supportedOembedTypes` | Array | Unterstützter oEmbed-Typ, einschließlich `"photo"`, `"video"`, `"link"` und `"rich"`. Gilt nicht für die supported\_source\_types von HTML | `[ "photo", "video", "link", "rich" ]` |
\| `supportedMediaBridgeProviders` | Array | Array von Anbieter-IDs, die bestimmen, von welchen Media Bridge-Anbietern Inhalte ausgewählt werden können. Hinweis: Dieser Parameter wird auch bei der Installation der [App eines Media Bridge-Anbieters](https://ecosystem.hubspot.com/marketplace/apps/apps-for-media) ausgefüllt. | |
\| `type` | Zeichenfolge | Dieser Parameter wird immer auf `"embed"` | `"embed"` | festgelegt. |
\| `default` | Dict | Ein Array, das den `"source_type"`-Parameter enthält. Dieser Parameter hat einen zeichenfolgenbasierten Wert aus den im `"supported_source_types"`-Parameter angegebenen Optionen. | `oembed` |
## Datei
Dateifelder ermöglichen es dem Benutzer, eine Datei in den Datei-Manager oder den Dokument-Manager hochzuladen, und erleichtern das Anhängen von Elementen, die sich an diesen Orten befinden. Dies kann für die Verknüpfung mit PDF-Dateien oder Dateien anderer Formate nützlich sein. Für die Anzeige von Bildern auf einer Seite sollten Sie das Bildfeld verwenden.
Dateifelder werden in Modulen unterstützt.
**JSON**
```json theme={null}
{
"name": "file_field",
"label": "File",
"required": false,
"locked": false,
"type": "file",
"picker": "file",
"default": null
}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `default` | Zeichenfolge | URL der Datei. | `null` |
| `picker` | Zeichenfolge | Zulässige Werte: „file“, „document“, „image“. Die Auswahl zeigt entweder in den Datei-Manager oder in den Dokument-Manager hochgeladene Elemente abhängig von diesem Parameter an. | `file` |
**React**
```jsx theme={null}
import { ModuleFields, FileField } from "@hubspot/cms-components/fields";
```
| Eigenschaft | Typ | Beschreibung | Standard |
| - | - | - | - |
| `default` | Zeichenfolge | URL der Datei. | `null` |
| `picker` | Zeichenfolge | Zulässige Werte: „file“, „document“, „image“. Die Auswahl zeigt entweder in den Datei-Manager oder in den Dokument-Manager hochgeladene Elemente abhängig von diesem Parameter an. | `file` |
## Follow-up-E-Mail
In Follow-up-E-Mail-Feldern kann ein Content-Autor eine E-Mail angeben, die als Reaktion auf eine Formulareinsendung gesendet wird. Dies funktioniert in Verbindung mit dem [HubL-Formular](/docs/cms/reference/hubl/tags/standard-tags#form)-Tag über den `simple_email_campaign_id`-Parameter.
Felder für Follow-up-E-Mails werden in Modulen unterstützt.
**JSON**
```json theme={null}
{
"name": "followup_email",
"label": "Followup email",
"required": false,
"locked": false,
"type": "followupemail",
"default": null
}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `default` | Zeichenfolge | E-Mail-ID | `null` |
**React**
```jsx theme={null}
import { ModuleFields, FollowUpEmailField } from "@hubspot/cms-components/fields";
```
| Eigenschaft | Typ | Beschreibung | Standard |
| - | - | - | - |
| `default` | Zeichenfolge | E-Mail-ID | `null` |
## Schriftart
Schriftartfelder bieten Content-Autoren grundlegende Steuerelemente für die Gestaltung der Schriftart. Content-Autoren können die Größe, Farbe, Schriftartfamilie und das Format (fett, kursiv und unterstrichen) wählen. Bei den aufgelisteten Schriftarten handelt es sich um standardmäßige websichere Schriftarten. Diese Schriftarten stammen von [Google Fonts](https://fonts.google.com/), aber von HubSpot direkt auf der Domain bereitgestellt, auf die die Seite geladen wird.
Schriftartfelder werden sowohl in Designs als auch in Modulen unterstützt. Schriftartfelder können als [Stilfelder](https://developers.hubspot.de/docs/cms/reference/fields/overview#style-fields) verwendet werden.
> [!WARNING]
>
> ### Hinweis:
>
> * Die Schriftartfamilie wird durch die Kombination der Eigenschaften `font` und `font_set` bestimmt. Sie müssen beides berücksichtigen, um die Schriftart zu laden. Beim [Vererben von Feldern](https://developers.hubspot.de/docs/cms/reference/fields/overview#inherited-fields) bedeutet dies, dass Sie beide Werte übernehmen müssen.
> * Das Ausblenden von CSS-bezogenen Unterfeldern mit `visibility` verhindert nicht, dass CSS im Styling ausgegeben wird, das im Feldobjekt zurückgegeben wird. Sie müssen das CSS weiterhin manuell in das `styles`-Objekt einschließen.
**JSON**
```json theme={null}
{
"name": "font",
"label": "Font",
"required": false,
"locked": false,
"load_external_fonts": true,
"type": "font",
"default": {
"size": 12,
"font": "Merriweather",
"font_set": "GOOGLE",
"size_unit": "px",
"color": "#000",
"styles": {}
},
"visibility": {
"hidden_subfields": {
"font": true,
"size": true
}
}
}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `default` | Objekt | Schriftartobjekt mit Einstellungen für Größe, Größeneinheit, Farbe und Stile für fett, kursiv und unterstrichen. | `{ "size" : 12, "size_unit" : "px", "color" : "#000", "styles" : { } }` |
| `load_external_fonts` | Boolesch | HubSpot lädt die ausgewählte Webschriftart automatisch auf die Seite, wenn die Schriftart ausgewählt und von HubL in einem Stylesheet oder in einem Modul referenziert wird. Setzen Sie diesen Wert auf „false“, wenn Sie die Schriftart bereits auf die Seite geladen haben, damit die Schriftart nicht zweimal geladen wird. | `true` |
| `visibility` | Objekt | Mithilfe des verschachtelten `hidden_subfields`-Objekts können Sie einen booleschen Wert für die auszublendenden Steuerelemente des Schriftartfeldes festlegen. Zu den Unterfeldern gehören: `font`, `size`, `bold`, `italic` `underline` und `color`. | |
| `variant` | Zeichenfolge | Wenn Sie eine Webschriftart verwenden, geben Sie die Variante der Schriftart an, die Sie verwenden möchten. Um zum Beispiel von einer Schriftart die Version mit 700er-Stärke zu verwenden, legen Sie diesen Wert auf `"700"` fest. Um von einer Schriftart die kursive Version mit 400er-Stärke zu verwenden, legen Sie diese auf `"400i"` fest. | |
| `limited_options` | Array | Array von Zeichenfolgen, das die Liste aller Schriftartoptionen überschreibt. Bei den Werten im Array muss es sich um einen hartcodierten Schriftartnamen oder eine Schriftart mit `name`-Eigenschaft in einem beliebigen Vererbungspfad handeln. Zum Beispiel: `theme.typography.body_text.name`. | `undefined` |
**React**
```jsx theme={null}
import { ModuleFields, FontField } from "@hubspot/cms-components/fields";
```
| Eigenschaft | Typ | Beschreibung | Standard |
| - | - | - | - |
| `default` | Objekt | Schriftartobjekt mit Einstellungen für Größe, Größeneinheit, Farbe und Stile für fett, kursiv und unterstrichen. | `{ "size" : 12, "size_unit" : "px", "color" : "#000", "styles" : { } }` |
| `loadExternalFonts` | Boolesch | HubSpot lädt die ausgewählte Webschriftart automatisch auf die Seite, wenn die Schriftart ausgewählt und von HubL in einem Stylesheet oder in einem Modul referenziert wird. Setzen Sie diesen Wert auf „false“, wenn Sie die Schriftart bereits auf die Seite geladen haben, damit die Schriftart nicht zweimal geladen wird. | `true` |
| `visibility` | Objekt | Mithilfe des verschachtelten `hidden_subfields`-Objekts können Sie einen booleschen Wert für die auszublendenden Steuerelemente des Schriftartfeldes festlegen. Zu den Unterfeldern gehören: `font`, `size`, `bold`, `italic` `underline` und `color`. | |
| `variant` | Zeichenfolge | Wenn Sie eine Webschriftart verwenden, geben Sie die Variante der Schriftart an, die Sie verwenden möchten. Um zum Beispiel von einer Schriftart die Version mit 700er-Stärke zu verwenden, legen Sie diesen Wert auf `"700"` fest. Um von einer Schriftart die kursive Version mit 400er-Stärke zu verwenden, legen Sie diese auf `"400i"` fest. | |
| `limitedOptions` | Array | Array von Zeichenfolgen, das die Liste aller Schriftartoptionen überschreibt. Bei den Werten im Array muss es sich um einen hartcodierten Schriftartnamen oder eine Schriftart mit `name`-Eigenschaft in einem beliebigen Vererbungspfad handeln. Zum Beispiel: `theme.typography.body_text.name`. | `undefined` |
Formular##
Formularfelder ermöglichen es einem Content-Autor, ein Formular in seinem Account zu bestimmen. Damit können Sie dann mit dem [HubL-Formular-Tag](/docs/cms/reference/hubl/tags/standard-tags#form) ein Formular auf einer Seite rendern.
Formularfelder werden in Modulen unterstützt.
**JSON**
```json theme={null}
{
"id": "idNumber",
"name": "form_field_name",
"display_width": null,
"label": "Form",
"required": false,
"locked": false,
"type": "form",
"disable_inline_form_editing": true,
"required_property_types": ["TICKET"],
"support_all_webinar_types": true,
"embed_versions": ["v2", "v4"],
"default": {
"response_type": "inline",
"message": "Thanks for submitting the form."
}
}
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `default` | Objekt | Ein Objekt, das die Antwortdetails für die Formulareinsendung enthält. Enthält die folgenden Parameter:
`response_type`, der einer der folgenden sein kann:
`inline:` eine Inline-Textnachricht.
`redirect`: leitet den Besucher nach dem Einsenden weiter.
`message`: der Text, der nach dem Einsenden des Formulars angezeigt wird.
`redirect_id`: bei weitergeleiteten Formularen auf eine HubSpot-Inhalts-ID festgelegt, um einsendende Benutzer zu einer HubSpot-Seite weiterzuleiten.
`redirect_url`: bei weitergeleiteten Formularen auf eine bestimmte URL festgelegt, um einsendende Benutzer zu einer Seite weiterzuleiten.
|
| `disable_inline_form_editing` | Zeichenfolge | Legen Sie die `disable_inline_form_editing`-Eigenschaft auf `true` fest, um alle Steuerelemente für die Inline-Bearbeitung von Formularen im Formularmodul auszublenden. Dazu gehören die Formularfelder, der Text der Einsenden-Schaltfläche, die Datenschutz- und Einwilligungsoptionen sowie CAPTCHA. |
| `required_property_types` | Array | Ein Array, das angibt, welche Formulare basierend auf den Eigenschaftentypen der Formularfelder ausgewählt werden können. Zu den Werten gehören: `"CONTACT"`, `"COMPANY"` und `"TICKET"`. |
| `support_all_webinar_types` | Boolesch | Bei Einstellung auf `true`, zeigt das Formular einen allgemeineren Webinar-Selektor an, der die Auswahl von Microsoft Teams-Webinaren zusätzlich zu GoToWebinar ermöglicht. Die Werte des Formularfeldes werden ebenfalls leicht geändert, um `webinar_id` und `webinar_source` anstatt `gotowebinar_webinar_key` zu speichern. Sie müssen diese allgemeineren Eigenschaftswerte neben `gotowebinar_webinar_key` an das [Formular-Tag](/docs/cms/reference/hubl/tags/standard-tags#form) zurückgeben. |
| `embed_versions` | Array | Ein Array, das angibt, welche Formulare basierend auf der Version des Formulars ausgewählt werden können. Zu den Werten gehören: `"v2"` für alte Formulare und `"v4"` für neue Editorformulare. |
**React**
```jsx theme={null}
import { ModuleFields, FormField } from "@hubspot/cms-components/fields";
```
| Eigenschaft | Typ | Beschreibung |
| - | - | - |
| `default` | Objekt | Ein Objekt, das die Antwortdetails für die Formulareinsendung enthält. Enthält die folgenden Parameter:
`response_type`, der einer der folgenden sein kann:
`inline:` eine Inline-Textnachricht.
`redirect`: leitet den Besucher nach dem Einsenden weiter.
`message`: der Text, der nach dem Einsenden des Formulars angezeigt wird.
`redirect_id`: bei weitergeleiteten Formularen auf eine HubSpot-Inhalts-ID festgelegt, um einsendende Benutzer zu einer HubSpot-Seite weiterzuleiten.
`redirect_url`: bei weitergeleiteten Formularen auf eine bestimmte URL festgelegt, um einsendende Benutzer zu einer Seite weiterzuleiten.
|
| `disableInlineFormEditing` | Zeichenfolge | Legen Sie die `disableInlineFormEditing`-Eigenschaft auf `true` fest, um alle Steuerelemente für die Inline-Bearbeitung von Formularen im Formularmodul auszublenden. Dazu gehören die Formularfelder, der Text der Einsenden-Schaltfläche, die Datenschutz- und Einwilligungsoptionen sowie CAPTCHA. |
| `requiredPropertyTypes` | Array | Ein Array, das angibt, welche Formulare basierend auf den Eigenschaftentypen der Formularfelder ausgewählt werden können. Zu den Werten gehören: `"CONTACT"`, `"COMPANY"` und `"TICKET"`. |
| `supportAllWebinarTypes` | Boolesch | Bei Einstellung auf `true`, zeigt das Formular einen allgemeineren Webinar-Selektor an, der die Auswahl von Microsoft Teams-Webinaren zusätzlich zu GoToWebinar ermöglicht. Die Werte des Formularfeldes werden ebenfalls leicht geändert, um `webinar_id` und `webinar_source` anstatt `gotowebinar_webinar_key` zu speichern. Sie müssen diese allgemeineren Eigenschaftswerte neben `gotowebinar_webinar_key` an das [Formular-Tag](/docs/cms/reference/hubl/tags/standard-tags#form) zurückgeben. |
| `embedVersions` | Array | Ein Array, das angibt, welche Formulare basierend auf der Version des Formulars ausgewählt werden können. Zu den Werten gehören: `"v2"` für alte Formulare und `"v4"` für neue Editorformulare. |
## Farbverlauf
In diesem Feld können Content-Autor Farbverläufe erstellen und konfigurieren. Zurzeit unterstützen lineare Farbverläufe bis zu 5 Farbstopps. Farbverlaufsfelder haben eine `.css`-Eigenschaft, die CSS basierend auf dem Wert des Feldes zurückgibt. [Erfahren Sie mehr über die generierte CSS-Eigenschaft.](https://developers.hubspot.de/docs/cms/reference/fields/overview#generated-css)
Farbverlaufsfelder werden in [Modulen](https://developers.hubspot.de/docs/cms/start-building/building-blocks/modules/overview) unterstützt. Farbverlaufsfelder können nur als [Stilfelder](https://developers.hubspot.de/docs/cms/reference/fields/overview#style-fields) verwendet werden.
**JSON**
```json theme={null}
{
"name": "bg_gradient",
"label": "Background gradient",
"help_text": "Sets a gradient behind the content",
"required": false,
"type": "gradient",
"default": {
"colors": [
{
"color": {
"r": 0,
"g": 0,
"b": 0,
"a": 1
}
},
{
"color": {
"r": 255,
"g": 255,
"b": 255,
"a": 1
}
}
],
"side_or_corner": {
"verticalSide": "BOTTOM",
"horizontalSide": null
}
}
}
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `default` | Objekt | Objekt, das Richtungseinstellungen für einen Farbverlauf („side\_or\_corner“) und Farbstopps für den Farbverlauf als ein Array von Objekten enthält. |
**React**
```jsx theme={null}
import { ModuleFields, GradientField } from "@hubspot/cms-components/fields";
```
| Eigenschaft | Typ | Beschreibung |
| - | - | - |
| `default` | Objekt | Objekt, das Richtungseinstellungen für einen Farbverlauf („side\_or\_corner“) und Farbstopps für den Farbverlauf als ein Array von Objekten enthält. |
## HubDB-Zeile
HubDB-Zeilenfelder ermöglichen es einem Content-Autor, eine einzelne Zeile (oder mehrere Zeilen bei Verwendung von Wiederholfeldern) aus einer definierten Tabelle auszuwählen. Sie können dieses Feld dann verwenden, um benutzerdefinierte Listen, Tabellen, Ressourcen und mehr zu erstellen.
HubDB-Zeilenfelder werden in Modulen unterstützt. HubDB-Zeilenfelder sind in **Content Hub** *Professional* und *Enterprise* verfügbar.
**JSON**
```json theme={null}
{
"name": "hubdbrow_field",
"label": "HubDB row",
"required": false,
"locked": false,
"table_name_or_id": "3096859",
"columns_to_fetch": ["name", "price", "desc"],
"display_columns": ["name", "price", "desc"],
"display_format": "%0 - %1 :::: %2",
"type": "hubdbrow",
"default": {
"id": 4450468943
}
}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `table_name_or_id` | Zeichenfolge | Der Name oder die ID der HubDB-Tabelle. Hierbei handelt es sich um ein Pflichtfeld. | |
| `columns_to_fetch` | Array | Ein Array von Spaltennamen, die aus der Tabelle abgerufen werden sollen. Wenn es leer bleibt, werden alle Spalten der Tabelle zurückgegeben. | `[]` |
| `display_columns` | Array | Ein Array von Spaltennamen, die im Auswahl-Label verwendet werden sollen. Wenn dieses Feld leer bleibt, wird nur die erste Spalte der Tabelle zurückgegeben. | `[]` |
| `display_format` | Zeichenfolge | Das Format, in dem die Spaltendaten im HubDB-Zeilenselektor mithilfe des Prozentzeichens und der Zahl zur Bezeichnung einer Spalte angezeigt werden sollen. **Bsp:** *%0 (%1) würde als Column0Value (Column1Value) angezeigt* | `""` |
| `default` | Objekt | Objekt, das „id“ für die Einstellung der Standard-HubDB-Zeile enthält. | `{ "id" : null }` |
**React**
```jsx theme={null}
import { ModuleFields, HubDBRowField } from "@hubspot/cms-components/fields";
```
| Eigenschaft | Typ | Beschreibung | Standard |
| - | - | - | - |
| `tableNameOrId` | Zeichenfolge | Der Name oder die ID der HubDB-Tabelle. Hierbei handelt es sich um ein Pflichtfeld. | |
| `columnsToFetch` | Array | Ein Array von Spaltennamen, die aus der Tabelle abgerufen werden sollen. Wenn es leer bleibt, werden alle Spalten der Tabelle zurückgegeben. | `[]` |
| `displayColumns` | Array | Ein Array von Spaltennamen, die im Auswahl-Label verwendet werden sollen. Wenn dieses Feld leer bleibt, wird nur die erste Spalte der Tabelle zurückgegeben. | `[]` |
| `displayFormat` | Zeichenfolge | Das Format, in dem die Spaltendaten im HubDB-Zeilenselektor mithilfe des Prozentzeichens und der Zahl zur Bezeichnung einer Spalte angezeigt werden sollen. **Bsp.:** *%0 (%1) würde als Column0Value (Column1Value) angezeigt* | `""` |
| `default` | Objekt | Objekt, das „id“ für die Einstellung der Standard-HubDB-Zeile enthält. | `{ "id" : null }` |
## HubDB-Tabelle
HubDB-Tabellenfelder ermöglichen es einem Content-Autor, eine HubDB in seinem Account zu bestimmen. Damit können Sie dann mit dem [HubL-Formular-Tag](/docs/cms/reference/hubl/tags/standard-tags#form) ein Formular auf einer Seite rendern. Gibt die Tabellen-ID zurück, die Sie mit den [HubDB-HubL-Funktionen](/docs/cms/start-building/features/storage/hubdb#access-hubdb-data-using-hubl)) verwenden können.
HubDB-Tabellenfelder werden in Modulen unterstützt. HubDB-Tabellenfelder sind verfügbar in **CMS Hub** *Professional* und *Enterprise*.
**JSON**
```json theme={null}
{
"name": "recipe_table",
"label": "Recipe Table",
"required": false,
"locked": false,
"type": "hubdbtable",
"default": 2010782
}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `default` | Zeichenfolge | ID der HubDB-Tabelle | `null` |
**React**
```jsx theme={null}
import { ModuleFields, HubDBTableField } from "@hubspot/cms-components/fields";
```
| Eigenschaft | Typ | Beschreibung | Standard |
| - | - | - | - |
| `default` | Zeichenfolge | ID der HubDB-Tabelle | `null` |
## Symbol
Symbolfelder bieten eine Benutzeroberfläche für die Auswahl von Symbolen, die es Content-Autoren erleichtert, Symbole zu Ihren Modulen hinzuzufügen. Das Symbolfeld ist mit FontAwesome-Symbolen vorgeladen.
Symbolfelder werden in Modulen unterstützt. Symbolfelder können als [Stilfelder](https://developers.hubspot.de/docs/cms/reference/fields/overview#style-fields) verwendet werden.
**JSON**
```json theme={null}
{
"name": "icon_field",
"label": "Icon",
"required": false,
"locked": false,
"icon_set": "fontawesome-6.4.2",
"type": "icon",
"default": {
"name": "accessible-icon",
"unicode": "f368",
"type": "REGULAR"
}
}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `default` | Objekt | Symbolobjekt | |
| `icon_set` | Zeichenfolge | Der zu verwendende FontAwesome-Symbolsatz. Mögliche Werte sind:
`fontawesome-6.4.2`
`fontawesome-5.14.0`
`fontawesome-5.0.10`
| `fontawesome-5.0.10` |
**React**
```jsx theme={null}
import { ModuleFields, IconField } from "@hubspot/cms-components/fields";
```
| Eigenschaft | Typ | Beschreibung | Standard |
| - | - | - | - |
| `default` | Objekt | Symbolobjekt | |
| `iconSet` | Zeichenfolge | Der zu verwendende FontAwesome-Symbolsatz. Mögliche Werte sind:
`fontawesome-6.4.2`
`fontawesome-5.14.0`
`fontawesome-5.0.10`
| `fontawesome-5.0.10` |
## Bild
Bildfelder bieten eine einfache Benutzeroberfläche für Content-Autoren, um Bilder zu einem Modul oder Design hinzuzufügen. Bildfelder bieten eine Benutzeroberfläche zur Dateiauswahl, die Bilder vom Datei-Manager auflistet. Da Bilder auf unterschiedliche Weise verwendet und angezeigt werden können, können Entwickler die Größenoptionen, die dem Content-Autor in der Benutzeroberfläche zur Verfügung stehen, einschränken und ein [Lazy Loading von Bildern](/docs/cms/best-practices/testing-staging-performance/lazy-loading) ermöglichen.
Bildfelder werden in Modulen unterstützt. Bilder können als [Stilfelder](https://developers.hubspot.de/docs/cms/reference/fields/overview#style-fields) verwendet werden. Sie sollten Bildfelder nur dann als Stilfelder verwenden, wenn das Bild rein präsentativ ist, keine Bedeutung vermittelt und kein [Hintergrundbild](#background-image) ist. Dies entspricht den bewährten Verfahren für [Barrierefreiheit](/docs/cms/best-practices/improve-existing-sites/accessibility).
**JSON**
```json theme={null}
{
"name": "image_field",
"label": "Image",
"required": false,
"locked": false,
"responsive": true,
"resizable": true,
"show_loading": false,
"type": "image",
"default": {
"size_type": "exact",
"src": "",
"alt": "image-alt-text",
"loading": "lazy",
"width": 128,
"height": 128,
"max_width": 128,
"max_height": 128
}
}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `default` | Objekt | Legt Eigenschaften für Bildgröße, ALT-Text und mehr fest. Kann die folgenden Eigenschaften enthalten:
`size_type`: ob das Bild automatisch oder manuell verkleinert wird:
`"auto"`: HubSpot passt die Größe des Bildes automatisch anhand seiner ursprünglichen Maße an.
`"auto_custom_max"`: HubSpot passt die Größe des Bildes automatisch an die maximalen Maße an, die mit den Eigenschaften `"max_height"` und `"max_width"` festgelegt wurden.
`"exact":` HubSpot passt die Größe des Bildes an die mit den `"height"`- und `"width"`-Eigenschaften festgelegten Maße an.
`src`: die URL des Standardbildes. Muss ein absoluter Pfad zu einem Bild sein.
`alt`: der Standard-ALT-Text des Bildes.
`loading`: die [Lazy-Loading-Optionen](/docs/cms/best-practices/testing-staging-performance/lazy-loading) des Bildes. Kann als `"disabled"` (Standard), `"eager"` oder `"lazy"` festgelegt werden.
| `{ "size_type" : "auto", "src" : "", "alt" : null, "loading": "disabled" }` |
| `responsive` | Boolesch | Legt fest, ob sich das Bild responsiv (für Mobilgeräte optimiert) verhalten oder eine feste Höhe und Breite haben soll. | `true` |
| `show_loading` | Boolesch | Legt fest, ob die Steuerelemente für ein [Lazy Loading](/docs/cms/best-practices/testing-staging-performance/lazy-loading) des Bildes im Seiten-Editor angezeigt werden. | `false` |
**React**
```jsx theme={null}
import { ModuleFields, ImageField } from "@hubspot/cms-components/fields";
```
| Eigenschaft | Typ | Beschreibung | Standard |
| - | - | - | - |
| `default` | Objekt | Legt Eigenschaften für Bildgröße, ALT-Text und mehr fest. Kann die folgenden Eigenschaften enthalten:
`size_type`: ob das Bild automatisch oder manuell verkleinert wird:
`"auto"`: HubSpot passt die Größe des Bildes automatisch anhand seiner ursprünglichen Maße an.
`"auto_custom_max"`: HubSpot passt die Größe des Bildes automatisch an die maximalen Maße an, die mit den Eigenschaften `"max_height"` und `"max_width"` festgelegt wurden.
`"exact":` HubSpot passt die Größe des Bildes an die mit den `"height"`- und `"width"`-Eigenschaften festgelegten Maße an.
`src`: die URL des Standardbildes. Muss ein absoluter Pfad zu einem Bild sein.
`alt`: der Standard-ALT-Text des Bildes.
`loading`: die [Lazy-Loading-Optionen](/docs/cms/best-practices/testing-staging-performance/lazy-loading) des Bildes. Kann als `"disabled"` (Standard), `"eager"` oder `"lazy"` festgelegt werden.
| `{ "size_type" : "auto", "src" : "", "alt" : null, "loading": "disabled" }` |
| `responsive` | Boolesch | Legt fest, ob sich das Bild responsiv (für Mobilgeräte optimiert) verhalten oder eine feste Höhe und Breite haben soll. | `true` |
| `showLoading` | Boolesch | Legt fest, ob die Steuerelemente für ein [Lazy Loading](/docs/cms/best-practices/testing-staging-performance/lazy-loading) des Bildes im Seiten-Editor angezeigt werden. | `false` |
## Link
Link-Felder bieten eine einfache Benutzeroberfläche für Content-Autoren, um Links zu URLs und E-Mail-Adressen bereitzustellen. Für externe Links wählen Content-Autoren die Option „Extern“. Für E-Mail-Links „E-Mail-Adresse“. Für Inhalte, die in Content Hub gehostet werden, können sie schließlich „Content“ verwenden, das eine Liste aller Seiten und Blogbeiträge im Account anzeigt, „Datei“, das Dateiressourcen anzeigt, und „Blog“, das alle Blog-Beinträge im Account anzeigt. Link-Felder sind URL-Feldern sehr ähnlich, mit dem entscheidenden Unterschied, dass sie eine Benutzeroberfläche für „In neuem Fenster öffnen“ und „Als Nofollow-Link klassifizieren“ bieten. Wenn Sie nicht wollen, dass Content-Autoren diese Kontrolle haben, verwenden Sie das [URL-Feld](#url).
Link-Felder werden in Modulen unterstützt.
**JSON**
```json theme={null}
{
"name": "link_field",
"display_width": null,
"label": "Link",
"required": false,
"locked": false,
"supported_types": [
"EXTERNAL",
"CONTENT",
"FILE",
"EMAIL_ADDRESS",
"BLOG",
"CALL_TO_ACTION",
"PHONE_NUMBER",
"WHATSAPP_NUMBER",
"PAYMENT"
],
"show_advanced_rel_options": true,
"type": "link",
"default": {
"url": {
"content_id": null,
"type": "EXTERNAL",
"href": ""
},
"open_in_new_tab": false,
"no_follow": false
}
}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `default` | Objekt | Die Standard-URL und das Link-Öffnungsverhalten. Dieses Objekt umfasst:
Ein `url`-Objekt, das Folgendes enthält:
`content_id`: Wenn Sie zu HubSpot-Content verlinken, die ID dieses Inhalts. Bei Verlinkung zu externem Content auf `null` festgelegt.
`type`: der Typ der URL. Im Folgenden erfahren Sie mehr über unterstützte Typen.
`href`: die URL des Inhalts. Wenn Sie zu HubSpot verlinken, legen Sie dies auf `null` fest und verwenden stattdessen `content_id`.
| `{ "url" : { "content_id" : null, "type" : "EXTERNAL", "href" : "" }, "open_in_new_tab" : false, "no_follow" : false, "sponsored" : false, "user_generated_content" : false }` |
| `supported_types` | Array | Die Typen von Links, die Content-Autoren auswählen können. Entfernen Sie Typen aus der Liste, auf Content-Autoren keinen Zugriff haben sollen. Gültige Werte sind:
`EXTERNAL`
`CONTENT`
`FILE`
`EMAIL_ADDRESS`
`BLOG`
`CALL_TO_ACTION`
`PHONE_NUMBER`
`WHATSAPP_NUMBER`
`PAYMENT`
| `[ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG", "CALL_TO_ACTION", "PHONE_NUMBER", "WHATSAPP_NUMBER", "PAYMENT" ]` |
| `show_advanced_rel_options` | Boolesch | Standardmäßig können Content-Autoren nur die Option `no_follow` auswählen. Bei Festlegung auf `true` können Content-Autoren auch Folgendes auswählen:
`sponsored`: ein gesponserter Link, z. B. ein bezahlter Anzeigenlink.
`user_generated_content`: Inhalte, die von Benutzern generiert werden, z. B. Foren.
Erfahren Sie mehr über [Link-Attribute](https://moz.com/blog/nofollow-sponsored-ugc). | `false` |
**React**
```jsx theme={null}
import { ModuleFields, LinkField } from "@hubspot/cms-components/fields";
```
| Eigenschaft | Typ | Beschreibung | Standard |
| - | - | - | - |
| `default` | Objekt | Die Standard-URL und das Link-Öffnungsverhalten. Dieses Objekt umfasst:
Ein `url`-Objekt, das Folgendes enthält:
`content_id`: Wenn Sie zu HubSpot-Content verlinken, die ID dieses Inhalts. Bei Verlinkung zu externem Content auf `null` festgelegt.
`type`: der Typ der URL. Im Folgenden erfahren Sie mehr über unterstützte Typen.
`href`: die URL des Inhalts. Wenn Sie zu HubSpot verlinken, legen Sie dies auf `null` fest und verwenden stattdessen `content_id`.
| `{ "url" : { "content_id" : null, "type" : "EXTERNAL", "href" : "" }, "open_in_new_tab" : false, "no_follow" : false, "sponsored" : false, "user_generated_content" : false }` |
| `supportedTypes` | Array | Die Typen von Links, die Content-Autoren auswählen können. Entfernen Sie Typen aus der Liste, auf Content-Autoren keinen Zugriff haben sollen. Gültige Werte sind:
`EXTERNAL`
`CONTENT`
`FILE`
`EMAIL_ADDRESS`
`BLOG`
`CALL_TO_ACTION`
`PHONE_NUMBER`
`WHATSAPP_NUMBER`
`PAYMENT`
| `[ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG", "CALL_TO_ACTION", "PHONE_NUMBER", "WHATSAPP_NUMBER", "PAYMENT" ]` |
| `showAdvancedRelOptions` | Boolesch | Standardmäßig können Content-Autoren nur die Option `no_follow` auswählen. Bei Festlegung auf `true` können Content-Autoren auch Folgendes auswählen:
`sponsored`: ein gesponserter Link, z. B. ein bezahlter Anzeigenlink.
`user_generated_content`: Inhalte, die von Benutzern generiert werden, z. B. Foren.
Erfahren Sie mehr über [Link-Attribute](https://moz.com/blog/nofollow-sponsored-ugc). | `false` |
## Logo
Mit Logofeldern können Content-Autoren Logobilder angeben, die auf einer Seite verwendet werden sollen, wobei als Standard das Logo der Domain verwendet wird. Dies ist nützlich für Kopf- und Fußzeilen von Websites, die das Unternehmenslogo enthalten können. Bei Logofeldern ist ebenfalls [Lazy Loading](/docs/cms/best-practices/testing-staging-performance/lazy-loading) möglich.
Logofelder werden in Modulen unterstützt.
**JSON**
```json theme={null}
{
"name": "logo",
"label": "Logo",
"required": false,
"locked": false,
"type": "logo",
"show_loading": true,
"default": {
"override_inherited_src": false,
"src": null,
"alt": null,
"loading": "lazy"
}
}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `show_loading` | Zeichenfolge | Bestimmt, ob die Steuerelemente für die Auswahl für [Lazy Loading](/docs/cms/best-practices/testing-staging-performance/lazy-loading) des Bildes im Seiten-Editor angezeigt werden. | `false` |
| `default` | Objekt | Logoobjekt. Wenn `show_loading` auf `true` festgelegt ist, können Sie eine `loading`-Eigenschaft hinzufügen, um die [Lazy-Loading-Optionen](/docs/cms/best-practices/testing-staging-performance/lazy-loading) des Bildes festzulegen. Die Optionen umfassen:
`"disabled"` (Standard)
`"eager"`
`"lazy"`
| `{ override_inherited_src: false, src: "", alt: null, width: null, height: null, loading: "disabled" suppress_company_name: false }` |
**React**
```jsx theme={null}
import { ModuleFields, LogoField } from "@hubspot/cms-components/fields";
```
| Eigenschaft | Typ | Beschreibung | Standard |
| - | - | - | - |
| `showLoading` | Zeichenfolge | Bestimmt, ob die Steuerelemente für die Auswahl für [Lazy Loading](/docs/cms/best-practices/testing-staging-performance/lazy-loading) des Bildes im Seiten-Editor angezeigt werden. | `false` |
| `default` | Objekt | Logoobjekt. Wenn `show_loading` auf `true` festgelegt ist, können Sie eine `loading`-Eigenschaft hinzufügen, um die [Lazy-Loading-Optionen](/docs/cms/best-practices/testing-staging-performance/lazy-loading) des Bildes festzulegen. Die Optionen umfassen:
`"disabled"` (Standard)
`"eager"`
`"lazy"`
| `{ override_inherited_src: false, src: "", alt: null, width: null, height: null, loading: "disabled" suppress_company_name: false }` |
## Menü
Menüfelder bieten eine einfache Benutzeroberfläche für Content-Autoren zum Erstellen, Bearbeiten und Auswählen eines [Navigationsmenüs](/docs/cms/start-building/building-blocks/modules/menus-and-navigation), das auf anderen Seiten wiederverwendet werden kann. Dieses Feld eignet sich hervorragend für Menüs, die auf mehreren Seiten verwendet werden, z. B. die Hauptnavigation, die Fußzeilennavigation und andere [globale Inhalte](/docs/cms/start-building/building-blocks/global-content). Verwenden Sie dieses Feld in Verbindung mit dem [menu-Tag](/docs/cms/reference/hubl/tags/standard-tags#menu) oder der [menu()](/docs/cms/reference/hubl/functions#menu)-Funktion, um ein Menü innerhalb Ihres Moduls zu rendern.
Verwenden Sie für Menüs, deren Wiederverwendung auf anderen Seiten nicht sinnvoll ist, z. B. ein Inhaltsverzeichnis, das [einfache Menüfeld](#simple-menu).
Menüfelder werden in Modulen unterstützt.
**JSON**
```json theme={null}
{
"name": "menu",
"label": "Menu",
"required": false,
"locked": false,
"type": "menu",
"default": 12345678911
}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `default` | Ganzzahl | Die [Menü-ID](/docs/cms/start-building/building-blocks/modules/menus-and-navigation#get-your-menu-id) für das Menü. Der Standardwert von `null` wird im Standardmenü unter der Navigation angezeigt. | `null` |
**React**
```jsx theme={null}
import { ModuleFields, MenuField } from "@hubspot/cms-components/fields";
```
| Eigenschaft | Typ | Beschreibung | Standard |
| - | - | - | - |
| `default` | Ganzzahl | Die [Menü-ID](/docs/cms/start-building/building-blocks/modules/menus-and-navigation#get-your-menu-id) für das Menü. Der Standardwert von `null` wird im Standardmenü unter der Navigation angezeigt. | `null` |
## Zahl
Zahlenfelder bieten eine einfache Benutzeroberfläche für Content-Autoren, um numerische Werte und Optionen einzugeben oder anzupassen. Dies kann für die Erstellung von prozentualen Artikeln oder für alles, wo Zahlen für die Eingabe benötigt werden, verwendet werden.
Zahlenfelder werden in Modulen unterstützt. Zahlenfelder können als [Stilfelder](https://developers.hubspot.de/docs/cms/reference/fields/overview#style-fields) verwendet werden.
**JSON**
```json theme={null}
{
"name": "number_field",
"label": "Number",
"required": false,
"locked": false,
"display": "slider",
"min": 1,
"max": 10,
"step": 1,
"type": "number",
"prefix": "",
"suffix": "",
"default": null,
"placeholder": "50"
}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `default` | Zahl | Eine Standardzahl, die verwendet werden soll | `null` |
| `prefix` | Zeichenfolge | Wird dem Zahlenfeld als Präfix hinzugefügt. | |
| `suffix` | Zeichenfolge | Wird dem Zahlenfeld als Suffix hinzugefügt. | |
| `placeholder` | Zeichenfolge | Fügt dem Feld einen Platzhalterwert hinzu. | |
**React**
```jsx theme={null}
import { ModuleFields, NumberField } from "@hubspot/cms-components/fields";
```
| Eigenschaft | Typ | Beschreibung | Standard |
| - | - | - | - |
| `default` | Zahl | Eine Standardzahl, die verwendet werden soll | `null` |
| `prefix` | Zeichenfolge | Wird dem Zahlenfeld als Präfix hinzugefügt. | |
| `suffix` | Zeichenfolge | Wird dem Zahlenfeld als Suffix hinzugefügt. | |
| `placeholder` | Zeichenfolge | Fügt dem Feld einen Platzhalterwert hinzu. | |
> [!NOTE]
>
> Suffix- und Präfix-Parameter dienen zur Anzeige im Content-Editor und haben keinen Einfluss auf den numerischen Wert des Felds.
## Seite
Seitenfelder bieten eine Benutzeroberfläche für Content-Autoren zur Auswahl von Website-Seiten und Landingpages.
Der von einem Seitenfeld zurückgegebene Wert ist die Seiten-ID der ausgewählten Seite. In Verbindung mit der [content\_by\_id](/docs/cms/reference/hubl/functions#content-by-id)- oder [content\_by\_ids](/docs/cms/reference/hubl/functions#content-by-ids)-Funktion können Sie die Daten der ausgewählten Seiten auf der aktuellen Seite verwenden.
Seitenfelder werden in Modulen unterstützt.
**JSON**
```json theme={null}
{
"name": "page_field",
"label": "Page",
"help_text": "Pulls data from the selected page.",
"required": false,
"locked": false,
"placeholder": "Page to pull from",
"type": "page",
"default": null
}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `default` | Ganzzahl | Eine Standard-Seiten-ID, die ausgewählt werden soll. | `null` |
**React**
```jsx theme={null}
import { ModuleFields, PageField } from "@hubspot/cms-components/fields";
```
| Eigenschaft | Typ | Beschreibung | Standard |
| - | - | - | - |
| `default` | Ganzzahl | Eine Standard-Seiten-ID, die ausgewählt werden soll. | `null` |
## Rich-Text
Rich-Text-Felder bieten Content-Autoren eine WYSIWYG-Text-Editor-Umgebung. Wenn der Wert eines Rich-Text-Feldes gedruckt wird, wird er als HTML gedruckt. Wenn Sie nicht möchten, dass Content-Autoren Formatierungsmöglichkeiten haben, verwenden Sie [Textfelder](#text).
Rich-Text-Felder werden in Modulen unterstützt.
**JSON**
```json theme={null}
{
"name": "description",
"label": "Description",
"required": false,
"locked": false,
"type": "richtext",
"default": null
}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `default` | Zeichenfolge | Zeichenfolge des anzuzeigenden Inhalts unterstützt HTML. Hinweis: Sie können nicht die `get_asset_url`-[Funktion](/docs/cms/reference/hubl/functions#get-asset-url) innerhalb dieser Standardeigenschaft verwenden. | `""` |
| `enabled_features` | Array | Eine Reihe von Elementen, mit denen Sie die [Symbolleiste des Rich-Text-Editors konfigurieren](/docs/cms/reference/fields/rich-text-editor) und festlegen können, welche Optionen für Content-Editoren verfügbar sind. | |
**React**
```jsx theme={null}
import { ModuleFields, RichTextField } from "@hubspot/cms-components/fields";
```
| Eigenschaft | Typ | Beschreibung | Standard |
| - | - | - | - |
| `default` | Zeichenfolge | Zeichenfolge des anzuzeigenden Inhalts unterstützt HTML. Hinweis: Sie können nicht die `get_asset_url`-[Funktion](/docs/cms/reference/hubl/functions#get-asset-url) innerhalb dieser Standardeigenschaft verwenden. | `""` |
| `enabledFeatures` | Array | Eine Reihe von Elementen, mit denen Sie die [Symbolleiste des Rich-Text-Editors konfigurieren](/docs/cms/reference/fields/rich-text-editor) und festlegen können, welche Optionen für Content-Editoren verfügbar sind. | |
## Einfaches Menü
Einfache Menüfelder bieten eine einfache Benutzeroberfläche für Content-Autoren, um ein [Navigationsmenü](/docs/cms/start-building/building-blocks/modules/menus-and-navigation) zu erstellen, das nicht auf anderen Seiten wiederverwendet werden kann. Für Menüs, die wiederverwendbar sein sollen, verwenden Sie das [Menüfeld](#menu). Dies ist z. B. für ein Inhaltsverzeichnis erforderlich, das auf sehr langen Seiten auf Überschriften verlinkt, oder für eine Liste von Links zu Inhalten, die nur auf der aktuellen Seite sinnvoll sind.
Einfache Menüfelder werden in Modulen unterstützt.
**JSON**
```json theme={null}
{
"name": "toc_menu",
"label": "Table of Contents",
"required": false,
"locked": false,
"type": "simplemenu",
"default": [
{
"isPublished": false,
"pageLinkId": null,
"pageLinkName": null,
"isDeleted": null,
"categoryId": null,
"subCategory": null,
"contentType": null,
"state": null,
"linkLabel": "Why is product marketing important?",
"linkUrl": null,
"linkParams": null,
"linkTarget": null,
"type": "NO_LINK",
"children": [
{
"isPublished": false,
"pageLinkId": null,
"pageLinkName": null,
"isDeleted": null,
"categoryId": null,
"subCategory": null,
"contentType": null,
"state": null,
"linkLabel": "Product Marketing Responsibilities",
"linkUrl": "#product-marketing-responsibilities",
"linkParams": null,
"linkTarget": null,
"type": "URL_LINK",
"children": []
},
{
"isPublished": false,
"pageLinkId": null,
"pageLinkName": null,
"isDeleted": null,
"categoryId": null,
"subCategory": null,
"contentType": null,
"state": null,
"linkLabel": "1. Identify the buyer personas and target audience for your product.",
"linkUrl": "#step1",
"linkParams": null,
"linkTarget": null,
"type": "URL_LINK",
"children": []
},
{
"isPublished": false,
"pageLinkId": null,
"pageLinkName": null,
"isDeleted": null,
"categoryId": null,
"subCategory": null,
"contentType": null,
"state": null,
"linkLabel": "2. Successfully create, manage and carry out your product marketing strategy.",
"linkUrl": "#step2",
"linkParams": null,
"linkTarget": null,
"type": "URL_LINK",
"children": []
}
]
},
{
"isPublished": false,
"pageLinkId": null,
"pageLinkName": null,
"isDeleted": null,
"categoryId": null,
"subCategory": null,
"contentType": null,
"state": null,
"linkLabel": "How HubSpot can help",
"linkUrl": "https://hubspot.com",
"linkParams": null,
"linkTarget": null,
"type": "URL_LINK",
"children": []
}
]
}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `default` | Array von Objekten | JSON-Struktur für ein Menü und untergeordnete Menüebenen. | `[]` |
**React**
```jsx theme={null}
import { ModuleFields, SimpleMenuField } from "@hubspot/cms-components/fields";
```
| Eigenschaft | Typ | Beschreibung | Standard |
| - | - | - | - |
| `default` | Array von Objekten | JSON-Struktur für ein Menü und untergeordnete Menüebenen. | `[]` |
## Abstand
Dieses Feld bietet eine Benutzerschnittstelle (UI) für Content-Autoren zum Festlegen von Auffüllungen und Rändern. Abstandsfelder haben eine `.css`-Eigenschaft, die CSS basierend auf dem Wert des Feldes zurückgibt. [Erfahren Sie mehr über die generierte CSS-Eigenschaft.](https://developers.hubspot.de/docs/cms/reference/fields/overview#generated-css)
Abstandsfelder werden in [Modulen](https://developers.hubspot.de/docs/cms/start-building/building-blocks/modules/overview) unterstützt. Abstandsfelder können nur als [Stilfelder](https://developers.hubspot.de/docs/cms/reference/fields/overview#style-fields) verwendet werden.
**JSON**
```json theme={null}
{
"name": "img_spacing",
"label": "Spacing around image",
"required": false,
"type": "spacing",
"limits": {
"padding": {
"top": {
"max": 50,
"min": 25,
"units": ["px", "pt", "em"]
},
"left": {
"max": 50,
"units": ["px", "pt", "em"]
},
"bottom": {
"max": 50,
"units": ["px", "pt", "em"]
}
},
"margin": {
"top": {
"max": 50,
"min": 25,
"units": ["px", "pt", "em"]
},
"bottom": {
"max": 25,
"units": ["Q", "rem", "em"]
}
}
},
"default": {
"padding": {
"top": {
"value": 57,
"units": "px"
},
"bottom": {
"value": 57,
"units": "px"
},
"left": {
"value": 57,
"units": "px"
},
"right": {
"value": 57,
"units": "px"
}
},
"margin": {
"top": {
"value": 20,
"units": "px"
},
"bottom": {
"value": 20,
"units": "px"
}
}
}
}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `default` | Objekt | Legt die Standardabstandswerte fest. Enthält `padding`- und `margin`-Objekte:
`padding`: kann `top`-, `right`-, `bottom`- und `left`-Objekte enthalten
`margin`: kann `top`- und `bottom`-Objekte enthalten
Verwenden Sie `units`, um die Einheiten festzulegen, die ein Content-Autor in HubSpot verwenden kann. Erfahren Sie im Folgenden mehr über Einheiten. | `{}` |
| `limits` | Objekt | Legt die Richtlinien für den `min`- und `max`-Wert des Abstands fest. Enthält `padding`- und `margin`-Objekte:
`padding`: kann `top`-, `right`-, `bottom`- und `left`-Objekte enthalten
`margin`: kann `top`- und `bottom`-Objekte enthalten
Verwenden Sie `units`, um die Einheiten festzulegen, die ein Content-Autor in HubSpot verwenden kann. Erfahren Sie im Folgenden mehr über Einheiten. | |
**React**
```jsx theme={null}
import { ModuleFields, SpacingField } from "@hubspot/cms-components/fields";
```
| Eigenschaft | Typ | Beschreibung | Standard |
| - | - | - | - |
| `default` | Objekt | Legt die Standardabstandswerte fest. Enthält `padding`- und `margin`-Objekte:
`padding`: kann `top`-, `right`-, `bottom`- und `left`-Objekte enthalten
`margin`: kann `top`- und `bottom`-Objekte enthalten
Verwenden Sie `units`, um die Einheiten festzulegen, die ein Content-Autor in HubSpot verwenden kann. Erfahren Sie im Folgenden mehr über Einheiten. | `{}` |
| `limits` | Objekt | Legt die Richtlinien für den `min`- und `max`-Wert des Abstands fest. Enthält `padding`- und `margin`-Objekte:
`padding`: kann `top`-, `right`-, `bottom`- und `left`-Objekte enthalten
`margin`: kann `top`- und `bottom`-Objekte enthalten
Verwenden Sie `units`, um die Einheiten festzulegen, die ein Content-Autor in HubSpot verwenden kann. Erfahren Sie im Folgenden mehr über Einheiten. | |
Bei der Verwendung des Feldes „Abstand“ ist Folgendes zu beachten:
* Sie müssen eine `units`-Liste einschließen, wenn Sie ein `min` oder `max` festlegen.
* Die `units`-Eigenschaft unterstützt die folgenden Einheitentypen: `%`, `ch`, `em`, `ex`, `in`, `lh`, `pc`, `pt`, `px`, `Q`, `rem`, `vh`, `vmax`, `vmin` und `vw`.
* Wenn ein Content-Autor alle Auffüllungen zusammen bearbeitet, verwendet HubSpot den höchsten `min`-Wert und den niedrigsten `max`-Wert. Darüber hinaus stehen Content-Autoren nur die von allen Seiten gemeinsam genutzten Einheiten zur Verfügung.
## Tag
Tag-Felder bieten eine Blog-Tag-Auswahl für Content-Autoren. Diese Tag-Auswahl liefert eine Blog-Tag-ID, die dann in Blog-Tag-bezogenen Funktionen wie [blog\_tag\_url](/docs/cms/reference/hubl/functions#blog-tag-url) und [blog\_recent\_tag\_posts](/docs/cms/reference/hubl/functions#blog-recent-tag-posts) verwendet werden kann.
Tag-Felder werden in Modulen unterstützt.
**JSON**
```json theme={null}
{
"id": "c3395cd3-8e60-7e47-2f1b-b7ccf4d669c9",
"name": "blog_tag",
"label": "Blog Tag",
"required": false,
"locked": false,
"tag_value": "SLUG",
"type": "tag",
"default": null
}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `default` | Zeichenfolge | Die ID des Tags. | `null` |
| `tag_value` | Zeichenfolge | Der Ausgabewert. Kann eines der folgenden sein:
`ALL`: ein Objekt, das den Namen, die eindeutige ID und den URL-Slug des Tags enthält.
`ID`: die eindeutige ID des Tags.`NAME`
: der Name des Tags.
`SLUG`: der URL-Slug des Tags.
| `SLUG` |
**React**
```jsx theme={null}
import { ModuleFields, TagField } from "@hubspot/cms-components/fields";
```
| Eigenschaft | Typ | Beschreibung | Standard |
| - | - | - | - |
| `default` | Zeichenfolge | Die ID des Tags. | `null` |
| `tagValue` | Zeichenfolge | Der Ausgabewert. Kann eines der folgenden sein:
`ALL`: ein Objekt, das den Namen, die eindeutige ID und den URL-Slug des Tags enthält.
`ID`: die eindeutige ID des Tags.`NAME`
: der Name des Tags.
`SLUG`: der URL-Slug des Tags.
| `SLUG` |
## Text
Textfelder bieten Content-Autoren eine einfache Textbearbeitung ohne Rich-Text-Funktionen. Textfelder sind zunächst einzeilig, können aber zu Textbereichen erweitert werden, die mehrere Zeilen enthalten. Verwenden Sie diese, wenn Sie nicht wollen, dass Content-Autoren die Kontrolle über die Formatierung haben. Wenn Sie Steuerelemente für die Formatierung bereitstellen möchten, verwenden Sie [Rich-Text-Felder](#rich-text).
Textfelder werden in Modulen unterstützt.
**JSON**
```json theme={null}
{
"name": "product_name",
"label": "Product Name",
"required": false,
"locked": false,
"validation_regex": "",
"allow_new_line": false,
"show_emoji_picker": false,
"type": "text",
"default": ""
}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `default` | Zeichenfolge | Textzeichenfolge. | `""` |
**React**
```jsx theme={null}
import { ModuleFields, TextField } from "@hubspot/cms-components/fields";
```
| Eigenschaft | Typ | Beschreibung | Standard |
| - | - | - | - |
| `default` | Zeichenfolge | Textzeichenfolge. | `""` |
## Textausrichtung
Dieses Feld bietet Content-Autoren eine Möglichkeit, Textinhalte innerhalb eines Containers auszurichten. Dies sollte nicht zum Ausrichten anderer Elemente verwendet werden, da es dafür einen [eigenen Feldtyp](#alignment) gibt.
Textausrichtungsfelder werden in [Modulen](https://developers.hubspot.de/docs/cms/start-building/building-blocks/modules/overview) unterstützt. Textausrichtungsfelder können nur als [Stilfelder](https://developers.hubspot.de/docs/cms/reference/fields/overview#style-fields) verwendet werden.
**JSON**
```json theme={null}
{
"name": "heading_align",
"label": "Heading alignment",
"required": false,
"type": "textalignment",
"default": {
"text_align": "LEFT"
}
}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `default` | Objekt | Objekt, das `horizontal_align` und `vertical_align` enthält. | |
| `alignment_direction` | Zeichenfolge | Legt fest, ob nur horizontale, nur vertikale oder beide Ausrichtungssteuerelemente angezeigt werden sollen. Kann Folgendes sein:
`HORIZONTAL`
`VERTICAL`
`BOTH`
| `BOTH` |
**React**
```jsx theme={null}
import { ModuleFields, TextAlignmentField } from "@hubspot/cms-components/fields";
```
| Eigenschaft | Typ | Beschreibung | Standard |
| - | - | - | - |
| `default` | Objekt | Objekt, das `horizontal_align` und `vertical_align` enthält. | |
| `alignmentDirection` | Zeichenfolge | Legt fest, ob nur horizontale, nur vertikale oder beide Ausrichtungssteuerelemente angezeigt werden sollen. Kann Folgendes sein:
`HORIZONTAL`
`VERTICAL`
`BOTH`
| `BOTH` |
## URL
URL-Felder bieten eine ähnliche Erfahrung wie Link-Felder. Bereitstellung einer Benutzeroberfläche für Content-Autoren zum Hinzufügen von Links. URL-Felder zeigen jedoch weder eine Benutzeroberfläche für das Öffnen in einem neuen Fenster an, noch klassifizieren Sie Links als Nofollow-Links. Verwenden Sie dieses Feld, wenn Sie als Entwickler die Werte dafür vorgeben möchten. Wenn Sie möchten, dass der Benutzer die Kontrolle hat, verwenden Sie stattdessen[ Linkfelder](#link).
URL-Felder werden in Modulen unterstützt.
**JSON**
```json theme={null}
{
"name": "url",
"label": "URL",
"required": false,
"locked": false,
"supported_types": ["EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG", "PHONE_NUMBER", "WHATSAPP_NUMBER"],
"type": "url",
"default": {
"content_id": null,
"href": "http://example.com",
"type": "EXTERNAL"
}
}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `default` | Objekt | URL-Objekt mit Typ, href-Attribut und Inhalts-ID (wenn der Inhalt eine Seite oder ein Beitrag auf HubSpot ist) | `{ "content_id" : null, "href" : "", "type" : "EXTERNAL" }` |
| `supported_types` | Array | Liste der Typen von Links, die Content-Autoren in diesem Feld auswählen können. Entfernen Sie Typen aus der Liste, auf Content-Autoren keinen Zugriff haben sollen. Zu den Typen gehören:
`EXTERNAL`: rendert ein Texteingabefeld für eine externe URL.
`CONTENT`: rendert ein Dropdown-Menü, das die Website und Landingpages des Accounts enthält.
`FILE`: rendert eine Dateiauswahl.
`EMAIL_ADDRESS`: rendert ein Texteingabefeld für eine E-Mail-Adresse.
`BLOG`: rendert ein Dropdown-Menü mit den Blog-Listing-Seiten des Accounts.
`PHONE_NUMBER`: rendert ein Texteingabefeld für eine Telefonnummer. Die Nummer muss mit `+` beginnen und 7 bis 15 Ziffern enthalten (ohne Ländercode).
`WHATSAPP_NUMBER`: rendert ein Dropdown-Menü mit den [verknüpften WhatsApp-Nummern](https://knowledge.hubspot.com/de/inbox/connect-whatsapp-to-the-conversations-inbox) des Accounts.
| `[ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG" ]` |
**React**
```jsx theme={null}
import { ModuleFields, UrlField } from "@hubspot/cms-components/fields";
```
| Eigenschaft | Typ | Beschreibung | Standard |
| - | - | - | - |
| `default` | Objekt | URL-Objekt mit Typ, href-Attribut und Inhalts-ID (wenn der Inhalt eine Seite oder ein Beitrag auf HubSpot ist) | `{ "content_id" : null, "href" : "", "type" : "EXTERNAL" }` |
| `supportedTypes` | Array | Liste der Typen von Links, die Content-Autoren in diesem Feld auswählen können. Entfernen Sie Typen aus der Liste, auf Content-Autoren keinen Zugriff haben sollen. Zu den Typen gehören:
`EXTERNAL`: rendert ein Texteingabefeld für eine externe URL.
`CONTENT`: rendert ein Dropdown-Menü, das die Website und Landingpages des Accounts enthält.
`FILE`: rendert eine Dateiauswahl.
`EMAIL_ADDRESS`: rendert ein Texteingabefeld für eine E-Mail-Adresse.
`BLOG`: rendert ein Dropdown-Menü mit den Blog-Listing-Seiten des Accounts.
`PHONE_NUMBER`: rendert ein Texteingabefeld für eine Telefonnummer. Die Nummer muss mit `+` beginnen und 7 bis 15 Ziffern enthalten (ohne Ländercode).
`WHATSAPP_NUMBER`: rendert ein Dropdown-Menü mit den [verknüpften WhatsApp-Nummern](https://knowledge.hubspot.com/de/inbox/connect-whatsapp-to-the-conversations-inbox) des Accounts.
| `[ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG" ]` |
Video##
Videofelder bieten Content-Editoren die Möglichkeit, HubSpot Video zu ihrem Modulinhalt hinzuzufügen, ohne Rich-Text-Felder verwenden zu müssen.
**JSON**
```json theme={null}
{
"id": "ca4a319e-5b58-422e-47ac-49ce1b51b507",
"name": "videoplayer_field",
"label": "Video",
"required": false,
"locked": false,
"type": "videoplayer",
"show_advanced_options": false,
"default": {
"player_id": 32173842991,
"height": 1224,
"width": 1872,
"conversion_asset": {
"type": "CTA",
"id": "c3e4fa03-2c69-461d-b9af-22b2fde86bc7",
"position": "POST"
},
"loop_video": false,
"mute_by_default": false,
"autoplay": false,
"hide_control": false
}
}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `default` | Objekt | Videoobjekt mit Einstellungen für `player_id`, `height`, `width`, `size_type`, `conversion_asset`, `loop_video`, `mute_by_default`, `autoplay` und `hide_control`. | `[]` |
| `show_advanced_options` | Boolesch | Gibt an, ob Content-Autoren erweiterte Standardoptionen sehen können. | `false` |
**React**
```jsx theme={null}
import { ModuleFields, VideoField } from "@hubspot/cms-components/fields";
```
| Eigenschaft | Typ | Beschreibung | Standard |
| - | - | - | - |
| `default` | Objekt | Videoobjekt mit Einstellungen für `player_id`, `height`, `width`, `size_type`, `conversion_asset`, `loop_video`, `mute_by_default`, `autoplay` und `hide_control`. | `[]` |
| `showAdvancedOptions` | Boolesch | Gibt an, ob Content-Autoren erweiterte Standardoptionen sehen können. | `false` |
### conversion\_asset-Objektparameter
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `type` | Zeichenfolge | Akzeptiert entweder `"FORM"`, `"CTA"` oder `""` | `""` |
| `id` | Zeichenfolge | Die ID des Formulars oder des CTA-Typs | `""` |
| `position` | Zeichenfolge | Ob das Konversionselement vor dem Beginn oder nach dem Ende des Videos angezeigt werden soll. Akzeptiert entweder „PRE“ oder „POST“. | `""` |
```
```
# Überblick über Modul- und Designfelder
Source: https://developers.hubspot.de/docs/cms/reference/fields/overview
HubSpot-Module und -Designs unterstützen das Anpassen durch Content-Autoren über Felder. Entwickler erstellen und organisieren Felder über eine fields.json-Datei.
Innerhalb von [Modulen](https://developers.hubspot.de/docs/cms/start-building/building-blocks/modules/overview) und [Designs](/docs/cms/start-building/building-blocks/overview) werden Felder verwendet, um Content-Autoren zu ermöglichen, die Formatierung von Modulen und Designs mit Stilen und die Funktionalität auf Ihrer Website zu steuern. Beim Entwickeln eines Moduls oder Designs fügen Sie Felder in eine `fields.json`-Datei ein, die dann in das Design und die Content-Editoren übersetzt wird.
Im Folgenden erfahren Sie mehr darüber, wie Sie Optionen für Modul- und Designfelder erstellen und verwalten. Weitere Informationen zu bestimmten Feldtypen finden Sie im [Referenzleitfaden für Modul- und Feldtypen](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields).
## Erstellen und Verwalten von Feldern
Sie können der `fields.json`-Datei eines [Moduls](https://developers.hubspot.de/docs/cms/start-building/building-blocks/modules/overview) lokal über das [HubSpot-CLI](/docs/developer-tooling/local-development/hubspot-cli/reference) und im In-App-Modul-Editor Felder hinzufügen. Um Felder zu einem [Design](/docs/cms/start-building/building-blocks/overview) hinzuzufügen, müssen Sie die `fields.json`-Datei des Designs lokal über das CLI aktualisieren.
### HubSpot-CLI
Beim [lokalen Erstellen](/docs/developer-tooling/local-development/hubspot-cli/install-the-cli) können die Felder von Modulen und Designs über eine `fields.json`-Datei im Ordner des Moduls oder Designs bearbeitet werden. Bei Modulen wird diese Datei automatisch erstellt, wenn der [`hs create module`](/docs/developer-tooling/local-development/hubspot-cli/reference)-Befehl verwendet wird. Alle im Modul-Editor verfügbaren Feldoptionen sind als Eigenschaften verfügbar, die Sie in der `fields.json`-Datei hinzufügen oder bearbeiten können. Dazu gehören Wiederholfelder, Wiederholgruppen und Bedingungen. Einer der Vorteile der lokalen Bearbeitung ist, dass es einfacher ist, [Ihre Module in Versionskontrollsysteme wie Git einzubinden](/docs/cms/start-building/introduction/developer-environment/github-integration).
### Modul-Editor
Der [Design-Manager](/docs/cms/start-building/introduction/developer-environment/design-manager) verfügt über eine integrierte Modul-Editor-Benutzeroberfläche, mit der Sie Modulfelder [erstellen](https://knowledge.hubspot.com/de/design-manager/create-and-edit-modules), gruppieren und [bearbeiten](https://knowledge.hubspot.com/de/design-manager/create-and-edit-modules) können. Der Modul-Editor enthält eine Modulvorschau, mit der Sie sehen können, wie das Modul alleine aussieht, und mit der Sie Ihre Felder testen können. Da Module immer in einem Kontext angezeigt werden, sollten Sie sie immer in einer Vorlage testen, die Sie verwenden möchten, um zu sehen, welche sich Stile auf Vorlagenebene möglicherweise auf sie auswirken. Beachten Sie, dass ein Modul, das sich in einem gesperrten Ordner befindet, auf diese Weise nicht bearbeitet werden kann.
> [!WARNING]
>
> **Hinweis:** Wenn Sie hauptsächlich lokal arbeiten, den Modul-Editor jedoch zum Konfigurieren von Feldern verwenden möchten, müssen Sie sicherstellen, dass Sie Ihre Änderungen [abrufen](/docs/developer-tooling/local-development/hubspot-cli/reference#fetch). Dies ist besonders wichtig für diejenigen, die Versionskontrollsysteme wie Git verwenden.
## Nebeneinander platzierte Felder
Standardmäßig werden Modulfelder in Content-Editoren vertikal gestapelt. Sie können jedoch Modulfelder nebeneinander platzieren, indem Sie den Feldern in der `display_width`-Datei eine `fields.json`-Eigenschaft mit dem Wert `half_width` hinzufügen.
Ein einzelnes Feld mit einer `display_width` von `half_width` wird im Content-Editor in halber Breite angezeigt. Wenn das Feld über oder unter diesem Feld in der `fields.json`-Datei auf `half_width` festgelegt ist, werden sie nebeneinander platziert.
```json theme={null}
// Example module fields.json file
[
{
"name": "number_field",
"label": "Number",
"required": false,
"locked": false,
"display": "slider",
"min": 1,
"max": 10,
"step": 1,
"type": "number",
"prefix": "",
"suffix": "",
"default": null,
"display_width": "half_width"
},
{
"label": "Description",
"name": "description",
"type": "text",
"required": true,
"default": "Add a description",
"display_width": "half_width"
}
]
```
## Feldgruppen
Wenn Felder miteinander in Beziehung stehen, ist es oft sinnvoll, sie visuell zu gruppieren. Erstellen Sie dazu Feldgruppen, die sowohl in Modulen als auch in Designs unterstützt werden. Um lokal eine Feldgruppe zu erstellen, erstellen Sie in `fields.json` ein Objekt mit `type` `"group"`. Fügen Sie dann ein `children`-Array hinzu, das die Felder enthält, die Sie zusammenfassen möchten.
```json theme={null}
[
{
"id": "9c00985f-01db-ac5d-73f5-80ed6c0c7863",
"name": "my_text",
"display_width": null,
"label": "Text",
"required": true,
"locked": false,
"validation_regex": "",
"allow_new_line": false,
"show_emoji_picker": false,
"type": "text",
"default": "Add text here"
},
{
"type": "group",
"name": "recipe_summary_group",
"label": "Recipe summary",
"expanded": true,
"inline_help_text": "Summarize the recipe (title and description)",
"children": [
{
"type": "text",
"label": "Recipe title",
"name": "recipe_title",
"placeholder": "Burrata salad"
},
{
"type": "text",
"label": "Recipe description",
"name": "recipe_description",
"placeholder": "fig mostarda, hazelnuts, arugula, vincotto, prosciutto, toasted sourdough"
}
]
}
]
```
Sie können weitere Feldgruppierungen innerhalb einer Gruppe erstellen, indem Sie ein weiteres `"group"`-Objekt innerhalb des ersten `children`-Parameters hinzufügen. Erstellen Sie dann die Feldgruppe auf die gleiche Weise wie oben, indem Sie `children` verwenden, um die Felder einzuschließen. Sie können Feldgruppen bis zu einer Tiefe von drei verschachteln.
```json theme={null}
[
{
"type": "group",
"name": "recipe_summary_group",
"label": "Recipe summary",
"inline_help_text": "Summarize the recipe (title and description)",
"display": "inline",
"children": [
{
"type": "text",
"label": "Recipe title",
"name": "recipe_title",
"placeholder": "Burrata salad"
},
{
"type": "text",
"label": "Recipe description",
"name": "recipe_description",
"placeholder": "fig mostarda, hazelnuts, arugula, vincotto, prosciutto, toasted sourdough"
},
{
"type": "group",
"name": "secondary_group",
"label": "Secondary group",
"expanded": false,
"children": [
{
"name": "bg_color",
"label": "Background color",
"sortable": false,
"required": false,
"locked": false,
"type": "color",
"default": {
"color": "#ff0000",
"opacity": 100
}
}
]
}
]
}
]
```
#### Optionen für die Anzeige von Feldgruppen
Sie können folgende Anzeigeverhalten der Feldgruppen anpassen:
* **Erweiterung:** Standardmäßig werden Feldgruppen im Editor ausgeblendet. Gruppen, die verschachtelte Gruppen enthalten, werden als Drilldown-Schaltflächen angezeigt, mit denen die Gruppe in einer eigenen Ansicht geöffnet wird, wobei die innerste Gruppe Trennzeichen anzeigt.
* **Anzeigetyp:** Gruppen, die keine verschachtelten Gruppen enthalten, werden standardmäßig als ausblendbare Abschnitte mit visuellen Trennzeichen um ihre untergeordneten Abschnitte herum angezeigt. Gruppen, die verschachtelte Gruppen enthalten, werden als Drilldown-Schaltflächen angezeigt, mit denen die Gruppe in einer eigenen Ansicht geöffnet wird, wobei die innerste Gruppe Trennzeichen anzeigt.
* **Gruppensymbol:** Falls gewünscht, können Sie ein „Font Awesome“-Symbol einfügen, das links neben dem Label angezeigt wird.
```json theme={null}
[
{
"type": "group",
"name": "recipe_summary_group",
"label": "Recipe summary",
"display": "drilldown",
"inline_help_text": "Summarize the recipe (title and description)",
"icon": {
"name": "star",
"set": "fontawesome-5.14.0",
"type": "SOLID"
},
"children": [
{
"type": "text",
"label": "Recipe title",
"name": "recipe_title",
"placeholder": "Burrata salad"
},
{
"type": "text",
"label": "Recipe description",
"name": "recipe_description",
"placeholder": "fig mostarda, hazelnuts, arugula, vincotto, prosciutto, toasted sourdough"
}
]
}
]
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `display` | Zeichenfolge | Der Anzeigestil der Feldgruppe. Kann eine der folgenden Optionen sein:
`drilldown`: zeigt die reduzierte Gruppe mit einer Schaltfläche zum Öffnen der untergeordneten Elemente der Gruppe in einem eigenen Bereich an. Dies ist die Standardanzeige für Gruppen, die verschachtelte Gruppen enthalten.
`accordion`: zeigt die reduzierte Gruppe mit einer Schaltfläche zum Erweitern der untergeordneten Elemente der Gruppe unten als erweiterbaren Bereich an. Dies ist die Standardanzeige für Gruppen ohne verschachtelte Gruppen:
`inline`: zeigt die Gruppe und ihre untergeordneten Elemente inline an, ohne die Option zum Reduzieren der Gruppe.
|
| `icon` | Objekt | Fügt links neben dem Label ein Symbol hinzu. Enthält die folgenden Parameter:
`name`: die Font Awesome-Symbol-ID
`set`: der Font Awesome-[Symbolsatz](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields#icon)
`type`: Symbolstil (z. B. `SOLID`, `REGULAR`).
|
| `expanded` | Boolesch | Gibt an, ob die Feldgruppe standardmäßig erweitert ist |
#### Ausgabe von Feldwerten innerhalb von Feldgruppen
Feldgruppen erstellen Dictionaries, die die Feldwerte enthalten, die Sie ausgeben möchten. Wenn Sie Feldgruppen verschachteln, ist die verschachtelte Feldgruppe ein Dictionary innerhalb des äußeren Feldgruppen-Dictionarys. Um auf diese Daten zuzugreifen, durchlaufen Sie den Baum je nach Kontext entweder vom Stammdesign oder von der Modulvariable aus.
```html example.html theme={null}
{# printing a value from a field group `recipe_summary` is the field group,
`title` is the text field. #} {{module.recipe_summary.title}}
```
```css example.css theme={null}
/* Printing a Font field's color value, when the font field is within a field group.
`typography` is the field group, `h1_font` is the field */
h1{
color: {{ theme.typography.h1_font.color }};
}
```
#### Ausgewählte Elemente in Feldgruppen
In Situationen, in denen eine Feldgruppe wiederholt wird, können Sie eines oder mehrere dieser Vorkommen als ausgewählt angeben, sodass Sie das Element separat formatieren können, um es hervorzuheben. Dies kann z. B. besonders nützlich für eine Produktseite sein, auf der Sie ein bestimmtes Produkt hervorheben möchten.
Sie können eine maximale Anzahl von ausgewählten Elementen pro Feldgruppe festlegen. Im Editor können Content-Autoren dann bei Bedarf Elemente als ausgewählt markieren.
.png)
Um Feature-Elemente in einer Feldgruppe zu aktivieren, fügen Sie die `group_occurrence_meta`-Eigenschaft in die Konfiguration der Feldgruppe ein. In dieser Eigenschaft werden die folgenden Eigenschaften gespeichert:
* `featured_enabled`: wird auf `true` festgelegt um ausgewählte Elemente zu aktivieren.
* `featured_limit`: die maximale Anzahl an zulässigen ausgewählten Elementen.
Die Feldgruppe muss auch die `occurrence`-Eigenschaft berücksichtigen.
```json theme={null}
// Field group example
{
"label": "Card",
"name": "card",
"type": "group",
"occurrence": {
"default": 2,
"min": 1,
"sorting_label_field": "card.title"
},
"group_occurrence_meta": {
"featured_enabled": true,
"featured_limit": 3
},
"children": [
{
"label": "Image",
"name": "image",
"type": "image",
"responsive": true,
"resizable": true,
"show_loading": true,
"default": {
"loading": "lazy"
}
},
{
"label": "Content",
"name": "text",
"type": "richtext",
"enabled_features": [
"advanced_emphasis",
"alignment",
"block",
"emoji",
"font_family",
"font_size",
"lists",
"standard_emphasis"
],
"default": "
This is a title
Contextual advertising can be profitable. It can either pay for your hosting and maintenance costs for you website or it can pay for a lot more.
Contextual advertising can be profitable. It can either pay for your hosting and maintenance costs for you website or it can pay for a lot more.
"
},
{
"image": {
"loading": "lazy"
},
"text": "
This is a title
Contextual advertising can be profitable. It can either pay for your hosting and maintenance costs for you website or it can pay for a lot more.
"
}
]
}
```
Um zu überprüfen, ob ein Element in einer wiederholten Gruppe hervorgehoben wird, können Sie die `hs_meta`-Eigenschaft abfragen. Der folgende Code verwendet eine [for-Schleife](https://developers.hubspot.de/docs/cms/reference/hubl/loops), um nach Feldgruppenelementen zu suchen, die als ausgewählt festgelegt sind, und zeigt dann den Titel jedes Elements als `h3`-Header an.
`{{ repeated_group_item.hs_meta.occurrence.featured }}`
```hubl theme={null}
Check out this week's featured items:
{% for item in module.card %}
{% if item.hs_meta.occurrence.featured %}
{{item.title}}
{% endif %}
{% endfor %}
```
## Stilfelder
Stilfelder sind ein spezieller Feldgruppentyp in der `fields.json`-Datei eines Moduls oder Designs, der Content-Autoren die Kontrolle über das Formatieren eines Moduls oder Designs im Seiten- und Design-Editor gibt. Im Folgenden erfahren Sie, wie Sie Stilfelder zu einem Modul oder Design hinzufügen können. Informieren Sie sich über [bewährte Methoden zur Verwendung und Organisation von Stilfeldern](https://developers.hubspot.de/docs/cms/best-practices/fields).
### Modulstilfelder
Stilfelder, die einem Modul hinzugefügt werden, erscheinen bei der Bearbeitung des Moduls auf der Registerkarte *Stile* des Seiten-Editors.
Wenn Sie Stilfelder zur `fields.json`-Datei eines Moduls hinzufügen, fügen Sie sie innerhalb einer Stilgruppe hinzu. Diese Gruppe kann jedoch mehrere Gruppen enthalten, wie unten dargestellt:
```json theme={null}
// Module style fields
[
{
"type": "group",
"name": "styles",
"tab": "STYLE",
"children": [
{
"name": "img_spacing",
"label": "Spacing around image",
"required": false,
"type": "spacing",
"default": {
"padding": {
"top": {
"value": 10,
"units": "px"
},
"bottom": {
"value": 10,
"units": "px"
},
"left": {
"value": 10,
"units": "px"
},
"right": {
"value": 10,
"units": "px"
}
},
"margin": {
"top": {
"value": 10,
"units": "px"
},
"bottom": {
"value": 10,
"units": "px"
}
}
}
}
]
}
]
```
Die folgenden Felder können als Stilfelder in Modulen verwendet werden. Erfahren Sie mehr über die einzelnen Feldtypen im [Leitfaden für Module und Feldtypen](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields).
* [Ausrichtung](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields#alignment)
* [Farbverlauf](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields#gradient)
* [Abstand](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields#spacing)
* [Hintergrundbild](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields#background-image)
* [Rahmen](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields#border)
* [Boolescher Wert](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields#boolean)
* [Auswahl](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields#choice)
* [Zahl](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields#number)
* [Farbe](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields#color)
* [Symbol](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields#icon)
* [Bild](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields#image)
* [Schriftart](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields#font)
* [Textausrichtung](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields#text-alignment)
Erfahren Sie mehr über [Modul- und Designfeldtypen](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields).
Ein Beispiel für ein Stilfeld in der `fields.json`-Datei eines Moduls finden Sie in der [CMS Boilerplate](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/modules/card.module/fields.json).
### Designstilfelder
Stilfelder, die einem Design hinzugefügt werden, erscheinen in der linken Seitenleiste des Design-Editors:
Alle Stilfelder in der `fields.json`-Datei eines Designs werden in die linke Seitenleiste des Design-Editors eingefügt und müssen nicht mehr in eine Stilgruppe eingeordnet werden, wie unten dargestellt:
```json theme={null}
// Theme style fields
[
{
"label": "Global colors",
"name": "global_colors",
"type": "group",
"children": [
{
"label": "Primary",
"name": "primary",
"type": "color",
"visibility": {
"hidden_subfields": {
"opacity": true
}
},
"default": {
"color": "#494A52"
}
},
{
"label": "Secondary",
"name": "secondary",
"type": "color",
"visibility": {
"hidden_subfields": {
"opacity": true
}
},
"default": {
"color": "#F8FAFC"
}
}
]
},
{
"label": "Global fonts",
"name": "global_fonts",
"type": "group",
"children": [
{
"label": "Primary",
"name": "primary",
"type": "font",
"visibility": {
"hidden_subfields": {
"size": true,
"styles": true
}
},
"inherited_value": {
"property_value_paths": {
"color": "theme.global_colors.primary.color"
}
},
"default": {
"fallback": "sans-serif",
"font": "Lato",
"font_set": "GOOGLE"
}
},
{
"label": "Secondary",
"name": "secondary",
"type": "font",
"visibility": {
"hidden_subfields": {
"size": true,
"styles": true
}
},
"inherited_value": {
"property_value_paths": {
"color": "theme.global_colors.primary.color"
}
},
"default": {
"fallback": "serif",
"font": "Merriweather",
"font_set": "GOOGLE"
}
}
]
},
{
"name": "branding_color",
"label": "branding_color",
"type": "color",
"default": {
"color": "#3b7bc0", "opacity": 60
},
"inherited_value": {
"property_value_paths": {
"color": "brand_settings.primaryColor"
}
}
},
{
"name": "secondary_branding_color",
"label": "Secondary Branding color",
"type": "color",
"default": {
"color": "#ff6b6b", "opacity": 60
},
"inherited_value": {
"property_value_paths": {
"color": "brand_settings.colors[2]"
}
}
}
]
}
]
```
Die folgenden Felder können als Stilfelder in Designs verwendet werden. Erfahren Sie mehr über die einzelnen Feldtypen im [Leitfaden für Module und Feldtypen](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields).
* [Boolescher Wert](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields#boolean)
* [Rahmen](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields#border)
* [Auswahl](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields#choice)
* [Farbe](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields#color)
* [Schriftart](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields#font)
* [Bild](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields#image)
* [Zahl](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields#number)
* [Abstand](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields#spacing)
Erfahren Sie mehr über [Modul- und Designfeldtypen](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields).
Ein Beispiel für ein Stilfeld in der `fields.json`-Datei eines Designs finden Sie in der [CMS Boilerplate](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/fields.json).
> [!WARNING]
>
> **Hinweis:** Wenn Sie ein Marketplace-Anbieter sind, sollten Sie bestehende Inhaltsfelder nicht durch Stilfelder in bestehenden Modulen ersetzen. Eine Änderung der Feldhierarchie in einer `fields.json`-Datei kann dazu führen, dass vorhandene Modulinstanzen ihre Daten verlieren. Stattdessen sollten Sie neue Stilfelder hinzufügen oder eine neue Auflistung erstellen, in der die Felder entsprechend gruppiert sind. Dadurch wird verhindert, dass Ihre Updates Kunden, die sich auf Ihre Design verlassen, Probleme bereiten. Wenn Sie sich für Migrationspfade für alte Module einsetzen möchten, [besuchen Sie das Ideen-Forum von HubSpot](https://community.hubspot.com/t5/HubSpot-Ideas/Create-a-path-to-make-it-possible-to-migrate-existing-fields-to/idi-p/450311#M85938).
### Generiertes CSS
Einige Stilfelder bieten die Möglichkeit, CSS direkt auf der Grundlage des Feldwertes auszugeben. Dies ist besonders hilfreich bei Feldern, die eine kompliziertere Formatierung wie Farbverläufe steuern können. Die folgenden Stilfelder haben eine generierte `.css`-Eigenschaft:
* [Hintergrundbild](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields#background-image)
* [Rahmen](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields#border)
* [Farbe](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields#color)
* [Schriftart](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields#font)
* [Farbverlauf](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields#gradient)
* [Abstand](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields#spacing)
* [Textausrichtung](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields#text-alignment)
```hubl theme={null}
{% require_css %}
{% end_require_css %}
```
## Wiederholungen
Bei der Erstellung von Modulen, die Informationen formatieren, gibt es oft Typen von Informationen, die sich wiederholen. Ein Rezeptmodul könnte zum Beispiel ein Feld für „Zutat“ haben. Die meisten Rezepte haben aber natürlich mehr als 1 Zutat. Sie könnten ihnen ein Rich-Text-Feld bereitstellen, aber dann verlieren Sie die Möglichkeit, eine einheitliche Formatierung durchzusetzen und Funktionen für jede Zutat hinzuzufügen. Hier kommen die Wiederholungen ins Spiel. HubSpot bietet zwei Arten von Wiederholungen an: Wiederholfelder und Wiederholgruppen.
### Wiederholfelder
Wiederholfelder sind normale Felder, aber Content-Autoren können Instanzen des Feldes hinzufügen, entfernen und neu anordnen. Mit dem obigen Beispiel für ein Rezeptmodul könnte jede Zutat ein sich wiederholendes Textfeld sein.
Auf diese Weise kann der Content-Autoren so viele Zutaten hinzufügen, wie er möchte. Aus der Sicht des Entwicklers erhalten Sie ein Array, das Sie in einer Schleife durchlaufen lassen können, um die Liste der Zutaten unter Anwendung der gewünschten Formatierung und Funktionalität zu drucken.
Wiederholfelder werden am besten für sehr einfache Szenarien verwendet. Häufig sind [Wiederholgruppen](#repeating-groups) sinnvoller.
> [!WARNING]
>
> **Hinweis:** Es ist derzeit nicht möglich, die Standardreihenfolge von sich wiederholenden Feldern festzulegen.
#### Wiederholfelder in fields.json
```json theme={null}
// Repeating field example
{
"name": "ingredient",
"label": "Ingredient",
"required": false,
"locked": false,
"occurrence": {
"min": 1,
"max": null,
"sorting_label_field": null,
"default": 1
},
"allow_new_line": false,
"show_emoji_picker": true,
"type": "text",
"default": ["1 cup water"]
}
```
#### Elemente in Modul-HTML+HubL in einer Schleife durchlaufen
```html theme={null}
{% for item in module.ingredient %}
{{ item }}
{% endfor %}
```
### Wiederholgruppen
Wiederholgruppen sind Feldgruppen, bei denen die Wiederholungsoption aktiviert ist. Mithilfe von Wiederholgruppen können Content-Autoren Gruppen von Feldern hinzufügen, entfernen und neu anordnen. Nehmen wir das Beispiel des Rezeptmoduls: Sie möchten Ihre Zutatenliste mit einer Einkaufslistenfunktion verknüpfen.
Die Menge einer Zutat wäre entscheidend für die Einkaufsliste. Das könnte man zwar in das Textfeld eingeben, dann müsste das Modul jedoch das Textfeld auswerten und hoffen, dass wir die Menge erfolgreich von der Zutat trennen können. Hier sind Wiederholgruppen sehr nützlich. Die Ausgabe dieser Felder ist ein Objekt, das in einer Schleife durchlaufen werden kann.
#### Wiederholgruppen in fields.json
```json theme={null}
// Repeating field group example
{
"id": "ingredients",
"name": "ingredients",
"label": "Ingredients",
"required": false,
"locked": false,
"occurrence": {
"min": 1,
"max": null,
"sorting_label_field": "ingredients.ingredient",
"default": null
},
"children": [
{
"id": "ingredients.ingredient",
"name": "ingredient",
"label": "Ingredient",
"required": false,
"locked": false,
"validation_regex": "",
"allow_new_line": false,
"show_emoji_picker": false,
"type": "text",
"default": "Water"
},
{
"id": "ingredients.quantity",
"name": "quantity",
"label": "Quantity",
"required": false,
"locked": false,
"display": "text",
"min": 0,
"step": 1,
"type": "number",
"default": 1
},
{
"id": "ingredients.measurement",
"name": "measurement",
"label": "Measurement",
"help_text": "Unit of measurement (cups, tbsp, etc.)",
"required": false,
"locked": false,
"allow_new_line": false,
"show_emoji_picker": false,
"type": "text",
"default": "cups"
}
],
"type": "group",
"default": [
{
"ingredient": "Water",
"quantity": 1,
"measurement": "cups"
}
]
}
```
#### Durchlaufen von Wiederholfeldern in Modulen in einer Schleife
```html theme={null}
```
### WiederholOptionen
Um die Bearbeitung zu vereinfachen und zu verhindern, dass Content-Editoren Werte angeben, die Sie nicht programmatisch berücksichtigt haben, können Sie Mindest- und Höchstwerte für die Anzahl der Elemente festlegen, die Content-Autoren einem Wiederholfeld oder einer Wiederholgruppe hinzufügen können.
Für Wiederholgruppen können Sie auch festlegen, welches Feld bei der Anzeige der Wiederholung als Label für dieses Element dient.
```json theme={null}
"occurrence" : {
"min" : 1,
"max" : 4,
"sorting_label_field" : "ingredients.ingredient",
}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `max` | Ganzzahl | Maximale Anzahl der Vorkommen dieser Gruppe. Verhindert, dass der Content-Autor mehr als diese Anzahl von Elementen auf der Benutzeroberfläche hinzufügt. | `null` |
| `min` | Ganzzahl | Mindestanzahl der Vorkommen dieser Feldgruppe. Verhindert, dass Benutzer weniger als diese Anzahl von Elementen auf der Benutzeroberfläche haben. | `null` |
| `sorting_label_field` | Zeichenfolge | Dies ist die Feld-ID des Feldes, aus dem der Text übernommen wird, der auf der Benutzeroberfläche auf den verschiebbaren Karten angezeigt werden soll. Standardmäßig ist dies das erste Feld in der Gruppe. | |
## Übernommene Felder
Die `inherited_value`-Eigenschaft kann so konfiguriert werden, dass ein Feld seinen Standardwert von anderen Feldern übernimmt. Um festzulegen, dass der gesamte Standardwert eines Feldes vom Wert eines anderen Feldes übernommen wird, legen Sie den `default_value_path` auf den Feldnamenpfad des Zielfeldes fest. Wenn `default_value_path` festgelegt ist, werden alle `default` für das Feld ignoriert.
Um auf die Werte anderer Felder zuzugreifen, müssen Pfade `module.` am Anfang enthalten, als ob Sie auf den Wert im HubL-Code des Moduls zugreifen würden.
```json theme={null}
// Inherited fields
{
"name": "body_font",
"type": "font",
"default": {
"font": "Helvetica",
"color": "#C27BA0"
}
},
{
"name": "h1_font",
"type": "font",
"default": {},
"inherited_value": {
"default_value_path": "module.body_font",
"property_value_paths" : {
"font": "module.body_font.font",
"font_set": "module.body_font.font_set"
}
}
}
```
> [!NOTE]
>
> Da die Schriftartfamilie durch eine Kombination von `font` und `font_set` bestimmt wird, müssen Sie beide für die Vererbung von Schriftartfeldern einschließen. Erfahren Sie mehr über das [Schriftartfeld](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields#font).
Bei komplexen Feldern (Felder, deren Werte Objekte sind) können die Benutzer detaillierter steuern, welche Eigenschaften durch `property_value_path` vererbt werden. Alle Pfade, auf die in `inherited_value` verwiesen wird, können bei komplexen Feldern auch Schlüssel aus dem Wert eines Feldes enthalten.
Farbfelder haben beispielsweise Objektwerte, die sowohl die Farbe selbst als auch die Deckkraft enthalten. Um also den tatsächlichen Farbwert einer Farbe ohne die Deckkraft zu erhalten, würde der Pfad mit `.color` enden. So kann beispielsweise ein Schriftartfeld nur seine Farbe von einem separaten Farbfeld erben:
```json theme={null}
// Inherited fields with objects
{
"name": "secondary_color",
"type": "color",
"default": {
"color": "#C27BA0",
"opacity": 100
}
},
{
"name": "h1_font",
"type": "font",
"default": {
"font": "Helvetica",
"size": 12,
"size_unit": "px"
},
"inherited_value": {
"property_value_paths": {
"color": "module.secondary_color.color"
}
}
}
```
Sie können auch die Auswirkungen von `default_value_path` und `property_value_paths` kombinieren, damit ein Standardwert von einem Feld übernommen wird, während ein bestimmter Eigenschaftswert von einem anderen Feld übernommen wird:
```json theme={null}
// combining default_value_path and property_value_paths
{
"name": "body_font",
"type": "font",
"default": {
"font": "Helvetica",
"color": "#000000"
}
},
{
"name": "secondary_color",
"type": "color",
"default": {
"color": "#C27BA0",
"opacity": 100
}
},
{
"name": "h1_font",
"type": "font",
"default": {},
"inherited_value": {
"default_value_path": "module.body_font",
"property_value_paths": {
"color": "module.secondary_color.color"
}
}
}
```
Wenn ein Feld von einem anderen Feld erbt, dann aber auf der Seitenebene oder in den Designeinstellungen direkt überschrieben wird, wird seine Verknüpfung mit dem kontrollierenden Feld getrennt. Alle anderen Felder, die über `default_value_path` oder `property_value_paths` zugeordnet sind, haben keinen Einfluss mehr auf den Wert des Feldes.
## Feldsichtbarkeit
Wenn Sie benutzerdefinierte Modul- und Designfelder definieren, können Sie konfigurieren, wann ein Feld angezeigt wird, indem Sie das `visibility`-Objekt zu dem Feld in der `fields.json`-Datei hinzufügen. Es ist z. B. möglich, ein Formularmodul festzulegen, um bei Auswahl der Danksagung einen Rich-Text-Bereich, aber bei Auswahl einer Weiterleitung eine Seitenauswahl anzuzeigen.
Sie können die Sichtbarkeit anhand des Werts eines `controlling_field_path` oder anhand einer bestimmten Eigenschaft innerhalb dieses Feldes mithilfe des `property`-Parameters festlegen. Die Sichtbarkeit lässt sich auch auf ein einzelnes Feld oder auf eine Gruppe von Feldern anwenden, um die Sichtbarkeit für alle Elemente in der Gruppe zu steuern.
```json theme={null}
"visibility" : {
"controlling_field_path" : "field_name",
"controlling_value_regex" : "regular_expression_in_controlling_field",
"property": "src",
"operator" : "EQUAL"
}
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `controlling_field_path` | Zeichenfolge | Der Punktpfad des Feldes, der die Anzeigebedingung steuert.
Wenn das Feld nicht innerhalb einer Feldgruppe verschachtelt ist, verwenden Sie den Namen des Feldes (z. B. `field_name`).
Bei Feldern, die in Gruppen verschachtelt sind, sollte der Pfad durch einen Punkt getrennt seiner Gruppierungsstruktur entsprechen. Beispiel:
`field_group_name.field_name`
`parent_group.child_group.field_name`
|
| `controlling_value_regex` | Zeichenfolge | Die reguläre Ausdruck im steuernden Feld, der vorhanden sein muss, damit das Feld angezeigt wird. Der reguläre Ausdruck muss mit der gesamten Zeichenfolge (nicht mit einer Teilmenge) übereinstimmen und beachtet Groß-/Kleinschreibung. |
| `operator` | Zeichenfolge | Der Operator, der definiert, wie der `controlling_value_regex`-Wert erfüllt werden muss. Operatoren können unter anderem sein:
`NOT_EQUAL`
`EQUAL`
`EMPTY`
`NOT_EMPTY`
`MATCHES_REGEX`
|
| `property` | Zeichenfolge | Legt die Sichtbarkeit basierend auf einer bestimmten Eigenschaft des Zielfeldes fest. Beispielsweise können Sie die Sichtbarkeit aktivieren, wenn die `src`-Eigenschaft eines Bildfeldes einem bestimmten Wert entspricht. Wenn für dieses Feld kein Wert angegeben wird, basiert die Sichtbarkeit standardmäßig auf dem stringified-Wert von `controlling_value_regex`. |
Sie können auch ein `occurrence_options`-Objekt in das `visibility`-Objekt einfügen, um die Wertanzahl eines wiederholten Feldes anzuvisieren. Dieses Objekt sollte `count` zum Vergleich und eine `operator`-Definition enthalten. Um z. B. ein Textfeld nur dann anzuzeigen, wenn ein anderes wiederholtes Feld mindestens zwei Elemente enthält, können Sie `visibility` wie folgt definieren:
```json theme={null}
[
{
"type": "group",
"name": "ingredients",
"label": "Recipe ingredients",
"display": "drilldown",
"children": [
{
"name": "ingredient",
"label": "Ingredient",
"occurrence": {
"min": 1,
"max": null,
"default": 1
},
"type": "text",
"default": ["1 cup water"]
},
{
"type": "text",
"label": "Conditional field",
"name": "conditional_field",
"visibility": {
"controlling_field_path": "ingredients.ingredient",
"occurrence_options": {
"count": 2,
"operator": "GREATER_THAN_OR_EQUAL"
}
}
}
]
}
]
```
Sie können einen der folgenden `operater`-Werte verwenden:
* `"NOT_EQUAL"`
* `"EQUAL"`
* `"EMPTY"`
* `"NOT_EMPTY"`
* `"GREATER_THAN"`
* `"GREATER_THAN_OR_EQUAL"`
* `"LESS_THAN"`
* `"LESS_THAN_OR_EQUAL"`
### Erweiterte Sichtbarkeit
Das `visibility`-Attribut kann nur jeweils ein Kriterium unterstützen. Um mehrere Kriterien mit mehreren Operatoren sowie die Reihenfolge der Vorgänge einzuschließen, können Sie `advanced_visibility` verwenden.
```json theme={null}
"visibility_rules" : "ADVANCED",
"advanced_visibility" : {
"boolean_operator" : "AND",
"criteria" : [{
"controlling_field_path" : "field_name",
"controlling_value_regex" : "regular_expression_in_controlling_field",
"operator" : "MATCHES_REGEX"
},
{
"controlling_field_path" : "field_name",
"controlling_value_regex" : "regular_expression_in_controlling_field",
"operator" : "EQUAL"
}]
}
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `visibility_rules` | Zeichenfolge | Standardmäßig ist dieser Wert auf `SIMPLE` festgelegt. Um `advanced_visibility` zu verwenden, legen Sie es auf `ADVANCED` fest. |
| `boolean_operator` | Zeichenfolge | Der boolesche Operator für die bedingten Kriterien. Kann `AND` oder `OR` sein. |
| `criteria` | Array | Ein Array von Sichtbarkeitsobjekten, das die bedingten Kriterien definiert, die erfüllt sein müssen, damit das Feld angezeigt wird. |
| `controlling_field_path` | Zeichenfolge | Der Punktpfad des Feldes, der die Anzeigebedingung steuert.
Wenn das Feld nicht innerhalb einer Feldgruppe verschachtelt ist, verwenden Sie den Namen des Feldes (z. B. `field_name`).
Bei Feldern, die in Gruppen verschachtelt sind, sollte der Pfad durch einen Punkt getrennt seiner Gruppierungsstruktur entsprechen. Beispiel:
`field_group_name.field_name`
`parent_group.child_group.field_name`
|
| `controlling_value_regex` | Zeichenfolge | Der Wert im steuernden Feld, der erfüllt werden muss, um das Feld anzuzeigen. Wenn der `MATCHES_REGEX`-Operator verwendet wird, muss der reguläre Ausdruck mit der gesamten Zeichenfolge (nicht mit einer Teilmenge) übereinstimmen und beachtet Groß- und Kleinschreibung. Ein Feld mit einem `controlling_field_path`, aber ohne `controlling_value_regex` ist sichtbar, wenn das steuernde Feld einen Wert hat, der nicht Null ist und nicht leer ist. |
| `operator` | Zeichenfolge | Der Operator, der definiert, wie der `controlling_value_regex`-Wert erfüllt werden muss. Operatoren können unter anderem sein:
`NOT_EQUAL`
`EQUAL`
`EMPTY`
`NOT_EMPTY`
`MATCHES_REGEX`
Regex-Syntax ist erforderlich, wenn `MATCHES_REGEX` verwendet wird. |
Als Beispiel sehen Sie unten den ersten Teil des Codes vom [Standardzahlungsmodul](https://developers.hubspot.de/docs/cms/reference/modules/default-modules). Um den vollständigen Code zu überprüfen, können Sie das Modul in HubSpot klonen und dann in Ihre lokale Umgebung herunterladen, um die `fields.json`-Datei des Moduls anzuzeigen.
```json theme={null}
[
{
"id": "payment",
"name": "payment",
"display_width": null,
"label": "Payment",
"required": true,
"locked": false,
"type": "payment",
"default": {
"id": null,
"properties": {}
}
},
{
"id": "checkout_location",
"name": "checkout_location",
"display_width": null,
"label": "Checkout behavior",
"required": false,
"locked": false,
"visibility": {
"controlling_field_path": "payment",
"controlling_value_regex": "id\":\\d+",
"operator": "MATCHES_REGEX"
},
"display": "radio",
"choices": [
["new_tab", "Open in a new tab"],
["overlay", "Sliding overlay"]
],
"type": "choice",
"default": "new_tab"
},
{
"id": "button_text",
"name": "button_text",
"display_width": null,
"label": "Button text",
"required": true,
"locked": false,
"validation_regex": "",
"visibility": {
"controlling_field_path": "payment",
"controlling_value_regex": "id\":\\d+",
"operator": "MATCHES_REGEX"
},
"allow_new_line": false,
"show_emoji_picker": false,
"type": "text",
"default": "Checkout"
},
{
"id": "icon",
"name": "icon",
"display_width": null,
"label": "Icon",
"required": false,
"locked": false,
"visibility_rules": "ADVANCED",
"advanced_visibility": {
"boolean_operator": "AND",
"criteria": [
{
"controlling_field_path": "payment",
"controlling_value_regex": "id\":\\d+",
"operator": "MATCHES_REGEX"
},
{
"controlling_field_path": "add_icon",
"controlling_value_regex": "true",
"operator": "EQUAL"
}
],
"children": []
},
"children": [
{
"id": "icon.icon",
"name": "icon",
"display_width": null,
"label": "Icon",
"required": true,
"locked": false,
"icon_set": "fontawesome-5.0.10",
"type": "icon",
"default": {
"name": "hubspot",
"type": "SOLID",
"unicode": "f3b2"
}
},
{
"id": "icon.position",
"name": "position",
"display_width": null,
"label": "Position",
"required": true,
"locked": false,
"display": "select",
"choices": [
["left", "Left"],
["right", "Right"]
],
"type": "choice",
"default": "left"
}
],
"tab": "CONTENT",
"expanded": false,
"type": "group"
}
// rest of fields.json code
]
```
Der obige Code führt zu folgendem Verhalten:
Das erste Feld (`payment`) ist ein Pflichtfeld (Dropdown-Menü), mit dem der Content-Autor einen bestimmten Zahlungslink auswählen kann. In HubSpot sieht ein Content-Autor beim ersten Hinzufügen des Moduls zur Seite Folgendes:
* Sobald ein Zahlungslink ausgewählt wurde, werden die drei Felder angezeigt, die folgen (`checkout_location`, `button_text` und `icon`). Dies liegt daran, dass die Felder über ein `visibility`-Attribut verfügen, das vom `payment`-Feld gesteuert wird und einen ID-Wert im `id`-Parameter des Zahlungsfeldes erfordert.
Das `icon`-Feld selbst verwendet `advanced_visibility`, um nur dann angezeigt zu werden, wenn ein Zahlungslink im `payment`-Feld vorhanden ist UND wenn das `add_icon`-Kontrollkästchen aktiviert ist.
Neben dem Festlegen der Sichtbarkeit innerhalb von `fields.json` können Sie auch die Sichtbarkeit im Design-Manager festlegen, indem Sie die Optionen für die *Anzeigebedingungen* eines Feldes bearbeiten.
Nach dem Festlegen der Sichtbarkeit im Design-Manager können Sie das Modul [mithilfe des CLI](/docs/developer-tooling/local-development/hubspot-cli/reference#fetch) [abrufen](/docs/developer-tooling/local-development/hubspot-cli/install-the-cli), um das `visibility`-Attribut in der `fields.json`-Datei des Moduls anzuzeigen.
## Deaktivierung von bedingten Feldern
Sie können einem Feld Bedingungen hinzufügen, um das Bearbeiten zu verhindern, wenn die angegebenen Bedingungen erfüllt sind. Sie können auch eine Meldung festlegen, die über dem Feld angezeigt wird, wenn es deaktiviert wird, um Kontext im Content-Editor bereitzustellen.
Die Bedingungen und die Meldung werden im `disabled_controls`-Objekt des Feldes festgelegt. Die Bedingungen, um ein Feld bearbeitbar zu machen, werden innerhalb des `rules`-Objekts festgelegt, das dem gleichen Format wie [advanced\_visibility](#field-visibility) folgt.
Der folgende Code zeigt sowohl eine einfache als auch eine erweiterte Implementierung von `rules`-Kriterien:
* Das `simple_page`-Feld enthält Logik zum Deaktivieren des Feldes, wenn das `text_field` auf `testing` festgelegt ist.
* Das `fancy_page`-Feld enthält Logik zum Deaktivieren des Feldes, wenn entweder `text_field` oder `text_field_2` auf einen Wert ungleich `testing` bzw. `testing2` festgelegt ist.
```json theme={null}
// example fields.json
[
{
"type": "text",
"name": "text_field",
"label": "Text field"
},
{
"type": "text",
"name": "text_field_2",
"label": "Text field 2"
},
{
"type": "page",
"label": "Simple Page",
"name": "simple_page",
"disabled_controls": {
"message": "This field is disabled",
"rules": {
"criteria": [
{
"controlling_field_path": "text_field",
"operator": "EQUAL",
"controlling_value_regex": "testing"
}
]
}
}
},
{
"type": "page",
"label": "Fancy Page",
"name": "fancy_page",
"disabled_controls": {
"message": "This field is disabled",
"rules": {
"boolean_operator": "OR",
"criteria": [
{
"controlling_field_path": "text_field",
"operator": "NOT_EQUAL",
"controlling_value_regex": "testing"
},
{
"controlling_field_path": "text_field_2",
"operator": "NOT_EQUAL",
"controlling_value_regex": "testing2"
}
]
}
}
}
]
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `message` | Zeichenfolge | Die Meldung, die im Content-Editor angezeigt werden soll, wenn das Feld deaktiviert ist. |
| `rules` | Objekt | Die Bedingungen für die Freigabe des Feldes für die Bearbeitung. |
| `criteria` | Array | Ein Array von Bedingungsobjekten, das die Kriterien definiert, die erfüllt sein müssen, damit das Feld angezeigt wird. Dieses Array kann mehrere Bedingungsobjekte enthalten, die durch `AND`- oder `OR`-Logik über den `boolean_operator`-Parameter getrennt sind. |
| `boolean_operator` | Zeichenfolge | Der boolesche Operator für die bedingten Kriterien. Kann `AND` oder `OR` sein. Wenn nicht angegeben, wird standardmäßig `AND` verwendet. |
| `controlling_field_path` | Zeichenfolge | Der Punktpfad des Feldes, der die Anzeigebedingung steuert.
Wenn das Feld nicht innerhalb einer Feldgruppe verschachtelt ist, verwenden Sie den Namen des Feldes (z. B. `field_name`).
Bei Feldern, die in Gruppen verschachtelt sind, sollte der Pfad durch einen Punkt getrennt seiner Gruppierungsstruktur entsprechen. Beispiel:
`field_group_name.field_name`
`parent_group.child_group.field_name`
|
| `controlling_value_regex` | Zeichenfolge | Der Wert im steuernden Feld, der erfüllt werden muss, um das Feld anzuzeigen. Wenn der `MATCHES_REGEX`-Operator verwendet wird, muss der reguläre Ausdruck mit der gesamten Zeichenfolge (nicht mit einer Teilmenge) übereinstimmen und beachtet Groß- und Kleinschreibung. Ein Feld mit einem `controlling_field_path`, aber ohne `controlling_value_regex` ist sichtbar, wenn das steuernde Feld einen Wert hat, der nicht Null ist und nicht leer ist. |
| `operator` | Zeichenfolge | Der Operator, der definiert, wie der `controlling_value_regex`-Wert erfüllt werden muss. Operatoren können unter anderem sein:
`NOT_EQUAL`
`EQUAL`
`EMPTY`
`NOT_EMPTY`
`MATCHES_REGEX`
Regex-Syntax ist erforderlich, wenn `MATCHES_REGEX` verwendet wird. |
## Hervorheben von Feldern im Design-Editor
Im Design-Editor kann die Vorschau-Hervorhebung Content-Autoren helfen zu verstehen, welche Felder welche Seitenelemente steuern. Bei der Vorschau-Hervorhebung werden die Designfelder den CSS-Selektoren zugeordnet, auf die sie sich auswirken. Dabei wird ein Feld um diese Elemente hinzugefügt, wenn der Mauszeiger über das Feld im Design-Editor bewegt wird.
Um die Vorschau-Hervorhebung für Designfelder zu konfigurieren, berücksichtigen Sie eine `editor-preview.json`-Datei im Stammverzeichnis des Designs, um Designfelder zu einer Liste mit CSS-Selektoren zuzuordnen. In der Datei berücksichtigen Sie für jedes Stilfeld, das Sie hervorheben möchten, ein Array mit den entsprechenden CSS-Selektoren im folgenden Format:
```json theme={null}
// editor-preview.json
{
"selectors": {
"theme.settings.path.1": [ ],
"theme.settings.path.2": [ ],
}
}
```
Im folgenden Code wird beispielsweise hervorgehoben, welche Seitenelemente vom primären Schriftartfeld gesteuert werden. Sie können das vollständige Beispiel in der `editor-preview.json`-Datei des Standard-Growth-Designs anzeigen.
```json theme={null}
// editor-preview.json
{
"selectors": {
"fonts.primary": [
"button, .button, .hs-button",
"form input[type='submit'], form .hs-button",
".error-page:before",
"p",
"blockquote > footer",
"form td.is-today .pika-button",
"form .is-selected .pika-button",
"th, td",
".blog-listing__post-tag",
".blog-listing__post-author-name, .blog-post__author-name",
".pagination__link-icon svg",
".tabs__tab",
"a",
".button.button--simple",
".pagination__link .pagination__link-icon svg",
".card--dark",
".card--light",
".card--light summary, .card--light p, .card--light h1, .card--light h2, .card--light h3, .card--light h4, .card--light h5, .card--light h6, .card--light a:not(.button), .card--light span, .card--light div, .card--light li, .card--light blockquote",
".card--light .accordion__summary:before",
"tfoot th, tfoot td",
".header__language-switcher-current-label > span",
".header__language-switcher-child-toggle svg",
".header__language-switcher .lang_list_class a:not(.button)",
".header__menu-link",
".header__menu-item--depth-1 > .header__menu-link:not(.button)",
".header__menu-item--depth-1 .header__menu-child-toggle svg",
".header__menu-toggle svg",
".header__language-switcher .header__language-switcher-current-label > span",
".header p, .header h1, .header h2, .header h3, .header h4, .header h5, .header h6, .header a:not(.button), .header span, .header li, .header blockquote, .header .tabs__tab, .header .tabs__tab, .header .tabs__tab, .header .tabs__tab",
".footer .hs-menu-wrapper a",
".footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6, .footer p, .footer a:not(.button), .footer span, .footer div, .footer li, .footer blockquote, .footer .tabs__tab, .footer .tabs__tab, .footer .tabs__tab, .footer .tabs__tab",
".footer hr",
"form label",
"#email-prefs-form, #email-prefs-form h1, #email-prefs-form h2",
"form legend",
"form input[type='text'], form input[type='email'], form input[type='password'], form input[type='tel'], form input[type='number'], form input[type='search'], form select, form textarea",
".backup-unsubscribe input[type='email']",
"form .legal-consent-container, form .legal-consent-container .hs-richtext, form .legal-consent-container .hs-richtext p",
"form .hs-richtext, form .hs-richtext *, form .hs-richtext p, form .hs-richtext h1, form .hs-richtext h2, form .hs-richtext h3, form .hs-richtext h4, form .hs-richtext h5, form .hs-richtext h6",
"button, button, button, .button, .button, .button, .hs-button, .hs-button, .hs-button",
"button, .button, .hs-button",
".button.button--secondary, .button.button--secondary, .button.button--secondary",
".button.button--secondary",
".header__menu-item--depth-1 > .header__menu-link, .header__menu-item--depth-1 > .header__menu-link",
".header__menu-item--depth-1 > .header__menu-link",
".header__menu-submenu .header__menu-link, .header__menu-submenu .header__menu-link",
".header__language-switcher .lang_list_class a, .header__language-switcher .lang_list_class a",
".header__menu-submenu .header__menu-link:not(.button)",
".footer .hs-menu-wrapper a, .footer .hs-menu-wrapper a",
".footer .hs-menu-wrapper a",
"form .hs-richtext a",
".header__menu-item--depth-1 > .header__menu-link--active-link:not(.button)",
".footer .hs-menu-wrapper .active > a"
]
}
}
```
Um mit der Erstellung dieser Datei zu beginnen, führen Sie den folgenden [CLI-Befehl](/docs/developer-tooling/local-development/hubspot-cli/reference#generate-theme-field-selectors-for-in-app-highlighting) aus, um die Datei zu erstellen. Während der Dateierstellung wird ein Skript ausgeführt, um die anfänglichen Feld-Selektor-Zuordnungen einzurichten.
```shell theme={null}
hs theme generate-selectors
```
| Parameter | Beschreibung |
| - | - |
| `theme-directory-path` | Der Pfad zum Designverzeichnis. |
Nach dem Ausführen des Befehls müssen Sie die `editor-preview.json`-Datei überprüfen und optimieren, um sicherzustellen, dass Felder und Selektoren ordnungsgemäß zugeordnet sind. Während der [generate-selectors](/docs/developer-tooling/local-development/hubspot-cli/reference#generate-theme-field-selectors-for-in-app-highlighting)-Befehl eine rudimentäre Vermutung darüber anstellt, welche Felder sich auf welche Selektoren auswirken, müssen Sie je nachdem, wie Ihr Design aufgebaut ist, Korrekturen vornehmen. Dieser Befehl kann beispielsweise nicht erkennen, wenn Module die Formatierung überschreiben oder wenn Sie Makros verwenden.
Um diese Zuordnungen zu testen, laden Sie das Design in einen Account hoch und zeigen Sie dann den Design-Editor in diesem Account an (**Einstellungen** > **Website** > **Designs** > **Design anzeigen**).
# Konfigurieren des Rich-Text-Editors
Source: https://developers.hubspot.de/docs/cms/reference/fields/rich-text-editor
Der Rich-Text-Editor in benutzerdefinierten Modulen bietet Entwicklern jetzt die Möglichkeit, Komponenten aus der Konfigurationsleiste zu entfernen.
Entwickler sind mitunter mit dem Problem konfrontiert, dass WYSIWYG-Editoren Funktionen bereitstellen, die bei falscher Verwendung das Ziel einer einheitlichen Marke behindern und Probleme mit Content-Design und -Flow verursachen können. Der Rich-Text-Editor in benutzerdefinierten Modulen bietet Entwicklern jetzt die Möglichkeit, Komponenten über die `enabled_features`-Eigenschaft in der fields.json-Datei aus der Konfigurationsleiste zu entfernen.
> [!WARNING]
>
> Hinweis: Das Folgende gilt nur für benutzerdefinierte Module, die das Rich-Text-Feld in der lokalen Entwicklung verwenden. Die Verwendung dieser Funktion deaktiviert nicht die Funktionalität der aus dem Rich-Text-Editor entfernten Optionen, sondern nur die Anzeige der Optionen. Dies geschieht aus Gründen der Abwärtskompatibilität, sodass vorhandene Inhalte nicht betroffen sind.
## So verwenden Sie enabled\_features
In Ihrer fields.json-Datei, in der Sie Ihr Rich-Text-Feldobjekt haben, können Sie bestimmte Funktionen aktivieren, indem Sie die gültigen Symbolleistenoptionen in einem Array zur `enabled_features`-Eigenschaft hinzufügen, wie unten dargestellt:
```json theme={null}
// Rich text field with only Bold, Link, and Image available in the Toolbar
{
"name": "description",
"label": "Description",
"required": false,
"locked": false,
"type": "richtext",
"default": null,
"enabled_features": ["bold", "link", "image"]
}
```
Der Content-Editor würde dann den Rich-Text-Editor sehen, wobei nur die enthaltenen Optionen aktiviert sind, wie in der Abbildung unten dargestellt:
> [!NOTE]
>
> Hinweis: Einige Funktionen, wie die Schaltfläche „Stile löschen“, mit der Sie zum Standardstil für den Editor zurückkehren können, sind immer aktiviert und können nicht entfernt werden. Wenn die `enabled_features`-Eigenschaft ausgelassen wird, werden alle Funktionen angezeigt.
## Liste mit Funktionen
Nachfolgend finden Sie eine Liste der Funktionen, die bei Verwendung der `enabled_features`-Eigenschaft einzeln aktiviert werden können.
### Kontrollgruppen
| Option | Description |
| - | - |
| `colors` | Steuerlemente für Textfarbe und der Hintergrundfarbe. |
| `fonts` | Schriftfamilie und Schriftgrößensteuerung. |
| `indents` | Aus- und Einzugskontrollen. |
| `lists` | Steuerelemente für Aufzählungslisten und nummerierte Listen. |
| `standard_emphasis` | Fett, kursiv und unterstreicht Kontrollen. |
| `advanced_emphasis` | Steuerelemente für durchgestrichenen, hochgestellten, tiefgestellten und Codeformat-Text. |
| `glyphs` | Emoji-, Sonderzeichen- und Symbol-Steuerelemente. In E-Mail-Modulen nicht unterstützt. Um die Emoji-Auswahl zu E-Mail-Modulen hinzuzufügen, verwenden Sie stattdessen [emoji](#insert-buttons). |
### Textformatierung
| Option | Description |
| - | - |
| `block` | Zeigt das Dropdown-Menü für die Stilumschaltung an. |
| `font_family` | Zeigt das Dropdown-Menü für die Schriftartumschaltung an. |
| `font_size` | Zeigt das Dropdown-Menü für die Schriftgröße an. |
| `bold` | Zeigt die Schaltfläche für Fett-Formatierung an. |
| `italic` | Zeigt die Schaltfläche für Kursiv-Formatierung an. |
| `underline` | Zeigt die Schaltfläche für Unterstrichen-Formatierung an. |
| `text_color` | Zeigt die Schaltfläche für Textfarbe an. |
| `background_color` | Zeigt die Schaltfläche für Hintergrundfarbe an. |
| `alignment` | Zeigt die Schaltfläche für Ausrichtung an. |
| `bulleted_list` | Zeigt die Schaltfläche für Aufzählungsliste an. |
| `numbered_list` | Zeigt die Schaltfläche für nummerierte Listen an. |
| `lineheight` | Zeigt die Schaltfläche für Zeilenhöhe an. |
| `outdent` | Zeigt die Schaltfläche für Ausrückung an. |
| `indent` | Zeigt die Schaltfläche für Einzug an. |
| `strikethrough` | Zeigt die Schaltfläche für Durchgestrichen-Formatierung an. |
| `superscript` | Zeigt die Schaltfläche für Hochgestellt-Formatierung an. |
| `subscript` | Zeigt die Schaltfläche für Tiefgestellt-Formatierung an. |
| `code_format` | Zeigt die Schaltfläche für Codeformat an. |
### Schaltflächen zum Einfügen
| Option | Description |
| - | - |
| `link` | Zeigt die Link-Schaltfläche an. |
| `image` | Zeigt die Bild-Schaltfläche an. In E-Mail-Modulen nicht unterstützt. |
| `emoji` | Zeigt die Emoji-Schaltfläche an. |
| `personalize` | Zeigt das Symbolleistenelement zum Symbolleiste an. |
| `cta` | Zeigt das Call-to-Action-Menüelement unter dem Einfügen-Menü an. |
| `embed` | Zeigt das Einbetten-Menüelement unter dem Einfügen-Menü an. |
| `video` | Zeigt das Video-Menüelement unter dem Einfügen-Menü an. |
| `table` | Zeigt das Tabellenmenüelement unter dem Einfügen-Menü an. |
| `charmap` | Zeigt das Sonderzeichen-Menüelement unter dem Einfügen-Menü an. |
| `anchor` | Zeigt das Anker-Menüelement unter dem Einfügen-Menü an. |
| `hr` | Zeigt das Menüelement „Horizontale Linie“ unter dem Einfügen-Menü an. |
| `nonbreaking_space` | Zeigt das Menüelement „Geschütztes Leerzeichen“ unter dem Einfügen-Menü an. |
| `icon` | Zeigt das Symbol-Menüelement unter dem Einfügen-Menü an. |
### Erweiterte Optionen
| Option | Description |
| - | - |
| `source_code` | Zeigt das Quellcode-Menüelement im erweiterten Menü an. |
| `visual_blocks` | Zeigt das Menüelement „Blöcke anzeigen“ im erweiterten Menü an. |
# HubL-Filter
Source: https://developers.hubspot.de/docs/cms/reference/hubl/filters
HubL-Filterliste und Beispiele für HubSpot CMS-Entwickler.
Filter beeinflussen die endgültige Ausgabe Ihres HubL-Codes. Sie können auf verschiedene HubL-Anweisungen und -Ausdrücke angewendet werden, um das vom Server ausgegebene Template-Markup zu ändern.
Die grundlegende Syntax eines Filters ist `|filtername`. Der Filter wird direkt nach der Anweisung oder dem Ausdruck innerhalb seiner Trennzeichen eingefügt. Einige Filter haben zusätzliche Parameter, die in Klammern hinzugefügt werden können. Die grundlegende Syntax eines Filters mit einem String, einer Zahl und einem booleschen Parameter lautet: `|filtername("stringParameter", 10, true)`. Beachten Sie, dass String-Parameter in Anführungszeichen geschrieben werden sollten. Beachten Sie auch, dass HubL-Filter einen Alias haben, der für denselben Zweck wie der primäre Filter verwendet werden kann.
Der folgende Artikel enthält alle unterstützten HubL-Filter.
> [!WARNING]
>
> ### Bitte beachten:
>
> Sie können HubL-Filter auf [Personalisierungstoken](https://knowledge.hubspot.com/website-pages/personalize-your-content) wie Kontakt- und Unternehmens-Token auf HubSpot CMS- und Blog-Seiten anwenden, jedoch nicht in E-Mails.
## abs
Ruft den Absolutwert einer Zahl ab. Sie können diesen Filter verwenden, um sicherzustellen, dass eine Zahl positiv ist.
```text hubl.txt theme={null}
{% set my_number = -53 %}
{{ my_number|abs }}
```
```text gerenderte ausgabe.txt theme={null}
53
```
## add
Addiert einen numerischen Wert zu einem anderen numerischen Wert. Dieser Filter funktioniert genauso wie der [Operator +](/docs/cms/reference/hubl/operators-and-expression-tests#math). Der Parameter in Klammern ist der Summand, den Sie mit Ihrem numerischen Ausgangswert kombinieren.
```text hubl.txt theme={null}
{% set my_num = 40 %}
{{ my_num|add(13) }}
```
```text gerenderte ausgabe.txt theme={null}
53
```
## attr
Gibt das Attribut eines Dictionarys wieder; Dieser Filter entspricht dem Ausgeben einer Variablen, die in einem Wörterbuch vorhanden ist, z. B. `content.absolute_url`.
```text hubl.txt theme={null}
{{ content|attr("absolute_url") }}
```
```text gerenderte ausgabe.txt theme={null}
https://developers.hubspot.com/docs/cms/hubl/filters
```
| Parameter | Beschreibung |
| - | - |
| `attribute_name` | Gibt an, welches Attribut gedruckt werden soll. |
## batch
Gruppiert Elemente innerhalb einer Sequenz.
Im folgenden Beispiel gibt es eine Variable, die eine Sequenz von Obstsorten enthält. Der `batch`-Filter wird auf eine Schleife angewendet, die die Sequenz durchläuft. Die geschachtelte Schleife wird dreimal durchlaufen, um 3 Obstsorten pro Zeile auszugeben, bevor die äußere Schleife erneut läuft. Beachten Sie in der endgültigen Ausgabe, dass, da es nur 5 Obstsorten gibt, das letzte Element durch ein ` ` (den zweiten Parameter) ersetzt wird.
```html example.html theme={null}
{% set rows = ["apples", "oranges", "pears", "grapes", "blueberries"] %}
{% for row in rows|batch(3, " ") %}
{% for column in row %}
{{ column }}
{% endfor %}
{% endfor %}
```
```html example.html theme={null}
apples
oranges
pears
grapes
blueberries
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `linecount` | Zahl | Anzahl der in den Batch aufzunehmenden Elemente |
| `fill_with` | Zeichenfolge | Gibt an, was eingeschlossen werden soll, um fehlende Elemente zu ergänzen |
## between\_times
Berechnet die Zeit zwischen zwei datetime-Objekten in einer bestimmten Zeiteinheit.
> [!WARNING]
>
> ### Bitte beachten:
>
> Sie sollten diesen Filter nur für Variablen verwenden, die ein Datum zurückgeben. Ab dem 30. September 2024 gibt dieser Filter nicht mehr das aktuelle Datum zurück, wenn ein Nullwert übergeben wird. Nach diesem Datum wird bei einem Nullwert im Filter „30. September 2024“ zurückgegeben.
```text hubl.txt theme={null}
{% set begin = "2018-07-14T14:31:30+0530"|strtotime("yyyy-MM-dd'T'HH:mm:ssZ") %}
{% set end = "2018-07-20T14:31:30+0530"|strtotime("yyyy-MM-dd'T'HH:mm:ssZ") %}
{{ begin|between_times(end, "days") }}
```
```text gerenderte ausgabe.txt theme={null}
6
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `end` | datetime-Objekt | Das End-datetime-Objekt |
| `timeunit` | Zeichenfolge | Gültige Zeiteinheiten sind `nanos`, `micros`, `millis`, `seconds`, `minutes`, `hours`, `half_days`, `days`, `weeks`, `months`, `years`, `decades`, `centuries`, `millennia` und `eras`. |
## bool
Konvertiert einen Text-String-Wert in einen booleschen Wert.
```text hubl.txt theme={null}
{% if "true"|bool == true %}hello world{% endif %}
```
```text gerenderte ausgabe.txt theme={null}
hello world
```
## capitalize
Großschreibung des ersten Buchstabens eines Variablenwerts; Das erste Zeichen wird großgeschrieben, alle anderen Buchstaben werden kleingeschrieben. Bei nachfolgenden Wörtern, die durch Leerzeichen oder Bindestriche getrennt sind, wird der erste Buchstabe nicht großgeschrieben.
```text hubl.txt theme={null}
{% set sentence = "the first letter of a sentence should always be capitalized." %}
{{ sentence|capitalize }}
```
```text gerenderte ausgabe.txt theme={null}
The first letter of a sentence should always be capitalized.
```
## center
Zentriert Text innerhalb einer bestimmten Feldlänge unter Verwendung von Leerzeichen; Dieser Filter wird nicht empfohlen und ist auch nicht besonders nützlich, da der HTML-Compiler von HubSpot die Leerzeichen automatisch entfernt; er ist hier jedoch der Vollständigkeit halber aufgeführt.
Das folgende Beispiel zeigt, wie dieser Filter auf eine Variable in einem pre-Tag angewendet wird, sodass die Leerzeichen nicht entfernt werden.
```html example.html theme={null}
{% set var = "string to center" %}
before{{ var|center(80) }}after
```
```html example.html theme={null}
before string to center after
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `width` | Zahl | Gibt die Länge des Leerraums an, in dem der Text zentriert werden soll |
## convert\_rgb
Konvertiert einen HEX-Wert in einen RGB-String. Dies ist nützlich, wenn Sie Farbvariablen in RGB konvertieren müssen, um sie mit einer RGBA-CSS-Deklaration zu verwenden. Im folgenden Beispiel wird der von einem Farbmodul festgelegte Wert in einen RGB-Wert umgewandelt und in einer RGBA-CSS-Deklaration verwendet.
```html example.html theme={null}
{% set my_color = "#FFFFFF" %}
{{ my_color|convert_rgb }}
{% set my_color2="#000000" %}
```
```html example.html theme={null}
255, 255, 255
```
## cut
Entfernt einen String aus einem Wert. Dieser Filter kann verwendet werden, um einen bestimmten Teil eines Strings abzugleichen und auszuschneiden. Der Parameter gibt den Teil des Strings an, der entfernt werden soll. Im folgenden Beispiel werden das Leerzeichen und das Wort „world“ aus dem ursprünglichen Variablenwert entfernt.
```text hubl.txt theme={null}
{% set my_string = "Hello world." %}
{{ my_string|cut(" world") }}
```
```text gerenderte ausgabe.txt theme={null}
Hello.
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `characters_to_cut` | Zeichenfolge | Der Teil des Strings, der entfernt werden soll. |
## datetimeformat (veraltet)
> [!WARNING]
>
> **Bitte beachten:** Dieser Filter ist mittlerweile [veraltet](/docs/cms/versions-deprecations/deprecated/hubl/filters-functions#datetimeformat-function). Verwenden Sie stattdessen den [format\_datetime](#format_datetime)-Filter, der eine stärker standardisierte Syntax verwendet.
## default
Wenn der Wert undefiniert ist, wird der erste Parameter zurückgegeben, andernfalls wird der Wert der Variablen gedruckt. Wenn Sie default mit Variablen verwenden wollen, die als false ausgewertet werden, müssen Sie den zweiten Parameter auf `true` festlegen.
Das erste Beispiel unten würde die Meldung drucken, wenn die Variable nicht definiert ist. Das zweite Beispiel wendet den Filter auf eine leeren Zeichenfolge an, die nicht undefiniert ist, gibt aber aufgrund des zweiten Parameters eine Meldung aus.
```text hubl.txt theme={null}
{{ my_variable|default("my_variable is not defined") }}
{{ ""|default("the string was empty", true) }}
```
```text gerenderte ausgabe.txt theme={null}
my_variable is not defined the string was empty
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `default_value` | Zeichenfolge | Wert, der zurückgegeben wird, wenn die Variable undefiniert ist. Wenn die Variable definiert ist, wird stattdessen der Wert der Variable zurückgegeben. |
| `truthy` | Boolesch | Wert auf `true` zur Verwendung mit Variablen, die als `false` ausgewertet werden |
## dictsort
Sortiert ein Dict und ergibt (Schlüssel, Wert) Paare. Dictionaries sind standardmäßig unsortiert. Sie können ein Dictionary jedoch nach Schlüssel oder Wert sortiert ausgeben. Der erste Parameter ist ein boolescher Wert, der angibt, ob bei der Sortierung zwischen Groß- und Kleinschreibung unterschieden wird oder nicht. Der zweite Parameter bestimmt, ob das Dict nach Schlüssel oder Wert sortiert werden soll. Das folgende Beispiel druckt ein sortiertes Kontaktverzeichnis mit allen bekannten Details zum Kontakt.
```text hubl.txt theme={null}
{% for item in contact|dictsort(false, "value") %}
{{item}}
{% endfor %}
```
```text gerenderte ausgabe.txt theme={null}
A sorted contact dictionary
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `case_sensitive` | Boolesch | Legt fest, ob bei der Sortierung zwischen Groß- und Kleinschreibung unterschieden wird |
| `sort_by` | `"key"` \| `"value"` | Bestimmt, ob nach `key` oder `value` sortiert werden soll |
## difference
Gibt die Differenz von zwei Mengen oder Listen zurück. Die vom Filter zurückgegebene Liste enthält alle eindeutigen Elemente, die in der ersten Liste, aber nicht in der zweiten Liste enthalten sind.
```text hubl.txt theme={null}
{{ [1, 2, 3]|difference([2, 3, 4, 5]) }}
```
```text gerenderte ausgabe.txt theme={null}
[1]
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `list` | Array | Die zweite Liste, die zum Vergleich herangezogen wird, um Unterschiede zur ursprünglichen Liste zu finden |
## divide
Teilt den aktuellen Wert durch einen Divisor; Der übergebene Parameter ist der Divisor. Dieser Filter ist eine Alternative zum Operator /.
```text hubl.txt theme={null}
{% set numerator = 106 %}
{{ numerator|divide(2) }}
```
```text gerenderte ausgabe.txt theme={null}
53
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `divisor` | Zahl | Die Zahl, durch die die Variable geteilt werden soll |
## divisible
Als Alternative zum Test des Ausdrucks `divisibleby` wird dieser Filter zu „true“ ausgewertet, wenn der Wert durch die angegebene Zahl teilbar ist.
```text hubl.txt theme={null}
{% set num = 10 %}
{% if num|divisible(2) %}
The number is divisible by 2
{% endif %}
```
```text gerenderte ausgabe.txt theme={null}
The number is divisible by 2
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `divisor` | Zahl | Die Zahl, die verwendet werden soll, wenn geprüft wird, ob der Wert teilbar ist |
## escape\_html
Versieht den Inhalt mit Escape-Zeichen einer HTML-Eingabe. Akzeptiert einen String und konvertiert die Zeichen `&`, `<`, `>`, `‘`, `”` und `escape_jinjava` in HTML-sichere Sequenzen. Verwenden Sie diesen Filter für HubL-Variablen, die in HTML-Codes verwendet werden, aber kein HTML zulassen dürfen.
```html example.html theme={null}
{% set escape_string = "
```
## escape\_attr
Versieht den Inhalt mit Escape-Zeichen einer HTML-Attributeingabe. Akzeptiert einen String und konvertiert die Zeichen `&`, `<`, `‘`, `”` und `escape_jinjava` in HTML-sichere Sequenzen. Verwenden Sie diesen Filter für HubL-Variablen, die HTML-Attributen hinzugefügt werden.
Beachten Sie, dass Sie beim Escaping von Werten von Attributen, die URLs akzeptieren, wie z. B. `href`, stattdessen den Filter `escape_url` verwenden müssen.
```html example.html theme={null}
{% set escape_string = "This markup is printed as text" %}
```
```html example.html theme={null}
```
## escape\_jinjava
Konvertiert die Zeichen `{` und `}` in Strings in Jinjava-sichere Sequenzen. Verwenden Sie diesen Filter, wenn Sie Text anzeigen müssen, der solche Zeichen in Jinjava enthalten könnte.
```text hubl.txt theme={null}
{% set escape_string = "{{This markup is printed as text}}" %}
{{ escape_string|escape_jinjava }}
```
```text gerenderte ausgabe.txt theme={null}
{{This markup is printed as text}}
```
## escape\_js
Versieht Strings mit Escape-Zeichen, einschließlich `escape_jinjava`, sodass sie sicher in eine JavaScript-Variablendeklaration eingefügt werden können. Verwenden Sie diesen Filter für HubL-Variablen, die in HTML-Skriptelementen verwendet werden.
```text hubl.txt theme={null}
{% set escape_string = "\tThey said 'This string can safely be inserted into JavaScript.'" %}
{{ escape_string|escape_js }}
```
```text gerenderte ausgabe.txt theme={null}
\tThey said \x27This string can safely be inserted into JavaScript.\x27
```
## escape\_url
Versieht den Inhalt einer URL-Eingabe mit Escape-Zeichen, erzwingt festgelegte Protokolle, entfernt ungültige und gefährliche Zeichen und kodiert HTML-Entitäten. Gibt eine leere Antwort zurück, wenn eine URL gültig ist. Verwenden Sie diesen Filter für HubL-Variablen, die in HTML-Attributen verwendet werden. Es müssen gültige URLs sein.
```text hubl.txt theme={null}
{% set escape_string = "http://example.com/with space/" %}
```
```text gerenderte ausgabe.txt theme={null}
```
## escapejson
Versieht Strings mit Escape-Zeichen, sodass sie als JSON-Werte verwendet werden können.
```text hubl.txt theme={null}
{% set escape_string = "" %}
{% require_js position="head" %}
{% end_require_js %}
```
```text gerenderte ausgabe.txt theme={null}
```
## filesizeformat
Formatiert einen Zahlenwert in eine für Menschen lesbare Dateigröße (z. B. 13 kB, 4,1 MB, 102 Bytes usw.). Standardmäßig werden Dezimalpräfixe verwendet (z. B. MB und GB), aber Sie können den `binary`-Parameter auf `true` festlegen, um binäre Präfixe wie Mebi (MiB) und Gibi (GiB) zu verwenden.
```text hubl.txt theme={null}
{% set bytes = 10000 %}
{{ bytes|filesizeformat(binary=true) }}
```
```text gerenderte ausgabe.txt theme={null}
9.8 KiB
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `binary` | Boolesch | Bei Festlegung auf `true` werden binäre Präfixe verwendet, z. B. Mebi (MiB) und Gibi (GiB). |
## first
Gibt das erste Element in einer Sequenz zurück.
```text hubl.txt theme={null}
{% set my_sequence = ["Item 1", "Item 2", "Item 3"] %}
{{ my_sequence|first }}
```
```text gerenderte ausgabe.txt theme={null}
Item 1
```
## float
Wandelt den Wert in eine Fließkommazahl um; Wenn die Konvertierung nicht funktioniert, wird `0.0` zurückgegeben. Sie können diese Vorgabe mit dem ersten Parameter außer Kraft setzen.
```text hubl.txt theme={null}
{% set my_text="25" %}
{{ my_text|float + 17 }}
```
```text gerenderte ausgabe.txt theme={null}
42.0
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `default` | Zahl | Integer, der zurückgegeben wird, wenn die Konvertierung nicht funktioniert |
## forceescape
Strenge Durchsetzung von HTML-Escaping; In der HubSpot-Umgebung gibt es keinen echten Anwendungsfall für doppeltes Escaping, daher verhält sich dieser Filter im Allgemeinen genauso wie der escape-Filter.
```html example.html theme={null}
{% set escape_string = "
```
## format
Wendet die Python-Zeichenfolge-Formatierung auf ein Objekt an. `%s` kann durch eine andere Variable ersetzt werden.
```text hubl.txt theme={null}
{{ "Hi %s %s"|format(contact.firstname, contact.lastname) }}
```
```text gerenderte ausgabe.txt theme={null}
Hi Monty Python
```
## format\_currency (veraltet)
> [!WARNING]
>
> ### Bitte beachten:
>
> Dieser Filter ist mittlerweile [veraltet](/docs/cms/versions-deprecations/deprecated/hubl/filters-functions). Verwenden Sie stattdessen den [format\_currency\_value](#format-currency-value)-Filter.
## format\_currency\_value
Formatiert eine gegebene Zahl als Währung basierend auf der Standardwährung des Portals und dem als Parameter übergebenen Gebietsschema. Ersetzt den veralteten [format\_currency-Filter](/docs/cms/versions-deprecations/deprecated/hubl/filters-functions#format-currency).
```text hubl.txt theme={null}
{{ 100 | format_currency_value(locale='en-GB', currency='EUR', maxDecimalDigits=6, minDecimalDigits=1) }}
```
```text gerenderte ausgabe.txt theme={null}
€100.0
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `locale` | Zeichenfolge | [Das Sprach-Tag des Java-Gebietsschemas](https://www.oracle.com/java/technologies/javase/jdk8-jre8-suported-locales.html). Der Standard ist das `locale.Format : ISO639LanguageCodeInLowercase-ISO3166CountryCodeInUppercase`-Format der Seite. |
| `currency` | Zeichenfolge | Der [alphabetische ISO 4217-Code](https://en.wikipedia.org/wiki/ISO_4217) der Währung; Standard ist die Standardwährung des Portals. Numerische Codes werden nicht akzeptiert. |
| `minDecimalDigits` | Zahl | Die Mindestanzahl an Dezimalstellen, die die Ausgabe umfassen darf. Standardmäßig wird die Standardanzahl der Dezimalstellen der Währung verwendet. |
| `maxDecimalDigits` | Zahl | Die maximale Anzahl an Dezimalstellen, die die Ausgabe umfassen darf. Standardmäßig wird die Standardanzahl der Dezimalstellen der Währung verwendet. |
## format\_date
Formatiert die date-Komponente eines date-Objekts.
> [!WARNING]
>
> ### Bitte beachten:
>
> Sie sollten diesen Filter nur für Variablen verwenden, die ein Datum zurückgeben. Ab dem 30. September 2024 gibt dieser Filter nicht mehr das aktuelle Datum zurück, wenn ein Nullwert übergeben wird. Nach diesem Datum wird bei einem Nullwert im Filter „30. September 2024“ zurückgegeben.
```text hubl.txt theme={null}
{{ content.publish_date | format_date('long') }}
{{ content.publish_date | format_date('yyyy.MMMM.dd') }}
{{ content.publish_date | format_date('medium', 'America/New_York', 'de-DE') }}
```
```text gerenderte ausgabe.txt theme={null}
November 28, 2022 02022.November.28 28.11.2022
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `format` | `'short'` \| `'medium'` \| `'long'` \| `'full'` \| benutzerdefiniertes Muster | Das zu verwendende Format; Kann ein benutzerdefiniertes Muster gemäß [Unicode LDML](https://unicode.org/reports/tr35/tr35-dates.html#Date_Format_Patterns) sein. |
| `timeZone` | Zeichenfolge | Die Zeitzone des Ausgabedatums im [IANA-TZDB-Format](https://data.iana.org/time-zones/tzdb/) |
| `locale` | Zeichenfolge | Das Gebietsschema, das für Formate verwendet werden soll, die das Gebietsschema berücksichtigen Siehe [Liste der unterstützten Gebietsschemata](https://www.oracle.com/java/technologies/javase/java8locales.html). |
## format\_datetime
Formatiert sowohl die date- als auch die time-Komponente eines date-Objekts. Dieser Filter ersetzt den veralteten [datetimeformat](/docs/cms/versions-deprecations/deprecated/hubl/filters-functions#datetimeformat-filter)-Filter. Standardmäßig wird eine Datetime in der Zeitzone UTC-00:00 zurückgegeben.
> [!WARNING]
>
> ### Bitte beachten:
>
> Sie sollten diesen Filter nur für Variablen verwenden, die ein Datum zurückgeben. Ab dem 30. September 2024 gibt dieser Filter nicht mehr das aktuelle Datum zurück, wenn ein Nullwert übergeben wird. Nach diesem Datum wird bei einem Nullwert im Filter „30. September 2024“ zurückgegeben.
```text hubl.txt theme={null}
{{ content.publish_date | format_datetime('medium', 'America/New_York', 'de-DE') }}
```
```text gerenderte ausgabe.txt theme={null}
12/31/69 7:00 PM
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `format` | `'short'` \| `'medium'` \| `'long'` \| `'full'` \| benutzerdefiniertes Muster | Das zu verwendende Format; Kann ein benutzerdefiniertes Muster gemäß [Unicode LDML](https://unicode.org/reports/tr35/tr35-dates.html#Date_Format_Patterns) sein. Wenn `long` oder `full` verwendet werden, enthält der Zeitstempel ein Z, um die Nullpunktverschiebung zur UTC-Zeit (z. B. `2:23:00 PM Z`) zu kennzeichnen. Um den Z-Bezeichner zu entfernen, geben Sie eine `timeZone` an. |
| `timeZone` | Zeichenfolge | Die Zeitzone des Ausgabedatums im [IANA-TZDB-Format](https://data.iana.org/time-zones/tzdb/); Standardmäßig wird die UTC-Zeit zurückgegeben. |
| `locale` | Zeichenfolge | Das Gebietsschema, das für Formate verwendet werden soll, die das Gebietsschema berücksichtigen Siehe [Liste der unterstützten Gebietsschemata](https://www.oracle.com/java/technologies/javase/java8locales.html). |
## format\_number
Formatiert eine Zahl basierend auf einem festgelegten Gebietsschema. Umfasst einen zweiten Parameter, der die maximale Dezimalgenauigkeit festlegt.
```text hubl.txt theme={null}
{{ 1000|format_number('en-US') }}
{{ 1000.333|format_number('fr') }}
{{ 1000.333|format_number('en-US', 2) }}
```
```text gerenderte ausgabe.txt theme={null}
1,000
1 000,333
1,000.33
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `locale` | Zeichenfolge | Das Gebietsschema, das für Formate verwendet werden soll. Siehe [Liste der unterstützten Gebietsschemata](https://www.oracle.com/java/technologies/javase/java8locales.html). |
| `maxDecimalDigits` | Zahl | Die maximale Anzahl an Dezimalstellen, die die Ausgabe umfassen darf. Standardmäßig wird die Anzahl der Dezimalstellen vom Eingabewert verwendet. |
## format\_time
Formatiert die Uhrzeitkomponente eines date-Objekts.
> [!WARNING]
>
> ### Bitte beachten:
>
> Sie sollten diesen Filter nur für Variablen verwenden, die ein Datum zurückgeben. Ab dem 30. September 2024 gibt dieser Filter nicht mehr das aktuelle Datum zurück, wenn ein Nullwert übergeben wird. Nach diesem Datum wird bei einem Nullwert im Filter „30. September 2024“ zurückgegeben.
```text hubl.txt theme={null}
{{ content.updated | format_time('long') }}
{{ content.updated | format_time('hh:mm a') }}
{{ content.updated | format_time('medium', 'America/New_York', 'de-DE') }}
```
```text gerenderte ausgabe.txt theme={null}
3:25:06 PM Z 03:25 PM 10:25:44
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `format` | `'short'` \| `'medium'` \| `'long'` \| `'full'` \| benutzerdefiniertes Muster | Das zu verwendende Format; Kann ein benutzerdefiniertes Muster gemäß [Unicode LDML](https://unicode.org/reports/tr35/tr35-dates.html#Date_Format_Patterns) sein. Wenn `long` oder `full` verwendet werden, enthält der Zeitstempel ein Z, um die Nullpunktverschiebung zur UTC-Zeit (z. B. `2:23:00 PM Z`) zu kennzeichnen. Um den Z-Bezeichner zu entfernen, geben Sie eine `timeZone` an. |
| `timeZone` | Zeichenfolge | Die Zeitzone des Ausgabedatums im [IANA-TZDB-Format](https://data.iana.org/time-zones/tzdb/); Standardmäßig wird die UTC-Zeit zurückgegeben. |
| `locale` | Zeichenfolge | Das Gebietsschema, das für Formate verwendet werden soll, die das Gebietsschema berücksichtigen Siehe [Liste der unterstützten Gebietsschemata](https://www.oracle.com/java/technologies/javase/java8locales.html). |
## fromjson
Konvertiert einen JSON-String in ein Objekt.
```text hubl.txt theme={null}
{% set obj ='{ "name":"Brian","role":"Owner" }' %}
{{ obj|fromjson }}
```
```text gerenderte ausgabe.txt theme={null}
{role=Owner, name=Brian}
```
## geo\_distance
Berechnet den ellipsoiden 2D-Abstand zwischen zwei Punkten auf der Erde.
```text hubl.txt theme={null}
{{ row.location | geo_distance(37.3435, -122.0344, "mi") }} MI
```
```text gerenderte ausgabe.txt theme={null}
861.1655563461395 MI
```
## groupby
Gruppiert eine Sequenz von Objekten nach einem gemeinsamen Attribut; Der Parameter legt das gemeinsame Attribut fest, nach dem gruppiert werden soll.
```html example.html theme={null}
{% for group in contents|groupby("blog_post_author") %}
{{ group.grouper }}
{% for content in group.list %}
{{ content.name }}
{% endfor %}
{% endfor %}
```
```text gerenderte ausgabe.txt theme={null}
Blog author 1
Post by Blog author 1
Post by Blog author 1
Post by Blog author 1
Blog author 2
Post by Blog author 2
Post by Blog author 2
Post by Blog author 2
Blog author 3
Post by Blog author 3
Post by Blog author 3
Post by Blog author 3
```
| Parameter | Beschreibung |
| - | - |
| `attribute` | Das Attribut, nach dem gruppiert werden soll. |
## indent
Zieht Text innerhalb einer bestimmten Feldlänge unter Verwendung von Leerzeichen ein; Dieser Filter wird nicht empfohlen und ist auch nicht besonders nützlich, da der HTML-Compiler von HubSpot die Leerzeichen automatisch entfernt. Der Vollständigkeit halber ist er hier jedoch aufgeführt. Das folgende Beispiel zeigt, wie ein `indent`-Filter auf eine Variable in einem `
`-Tag angewendet wird, sodass die Leerzeichen nicht entfernt werden. Der erste Parameter steuert die Menge an Leerzeichen, und der zweite boolesche Parameter bestimmt, ob die erste Zeile eingerückt werden soll.
```html example.html theme={null}
{% set var = "string to indent" %}
{{ var|indent(2, true) }}
```
```text gerenderte ausgabe.txt theme={null}
string to indent
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `width` | Zahl | Die Menge an Leerzeichen, die angewendet werden soll |
| `indent-first` | Boolesch | Bei Festlegung auf `true` wird die erste Zeile eingerückt. |
## int
Konvertiert den Wert in eine Ganzzahl; Wenn die Konvertierung nicht funktioniert, wird `0` zurückgegeben. Sie können diese Vorgabe mit dem ersten Parameter außer Kraft setzen.
```text hubl.txt theme={null}
{% set string="25" %}
{{ string|int + 17 }}
```
```text gerenderte ausgabe.txt theme={null}
42
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `default` | Zahl | Integer, der zurückgegeben wird, wenn die Konvertierung nicht funktioniert |
## intersect
Dieser Filter gibt die Schnittmenge von zwei Mengen oder Listen zurück. Die vom Filter zurückgegebene Liste enthält alle eindeutigen Elemente, die in beiden Listen enthalten sind.
```text hubl.txt theme={null}
{{ [1, 2, 3]|intersect([2, 3, 4, 5]) }}
```
```text gerenderte ausgabe.txt theme={null}
[2, 3]
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `list` | Array | Die zweite Liste, mit der verglichen werden soll, um herauszufinden, wo sich die Liste mit der ursprünglichen Liste überschneidet |
## ipaddr
Wird zu `true` ausgewertet, wenn der Wert eine gültige IPv4- oder IPv6-Adresse ist.
```text hubl.txt theme={null}
{% set ip = "1.0.0.1" %}
{% if ip|ipaddr %}
The string is a valid IP address
{% endif %}
```
```text gerenderte ausgabe.txt theme={null}
The string is a valid IP address
```
## join
Gibt einen String zurück, die die Verkettung der Strings in der Sequenz ist; Das Trennzeichen zwischen den Elementen ist standardmäßig ein leerer String, Sie können es mit dem optionalen Parameter definieren. Der zweite Parameter kann verwendet werden, um ein zu verbindendes Attribut anzugeben.
```text hubl.txt theme={null}
{% set my_list = [1, 2, 3] %}
{% set sep = "---" %}
{{ my_list|join }}
{{ my_list|join("|") }}
{{ my_list|join(sep) }}
```
```text gerenderte ausgabe.txt theme={null}
123 1|2|3 1---2---3
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `delimiter` | Zeichenfolge | Das Trennzeichen, das bei der Verkettung von Strings verwendet wird |
| `attribute` | HubL-Variable | Attribut des Werts, der zu einem Objekt hinzugefügt werden soll |
## last
Gibt das letzte Element einer Sequenz zurück.
```text hubl.txt theme={null}
{% set my_sequence = ["Item 1", "Item 2", "Item 3"] %}
{% my_sequence|last %}
```
```text gerenderte ausgabe.txt theme={null}
Item 3
```
## length
Gibt die Anzahl der Elemente einer Sequenz oder einer Zuordnung zurück.
```text hubl.txt theme={null}
{% set services = ["Web design", "SEO", "Inbound Marketing", "PPC"] %}
{{ services|length }}
```
```text gerenderte ausgabe.txt theme={null}
4
```
## list
Konvertiert Werte in eine Liste um; Zeichenfolgen werden als separate Zeichen zurückgegeben, es sei denn, sie sind in eckigen Klammern `[ ]` enthalten.
```text hubl.txt theme={null}
{% set one = 1 %}
{% set two = 2 %}
{% set three = "three" %}
{% set four = ["four"] %}
{% set list_num = one|list + two|list + three|list + four|list %}
{{ list_num }}
```
```text gerenderte ausgabe.txt theme={null}
[1, 2, t, h, r, e, e, four]
```
## log
Berechnet den natürlichen Logarithmus einer Zahl.
```text hubl.txt theme={null}
{{ 10|log }}
{{ 65536|log(2) }}
```
```text gerenderte ausgabe.txt theme={null}
2.302585092994046 16.0
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `base` | Zahl | Die Basis, die für die Protokollberechnung verwendet werden soll |
## lower
Konvertiert alle Buchstaben in einem Wert in Kleinbuchstaben.
```text hubl.txt theme={null}
{% set text="Text to MAKE LowercaSe" %}
{{ text|lower }}
```
```text gerenderte ausgabe.txt theme={null}
text to make lowercase
```
## map
Wendet einen Filter auf eine Sequenz von Objekten an oder sucht nach einem Attribut. Dies ist nützlich, wenn man mit Listen von Objekten arbeitet, aber eigentlich nur an einem bestimmten Wert interessiert ist.
Die grundlegende Verwendung ist das Mapping auf ein Attribut. Wenn Sie z. B. mithilfe von bedingter Logik prüfen wollen, ob ein Wert in einem bestimmten Attribut eines Dict vorhanden ist. Alternativ können Sie auch einen Filter aufrufen lassen, indem Sie den Namen des Filters und die Argumente übergeben.
```text hubl.txt theme={null}
{# Usage 1 #}
Apply a filter to a sequence:
{% set seq = ["item1", "item2", "item3"] %}
{{ seq|map("upper") }}
{# Usage 2 #}
Look up an attribute:
{{ content|map("currentState")}}
```
```text gerenderte ausgabe.txt theme={null}
Apply a filter to a sequence: [ITEM1, ITEM2, ITEM3]
Look up an attribute: [DRAFT]
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `filter` | Zeichenfolge | Filter, der auf die Sequenz von Objekten angewendet werden soll |
## md5
Berechnet den [md5-Hash](https://en.wikipedia.org/wiki/MD5) des angegebenen Objekts.
```text hubl.txt theme={null}
{{ content.absolute_url|md5 }}
```
```text gerenderte ausgabe.txt theme={null}
923adb4ce05a4c6342c04c80be88d15e
```
## minus\_time
Zieht eine Zeitdauer von einem datetime-Objekt ab.
```text hubl.txt theme={null}
{% set date = "2018-07-14T14:31:30+0530"|strtotime("yyyy-MM-dd'T'HH:mm:ssZ") %}
{{ date }}
{{ date|minus_time(2, "months") }}
```
```text gerenderte ausgabe.txt theme={null}
2018-07-14 14:31:30 2018-05-14 14:31:30
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `diff` | Zahl | Betrag, der abgezogen werden soll |
| `timeunit` | Zeichenfolge | Gültige Zeiteinheiten sind `nanos`, `micros`, `millis`, `seconds`, `minutes`, `hours`, `half_days`, `days`, `weeks`, `months`, `years`, `decades`, `centuries`, `millennia` und `eras`. |
## multiply
Multipliziert einen Wert mit einer Zahl. Funktioniert genauso wie der [Operator \*](/docs/cms/reference/hubl/operators-and-expression-tests).
```text hubl.txt theme={null}
{% set n = 20 %}
{{ n|multiply(3) }}
```
```text gerenderte ausgabe.txt theme={null}
60
```
## plus\_time
Addiert eine Zeitdauer zu einem datetime-Objekt hinzu.
```text hubl.txt theme={null}
{% set date = "2018-07-14T14:31:30+0530"|strtotime("yyyy-MM-dd'T'HH:mm:ssZ") %}
{{ date }}
{{ date|plus_time(5, "days") }}
```
```text gerenderte ausgabe.txt theme={null}
2018-07-14 14:31:30 2018-07-19 14:31:30
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `diff` | Zahl | Betrag, der abgezogen werden soll |
| `timeunit` | Zeichenfolge | Gültige Zeiteinheiten sind `nanos`, `micros`, `millis`, `seconds`, `minutes`, `hours`, `half_days`, `days`, `weeks`, `months`, `years`, `decades`, `centuries`, `millennia` und `eras`. |
## pprint
Gibt eine Variable als pretty print aus. Dies druckt den Typ der Variablen und andere Informationen, die für das Debugging nützlich sind.
```text hubl.txt theme={null}
{% set this_var ="Variable that I want to debug" %}
{{ this_var|pprint }}
```
```text gerenderte ausgabe.txt theme={null}
(String: Variable that I want to debug)
```
## random
Gibt ein zufälliges Element aus der Sequenz zurück.
> [!WARNING]
>
> ### Bitte beachten:
>
> Bei Verwendung dieses Filters wird die Seite nicht jedes Mal, wenn der Seiteninhalt aktualisiert wird, sondern in regelmäßigen Abständen [vorgerendert](/docs/cms/best-practices/testing-staging-performance/prerendering). Dies bedeutet, dass der gefilterte Inhalt nicht bei jedem erneuten Laden der Seite aktualisiert wird.
>
> Dies ist möglicherweise kein Problem für bestimmte Arten von Inhalten, z. B. die Anzeige einer zufälligen Liste von Blog-Beiträgen. Wenn Inhalte jedoch bei jedem Laden der Seite zufällig geändert werden müssen, sollten Sie stattdessen JavaScript verwenden, um den Inhalt client-seitig zu randomisieren.
```text hubl.txt theme={null}
{% for content in contents|random %}
```
## regex\_replace
Sucht nach einem Regex-Muster und ersetzt es durch eine Sequenz von Zeichen. Das erste Argument ist ein Regex-Muster im RE2-Stil, das zweite ist der Ersatz-String.
Erfahren Sie mehr über die [RE2-Regex-Syntax](https://github.com/google/re2/wiki/Syntax).
```text hubl.txt theme={null}
{{ "contact-us-2"|regex_replace("[^a-zA-Z]", "") }}
```
```text gerenderte ausgabe.txt theme={null}
contactus
```
## reject
Filtert eine Sequenz von Objekten, indem ein [Ausdruckstest](/docs/cms/reference/hubl/operators-and-expression-tests) auf das Objekt angewendet wird und die Objekte, bei denen der Test erfolgreich war, zurückgewiesen werden.
```text hubl.txt theme={null}
{% set some_numbers = [10, 12, 13, 3, 5, 17, 22] %}
{{ some_numbers|reject("even") }}
```
```text gerenderte ausgabe.txt theme={null}
[13, 3, 5, 17]
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `exp_text` | Zeichenfolge | Der Name des [Ausdruckstests](/docs/cms/reference/hubl/operators-and-expression-tests#expression-tests), der auf das Objekt angewendet werden soll |
## rejectattr
Filtert eine Sequenz von Objekten, indem ein Test auf ein Attribut eines Objekts angewendet wird und die Objekte abgelehnt werden, bei denen der Test erfolgreich war.
```html example.html theme={null}
{% for content in contents|rejectattr("post_list_summary_featured_image") %}
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `attribute_name` | Zeichenfolge | Gibt das auszuwählende Attribut an; Mithilfe der Punktnotation können Sie auf verschachtelte Attribute zugreifen. |
| `exp_test` | Zeichenfolge | Der Name des [Ausdruckstests](/docs/cms/reference/hubl/operators-and-expression-tests#expression-tests), der auf das Objekt angewendet werden soll |
## render
Rendering von Strings, die HubL enthalten, damit die Ausgabe an andere Filter weitergegeben werden kann
```html example.html theme={null}
{{ personalization_token("contact.lastname", "default value")|render|lower }}
```
```html example.html theme={null}
mclaren
```
## replace
Ersetzt alle Instanzen eines Substrings durch eine neue.
```html example.html theme={null}
{% if topic %}
Posts about {{ page_meta.html_title|replace("Blog | ", "") }}
{% endif %}
```
```html example.html theme={null}
Posts about topic name
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `old` | Zeichenfolge | Der Substring, der ersetzt werden soll |
| `new` | Zeichenfolge | Ersatz-String |
| `count` | Zahl | Falls angegeben, werden nur die Vorkommen der ersten Anzahl ersetzt |
## reverse
Kehrt das Objekt um oder gibt einen Iterator zurück, der das Objekt in umgekehrter Reihenfolge durchläuft; Um eine Liste umzukehren, verwenden Sie [.reverse()](/docs/cms/reference/hubl/functions#reverse)
```text hubl.txt theme={null}
{% set nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] %}
{% for num in nums|reverse %}
{{ num }}
{% endfor %}
```
```text gerenderte ausgabe.txt theme={null}
10 9 8 7 6 5 4 3 2 1
```
## root
Berechnet die Quadratwurzel eines Wertes.
```text hubl.txt theme={null}
{{ 16|root }}
{{ 625|root(4) }}
```
```text gerenderte ausgabe.txt theme={null}
4 5
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `nth_root` | Zahl | Die n-te Wurzel, die für die Berechnung verwendet werden soll |
## round
Rundet eine Zahl auf eine bestimmte Genauigkeit.
```text hubl.txt theme={null}
{{ 52.5|round }}
{{ 52.5|round(0, "floor") }}
```
```text gerenderte ausgabe.txt theme={null}
53 52
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `precision` | Zahl | Gibt die Genauigkeit der Rundung an |
| `rounding_method` | `'common'` (Standard) \| `'ceil'` \| `'floor'` | Optionen umfassen `common` auf- oder abrunden (Standard); `ceil` immer aufrunden; `floor` immer abrunden |
## safe
Markieren Sie einen Wert als sicher, was bedeutet, dass diese Variable in einer Umgebung, in der automatisches Escaping aktiviert ist, nicht mit Escape-Zeichen versehen wird.
```text hubl.txt theme={null}
{{ content.post_list_content|safe }}
```
```html example.html theme={null}
HTML post content that is not escaped.
```
## sanitize\_html
Bereinigt den Inhalt einer HTML-Eingabe für die Ausgabe von Rich-Text-Inhalten. Akzeptiert einen String und entfernt dann HTML-Tags, die nicht zulässig sind. Verwenden Sie diesen Filter für HubL-Variablen, die in HTML-Codes verwendet werden und sicheres HTML ermöglichen sollen.
Sie können die folgenden Parameter einschließen, um bestimmte Typen von HTML-Tags zuzulassen: `FORMATTING`, `BLOCKS`, `STYLES`, `LINKS`, `TABLES`, `IMAGES`. Zum Beispiel: `sanitize_html(IMAGES)`.
Mit `sanitize_html` werden alle Parameter in den Filter aufgenommen.
Sie können auch einen `STRIP`-Parameter einfügen, um alle HTML-Codes zu entfernen. Alle Inhalte werden auch über `escape_jinjava` ausgeführt, um eine verschachtelte Interpretation zu verhindern.
```text hubl.txt theme={null}
{% set escape_string = "This
markup is printed as text.
" %}
{{ escape_string|sanitize_html("IMAGES") }}
```
```html example.html theme={null}
This markup is printed as text.
```
## select
Filtert eine Sequenz von Objekten, indem ein Test auf die Objekte angewendet wird und nur die Objekte ausgewählt werden, bei denen der Test erfolgreich war.
```text hubl.txt theme={null}
{% set some_numbers = [10, 12, 13, 3, 5, 17, 22] %}
{{ some_numbers|select("even") }}
```
```html example.html theme={null}
[10, 12, 22]
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `exp_text` | Zeichenfolge | Der Ausdruckstest, der auf das Objekt angewendet werden soll |
## selectattr
Filtert eine Sequenz von Objekten, indem er einen Test auf ein Attribut der Objekte anwendet und nur die Objekte auswählt, bei denen der Test erfolgreich war.
```html example.html theme={null}
{% for content in contents|selectattr("post_list_summary_featured_image") %}
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `attribute_name` | Zeichenfolge | Das Attribut, auf das getestet werden soll. Mithilfe der Punktnotation können Sie auf verschachtelte Attribute zugreifen. |
| `exp_test` | Zeichenfolge | Der Name des [Ausdruckstests](/docs/cms/reference/hubl/operators-and-expression-tests#expression-tests), der auf das Objekt angewendet werden soll |
| `val` | Zeichenfolge | Wert, auf den getestet werden soll |
## shuffle
Legt die Reihenfolge der Iteration durch eine Sequenz zufällig fest. Im folgenden Beispiel wird eine Standard-Blogschleife gemischt.
> [!WARNING]
>
> ### Bitte beachten:
>
> Bei Verwendung dieses Filters wird die Seite nicht jedes Mal, wenn der Seiteninhalt aktualisiert wird, sondern in regelmäßigen Abständen [vorgerendert](/docs/cms/best-practices/testing-staging-performance/prerendering). Dies bedeutet, dass der gefilterte Inhalt nicht bei jedem erneuten Laden der Seite aktualisiert wird.
>
> Dies ist möglicherweise kein Problem für bestimmte Arten von Inhalten, z. B. die Anzeige einer zufälligen Liste von Blogbeiträgen. Wenn Inhalte jedoch bei jedem Laden der Seite zufällig geändert werden müssen, sollten Sie stattdessen JavaScript verwenden, um den Inhalt client-seitig zu randomisieren.
```html example.html theme={null}
{% for content in contents|shuffle %}
```
## slice
Zerschneiden eines Iterators und Rückgabe einer Liste von Listen, die diese Elemente enthalten; Der erste Parameter gibt an, wie viele Elemente in Scheiben geschnitten werden sollen, und der zweite Parameter gibt an, mit welchen Zeichen leere Scheiben gefüllt werden sollen.
```html example.html theme={null}
{% set items = ["laptops", "tablets", "smartphones", "smart watches", "TVs"] %}
{% for column in items|slice(3," ") %}
{% for item in column %}
{{ item }}
{% endfor %}
{% endfor %}
```
```html example.html theme={null}
laptops
tablets
smartphones
smart watches
TVs
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `slices` | Zahl | Wie viele Elemente werden geschnitten |
| `filler` | Zeichenfolge | Gibt Zeichen an, mit denen leere Slices aufgefüllt werden |
## sort
Sortiert eine Iterable. Bei diesem Filter müssen alle Parameter nach einem Attribut in HubSpot sortiert werden. Der erste Parameter ist ein boolescher Wert, der die Sortierreihenfolge umkehrt. Der zweite Parameter bestimmt, ob bei der Sortierung zwischen Groß- und Kleinschreibung unterschieden wird. Und der letzte Parameter gibt ein Attribut an, nach dem sortiert werden soll. Im folgenden Beispiel werden Beiträge aus einem Blog gerendert und nach Namen alphabetisch geordnet.
```html example.html theme={null}
{% set my_posts = blog_recent_posts("default", limit=5) %}
{% for item in my_posts|sort(False, False, "name") %}
{{ item.name }}
{% endfor %}
```
```html example.html theme={null}
A post
B post
C post
D post
E post
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `reverse` | Boolesch | Wert auf `true`, um die Sortierreihenfolge umzukehren |
| `case_sensitive` | Boolesch | Wert auf `true`, damit bei der Sortierung zwischen Groß- und Kleinschreibung unterschieden wird |
| `attribute` | Zeichenfolge | Attribut, nach dem sortiert werden soll; Beim Sortieren einer Liste auslassen |
## split
Teilt den Eingabe-String in eine Liste mit dem angegebenen Separator auf. Der erste Parameter gibt den Separator an, mit dem die Variable geteilt werden soll. Der zweite Parameter bestimmt, wie oft die Variable aufgeteilt werden soll. Alle übrigen Elemente verbleiben dann in der Gruppe. Im folgenden Beispiel wird ein String von Namen am `;` für die ersten vier Namen geteilt.
```html example.html theme={null}
{% set string_to_split = "Mark; Irving; Helly; Dylan; Milchick; Harmony;" %}
{% set names = string_to_split|split(";", 4) %}
{% for name in names %}
{{ name }}
{% endfor %}
```
```html example.html theme={null}
Mark
Irving
Helly
Dylan; Milchick; Harmony;
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `character_to_split_by` | Zeichenfolge | Gibt den Separator an, durch den die Variable geteilt werden soll |
| `number_of_splits` | Zahl | Bestimmt, wie oft die Variable geteilt werden soll; Alle übrigen Elemente bleiben gruppiert. |
## string
Konvertiert einen anderen Variablentyp in einen String. Im folgenden Beispiel wird eine Ganzzahl in einen String umgewandelt (`pprint` wird verwendet, um die Änderung des Variablentyps zu bestätigen).
```text hubl.txt theme={null}
{% set number_to_string = 45 %}
{{ number_to_string|string|pprint }}
```
```text gerenderte ausgabe.txt theme={null}
(String: 45)
```
## striptags
Entfernt SGML/XML-Tags und ersetzt angrenzende Leerzeichen durch ein einziges Leerzeichen. Dieser Filter kann verwendet werden, um alle HTML-Tags aus einer Variablen zu entfernen.
```html example.html theme={null}
{% set some_html = "
Some text
" %}
{{ some_html|striptags }}
```
```html example.html theme={null}
some text
```
## strtodate
Konvertiert eine Datumszeichenfolge und ein Datumsformat in ein Datums-Objekt.
```text hubl.txt theme={null}
{{ '3/3/21'|strtodate('M/d/yy') }}
```
```text gerenderte ausgabe.txt theme={null}
2021-03-03 00:00:00
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `dateFormat` | Zeichenfolge | Das zu verwendende [Datumsformat](https://docs.oracle.com/javase/7/docs/api/java/text/SimpleDateFormat.html) |
## strtotime
Konvertiert einen datetime-String und ein datetime-Format in ein datetime-Objekt.
```text hubl.txt theme={null}
{{ "2018-07-14T14:31:30+0530"|strtotime("yyyy-MM-dd'T'HH:mm:ssZ")|unixtimestamp }}
```
```text gerenderte ausgabe.txt theme={null}
1531558890000
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `datetimeFormat` | Zeichenfolge | Das zu verwendende [Datums- und Zeitformat](https://docs.oracle.com/javase/7/docs/api/java/text/SimpleDateFormat.html) |
## sum
Addiert numerische Werte in einer Sequenz. Der erste Parameter kann ein optionales Attribut angeben und der zweite Parameter legt einen Wert fest, der zurückgegeben wird, wenn die zu summierende Variable nichts enthält.
```text hubl.txt theme={null}
// Simple sum
{% set sum_this = [1, 2, 3, 4, 5] %}
{{ sum_this|sum }}
// Sum of attribute
{% set items = [15, 10] %}
{% set dict_var = [{"name": "Item1", "price": "20"}, {"name": "Item2", "price": "10"}] %}
Total: {{ dict_var|sum(attribute="price") }}
```
```text gerenderte ausgabe.txt theme={null}
15 Total: 30
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `attribute` | Zeichenfolge | Zu summierendes Attribut |
| `return_if_nothing` | Zeichenfolge | Wert, der zurückgegeben wird, wenn die zu summierende Variable nichts enthält |
## symmetric\_difference
Dieser Filter gibt die symmetrische Differenz von zwei Mengen oder Listen zurück. Die vom Filter zurückgegebene Liste enthält alle eindeutigen Elemente, die in der ersten Liste enthalten sind, aber nicht in der zweiten, oder die in der zweiten Liste enthalten sind, aber nicht in der ersten.
```text hubl.txt theme={null}
{{ [1, 2, 3]|symmetric_difference([2, 3, 4, 5]) }}
```
```text gerenderte ausgabe.txt theme={null}
[1, 4, 5]
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `list` | Array | Die zweite Liste, mit der die symmetrische Differenz zur ursprünglichen Liste ermittelt wird |
## title
Gibt eine Titel-Version des Wertes zurück (d. h., Wörter beginnen mit Großbuchstaben, aber alle übrigen Zeichen sind in Kleinbuchstaben).
```text hubl.txt theme={null}
{% set my_title="my title should be title case" %}
{{ my_title|title }}
```
```text gerenderte ausgabe.txt theme={null}
My Title Should Be Title Case
```
## tojson
Schreibt ein Objekt als JSON-String.
```text hubl.txt theme={null}
{% for content in contents %}
{{ content.blog_post_author|tojson }}
{% endfor %}
```
```json example.json theme={null}
{
"portalId": 1234567,
"id": 12312253109,
"created": 1566413741989,
"updated": 1566414012799,
"deletedAt": 0,
"fullName": "Sample User",
"email": "sampleUser@example.com",
"userId": null,
"username": null,
"slug": "sample-user",
"jsonBody": {
"avatar": "https://app.hubspot.com/settings/avatar/109d6874a0cb066c1c7263ac5df6ce7a",
"bio": "Sample Bio",
"facebook": "",
"linkedin": "",
"twitter": "",
"website": "https://www.hubspot.com"
},
"bio": "Sample Bio",
"facebook": "",
"linkedin": "",
"avatar": "https://app.hubspot.com/settings/avatar/109d6874a0cb066c1c7263ac5df6ce7a",
"gravatarUrl": "https://app.hubspot.com/settings/avatar/108bb5ac667ded34796271437dfe8d58",
"twitterUsername": "",
"hasSocialProfiles": false,
"website": "https://www.hubspot.com",
"twitter": "",
"displayName": "Sample User"
}
```
## trim
Entfernt vor- und nachgestellte Leerzeichen. HubSpot schneidet bereits Leerzeichen aus dem Markup ab, aber dieser Filter ist der Vollständigkeit halber dokumentiert.
```text hubl.txt theme={null}
{{ " remove whitespace " }}
{{ " remove whitespace "|trim }}
```
```text gerenderte ausgabe.txt theme={null}
remove whitespace remove whitespace
```
## truncate
Schneidet den Text nach einer bestimmten Anzahl von Zeichen ab. Der Standardwert ist 255. HTML-Zeichen sind in dieser Zahl enthalten.
> [!WARNING]
>
> **Hinweis:** Da dieser Filter auf die Leerzeichen zwischen den Wörtern angewiesen ist, um Zeichenfolgen zu kürzen, funktioniert er für Sprachen ohne Leerzeichen zwischen Zeichen, wie z. B. Japanisch, möglicherweise nicht wie erwartet.
```text hubl.txt theme={null}
{{ "I only want to show the first sentence. Not the second."|truncate(40) }}
{{ "I only want to show the first sentence. Not the second."|truncate(35, true, "..........") }}
```
```text gerenderte ausgabe.txt theme={null}
I only want to show the first sente..........
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `number_of_characters` | Zahl | Erlaubte Anzahl der Zeichen, bevor der Text gekürzt wird. Der Standardwert ist 255. |
| `breakword` | Boleesch | Bei `true` schneidet der Filter den Text auf die angegebene Länge ab. Bei `false` wird das letzte Wort verworfen. |
| `end` | Zeichenfolge | Überschreiben Sie die standardmäßigen „…“ Zeichen nach dem Abschneiden |
## truncatehtml
Kürzt einen vorgegebenen String unter Berücksichtigung des HTML-Markups (d. h., alle verschachtelten Tags werden korrekt geschlossen); Dadurch wird verhindert, dass ein Tag nach dem Abschneiden offen bleibt. HTML-Zeichen werden nicht auf die Gesamtzahl der Zeichen angerechnet.
> [!WARNING]
>
> **Hinweis:** Da dieser Filter auf die Leerzeichen zwischen den Wörtern angewiesen ist, um Zeichenfolgen zu kürzen, funktioniert er für Sprachen ohne Leerzeichen zwischen Zeichen, wie z. B. Japanisch, möglicherweise nicht wie erwartet.
```html example.html theme={null}
{% set html_text = "
I want to truncate this text without breaking my HTML
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `number_of_characters` | Zahl | Erlaubte Anzahl der Zeichen, bevor der Text gekürzt wird. Der Standardwert ist 255. |
| `end` | Zeichenfolge | Überschreiben Sie die standardmäßigen „…“ Zeichen nach dem Abschneiden |
| `breakword` | Boolesch | Boolescher Wert; Bei `true` schneidet der Filter den Text auf die angegebene Länge ab. Bei `false` (Standard) wird das letzte Wort verworfen. Wenn Sie nur einen der optionalen Parameter verwenden, benutzen Sie Schlüsselwortargumente wie `truncatehtml(70, breakwords = false)`. |
## unescape\_html
Konvertiert Text mit HTML-codierten Entitäten in ihre Unicode-Äquivalente.
```text hubl.txt theme={null}
{% set escape_string = "me & you" %}
{{ escape_string|unescape_html }}
```
```text gerenderte ausgabe.txt theme={null}
me & you
```
## union
Dieser Filter gibt die Vereinigung von zwei Mengen oder Listen zurück. Die vom Filter zurückgegebene Liste enthält alle eindeutigen Elemente, die in beiden Listen enthalten sind.
```text hubl.txt theme={null}
{{ [1, 2, 3]|union([2, 3, 4, 5]) }}
```
```text gerenderte ausgabe.txt theme={null}
[1, 2, 3, 4, 5]
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `list` | Array | Die zweite Liste zur Vereinigung mit der ursprünglichen Liste |
## unique
Dieser Filter extrahiert eine eindeutige Menge aus einer Sequenz oder einem Dict von Objekten. Wenn Sie ein Dict filtern, z. B. eine Liste von Beiträgen, die von einer Funktion zurückgegeben wird, können Sie angeben, welches Attribut verwendet wird, um Elemente im Dict zu deduplizieren.
```text hubl.txt theme={null}
{% set my_sequence = ["one", "one", "two", "three" ] %}
{{ my_sequence|unique }}
```
```text gerenderte ausgabe.txt theme={null}
[one, two, three]
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `attr` | Zeichenfolge | Gibt das Attribut an, das beim Filtern eines dict-Wertes verwendet werden soll |
## unixtimestamp
Dieser Filter wandelt ein datetime-Objekt in einen Unix-Zeitstempel um.
> [!WARNING]
>
> ### Bitte beachten:
>
> Sie sollten diesen Filter nur für Variablen verwenden, die ein Datum zurückgeben. Ab dem 30. September 2024 gibt dieser Filter nicht mehr das aktuelle Datum zurück, wenn ein Nullwert übergeben wird. Nach diesem Datum wird bei einem Nullwert im Filter `September 30, 2024` zurückgegeben.
```text hubl.txt theme={null}
{{ local_dt }}
{{ local_dt|unixtimestamp }}
```
```text gerenderte ausgabe.txt theme={null}
2017-01-30 17:11:44 1485814304000
```
## upper
Konvertiert alle Buchstaben in einem Wert in Großbuchstaben.
```text hubl.txt theme={null}
{% set text="text to make uppercase" %}
{{ text|upper }}
```
```text gerenderte ausgabe.txt theme={null}
TEXT TO MAKE UPPERCASE
```
## urlencode
Versieht einen String mit Escape-Zeichen und URL-codiert ihn mit UTF-8-Formatierung. Akzeptiert sowohl Dictionaries und reguläre Strings als auch paarweise Iterablen.
```text hubl.txt theme={null}
{% set encode_value="Escape & URL encode this string" %}
{{ encode_value|urlencode }}
```
```text gerenderte ausgabe.txt theme={null}
Escape+%26+URL+encode+this+string
```
## urldecode
Decodiert codierte URL-Strings zurück in die ursprüngliche URL. Akzeptiert sowohl Dictionaries und reguläre Strings als auch paarweise Iterablen.
```text hubl.txt theme={null}
{% set decode_value="Escape+%26+URL+decode+this+string" %}
{{ decode_value|urldecode }}
```
```text gerenderte ausgabe.txt theme={null}
Escape & URL decode this string
```
## urlize
Konvertiert URLs im Klartext in klickbare Links um. Wenn Sie dem Filter eine zusätzliche ganze Zahl übergeben, werden die URLs auf diese Zahl gekürzt. Der zweite Parameter ist ein boolescher Wert, der an festlegt, ob der Link rel="no follow" ist. Mit dem letzten Parameter können Sie angeben, ob der Link in einer neuen Registerkarte geöffnet werden soll.
| Parameter | Typ | Beschreibung |
| - | - | - |
| `shorten_text` | Zahl | Ganzzahl, die die URLs auf die gewünschte Anzahl kürzt |
| `no_follow` | Boolesch | Bei Festlegung auf `true` enthält der Link `rel="no follow"` |
| `target="_blank"` | Zeichenfolge | Gibt an, ob der Link in einem neuen Tab geöffnet wird |
```text hubl.txt theme={null}
{{ "http://hubspot.com/"|urlize }}
{{ "http://hubspot.com/"|urlize(10,true) }}
{{ "http://hubspot.com/"|urlize("",true) }}
{{ "http://hubspot.com/"|urlize("",false,target="_blank") }}
```
```html example.html theme={null}
http://hubspot.com/http://...http://hubspot.com/http://hubspot.com/
```
## wordcount
Zählt die Anzahl der Wörter in einem String;
> [!WARNING]
>
> Wenn der String HTML enthält, verwenden Sie den Filter `striptags`, um eine genaue Zählung zu erhalten.
```text hubl.txt theme={null}
{% set count_words = "Count the number of words in this variable" %}
{{ count_words|wordcount }}
```
```text gerenderte ausgabe.txt theme={null}
8
```
## wordwrap
Bewirkt den Umbruch von Wörtern bei einer bestimmten Zeichenanzahl. Dies funktioniert am besten in einem `
`, da HubSpot standardmäßig Leerzeichen entfernt.
```text hubl.txt theme={null}
{% set wrap_text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam efficitur, ipsum non sagittis euismod, ex risus rhoncus lectus, vel maximus leo enim sit amet dui. Ut laoreet ultricies quam at fermentum." %}
{{ wrap_text|wordwrap(10) }}
```
```text gerenderte ausgabe.txt theme={null}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam efficitur, ipsum
non sagittis euismod, ex risus rhoncus lectus, vel maximus leo enim sit amet
dui. Ut laoreet ultricies quam at fermentum.
```
| Parameter | Beschreibung |
| - | - |
| `character_count` | Anzahl der Zeichen, mit denen der Inhalt umgebrochen werden soll. |
## xmlattr
Erstellt einen HTML/XML-Attribut-String, der auf den Elementen in einem Dict basiert; Alle Werte, die weder keines noch undefiniert sind, werden automatisch mit Escape-Zeichen versehen. Es wird automatisch ein Leerzeichen vor das Element gesetzt, wenn der Filter etwas zurückgegeben hat, es sei denn, der erste Parameter ist falsch.
```html example.html theme={null}
{% set html_attributes = {"class": "bold", "id": "sidebar"} %}
```
```html example.html theme={null}
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `autospace` | Boolesch | Wert auf `true`, um ein Leerzeichen vor dem Element hinzuzufügen |
# HubL-Funktionen
Source: https://developers.hubspot.de/docs/cms/reference/hubl/functions
Eine Referenzliste aller verfügbaren HubL-Funktionen.
Funktionen in HubL ähneln Filtern insofern, als sie Parameter akzeptieren und einen Wert erzeugen. Allerdings müssen nicht alle Funktionen auf einen ursprünglichen Vorlagenwert angewendet werden, sondern sie interagieren mit anderen Bereichen Ihrer HubSpot-Umgebung.
Wenn Sie eine ältere Website betreiben, sollten Sie sich auch die [Liste der veralteten HubL-Funktionen](/docs/cms/versions-deprecations/deprecated/hubl/filters-functions) ansehen.
Im Folgenden erfahren Sie mehr über die einzelnen HubL-Funktionen und ihre Syntax.
## append
Fügt ein einzelnes Element an das Ende einer Liste hinzu.
```text hubl.txt theme={null}
{% set numbers_under_5 = [1,2,3] %}
{% do numbers_under_5.append(4) %}
{{numbers_under_5}}
```
```text gerenderte ausgabe.txt theme={null}
[1, 2, 3, 4]
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `item` | Beliebig | Element, das an die Liste angefügt werden soll. |
## blog\_all\_posts\_url
Die `blog_all_posts_url`-Funktion gibt eine vollständige URL zur Listing-Seite für alle Blog-Beiträge für den angegebenen Blog zurück.
Das folgende Beispiel zeigt, wie diese Funktion als `href` eines Anchors verwendet werden kann.
```html example.html theme={null}
All Marketing blog posts
```
```html example.html theme={null}
All Marketing blog posts
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `selected_blog` | Blog-ID oder "default" | Gibt an, welcher Blog verwendet werden soll. Die Blog-ID wird vom [Modul-Blog-Feld](/docs/cms/reference/fields/module-theme-fields#blog) zurückgegeben. |
## blog\_author\_url
Die `blog_author_url`-Funktion gibt eine vollständige URL zur Listing-Seite des angegebenen Blog-Autors zurück.
Das folgende Beispiel zeigt, wie diese Funktion als `href` eines Anchors verwendet werden kann. Dies kann mit `blog_authors` kombiniert werden, wie in den Beispielen für diese Funktion gezeigt.
```html example.html theme={null}
Brian Halligan
```
```html example.html theme={null}
Brian Halligan
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `selected_blog` | Blog-ID oder "default" | Gibt an, in welchem Blog die Listing-Seite des Autors vorhanden ist. Sie können einen Blog per ID angeben oder `"default"` verwenden, um den Standardblog auszuwählen. Die Blog-ID wird vom [Modul-Blog-Feld](/docs/cms/reference/fields/module-theme-fields#blog) zurückgegeben. |
| `author_slug` | Zeichenfolge oder HubL-Variable | Gibt an, zu welchem Autor verlinkt werden soll. Kann entweder `content.blog_post_author.slug` oder einen Namen mit Bindestrich in Kleinbuchstaben verwenden. Beispiel: `"jane-doe"`. |
## blog\_authors
Die `blog_authors`-Funktion gibt eine Sequenz von Blog-Autorenobjekten für den angegebenen Blog zurück, aufsteigend sortiert nach Kürzel. Diese Sequenz kann in einer Variablen gespeichert und durchlaufen werden, um benutzerdefinierte Autorenbeitragsfilter zu erstellen.
Die Anzahl der Live-Beiträge eines jeden Autors kann mithilfe von `author.live_posts` abgerufen werden.
> [!WARNING]
>
> **Hinweis:** Diese Funktion verfügt über ein Limit von 250 Autoren. Für diese Funktion besteht außerdem ein Limit von 10 Aufrufen pro Seite.
Die erste Zeile des folgenden Beispiels zeigt, wie die Funktion eine Sequenz von Autorenobjekten zurückgibt. Der Rest des Beispiels demonstriert einen Anwendungsfall, bei dem eine Sequenz in einer Variablen gespeichert und dann durch die Autorenobjekte iteriert wird, um eine Reihe von Autor-Listing-Links zu drucken. Das Beispiel geht davon aus, dass der Blog 4 Autoren hat.
```html example.html theme={null}
{{ blog_authors("default", 250) }}
{% set my_authors = blog_authors("default", 250) %}
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `selected_blog` | Blog-ID oder "default" | Gibt an, welcher Blog verwendet werden soll, entweder ein bestimmter Blog per ID oder der Standard-Blog mit `"default"`. Die Blog-ID wird vom [Modul-Blog-Feld](/docs/cms/reference/fields/module-theme-fields#blog) zurückgegeben. |
| `limit` | Ganzzahl | Legt das Limit für die Anzahl der abgerufenen Autoren fest. |
## blog\_by\_id
Die `blog_by_id`-Funktion gibt ein Blog nach ID zurück. Der folgende Beispielcode zeigt, wie diese Funktion verwendet wird, um ein mit einem Hyperlink versehenes Listenelement zu erzeugen.
> [!WARNING]
>
> **Hinweis:** Diese Funktion ist auf 10 Aufrufe pro Seite begrenzt.
```html example.html theme={null}
{% set my_blog = blog_by_id(47104297) %}
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `selected_blog` | Blog-ID oder "default" | Gibt an, welcher Blog verwendet werden soll, entweder ein bestimmter Blog per ID oder der Standard-Blog mit `"default"`. Die Blog-ID wird vom [Modul-Blog-Feld](/docs/cms/reference/fields/module-theme-fields#blog) zurückgegeben. |
## blog\_page\_link
Die `blog_page_link`-Funktion generiert die URL einer paginierten Ansicht Ihres Blog-Listings. Die Funktion nimmt einen numerischen Parameter an, mit dem Sie Links für die aktuelle, nächste, vorherige oder eine bestimmte Seite erzeugen können. Diese Funktion wird in der Regel im `href`-Attribut von Anchor-Tags für die Seitennummerierung verwendet und muss in Ihrer Blog-Listing-Vorlage verwendet werden.
Die folgenden Beispiele zeigen diese Funktion in der Verwendung als Anchor-`href`. Das erste Beispiel gibt die aktuelle Seite aus. Das zweite Beispiel nimmt den Parameter 7 an, um die siebte Seite anzugeben. Das dritte Beispiel verwendet die `next_page_num`-Variable, um einen Link zu erzeugen, der sich auf die aktuelle Seitenzahl bezieht (Sie können auch die `last_page_num`-Variable für die vorherige Seite verwenden). Das letzte Beispiel verwendet die `current_page_num`-Variable und einen `+`-Operator, um einen Link zu erstellen, der um 4 größer ist als die aktuelle Seite.
```html example.html theme={null}
Current pagePage 7NextPage Plus 4
```
```html example.html theme={null}
Page 1Page 7NextPage Plus 4
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `page` | Zahl oder HubL-Variable | Seitennummer, die zur Generierung der URL oder der HubL-Variable für die Seitennummer verwendet wird. |
## blog\_popular\_posts
Diese Funktion stellt eine bestimmte Anzahl von beliebten Beiträgen in einer Sequenz dar. Die Sequenz kann dann in einer Variablen gespeichert und mit einer for-Schleife durchlaufen werden. Dabei wird eine benutzerdefinierte Beitragsauflistung mit Ihren beliebtesten Beiträgen erstellt.
Die Ergebnisse dieser Funktion werden für sechs Stunden zwischengespeichert. Um Blog-Beiträge mithilfe von HubL auf eine Weise abzurufen, bei der Caching vermieden wird, sollten Sie stattdessen [blog\_recent\_tag\_posts](#blog-recent-tag-posts) verwenden.
Im folgenden Beispielcode zeigt die erste Zeile, wie die Funktion eine Sequenz zurückgibt. Die Sequenz wird als Variable gespeichert, die dann in einer [for-Schleife](/docs/cms/reference/hubl/loops) verwendet wird. [Alle Blog-Beitragsvariablen](/docs/cms/reference/hubl/variables#blog-variables) sollten den Namen des einzelnen Schleifenelements und nicht `content.` verwenden. In diesem Beispiel wird `pop_post.name` verwendet. Dieses Verfahren kann für Blog-Vorlagen und Website-Seiten verwendet werden.
> [!WARNING]
>
> **Hinweis:** Diese Funktion verfügt über ein Limit von 200 Beiträgen. Für diese Funktion besteht außerdem ein Limit von 10 Aufrufen pro Seite.
```html example.html theme={null}
{% set pop_posts = blog_popular_posts("default", 5, ["marketing-tips", "sales-tips"], "popular_past_month", "AND") %}
{% for pop_post in pop_posts %}
{{ pop_post.name }}
{% endfor %}
```
```html example.html theme={null}
[Popular post title 1, Popular post title 2, Popular post title 3, Popular post
title 4, Popular post title 5]
Popular post title 1
Popular post title 2
Popular post title 3
Popular post title 4
Popular post title 5
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `selected_blog` | Blog-ID oder "default" | Gibt an, welcher Blog verwendet werden soll, entweder ein bestimmter Blog per ID oder der Standard-Blog mit `"default"`. |
| `limit` | Ganzzahl | Gibt die Anzahl der Beiträge an, die der Sequenz hinzugefügt werden sollen (Limit von 200). Wenn nicht angegeben, wird standardmäßig 10 verwendet. |
| `tag_slug` | Array | Optionale Liste von Tags, nach denen Beiträge gefiltert werden können. |
| `time_frame` | Zeichenfolge | Optionaler Analytics-Zeitraum, nach dem Beiträge gefiltert werden sollen. Die Standardeinstellung ist `"popular_past_year"`. Muss eine der Folgenden sein:
`"popular_all_time"`
`"popular_past_year"`
`"popular_past_six_months"`
`"popular_past_month"`
Dieser Parameter ist erforderlich, wenn der `logical_operator`-Parameter einbezogen wird. |
| `logical_operator` | Zeichenfolge | Wenn `tag_slug` mehrere Tags enthält, verwenden Sie diesen Operator, um Ergebnisse mit einer `AND`- oder `OR`-Logik zu filtern. Standardmäßig verwendet diese Funktion `OR`-Logik, um Beiträge zurückzugeben, die mit einem der angegebenen Tags markiert sind. Bei Einbeziehen dieses Parameters ist `time_frame` erforderlich. |
## blog\_post\_archive\_url
Die `blog_post_archive_url`-Funktion gibt eine vollständige URL zur Archiv-Listing-Seite für die angegebenen Datumswerte im angegebenen Blog zurück. Diese Funktion hat zwei erforderliche Parameter und zwei optionale Parameter. Der erste Parameter ist eine Blog-ID oder einfach das Keyword `"default"`. Das zweite ist das Jahr der archivierten Beiträge, die Sie anzeigen möchten.
Die optionalen Parameter umfassen den Monat und den Tag der archivierten Beiträge, die Sie anzeigen möchten.
Das folgende Beispiel zeigt, wie diese Funktion als `href` eines Anchors verwendet werden kann.
```html example.html theme={null}
Posts from July 5th, 2017
```
```html example.html theme={null}
Posts from July 5th, 2017
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `selected_blog` | Blog-ID oder "default" | Gibt an, welcher Blog verwendet werden soll, entweder ein bestimmter Blog per ID oder der Standard-Blog mit `"default"`. |
| `year` | Ganzzahl | Das Jahr |
| `month` | Ganzzahl | Der optionale Monat |
| `day` | Ganzzahl | Der optionale Tag |
## blog\_recent\_author\_posts
Die `blog_recent_author_posts`-Funktion gibt eine Sequenz von Blog-Beitragsobjekten für den angegebenen Autor zurück, sortiert nach den neuesten. Diese Sequenz von Beiträgen kann in einer Variablen gespeichert und mit einer for-Schleife durchlaufen werden, um eine benutzerdefiniertes Beitragsauflistung mit Beiträgen eines bestimmten Autors zu erstellen.
Die Funktion akzeptiert drei Parameter. Der erste Parameter gibt an, von welchem Blog die Beiträge eines Autors gesammelt werden sollen. Der Wert sollte `"default"` oder die Blog-ID eines bestimmten Blogs sein (verfügbar in der URL des Blog-Dashboards). Der zweite Parameter gibt an, welcher Autor verwendet werden soll. Dieser Parameter kann das **`content.blog_post_author.slug`** verwenden, um den Autor des aktuellen Beitrags zu verwenden, oder einen Namen mit Bindestrich in Kleinbuchstaben wie `"brian-halligan"` akzeptieren. Der dritte Parameter gibt an, wie viele Beiträge abgerufen werden.
Die erste Zeile des folgenden Beispiels zeigt, wie die Funktion eine Sequenz von Beiträgen eines Autors zurückgibt. In diesem Beispiel wird nicht der genaue Autorenname angegeben, sondern der aktuelle Autor des Beitrags. Die Sequenz wird in einer Variablen gespeichert und in einer Schleife durchlaufen. [Alle Blog-Beitragsvariablen](/docs/cms/reference/hubl/variables#blog-variables) sollten den Namen des einzelnen Schleifenelements und nicht `content.` verwenden. In diesem Beispiel wird `author_post.name` verwendet. Dieses Verfahren kann für Blog- und Seitenvorlagen verwendet werden.
> [!WARNING]
>
> **Hinweis:** Diese Funktion ist auf 200 Beiträge und 10 Aufrufe pro Seite begrenzt.
```html example.html theme={null}
{{ blog_recent_author_posts("default", content.blog_post_author.slug, 5 ) }}
{% set author_posts = blog_recent_author_posts("default", content.blog_post_author.slug, 5) %}
{% for author_post in author_posts %}
{{ author_post.name }}
{% endfor %}
```
```html example.html theme={null}
[Post by author title 1, Post by author title 2, Post by author title 3, Post by
author title 4, Post by author title 5]
Post by author title 1
Post by author title 2
Post by author title 3
Post by author title 4
Post by author title 5
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `selected_blog` | Blog-ID oder "default" | Gibt an, welcher Blog verwendet werden soll. Die Blog-ID wird vom [Modul-Blog-Feld](/docs/cms/reference/fields/module-theme-fields#blog) zurückgegeben. |
| `author_slug` | Zeichenfolge | Gibt an, nach welchem Autor gefiltert werden soll. |
| `limit` | Ganzzahl | Gibt die Anzahl der Beiträge an, die der Sequenz hinzugefügt werden sollen (Limit von 200). |
## blog\_recent\_posts
Die `blog_recent_posts`-Funktion gibt eine Sequenz von Blog-Beitragsobjekten für den angegebenen Blog zurück, sortiert nach dem neuesten. Diese Sequenz von Beiträgen kann in einer Variablen gespeichert und mit einer for-Schleife durchlaufen werden. Dabei wird eine benutzerdefinierte Beitragsauflistung mit Ihren beliebtesten Beiträgen erstellt.
Die Funktion nimmt zwei Parameter an. Der erste Parameter gibt an, von welchem Blog beliebte Beiträge gesammelt werden sollen. Der Wert sollte `"default"` oder die Blog-ID eines bestimmten Blogs sein (verfügbar in der URL des Blog-Dashboards). Der zweite Parameter gibt an, wie viele Beiträge abgerufen werden.
Die erste Zeile des folgenden Beispiels zeigt, wie die Funktion eine Sequenz zurückgibt. Die Sequenz wird in einer Variablen gespeichert und in einer Schleife durchlaufen. [Alle Blog-Beitragsvariablen](/docs/cms/reference/hubl/variables#blog-variables) sollten den Namen des einzelnen Schleifenelements und nicht `content.` verwenden. In diesem Beispiel wird `rec_post.name` verwendet. Dieses Verfahren kann nicht nur für Blog-Vorlagen verwendet werden, sondern auch für normale Seiten.
> [!WARNING]
>
> **Hinweis:** Diese Funktion ist auf 200 Beiträge und 10 Aufrufe pro Seite begrenzt.
```html example.html theme={null}
{{ blog_recent_posts("default", 5) }}
{% set rec_posts = blog_recent_posts("default", 5) %}
{% for rec_post in rec_posts %}
{{ rec_post.name }}
{% endfor %}
```
```html example.html theme={null}
[Recent post title 1, Recent post title 2, Recent post title 3, Recent post
title 4, Recent post title 5]
Recent post title 1
Recent post title 2
Recent post title 3
Recent post title 4
Recent post title 5
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `selected_blog` | Blog-ID oder "default" | Gibt an, welcher Blog verwendet werden soll, entweder ein bestimmter Blog per ID oder der Standard-Blog mit `"default"`. Die Blog-ID wird vom [Modul-Blog-Feld](/docs/cms/reference/fields/module-theme-fields#blog) zurückgegeben. |
| `limit` | Ganzzahl | Gibt die Anzahl der Beiträge an, die der Sequenz hinzugefügt werden sollen, maximal 200. |
## blog\_recent\_tag\_posts
Die `blog_recent_tag_posts`-Funktion gibt eine Sequenz von Blog-Beitragsobjekten für ein bestimmtes Tag oder mehrere Tags zurück, sortiert nach dem neuesten. Diese Sequenz von Beiträgen kann in einer Variablen gespeichert und mit einer for-Schleife durchlaufen werden, um eine benutzerdefiniertes Beitragsauflistung mit Beiträgen eines bestimmten Tags oder mehrerer Tags zu erstellen.
Im folgenden Beispielcode:
* Die erste Zeile zeigt, wie die Funktion eine Sequenz von Beiträgen nach Tag zurückgibt.
* Die zweite Zeile zeigt, wie die Funktion in einer Sequenzvariablen gespeichert wird. Der Rest des Codes verwendet dann eine for-Schleife, um die Variablenwerte zu durchlaufen. [Alle Blog-Beitragsvariablen](/docs/cms/reference/hubl/variables#blog-variables) sollten den Namen des einzelnen Schleifenelements und nicht `content.` verwenden. In diesem Beispiel wird `tag_post.name` verwendet. Sie können dieses Verfahren sowohl auf Blog- als auch auf Website-Seiten verwenden.
Erfahren Sie mehr über das [Erstellen eines zugehörigen Blog-Beitrags-Listings](/docs/cms/reference/hubl/tags/related-blog-posts).
> [!WARNING]
>
> **Hinweis:** Diese Funktion ist auf 100 Beiträge und 10 Aufrufe pro Seite begrenzt.
```html example.html theme={null}
{{ blog_recent_tag_posts("default", "marketing-tips", 5) }}
{% set tag_posts = blog_recent_tag_posts("default", ["marketing", "fun", "inbound"], 3, "AND") %}
{% for tag_post in tag_posts %}
{{ tag_post.name }}
{% endfor %}
```
```html example.html theme={null}
[Post about Marketing 1, Post about Marketing 2, Post about Marketing 3, Post
about Marketing 4, Post about Marketing 5]
Post about Marketing
Post about Fun
Post about Inbound
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `selected_blog` | Blog-ID oder "default" | Gibt an, welcher Blog verwendet werden soll, entweder ein bestimmter Blog per ID oder der Standard-Blog mit `"default"`. Die Blog-ID wird vom [Modul-Blog-Feld](/docs/cms/reference/fields/module-theme-fields#blog) zurückgegeben. |
| `tag_slug` | Zeichenfolge | Gibt an, für welches Tag gefiltert werden soll. Sie können bis zu 10 Tags einbeziehen, durch Kommas getrennt. Tags mit mehreren Wörtern müssen in Kleinbuchstaben geschrieben werden, wobei Leerzeichen durch Bindestriche ersetzt werden müssen. |
| `limit` | Ganzzahl | Gibt die Anzahl der Beiträge an, die der Sequenz hinzugefügt werden sollen. Dieser Parameter ist erforderlich, wenn ein `logical_operator`-Parameter einbezogen wird. |
| `logical_operator` | Zeichenfolge | Wenn `tag_slug` mehrere Tags enthält, verwenden Sie diesen Operator, um Ergebnisse mit einer `AND`- oder `OR`-Logik zu filtern. Standardmäßig verwendet diese Funktion `OR`-Logik, um Beiträge zurückzugeben, die mit einem der angegebenen Tags markiert sind. Bei Einbeziehen dieses Parameters ist `limit` erforderlich. |
## blog\_tag\_url
Die `blog_tag_url`-Funktion gibt eine vollständige URL zur Listing-Seite des angegebenen Blog-Tags zurück.
Diese Funktion akzeptiert zwei Parameter. Der erste Parameter gibt an, in welchem Blog sich die Listing-Seite des Tags befindet. Der zweite Parameter gibt an, welches Tag verknüpft werden soll. Dieser Parameter kann das **`topic.slug`** für ein bestimmtes Tag von `content.topic_list` verwenden oder einen Namen mit Bindestrich in Kleinbuchstaben akzeptieren, z. B. `"marketing-tips"`.
Das folgende Beispiel zeigt, wie diese Funktion als href eines Anchors verwendet werden kann.
```html example.html theme={null}
Inbound Marketing
```
```html example.html theme={null}
Inbound Marketing
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `selected_blog` | Blog-ID oder "default" | Gibt an, welcher Blog verwendet werden soll, entweder ein bestimmter Blog per ID oder der Standard-Blog mit `"default"`. |
| `tag_slug` | Zeichenfolge | Gibt an, zu welchem Tag verlinkt werden soll. |
## blog\_tags
Die `blog_tags`-gibt eine Sequenz der 250 meistgebloggten Tags (basierend auf der Anzahl der zugehörigen Blog-Beiträge) für den angegebenen Blog zurück, sortiert nach der Anzahl der Blog-Beiträge. Diese Sequenz kann in einer Variablen gespeichert und durchlaufen werden, um benutzerdefinierte Tag-Beitragsfilter zu erstellen. Die Anzahl der Beiträge für die einzelnen Tags kann mit `tag.live_posts` abgerufen werden.
Diese Funktion akzeptiert zwei Parameter. Der erste Parameter gibt an, von welchem Blog die Tags abgerufen werden sollen. Der zweite Parameter legt eine Obergrenze für die Anzahl der abgerufenen Tags fest.
Die erste Zeile des folgenden Beispiels zeigt, wie die Funktion eine Sequenz von Tag-Objekten zurückgibt. Der Rest des Beispiels demonstriert einen Anwendungsfall, bei dem eine Sequenz in einer Variablen gespeichert und dann durch die Tag-Objekte iteriert wird, um eine Reihe von Tag-Links zu drucken. Das Beispiel geht davon aus, dass der Blog über 4 Tags verfügt.
> [!WARNING]
>
> **Hinweis:** Diese Funktion ist auf 250 Tags begrenzt.
```html example.html theme={null}
{{ blog_tags("default", 250) }}
{% set my_tags = blog_tags("default", 250) %}
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `selected_blog` | Blog-ID oder "default" | Gibt an, welcher Blog verwendet werden soll. Die Blog-ID wird vom [Modul-Blog-Feld](/docs/cms/reference/fields/module-theme-fields#blog) zurückgegeben. |
| `limit` | Ganzzahl | Die maximale Anzahl der zurückzugebenden Tags. |
## blog\_total\_post\_count
Diese Funktion gibt die Gesamtzahl der veröffentlichten Beiträge im angegebenen Blog zurück. Wird kein Parameter angegeben, werden Ihre Standard-Blog-Beiträge gezählt. Alternativ können Sie auch `"default"` oder die Blog-ID eines anderen Blogs angeben. Die Blog-ID ist in der URL Ihres Blog-Dashboards für einen bestimmten Blog verfügbar.
> [!WARNING]
>
> **Hinweis:** Diese Funktion ist auf 10 Aufrufe pro Seite begrenzt.
```text hubl.txt theme={null}
{{ blog_total_post_count }}
{{ blog_total_post_count(359485112) }}
```
```text gerenderte ausgabe.txt theme={null}
16 54
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `selected_blog` | Blog-ID oder "default" | Gibt an, welcher Blog verwendet werden soll. Die Blog-ID wird vom [Modul-Blog-Feld](/docs/cms/reference/fields/module-theme-fields#blog) zurückgegeben. |
## clear
Entfernt alle Elemente aus einer Liste. Im Gegensatz zu `pop()` wird nichts zurückgegeben.
```text hubl.txt theme={null}
{% set words = ["phone","home"] %}
{% do words.clear() %}
{{words}}
```
```text gerenderte ausgabe.txt theme={null}
[]
```
## color\_contrast
Diese Funktion validiert den Farbkontrast basierend auf [WCAG-Standards](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum). Sie müssen zwei Farben als Argumente angeben, und Sie können ein optionales Argument angeben, um die Bewertung zu spezifizieren (`AA` oder `AAA`). Gibt `true` oder `false` zurück, je nachdem, ob die Farben den Standard erfüllen/übertreffen.
```text hubl.txt theme={null}
{{color_contrast('#FFFFFF','#273749')}}
{{color_contrast('rgb(255, 255, 255)','rgb(229, 237, 245)','AAA')}}
Hey there
```
```text gerenderte ausgabe.txt theme={null}
true false Hey there
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `color_1` | Farbe | Die erste Farbe zum Vergleichen. Akzeptiert:
6-stellige Hex-Codes (`#FFFFFF`)
3-stellige Hex-Codes (`#F0A`)
RGB-Farbcodes (`rgb(12,31,1)`)
Kann auch eine Variable verwenden, die einen Hex- oder RGB-Farbcode speichert. Beispiel:`theme.primary_color.color` |
| `color_2` | Farbe | Die zweite Farbe, die mit der ersten verglichen werden soll. |
| `rating` | Zeichenfolge | Der WCAG-Standard, der für die Bewertung verwendet werden soll. Kann entweder `AA` (Standard) oder `AAA` sein. |
## color\_variant
Diese Funktion macht einen Hex-Wert oder eine Farbvariable um einen bestimmten Wert heller oder dunkler. Der erste Parameter ist die Hex-Farbe (zum Beispiel „#FFDDFF“) oder eine Variable, die einen Hex-Wert speichert. Der zweite Parameter ist der Wert, um den er angepasst werden soll, von 0 bis 255. Diese Funktion kann in CSS-Dateien verwendet werden, um eine Farbvariante zu erzeugen. Ein weiterer guter Anwendungsfall ist die Verwendung mit einem Farbparameter eines Farbmoduls, um dem Benutzer die Möglichkeit zu geben, eine Primärfarbe anzugeben, die automatisch eine Farbvariante erzeugt.
Im folgenden Beispiel wird die Hex-Farbe #3A539B in einer Variablen namens `base_color` gespeichert. Die Farbe wird um -80 verändert, was ein dunkleres Blau ergibt (#00034B).
```text hubl.txt theme={null}
{% set base_color ="#3A539B" %}
{{ color_variant(base_color, -80) }}
```
```text gerenderte ausgabe.txt theme={null}
#00034b
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `base_color` | HEX-Farbzeichenfolge | Die zu ändernde Ausgangsfarbe. Zum Beispiel: `#F7F7F7`. |
| `brightness_offset` | Ganzzahl | Eine positive oder negative Zahl, die zum Aufhellen oder Verdunkeln der Grundfarbe verwendet wird. |
## content\_by\_id
Die **`content_by_id`**-Funktion gibt eine Landingpage, eine Website-Seite oder einen Blog-Beitrag nach ID zurück. Der einzige von dieser Funktion akzeptierte Parameter ist eine numerische Inhalts-ID.
Der folgende Beispielcode zeigt, wie diese Funktion verwendet wird, um ein mit einem Hyperlink versehenes Listenelement zu erzeugen.
> [!WARNING]
>
> **Hinweis:** Diese Funktion ist auf 10 Aufrufe pro Seite begrenzt.
```html example.html theme={null}
{% set my_content = content_by_id(4715624297) %}
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `id` | ID | Die ID des zu suchenden Inhalts. |
## content\_by\_ids
Gibt bei einer Liste von Inhalts-IDs ein Dictionary von Landingpages, Website-Seites oder Blog-Beiträgen zurück, die diesen IDs entsprechen.
Diese Funktion nimmt einen Parameter an, eine Liste von Seiten- oder Blog-Beitrags-IDs, die in einem Array platziert sind. Es können bis zu 100 Inhaltsobjekte übergeben werden. Der folgende Beispielcode zeigt, wie diese Funktion verwendet wird, um eine Liste von Listenelementen mit Hyperlinks zu erzeugen.
> [!WARNING]
>
> **Hinweis:** Diese Funktion ist auf 10 Aufrufe pro Seite begrenzt.
```html example.html theme={null}
{% set contents = content_by_ids([4715624297, 4712623297, 5215624284]) %}
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `ids` | Liste | Eine Liste von Seiten- oder Blog-Beitrags-IDs, die gesucht werden sollen. Es können bis zu 100 Inhaltsobjekte übergeben werden. |
## copy
Gibt eine flache Kopie der Liste zurück. Äquivalent zu `a[:]`.
Eine *flache Kopie* konstruiert ein neues zusammengesetztes Objekt und fügt dann (soweit möglich) *Verweise* auf die im Original gefundenen Objekte ein.
```text hubl.txt theme={null}
{% set a = ["ham"] %}
{% set b = a.copy() %}
a: {{a}}
b: {{b}}
After Append
{% do a.append("swiss") %}
a: {{a}}
b: {{b}}
```
```text gerenderte ausgabe.txt theme={null}
a: [ham] b: [ham] After Append a: [ham, swiss] b: [ham]
```
## count
Gibt die Anzahl der Vorkommen einer Variablen in einer Liste zurück.
```html example.html theme={null}
{% set attendees = ["Jack","Jon","Jerry","Jessica"] %}
{% set jon_count = attendees.count("Jon") %}
There are {{jon_count}} Jon's in the list.
After append:
{% do attendees.append("Jon") %}
{% set jon_count_after_append = attendees.count("Jon") %}
There are now {{jon_count_after_append}} Jon's in the list.
```
```html example.html theme={null}
There are 1 Jon's in the list.
After append:
There are now 2 Jon's in the list.
```
## crm\_associations
Ruft eine Liste von CRM-Datensätzen ab, die mit einem anderen Datensatz anhand der Datensatz-ID, der Zuordnungskategorie und der Zuordnungsdefinitions-ID verknüpft sind.
Diese Funktion gibt ein Objekt mit den folgenden Attributen zurück: `has_more`, `total`, `offset` und `results`.
* `has_more` zeigt an, dass über diesen Stapel hinaus weitere Ergebnisse verfügbar sind (total > offset).
* `total` ist die Gesamtzahl der verfügbaren Ergebnisse.
* `offset` ist der Offset, der für den nächsten Stapel von Ergebnissen verwendet werden soll.
* *`results`* gibt ein Array mit den angegebenen zugehörigen Objekten zurück, die den Parametern der Funktion entsprechen.
> [!WARNING]
>
> **Hinweis:** Aus Sicherheitsgründen können von den [HubSpot-Standardobjekttypen](https://knowledge.hubspot.com/de/get-started/manage-your-crm-database#standard-objects) nur die Objekte `product` und `marketing_event` auf einer öffentlich zugänglichen Seite abgerufen werden. Alle anderen Standardobjekttypen müssen auf einer Seite gehostet werden, die entweder [passwortgeschützt ist](https://knowledge.hubspot.com/de/website-pages/password-protect-a-page) oder eine [Anmeldung als registriertes CMS-Mitglied](https://knowledge.hubspot.com/de/website-pages/require-member-registration-to-access-private-content) erfordert. Für benutzerdefinierte Objekte gilt diese Einschränkung nicht.
```text hubl.txt theme={null}
{% set associated_contacts = crm_associations(847943847, "HUBSPOT_DEFINED", 2, "limit=3&years_at_company__gt=2&orderBy=email", "firstname,email", false) %}
{{ associated_contacts }}
```
```text gerenderte ausgabe.txt theme={null}
{has_more=true, offset=3, total=203, results=[{firstname=Aimee, id=905,
email=abanks@company.com}, {firstname=Amy, id=1056, email=abroma@company.com},
{firstname=Abigael, id=957, email=adonahu@company.com}]}
```
> [!WARNING]
>
> **Hinweis:** Diese Funktion kann maximal 10 Mal pro Seite aufgerufen werden. Jeder Aufruf von `crm_associations` kann höchstens 100 Objekte zurückgeben. Die Standardobergrenze liegt bei 10 Objekten.
| Parameter | Typ | Beschreibung |
| - | - | - |
| `id` | ID | ID des Datensatzes, von dem Zuordnungen gesucht werden sollen. |
| `association category` | Zeichenfolge | Die Kategorie der Zuordnungsdefinition. Mögliche Werte sind `HUBSPOT_DEFINED`, `USER_DEFINED` und `INTEGRATOR_DEFINED`. Dieser Parameter kann bei von HubSpot definierten integrierten Zuordnungstypen weggelassen werden. |
| `association type id` | Ganzzahl | Die ID der zu verwendenden Zuordnungsdefinition. Für standardmäßig von HubSpot unterstützte Objekte siehe [ID des zu verwendenden Zuordnungstyps](https://developers.hubspot.de/docs/guides/api/crm/associations). Andernfalls kann diese Zuordnungs-ID in der [CRM-Objektschema-API](/docs/cms/start-building/features/data-driven-content/crm-objects#getting-a-custom-object-type-s-details) gefunden werden. |
| `query` | Zeichenfolge | Die `id` des Datensatzes ODER eine Abfragezeichenfolge, getrennt durch `&`. Alle Ausdrücke werden mit UND verknüpft. Unterstützte Operatoren sind:
`eq` (Standard)
`neq`
`lt`
`lte`
`gt`
`gte`
`is_null`
`not_null`
`in`
`nin`
`contains` (gilt für Eigenschaften mit mehreren Werten oder Zeichenfolgeneigenschaften, z. B. *"firstname\_\_contains=Tim"*).
Abfragen können die folgenden Parameter enthalten:
`limit`: die maximale Anzahl von Ergebnissen, die in der Antwort zurückgegeben werden. Zum Beispiel `limit=50`.
`offset`: zum Durchblättern von Ergebnissen, wenn die Anzahl der zurückgegebenen Ergebnisse den limit-Parameter übersteigt. Beispiel: `offset=51`.
`orderBy`: ordnet die Ergebnisse nach einer bestimmten Eigenschaft an. Zum Beispiel: `orderBy=email`.
|
| `properties` | Zeichenfolge | Optional. Eine durch Kommata getrennte Liste von Eigenschaften, die zurückgegeben werden sollen. Standardmäßig wird ein kleiner Satz allgemeiner Eigenschaften zurückgegeben. Die ID-Eigenschaft wird immer zurückgegeben. Eine vollständige Liste der Eigenschaften kann über die Endpunkte [alle Kontakteigenschaften abrufen](https://developers.hubspot.de/docs/reference/api/crm/properties/v1-contacts#get-all-contact-properties) und [Alle Unternehmenseigenschaften abrufen](https://developers.hubspot.de/docs/reference/api/crm/properties/v1-companies#get-all-company-properties) abgerufen werden. |
| `formatting` | Boolescher Wert | Optional. Formatieren Sie Werte wie Datum und Währung entsprechend den Einstellungen dieses Portals. Übergeben Sie `false` für Rohzeichenfolgen. |
## crm\_object
Ruft einen einzelnen CRM-Datensatz per Abfrage oder ID ab. Datensätze werden als ein Dictionary von Eigenschaften und Werten zurückgegeben.
Diese Funktion kann auch [mit benutzerdefinierten und Integrator-Objekten verwendet](/docs/cms/start-building/features/data-driven-content/crm-objects) werden.
> [!WARNING]
>
> **Hinweis:** Aus Sicherheitsgründen können von den [HubSpot-Standardobjekttypen](https://knowledge.hubspot.com/de/get-started/manage-your-crm-database#standard-objects) nur die Objekte `product` und `marketing_event` auf einer öffentlich zugänglichen Seite abgerufen werden. Alle anderen Standardobjekttypen müssen auf einer Seite gehostet werden, die entweder [passwortgeschützt ist](https://knowledge.hubspot.com/de/website-pages/password-protect-a-page) oder eine [Anmeldung als registriertes CMS-Mitglied](https://knowledge.hubspot.com/de/website-pages/require-member-registration-to-access-private-content) erfordert. Für benutzerdefinierte Objekte gilt diese Einschränkung nicht.
> [!TIP]
>
> Was ist der Unterschied zwischen `in` und `contains`?
>
> `in` gibt zurück, ob der Eigenschaftswert mit einem der angegebenen Werte übereinstimmt. `contains` Hingegen gibt zurück, ob die Eigenschaftswerte für die Mehrfachauswahl alle angegebenen Werte enthalten.
```text hubl.txt theme={null}
{% set contact = crm_object("contact", "email=contact@company.com", "firstname,lastname", false) %}
{% set contact = crm_object("contact", 123) %}
{{ contact.firstname }}
{{ contact.lastname }}
```
```text gerenderte ausgabe.txt theme={null}
Brian Halligan
```
> [!WARNING]
>
> **Hinweis:** Diese Funktion kann maximal 10 Mal auf einer Seite aufgerufen werden.
| Parameter | Typ | Beschreibung |
| - | - | - |
| `object_type` | Zeichenfolge | Der Name des Objekttyps. Bei Objekttypnamen wird zwischen Groß- und Kleinschreibung unterschieden.[Die unterstützten Objekttypen](/docs/cms/start-building/features/data-driven-content/crm-objects#supported-crm-object-types). Um die Namen der in Ihrem Account verfügbaren accountspezifischen und Integrator-Objekttypen zu finden, verwenden Sie die [CRM-Objektschema-API](/docs/cms/start-building/features/data-driven-content/crm-objects#getting-a-custom-object-type-s-details), um die Typdefinitionen abzurufen und die Namenseigenschaft zu suchen. Sie enthält den internen Objekttypnamen, der im functionFor-Integrator verwendet werden soll. Accountspezifische Objekttypen mit dem gleichen Namen wie die eingebauten Objekte verwenden den [vollständig qualifizierten Namen](/docs/cms/start-building/features/data-driven-content/crm-objects#getting-a-custom-object-type-s-details) (Fully Qualified Name, FQN) des Objekts. |
| `query` | Zeichenfolge | Optional. Die `id` des Datensatzes ODER eine Abfragezeichenfolge, getrennt durch `&`. Alle Ausdrücke werden mit UND verknüpft. Unterstützte Operatoren sind:
`eq` (Standard)
`neq`
`lt`
`lte`
`gt`
`gte`
`is_null`
`not_null`
`in`
`nin`
`contains` (gilt für Eigenschaften mit mehreren Werten oder Zeichenfolgeneigenschaften, z. B. *"firstname\_\_contains=Tim"*).
Abfragen können die folgenden Parameter enthalten:
`limit`: die maximale Anzahl von Ergebnissen, die in der Antwort zurückgegeben werden. Zum Beispiel `limit=50`.
`offset`: zum Durchblättern von Ergebnissen, wenn die Anzahl der zurückgegebenen Ergebnisse den limit-Parameter übersteigt. Beispiel: `offset=51`.
`orderBy`: ordnet die Ergebnisse nach einer bestimmten Eigenschaft an. Zum Beispiel: `orderBy=email`.
|
| `properties` | Zeichenfolge | Optional. Eine durch Kommata getrennte Liste von Eigenschaften, die zurückgegeben werden sollen. Standardmäßig wird ein kleiner Satz allgemeiner Eigenschaften zurückgegeben. Die ID-Eigenschaft wird immer zurückgegeben. Eine vollständige Liste der Eigenschaften kann über die Endpunkte [alle Kontakteigenschaften abrufen](https://developers.hubspot.de/docs/reference/api/crm/properties/v1-contacts#get-all-contact-properties) und [Alle Unternehmenseigenschaften abrufen](https://developers.hubspot.de/docs/reference/api/crm/properties/v1-companies#get-all-company-properties) abgerufen werden. |
| `formatting` | Boolescher Wert | Optional. Formatieren Sie Werte wie Datum und Währung entsprechend den Einstellungen dieses Portals. Übergeben Sie `false` für Rohzeichenfolgen. |
> [!WARNING]
>
> **Hinweis:** Wenn Sie eine Abfrage erstellen, sind die Werte von `range`, `distinct`, `ndistinct` und `startswith` reservierte Keywords. Um eine Eigenschaft abzufragen, die einen dieser Namen verwendet, müssen Sie das folgende Format verwenden: `range__eq=` (anstelle von `range=`).
## crm\_objects
Ruft eine Liste von Datensätzen für einen bestimmten Objekttyp aus dem CRM von HubSpot ab.
Diese Funktion gibt ein Objekt mit den folgenden Attributen zurück: `has_more`, `total`, `offset` und `results`.
* `has_more` zeigt an, dass über diesen Stapel hinaus weitere Ergebnisse verfügbar sind (total > offset).
* `total` ist die Gesamtzahl der verfügbaren Ergebnisse.
* `offset` ist der Offset, der für den nächsten Stapel von Ergebnissen verwendet werden soll.
* `results` gibt ein Array mit den angegebenen Objekten zurück, die den Parametern der Funktion entsprechen.
Die Ergebnisse können mit mindestens einem Reihenfolgeparameter in der Abfrage sortiert werden. Zum Beispiel `crm_objects("contact", "firstname=Bob&order=lastname&order=createdate")` ordnet Kontakte mit dem Vornamen `"Bob"` nach dem Nachnamen und dann nach `createdate` an. Um eine Sortierung rückgängig zu machen, stellen Sie dem Eigenschaftsnamen `-` voran, z. B. `order=-createdate`. Die crm\_objects-Funktion kann auch [mit benutzerdefinierten und Integratorobjekten verwendet](/docs/cms/start-building/features/data-driven-content/crm-objects) werden.
> [!WARNING]
>
> **Hinweis:** Aus Sicherheitsgründen können von den [HubSpot-Standardobjekttypen](https://knowledge.hubspot.com/de/get-started/manage-your-crm-database#standard-objects) nur die Objekte `product` und `marketing_event` auf einer öffentlich zugänglichen Seite abgerufen werden. Alle anderen Standardobjekttypen müssen auf einer Seite gehostet werden, die entweder [passwortgeschützt ist](https://knowledge.hubspot.com/de/website-pages/password-protect-a-page) oder eine [Anmeldung als registriertes CMS-Mitglied](https://knowledge.hubspot.com/de/website-pages/require-member-registration-to-access-private-content) erfordert. Für benutzerdefinierte Objekte gilt diese Einschränkung nicht.
```text hubl.txt theme={null}
{% set objects = crm_objects("contact", "firstname__not_null=&limit=3", "firstname,lastname") %}
{{ objects }}
```
```text gerenderte ausgabe.txt theme={null}
{has_more=true, offset=3, total=331, results=[{firstname=Brian, id=44151,
lastname=Halligan}, {firstname=Dharmesh, id=44051, lastname=Shah},
{firstname=George, id=88551, lastname=Washington}]}
```
> [!WARNING]
>
> **Hinweis:** Diese Funktion kann maximal 10 Mal pro Seite aufgerufen werden. Jeder Aufruf von `crm_objects` kann höchstens 100 Objekte zurückgeben. Die Standardobergrenze liegt bei 10 Objekten.
| Parameter | Typ | Beschreibung |
| - | - | - |
| `object_type` | Zeichenfolge | Der Typ des Objekts nach Name. Bei Objekttypnamen wird zwischen Groß- und Kleinschreibung unterschieden. Singular und Plural werden für Standardobjekttypen akzeptiert (z. B. `contact`, `contacts`). Erfahren Sie mehr über die [unterstützten Objekttypen](/docs/cms/start-building/features/data-driven-content/crm-objects#supported-crm-object-types). Um die Namen der in Ihrem Account verfügbaren accountspezifischen und Integrator-Objekttypen zu finden, verwenden Sie die [CRM-Objektschema-API](/docs/cms/start-building/features/data-driven-content/crm-objects#getting-a-custom-object-type-s-details), um die Typdefinitionen und die Namenseigenschaft abzurufen. Für integrator- und accountspezifische Objekttypen, die denselben Namen wie die eingebauten Objekte haben, verwenden Sie den [vollständig qualifizierten Namen](/docs/cms/start-building/features/data-driven-content/crm-objects#getting-a-custom-object-type-s-details) (Fully Qualified Name, FQN) des Objekts. |
| `query` | Zeichenfolge | Optional. Die ID des Datensatzes oder eine Abfragezeichenfolge, getrennt durch `&`. Alle Ausdrücke werden mit UND verknüpft. Unterstützte Operatoren sind:
`eq` (Standard)
`neq`
`lt`
`lte`
`gt`
`gte`
`is_null`
`not_null`
`in`
`nin`
`contains` (gilt für Eigenschaften mit mehreren Werten oder Zeichenfolgeneigenschaften, z. B. *"firstname\_\_contains=Tim"*).
Beispiel: `"email=contact@company.com"` |
| `properties` | Zeichenfolge | Optional. Eine durch Kommata getrennte Liste von Eigenschaften, die zurückgegeben werden sollen. Standardmäßig wird ein kleiner Satz allgemeiner Eigenschaften zurückgegeben. Die ID-Eigenschaft wird immer zurückgegeben. Eine vollständige Liste der Eigenschaften kann über die Endpunkte [alle Kontakteigenschaften abrufen](https://developers.hubspot.de/docs/reference/api/crm/properties/v1-contacts#get-all-contact-properties) und [Alle Unternehmenseigenschaften abrufen](https://developers.hubspot.de/docs/reference/api/crm/properties/v1-companies#get-all-company-properties) abgerufen werden. Die Datensatz-ID ist immer in den zurückgegebenen Objekteigenschaften enthalten, auch wenn sie nicht ausdrücklich in der Eigenschaftsliste aufgeführt ist. |
| `formatting` | Boolescher Wert | Optional. Formatieren Sie Werte wie Datum und Währung entsprechend den Einstellungen dieses Portals. Übergeben Sie `false` für Rohzeichenfolgen. |
> [!WARNING]
>
> **Hinweis:** Wenn Sie eine Abfrage erstellen, sind die Werte von `range`, `distinct`, `ndistinct` und `startswith` reservierte Keywords. Um eine Eigenschaft abzufragen, die einen dieser Namen verwendet, müssen Sie das folgende Format verwenden: `range__eq=` (anstelle von `range=`).
## crm\_property\_definition
Rufen Sie damit die Eigenschaftsdefinition für einen bestimmten Objekttyp und Eigenschaftsnamen ab.
Unterstützte Objekttypen sind HubSpot-Standardobjekte (z. B. Kontakte), portalspezifische Objekte und Integratorobjekte.
**HubL**
```hubl theme={null}
{{ crm_property_definition("house_listing", "agent_name") }}
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `object_type` | Zeichenfolge | Der Name des Objekttyps. Bei Objekttypnamen wird zwischen Groß- und Kleinschreibung unterschieden. [Die unterstützten Objekttypen](/docs/cms/start-building/features/data-driven-content/crm-objects#supported-crm-object-types). Um die Namen der in Ihrem Account verfügbaren accountspezifischen und Integrator-Objekttypen zu finden, verwenden Sie die [CRM-Objektschema-API](/docs/cms/start-building/features/data-driven-content/crm-objects#getting-a-custom-object-type-s-details), um die Typdefinitionen abzurufen und die Namenseigenschaft zu suchen. Sie enthält den internen Objekttypnamen, der im functionFor-Integrator verwendet werden soll. Accountspezifische Objekttypen mit dem gleichen Namen wie die eingebauten Objekte verwenden den [vollständig qualifizierten Namen](/docs/cms/start-building/features/data-driven-content/crm-objects#getting-a-custom-object-type-s-details) (Fully Qualified Name, FQN) des Objekts. |
| `property_name` | Zeichenfolge | Der Eigenschaftsname ohne Unterscheidung der Groß-/Kleinschreibung, für den die Definition abgerufen werden soll. |
## crm\_property\_definitions
Rufen Sie damit die Eigenschaftsdefinitionen für einen bestimmten Objekttyp und eine Reihe von Eigenschaftsnamen ab.
Unterstützte Objekttypen sind HubSpot-Standardobjekte (z. B. Kontakte), portalspezifische Objekte und Integratorobjekte.
**HubL**
```hubl theme={null}
{{ crm_property_definitions("house_listing", "agent_name,address") }}
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `object_type` | Zeichenfolge | Der Name des Objekttyps. Bei Objekttypnamen wird zwischen Groß- und Kleinschreibung unterschieden. [Die unterstützten Objekttypen](/docs/cms/start-building/features/data-driven-content/crm-objects#supported-crm-object-types). Um die Namen der in Ihrem Account verfügbaren accountspezifischen und Integrator-Objekttypen zu finden, verwenden Sie die [CRM-Objektschema-API](/docs/cms/start-building/features/data-driven-content/crm-objects#getting-a-custom-object-type-s-details), um die Typdefinitionen abzurufen und die Namenseigenschaft zu suchen. Sie enthält den internen Objekttypnamen, der im functionFor-Integrator verwendet werden soll. Accountspezifische Objekttypen mit dem gleichen Namen wie die eingebauten Objekte verwenden den [vollständig qualifizierten Namen](/docs/cms/start-building/features/data-driven-content/crm-objects#getting-a-custom-object-type-s-details) (Fully Qualified Name, FQN) des Objekts. |
| `property_name` | Zeichenfolge | Optional. Die durch Kommata getrennten Eigenschaftsnamen ohne Unterscheidung der Groß-/Kleinschreibung, für die die Definition abgerufen werden soll. Wenn leer, werden die Definitionen für alle Eigenschaften abgerufen. |
## cta
Da CTA-Module so viele Parameter haben, die Variationen ihres Codes enthalten, können Sie die CTA-Funktion verwenden, um ganz einfach einen bestimmten CTA in einer Vorlage, Seite oder E-Mail zu erzeugen. Diese Funktion wird vom Rich-Text-Editor verwendet, wenn Sie einen CTA über den Editor hinzufügen.
> [!WARNING]
>
> **Hinweis:** Diese Funktion ist auf 10 Aufrufe pro Seite begrenzt.
```text hubl.txt theme={null}
{{ cta("ccd39b7c-ae18-4c4e-98ee-547069bfbc5b") }}
{{ cta("ccd39b7c-ae18-4c4e-98ee-547069bfbc5b", "justifycenter") }}
```
```html example.html theme={null}
Start a HubSpot trial
Start a HubSpot trial
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `guid` | Zeichenfolge | Die ID des zu rendernden CTA. Sie finden sie in der URL des Detailbildschirms des CTA. |
| `align_opt` | Aufzählung | Passt die Ausrichtung des CTA an. Die Werte umfassen: `justifyleft`, `justifycenter`, `justifyright`, `justifyfull`. |
## extend
Erweitert eine Liste durch Anhängen aller Elemente von einer Iterablen. Mit anderen Worten, es werden alle Listenelemente aus einer Liste in eine andere Liste eingefügt.
```text hubl.txt theme={null}
{% set vehicles = ["boat","car","bicycle"] %}
{% set more_vehicles = ["airplane","motorcycle"] %}
{% do vehicles.extend(more_vehicles) %}
{{vehicles}}
```
```text gerenderte ausgabe.txt theme={null}
[boat, car, bicycle, airplane, motorcycle]
```
## file\_by\_id
Diese Funktion gibt die Metadaten einer Datei nach ID zurück. Sie akzeptiert einen einzigen Parameter, die numerische ID der Datei, die gesucht werden soll. Um mehrere Dateien gleichzeitig abzurufen, verwenden Sie stattdessen die Funktion [files\_by\_ids](#files_by_ids).
> [!WARNING]
>
> **Hinweis:** Diese Funktion ist auf 10 Aufrufe pro Seite begrenzt.
```text hubl.txt theme={null}
{% set file = file_by_id(123) %}
{{ file.friendlyUrl }}
```
```text gerenderte ausgabe.txt theme={null}
https://www.hubspot.com/hubfs/HubSpot_Logos/HSLogo_color.svg
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `file_id` | Nummer | Die ID der Datei, in der gesucht werden soll. |
## files\_by\_ids
Gibt die Metadaten mehrerer Dateien nach ID zurück. Sie akzeptiert ein Array von Datei-IDs.
> [!WARNING]
>
> **Hinweis:** Diese Funktion ist auf 10 Aufrufe pro Seite beschränkt und kann bis zu 100 Datei-IDs akzeptieren.
```text hubl.txt theme={null}
{% set files = files_by_ids([123,456])%}
{% for file in files %}
URL:{{file.friendlyUrl}}
{% endfor %}
```
```text gerenderte ausgabe.txt theme={null}
URL:https://api-na1.hubspot.com/filemanager/api/v2/files/123/example-file-1
URL:https://api-na1.hubspot.com/filemanager/api/v2/files/456/example-file-2
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `file_id` | Nummer | Die IDs der zu suchenden Dateien, durch Kommas getrennt (bis zu 100). |
Sie können diese Funktion beispielsweise verwenden, um die hochgeladenen Dateien eines Kontakts zu durchlaufen. Um die Ergebnisse zu durchlaufen, müssen Sie den [Split HubL-Filter](/docs/cms/reference/hubl/filters#split) verwenden, da die CRM-Eigenschaft als durch Semikolon getrennte Zeichenfolge zurückgegeben wird.
```hubl theme={null}
{% set objects = crm_objects("contact", "email=bh@hubspot.com", "file").results %}
{% for item in objects %}
{% set fileIDs = item.file|split(";") %}
{% set files = files_by_ids(fileIDs) %}
{% for file in files %}
{% endfor %}
{% endfor %}
```
## flag\_content\_for\_access\_check
Wenn ein Blog-Beitrag [für den Zugriff über Selbstregistrierung konfiguriert](https://knowledge.hubspot.com/de/blog/use-self-registration-for-private-blog-content) ist, müssen sich Besucher registrieren oder anmelden, um den gesamten Beitragsinhalt anzuzeigen. Die standardmäßigen Blog-Listing-Elemente von HubSpot enthalten diese Funktion automatisch und auch eine Sperr-Symbol-Anzeige für Beiträge, für die eine Selbstregistrierung erforderlich ist. Erfahren Sie mehr über das [Erstellen von benutzerdefinierten Lösungen mit dieser Funktion und der entsprechenden API](/docs/cms/start-building/features/memberships/overview#private-blog-posts-with-self-registration).
Diese Funktion prüft, ob ein Blog-Beitrag vom aktuellen Besucher aufgerufen werden kann. Beim Aufruf wird die Funktion durch das folgende Attribut ersetzt:
`hs-member-content-access=`
A value of `true` indicates that the blog post requires the visitor to log in to view the full content.
```text hubl.txt theme={null}
{% for content in contents %}
...
{% endfor %}
```
```text gerenderte ausgabe.txt theme={null}
...
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `ID` | ID | Die ID des Inhalts, der mit dem aktuell angemeldeten Betrachter abgeglichen werden soll. |
## follow\_me\_links
Gibt die in den [Account-Einstellungen festgelegten Social-Media-Konto-Links](https://knowledge.hubspot.com/de/design-manager/use-default-modules-in-your-template#add-social-accounts-to-the-follow-me-module) zurück. Wird im [follow\_me-Standardmodul](/docs/cms/reference/modules/default-modules#follow-me) verwendet.
```text hubl.txt theme={null}
{% set fm = follow_me_links() %}
{{ fm }}
```
```text gerenderte ausgabe.txt theme={null}
[FollowMeLink{type=URL, id=5142734, altName=RSS,
followMeUrl=http://website.com/rss.xml, iconName=rss,
name=http://website.com/rss.xml}]
```
## format\_address
Formatiert eine Adresse basierend auf dem Gebietsschema des Kontexts.
```text hubl.txt theme={null}
{{ format_address('en-us', { address: "25 First Street", address2: "2nd Floor", city: "Cambridge", state: "MA", country: "United States", zip: "02141"}) }}
```
```text gerenderte ausgabe.txt theme={null}
[25 First Street, 2nd Floor, Cambridge, MA 02141, United States]
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `locale` | Zeichenfolge | Das Gebietsschema, in dem die Adresse formatiert werden soll. |
| `address` | Zeichenfolge | Die Straße. |
| `address2` | Zeichenfolge | Die zweite Zeile der Adresse, z. B. Stockwerk oder Hausnummer. |
| `city` | Zeichenfolge | Die Stadt der Adresse. |
| `state` | Zeichenfolge | Das Bundesland der Adresse. |
| `country` | Zeichenfolge | Das Land der Adresse. |
| `zip` | Zeichenfolge | Die Postleitzahl der Adresse. |
## format\_company\_name
Formatiert den Namen eines Unternehmens, indem gegebenenfalls eine japanische Anrede hinzugefügt wird.
```text hubl.txt theme={null}
{{ format_company_name("companyName", addJapaneseHonorifics) }}
```
```text gerenderte ausgabe.txt theme={null}
HubSpot
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `companyName` | Zeichenfolge | Der Name des Unternehmens. |
| `useHonorificIfApplicable` | Boolescher Wert | Wenn dies auf `true` festgelegt und die Sprache des Kontexts Japanisch ist, wird gegebenenfalls eine japanische Geschäftsanrede hinzugefügt. |
## format\_name
Formatiert den Namen einer Person, indem der Nachname vor den Vornamen gestellt wird, und fügt gegebenenfalls eine japanische Anrede hinzu
```text hubl.txt theme={null}
{{ format_name("firstName", "surname", addJapaneseHonorifics) }}
```
```text gerenderte ausgabe.txt theme={null}
Hobbes Baron
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `firstName` | Zeichenfolge | Der Vorname der Person. | |
| `surname` | Zeichenfolge | Der Nachname der Person. | `False` |
| `useHonorificIfApplicable` | Boolescher Wert | Wenn dies auf `true` festgelegt und die Sprache des Kontexts Japanisch ist, wird gegebenenfalls eine japanische Anrede hinzugefügt. | |
## format\_datetime
Formatiert sowohl die Datums- als auch die Uhrzeitkomponente eines Datumsobjekts, ähnlich dem [format\_datetime](/docs/cms/reference/hubl/filters#format_datetime)-HubL-Filter. Diese Funktion ersetzt die veraltete `datetimeformat`-Funktion.
```text hubl.txt theme={null}
{{ format_datetime(content.publish_date, "short", "America/New_York", "en") }}
```
```text gerenderte ausgabe.txt theme={null}
12/31/69 7:00 PM
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `format` | Zeichenfolge | Das zu verwendende Format. Kann eines der folgenden sein:
`short`
`medium`
`long`
`full`
Ein benutzerdefiniertes Muster gemäß [Unicode LDML](https://unicode.org/reports/tr35/tr35-dates.html#Date_Format_Patterns)
|
| `timeZone` | Zeichenfolge | Die Zeitzone des Ausgabedatums im [IANA-TZDB-Format](https://data.iana.org/time-zones/tzdb/). |
| `locale` | Zeichenfolge | Das Gebietsschema, das für Formate verwendet werden soll, die das Gebietsschema berücksichtigen. |
## geo\_distance
Diese Funktion enthält 4 Parameter und berechnet den ellipsoidischen 2D-Abstand zwischen zwei Punkten auf der Erde. Verwenden Sie diese Funktion als Filterabfrage zum Abrufen von HubDB-Daten.
```html example.html theme={null}
{% for row in hubdb_table_rows(1234567, "geo_distance(loc,1.233,-5.678,mi)__gt=500") %}
{{row.name}}
{% endfor %}
```
```html example.html theme={null}
Cambridge, MA
Salem, MA
San Diego, CA
Chicago, IL
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `point1` | Standort | Standort von einer HubDB-Spalte. |
| `point2_lat` | Breitengrad | Breitengrad von Punkt2. |
| `point2_long` | Längengrad | Längengrad von Punkt2. |
| `units` | Zeichenfolge | Einheiten für den Rückgabewert. Die Optionen sind `FT` für Fuß, `MI` für Meilen, `M` für Meter oder `KM` für Kilometer. |
## get\_asset\_url
Diese Funktion gibt die öffentliche URL einer bestimmten Vorlage oder Code-Datei zurück. Der Parameter dieser Funktion ist der Pfad des Elements im Design-Manager. Die Code-Datei-URLs werden bei jeder Veröffentlichung aktualisiert; mit dieser Funktion stellen Sie also sicher, dass Sie immer die neueste Version der Datei verwenden.
Sie können diese Funktion in der Anwendung automatisch generieren, indem Sie entweder mit der rechten Maustaste auf eine **Datei** klicken und **Öffentliche URL kopieren** auswählen oder indem Sie auf **Aktionen** klicken und dann **Öffentliche URL kopieren** auswählen.
Das folgende Beispiel ruft die URL einer im Design-Manager erstellten JavaScript-Datei ab, die als `src` in ein `
```
## resize\_image\_url
Schreibt die URL eines im Datei-Manager gespeicherten Bildes in eine URL um, die die Größe des Bildes auf Anfrage ändert. Die Funktion akzeptiert einen erforderlichen Parameter und fünf optionale Parameter. Es muss mindestens ein optionaler Parameter übergeben werden.
Erforderlich
* **URL:** Zeichenfolge, URL eines von HubSpot gehosteten Bildes.
Optional
* **Breite:** Zahl, die die neue Bildbreite in Pixeln angibt.
* **Höhe:** Zahl, die die neue Bildhöhe in Pixeln angibt.
* **Länge:** Zahl, die die neue Länge der größten Seite in Pixeln angibt.
* **Skalieren:** Boolescher Wert; die geänderten Bildmaße werden auch dann verwendet, wenn das Originalbild dadurch vergrößert wird (Bilder können unscharf erscheinen).
* **Vergrößern:** Boolescher Wert; gibt das verkleinerte Bild zurück, auch wenn es in Bytes größer als das Original ist.
> [!WARNING]
>
> **Hinweis:** Bei Bildern mit einer Höhe oder Breite mit mehr als 4096 Pixel wird nicht automatisch die Größe geändert. Stattdessen müssen Sie [die Größe des Bildes manuell ändern](https://knowledge.hubspot.com/de/files/automatic-image-resizing-on-hubspot-content).
```text hubl.txt theme={null}
{{ resize_image_url("http://your.hubspot.site/hubfs/img.jpg", 0, 0, 300) }}
```
```text gerenderte ausgabe.txt theme={null}
http://your.hubspot.site/hubfs/img.jpg?length=300&name=img.jpg
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `url` | Zeichenfolge | URL eines von HubSpot gehosteten Bildes. |
| `width` | Ganzzahl (px) | Die neue Bildbreite in Pixeln. |
| `height` | Ganzzahl (px) | Die neue Bildhöhe in Pixeln. |
| `length` | Ganzzahl (px) | Die neue Länge der größten Seite, in Pixeln. |
| `upscale` | Boolescher Wert | Die geänderten Bildmaße werden auch dann verwendet, wenn das Originalbild dadurch vergrößert wird (Bilder können unscharf erscheinen). Der Standardwert ist `false`. |
| `upsize` | Boolescher Wert | Gibt das verkleinerte Bild zurück, auch wenn es in Bytes größer als das Original ist. Der Standardwert ist `false`. |
## reverse
Kehrt die Reihenfolge der Elemente in einer Liste um. Nimmt keine Parameter an. Um die Reihenfolge eines Objekt umzukehren oder einen Iterator zurückzugeben, der die Liste in umgekehrter Reihenfolge durchläuft, verwenden Sie [`|reverse`](/docs/cms/reference/hubl/filters#reverse).
```text hubl.txt theme={null}
{% set numbers = [1,2,3,4] %}
{% do numbers.reverse() %}
{{numbers}}
```
```text gerenderte ausgabe.txt theme={null}
[4, 3, 2, 1]
```
## set\_response\_code
Legen Sie den Antwortcode als den angegebenen Code fest. [404](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/404) ist im Moment der einzige unterstützte Code. Wenn Sie dies verwenden, gibt Ihre Seite einen `404`-Fehler zurück.
```text hubl.txt theme={null}
{{ set_response_code(404) }}
```
```text gerenderte ausgabe.txt theme={null}
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `code` | Ganzzahl | Der HTTP-Antwortcode. Derzeit ist `404` der einzige unterstützte Code. |
## super
Diese Funktion druckt den Inhalt der übergeordneten Vorlage in eine untergeordnete Vorlage unter Verwendung des [extends](/docs/cms/reference/hubl/overview#blocks-and-extends)-Tags.
Im unten stehenden Code wurde beispielsweise eine einfache HTML-Vorlage mit einem HubL-Block namens `sidebar` erstellt und als `parent.html` gespeichert. Es wird eine zweite Vorlagendatei erstellt, die diese übergeordnete Datei erweitert. Normalerweise würde die `
` im Seitenleistenblock des übergeordneten HTML-Formats gedruckt werden. Durch die Verwendung von `super` wird jedoch der Inhalt des Seitenleistenblocks der übergeordneten Vorlage mit dem Inhalt der untergeordneten Vorlage kombiniert.
```html example.html theme={null}
{% extends "custom/page/web_page_basic/parent.html" %}
{% block sidebar %}
Table Of Contents
{{ super() }}
{% endblock %}
```
```html example.html theme={null}
This is the parent template
Table of contents
Sidebar content from parent.
```
## today
Gibt den Beginn des heutigen Tages (12:00 Uhr) zurück. Optional können Sie einen Parameter hinzufügen, um die Zeitzone von der Standard-UTC zu ändern.
```text hubl.txt theme={null}
{{ today() }}
{{ today("America/New_York") }}
{{ unixtimestamp(today("America/New_York").plusDays(1)) }}
```
```text gerenderte ausgabe.txt theme={null}
2018-10-23T00:00Z 2018-10-23T00:00-04:00[America/New_York] 1540353600000
```
## to\_local\_time
Konvertiert einen UNIX-Zeitstempel in die lokale Zeit, basierend auf Ihren HubSpot-Berichtseinstellungen. Sie können dann einen datetimeformat-Filter anwenden, um das Datum zu formatieren.
```text hubl.txt theme={null}
{{ to_local_time(eastern_dt) }}
```
```text gerenderte ausgabe.txt theme={null}
2015-05-13 10:37:31
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `date` | Datetime | UNIX-Zeitstempel zur Konvertierung in die lokale Zeit. |
## topic\_cluster\_by\_content\_id
Gibt ein HubL-Dictionary zurück, das den Themencluster repräsentiert, der mit einem einzelnen Inhalt verbunden ist (bestimmt durch die übergebene Inhalts-ID), einschließlich Metadaten zur zugehörigen Pillar-Seite, das Hauptthema und die Unterthemen. Kann verwendet werden, um einen Inhalt automatisch mit der zugehörigen Pillar-Seite zu verlinken \[falls vorhanden].
Verfügbare Metadaten befinden sich in: attachableContent (Metadaten des aktuellen Inhalts), topic (Metadaten des zugehörigen Themas des aktuellen Inhalts), coreTopic (Metadaten des zugehörigen Kernthemas des Clusters) und pillarPage (Metadaten der zugehörigen Pillar-Seite).
Verwenden Sie `{{ topicCluster|pprint }}`, um eine vollständige Anzeige der verfügbaren Eigenschaften/Attribute zu erhalten.
```html example.html theme={null}
{{ topic_cluster_by_content_id(content.id) }}
{%- if content.id -%}
{%- set topicCluster = topic_cluster_by_content_id(content.id) -%}
{%- if topicCluster.pillarPage.url.value and topicCluster.pillarPage.publishState == "PUBLISHED" -%}
```
> [!WARNING]
>
> **Hinweis:** Diese Funktion ist auf 10 Aufrufe pro Seite begrenzt.
| Parameter | Typ | Beschreibung |
| - | - | - |
| `content_id` | Id | Die ID der zu suchenden Seite. |
## truncate
Die truncate-Funktion funktioniert genau wie die [trunkieren-Filter](/docs/cms/reference/hubl/filters#truncate)-Funktion, verwendet aber Funktionssyntax anstelle von Filtersyntax. Der erste Parameter gibt die Zeichenfolge an. Der zweite Parameter gibt die Länge an, bei der abgeschnitten werden soll. Der letzte Parameter gibt die Zeichen an, die beim Abschneiden hinzugefügt werden sollen.
> [!WARNING]
>
> **Hinweis:** Da diese Funktion auf die Leerzeichen zwischen den Wörtern angewiesen ist, um Zeichenfolgen zu kürzen, funktioniert sie für Sprachen ohne Leerzeichen zwischen Zeichen, wie z. B. Japanisch, möglicherweise nicht wie erwartet.
```text hubl.txt theme={null}
{{ truncate("string to truncate at a certain length", 19, false, "...") }}
{% set longString = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales ultricies velit sit amet ornare." %}
{{ truncate(longString, 40, false, "...") }}
```
```text gerenderte ausgabe.txt theme={null}
string to truncate ... Lorem ipsum dolor sit amet, consectetur ...
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `string_to_truncate` | Zeichenfolge | Zeichenfolge, die abgeschnitten werden soll. |
| `length` | Ganzzahl | Gibt die Länge an, bei der der Text abgeschnitten werden soll (einschließlich HTML-Zeichen). |
| `killwords` | Boolescher Wert | Bei „true“ wird der Text in der Länge abgeschnitten, unabhängig davon, ob er in der Mitte eines Wortes steht. |
| `end` | Zeichenfolge | Die Zeichen, die hinzugefügt werden, um anzuzeigen, wo der Text abgeschnitten wurde. |
## type
Diese Funktion akzeptiert ein Argument und gibt den Typ eines Objekts zurück. Der Rückgabewert ist einer der folgenden: `"bool"`, `"datetime"`, `"dict"`, `"float"`, `"int"`, `"list"`, `"long"`, `"null"`, `"str"` oder `"tuple"`.
```text hubl.txt theme={null}
{{ type("Blog") }}
{% set my_type = type("Blog") %}
{{my_type}}
```
```text gerenderte ausgabe.txt theme={null}
str
```
## unixtimestamp
Diese Funktion gibt einen Unix-Zeitstempel zurück, wenn Sie ein datetime-Objekt angeben.
```text hubl.txt theme={null}
{{ unixtimestamp(d) }}
```
```text gerenderte ausgabe.txt theme={null}
1565983117868
```
## update
Aktualisiert das Dictionary mit den Elementen aus einem anderen dict-Objekt oder aus einer Iterable von Schlüssel-Wert-Paaren. Verwenden Sie diese Funktion, um Objekte zu kombinieren oder zusammenzuführen.
```text hubl.txt theme={null}
{% set dict_var = {"authorName": "Douglas Judy", "authorTitle": "Mastermind" } %}
{% do dict_var.update({"authorFriend": "Jake"}) %}
{% do dict_var.update({"authorLocation": "unknown"}) %}
{{ dict_var }}
```
```text gerenderte ausgabe.txt theme={null}
{authorName=Douglas Judy, authorTitle=Mastermind, authorFriend=Jake,
authorLocation=unknown}
```
# if-Anweisungen
Source: https://developers.hubspot.de/docs/cms/reference/hubl/if-statements
Ein praktischer Leitfaden zu HubSpots HubL if-Anweisungen für CMS-Entwickler.
Sie können bedingte Logik in Ihre Module und Vorlagen aufnehmen, indem Sie [if-Anweisungen](#basic-if-statement-syntax) und [unless-Anweisungen](#unless-statements) von HubL verwenden. if-Anweisungen enthalten oft von HubL [unterstützte Operatoren](/docs/cms/reference/hubl/operators-and-expression-tests) und können zur Ausführung von [Ausdruckstests](/docs/cms/reference/hubl/operators-and-expression-tests#expression-tests) verwendet werden.
> [!WARNING]
>
> ### Bitte beachten:
>
> Wenn Sie [Personalisierungstoken](/docs/cms/reference/hubl/functions#personalization-token) innerhalb einer bedingten Anweisung Ihres E-Mail-Moduls verwenden, müssen Sie [programmierbare E-Mails für das Modul aktivieren](/docs/cms/start-building/features/data-driven-content/emails-with-programmable-content).
>
> Informationen, die über [v3](/docs/api-reference/marketing-marketing-emails-v3/guide)- oder [v4](/docs/api-reference/marketing-single-send-v4/guide)-Single-Send-APIs übermittelt werden, funktionieren nicht innerhalb von `if`-Anweisungen, da die Vorlagen kompiliert werden, bevor die Informationen ausgefüllt werden.
## Grundlegende Syntax der if-Anweisung
HubL verwendet if-Anweisungen, um die Logik einer Vorlage zu definieren. Die Syntax von HubL if-Anweisungen ist der bedingten Logik in Python sehr ähnlich. `if`-Anweisungen sind in [Anweisungstrennzeichen](/docs/cms/reference/hubl/variables-macros-syntax) eingeschlossen, beginnend mit einer öffnenden `if`-Anweisung und mit einer `endif`-Anweisung am Ende.
Das folgende Beispiel zeigt die grundlegende Syntax einer if-Anweisung, wobei „Bedingung“ durch die boolesche Regel ersetzt wird, die Sie als wahr oder falsch auswerten wollen.
```hubl theme={null}
{% if condition %}
If the condition is true print this to template.
{% endif %}
```
Nachdem Sie nun die grundlegende Syntax kennengelernt haben, wollen wir uns nun ein paar konkrete Beispiele für einfache if-Anweisungen ansehen. Die folgenden Beispiele zeigen if-Anweisungen, die prüfen, ob ein HubL-Modul mit dem Namen `my_module` und eine Variable mit dem Namen `my_module` in einer Vorlage vorhanden sind oder nicht. Beachten Sie, dass ohne jegliche Operatoren die if-Anweisung auswertet, ob das Modul im Kontext der Vorlage definiert ist oder nicht.
```hubl theme={null}
{% module "my_module" path="@hubspot/rich_text", label="My rich text module", html="Default module text" export_to_template_context=true %}
{% if widget_data.my_module %}
A module named "my_module" is defined in this template.
{% endif %}
{% set my_variable = "A string value for my variable" %}
{% if my_variable %}
The variable named my_variable is defined in this template.
{% endif %}
```
Beachten Sie, dass bei der Auswertung des HubL-Moduls der Modulname innerhalb der `if`-Anweisung in Anführungszeichen gesetzt wird und beim Testen der Variablen keine Anführungszeichen um den Variablennamen herum verwendet werden. In beiden obigen Beispielen sind das Modul und die Variable in der Vorlage vorhanden, sodass die Anweisungen so ausgewertet werden, dass das Markup gedruckt wird. Bitte beachten Sie, dass in diesen Beispielen nur getestet wird, ob das Modul und die Variable definiert sind, und nicht, ob sie einen Wert haben oder nicht.
Betrachten wir nun eine `if-Anweisung`, die auswertet, ob ein Modul einen Wert hat, anstatt auszuwerten, ob es in der Vorlage vorhanden ist. Hierfür müssen wir den Parameter [export\_to\_template\_context](/docs/cms/reference/modules/export-to-template-context) verwenden. Wenn im folgenden Beispiel der Textbaustein im Content-Editor einen Wert erhält, wird das Markup gedruckt. Wäre das Textfeld des Moduls gelöscht worden, würde kein Markup gerendert. Wenn Sie mit benutzerdefinierten Modulen arbeiten, gibt es eine vereinfachte `widget.widget_name`-Syntax, die in [diesem Beispiel](/docs/cms/reference/modules/configuration) beschrieben wird.
```text input.txt theme={null}
{% module "product_names" path="@hubspot/text", label="Enter the product names that you would like to render the coupon ad for", value="all of our products", export_to_template_context=True %}
{% if widget_data.product_names.value %}
For a limited time, get 50% off {{ widget_data.product_names.value}}!
{% endif %}
```
```text output.txt theme={null}
For a limited time get 50% off all of our products!
```
## Verwendung von elif und else
`if-`-Anweisungen können mit zusätzlichen bedingten Anweisungen oder mit einer Regel, die ausgeführt wird, wenn die Bedingung oder die Bedingungen falsch sind, weiter verfeinert werden. `elif`-Anweisungen ermöglichen es Ihnen, zusätzliche Bedingungen zu Ihrer Logik hinzuzufügen, die nach der vorherigen Bedingung ausgewertet werden **`else`**-Anweisungen definieren eine Regel, die ausgeführt wird, wenn alle anderen Bedingungen falsch sind. Sie können eine unbegrenzte Anzahl von `elif`-Anweisungen innerhalb einer einzigen if-Anweisung haben, aber nur eine `else`-Anweisung.
Im Folgenden finden Sie ein Beispiel für die grundlegende Syntax einer if-Anweisung, die den [Operator `<=`](/docs/cms/reference/hubl/operators-and-expression-tests#comparison) verwendet, um den Wert einer Variablen zu überprüfen. In diesem Beispiel würde die Vorlage Folgendes ausgeben: „Die angegebene Zahl der Variablen ist kleiner als oder gleich 6.“
```hubl theme={null}
{% set number = 5 %}
{% if number <= 2 %}
Variable named number is less than or equal to 2.
{% elif number <= 4 %}
Variable named number is less than or equal to 4.
{% elif number <= 6 %}
Variable named number is less than or equal to 6.
{% else %}
Variable named number is greater than 6.
{% endif %}
```
Nachfolgend ein weiteres Beispiel, bei dem ein Auswahlmodul verwendet wird, um verschiedene Überschriften für eine Karriereseite auf der Grundlage der vom Benutzer gewählten Abteilung darzustellen. Das Beispiel verwendet den [Operator ==](/docs/cms/reference/hubl/operators-and-expression-tests#comparison), um auf bestimmte vordefinierte Werte im Auswahlmodul zu überprüfen.
```hubl theme={null}
{% choice "department" label="Choose department", value="Marketing", choices="Marketing, Sales, Dev, Services" export_to_template_context=True %}
{% if widget_data.department.value == "Marketing" %}
Want to join our amazing Marketing team?!
We have exciting career opportunities on the {{ widget_data.department.value }} team.
We have exciting career opportunities on the {{ widget_data.department.value }} team.
{% elif widget_data.department.value == "Dev" %}
Do you love to ship code?
We have exciting career opportunities on the {{ widget_data.department.value }} team.
{% else %}
Want to work with our awesome customers?
We have exciting career opportunities on the {{ widget_data.department.value }} team.
{% endif %}
```
## unless-Anweisungen
`unless`-Anweisungen sind genau wie `if`-Anweisungen bedingte Anweisungen, funktionieren aber nach der umgekehrten Logik. Der Code zwischen dem öffnenden und dem schließenden Tag wird gerendert und kompiliert, es sei denn, die einzelne boolesche Bedingung wird zu true ausgewertet. unless-Anweisungen beginnen mit einem **`unless`** und enden mit einem **`endunless`** .`unless`-Anweisungen unterstützen `else`, aber nicht `elif`.
Nachfolgend ein Beispiel, bei dem die Überschrift „Wartungsarbeiten“ ausgegeben wird, sofern das Rich-Text-Feld keinen Wert erhält. Wenn das Rich-Text-Feld über Inhalt verfügt, wird dieser Inhalt angezeigt.
```hubl theme={null}
{% module "my_page_content" path="@hubspot/rich_text", label="Enter your page content", html="" export_to_template_context=true %}
{{ widget_data.my_page_content.html }}
{% unless widget_data.my_page_content.html %}
This page is under construction.
Come back soon!
{% endunless %}
```
## ifchanged
Zusätzlich zu if- und unless-Anweisungen unterstützt HubL `ifchanged`-Anweisungen. Diese Anweisungen können verwendet werden, um Markup nur dann zu rendern, wenn sich eine Variable seit einem früheren Aufruf dieses Tags geändert hat.
## Inline-if-Anweisungen
HubL unterstützt inline `if-`-Anweisungen. Diese können verwendet werden, um bedingte Logik knapp und gut verständlich mit [Operatoren und Ausdruckstests](/docs/cms/reference/hubl/operators-and-expression-tests) zu schreiben.
```hubl theme={null}
{% set color = "Blue" if is_blue is truthy else "Red" %} // color == "blue"
{{ "Blue" if is_blue is truthy else "Red" }} // "Blue"
{% set dl = true %}
Download PDF
```
## Ternäre Operatoren
Es ist auch möglich, ternäre Operatoren zu verwenden, um schnell bedingte Logik mit [Operatoren und Ausdruckstests](/docs/cms/reference/hubl/operators-and-expression-tests#logical) zu schreiben.
```hubl theme={null}
// If the variable is_blue is true, output "blue", otherwise output"red"
{{ is_blue is truthy ? "blue" : "red" }}
// Set the variable is_red to false if is_blue is true, otherwise set to true
{% set is_red = is_blue is truthy ? false : true %}
```
# for-Schleifen
Source: https://developers.hubspot.de/docs/cms/reference/hubl/loops
For-Schleifen können in HubL verwendet werden, damit Sequenzen von Objekten durchlaufen werden.
for-Schleifen können in HubL verwendet werden, damit Sequenzen von Objekten durchlaufen werden. Sie werden am häufigsten bei der Darstellung von [Blog-Inhalten](/docs/cms/start-building/building-blocks/templates/blog) in einem Listenformat verwendet, können aber auch zum Sortieren anderer Sequenzvariablen verwendet werden.
for-Schleifen beginnen mit einer `{% for %}`-Anweisung und enden mit einer `{% endfor %}`-Anweisung. Innerhalb der `{% for %}`-Anweisung wird ein einzelnes Sequenzelement genannt, gefolgt von `in` und dem Namen der Sequenz. Der Code zwischen den öffnenden und schließenden `for`-Anweisungen wird bei jeder Iteration gedruckt und enthält im Allgemeinen die gedruckte Variable des einzelnen Sequenzelements. Im Folgenden finden Sie die grundlegende Syntax einer for-Schleife:
```hubl theme={null}
{% for item in items %}
{{ item }}
{% endfor %}
```
Nachfolgend ein einfaches Beispiel, das zeigt, wie eine Sequenz von Variablenwerten in eine Liste gedruckt wird.
```html example.html theme={null}
{% set languages = ["HTML", "CSS", "Javascript", "Python", "Ruby", "PHP", "Java"] %}
Languages
;
{% for language in languages %}
{{ language }}
{% endfor %}
```
```html example.html theme={null}
Languages
HTML
CSS
Javascript
Python
Ruby
PHP
Java
```
## Schleifeneigenschaften
Beim Durchlaufen einer Schleife können Sie die [bedingte Logik](/docs/cms/reference/hubl/if-statements) verwenden, um das Verhalten der Schleife zu definieren. Die variable Eigenschaft `loop.index` speichert die aktuelle Anzahl der Iterationen der Schleife. Es gibt mehrere andere Eigenschaften von Schleifenvariablen, die die Iterationen auf unterschiedliche Weise zählen. Diese Eigenschaften werden im Folgenden beschrieben:
| Variable | Description |
| - | - |
| `loop.cycle` | Eine Hilfsfunktion, um zwischen einer Liste von Sequenzen zu wechseln. Siehe die nachstehende Erklärung. |
| `loop.depth` | Gibt an, wie tief in einer rekursiven Schleife das Rendering gerade ist. Beginnt bei Ebene 1 |
| `loop.depth0` | Gibt an, wie tief in einer rekursiven Schleife das Rendering gerade ist. Beginnt bei Ebene 0 |
| `loop.first` | Diese Variable wird als true ausgewertet, wenn es sich um die erste Iteration der Schleife handelt. |
| `loop.index` | Die aktuelle Iteration der Schleife. Diese Variable beginnt mit der Zählung bei 1. |
| `loop.index0` | Die aktuelle Iteration der Schleife. Diese Variable beginnt die Zählung bei 0. |
| `loop.last` | Diese Variable wird als true ausgewertet, wenn es sich um die letzte Iteration der Schleife handelt. |
| `loop.length` | Die Anzahl der Elemente in der Sequenz |
| `loop.revindex` | Die Anzahl der Iterationen ab dem Ende der Schleife. Wird rückwärts gezählt bis 1. |
| `loop.revindex0` | Die Anzahl der Iterationen ab dem Ende der Schleife. Wird rückwärts gezählt bis 0. |
Im Folgenden finden Sie einige Beispiele, in denen verschiedene Schleifenvariablen verwendet werden. Das folgende einfache Beispiel verwendet `loop.index`, um eine Zählung durchzuführen, die bei jeder Iteration ausgegeben wird.
```html example.html theme={null}
{% set loopy = ["Content", "Social", "Contacts", "Reports"] %}
{% for app in loopy %}
{{ loop.index }}. {{app}}
{% endfor %}
```
```html example.html theme={null}
1. Content
2. Social
3. Contacts
4. Reports
```
Das nächste Beispiel verwendet bedingte Logik, um zu prüfen, ob die Länge der Schleife durch bestimmte Zahlen teilbar (`divisibleby`) ist. Anschließend wird die Breite des Post-Item-Divs entsprechend angepasst. Das Beispiel verwendet die Standardschleife für Blog-Beiträge und geht davon aus, dass die Schleife 6 Beiträge enthält.
```html example.html theme={null}
{% for content in contents %}
{% if loop.length is divisibleby 4 %}
```
## Verschachtelte Schleifen
Schleifen können auch mit Schleifen verschachtelt werden. Die untergeordnete for-Schleife wird bei jeder Iteration der übergeordneten for-Schleife ausgeführt. Im folgenden Beispiel wird eine Liste untergeordneter Elemente in einem verschachtelten `
` innerhalb eines `
` von übergeordneten Elementen gedruckt.
```html example.html theme={null}
{% set parents = ["Parent item 1", "Parent item 2", "Parent item 3"] %}
{% set children = ["Child item 1", "Child item 2", "Child item 3"] %}
{% for parent in parents %}
{{parent}}
{% for child in children %}
{{child}}
{% endfor %}
{% endfor %}
```
```html example.html theme={null}
Parent item 1
Child item 1
Child item 2
Child item 3
Parent item 2
Child item 1
Child item 2
Child item 3
Parent item 3
Child item 1
Child item 2
Child item 3
```
## cycle
Das cycle-Tag kann innerhalb einer for-Schleife verwendet werden, um eine Reihe von Zeichenkettenwerten zu durchlaufen und sie bei jeder Iteration zu drucken. Eine der praktischsten Anwendungen dieses Verfahrens ist die Anwendung alternierender Klassen auf Ihre Blog-Beiträge in einem Listing. Dieses Tag kann für mehr als zwei Werte verwendet werden und wiederholt den Zyklus, wenn es mehr Schleifenwiederholungen als Zykluswerte gibt. Im folgenden Beispiel wird eine Klasse von `odd` und `even` auf Beiträge in einem Listing angewendet (das Beispiel geht davon aus, dass es 5 Beiträge in der Schleife gibt).
Bitte beachten Sie, dass **keine Leerzeichen** zwischen den durch Kommata getrennten Werten der Zykluszeichenfolge stehen.
```html example.html theme={null}
{% for content in contents %}
```
## Variablen innerhalb von Schleifen
> [!WARNING]
>
> Alle innerhalb von Schleifen definierten Variablen sind auf den Bereich dieser Schleife beschränkt und können nicht von außerhalb der Schleife aufgerufen werden.
Sie können Variablen, die außerhalb einer Schleife definiert sind, aus einer Schleife heraus aufrufen, aber nicht umgekehrt.
## Schlüssel-Werte-Paare in Schleifen
Wenn das Dictionary von Informationen, das Sie in einer Schleife durchlaufen, über Schlüssel- und Wertepaare verfügt, hätte eine einfache for-Schleife nur Zugriff auf die Werte. Wenn Sie innerhalb der for-Schleife sowohl auf die Schlüssel als auch auf die Werte zugreifen möchten, würde die HubL so formatiert werden:
```text eingabe.txt theme={null}
{% set dict_var = {"name": "Cool Product", "price": "$20", "size":"XL"} %}
{% for key, val in dict_var.items() %}
{{ key }}: {{ val }}
{% endfor %}
```
```text ausgabe.txt theme={null}
name: Cool Product
price: $20
size: XL
```
## Eine bestimmte Anzahl von Iterationen durchführen
Manchmal möchte man eine bestimmte Anzahl von Iterationen durchführen, was beim Generieren von HTML oder CSS nützlich sein kann. Dies können Sie mithilfe der range-Funktion tun.
```html example.html theme={null}
{% for x in range(0,5) %}
{{loop.index}}
{% endfor %}
```
```text gerenderte ausgabe.txt theme={null}
1 2 3 4 5
```
## Verwendung von HubL-Tags in Schleifen
Wenn Sie der Seite ein Tag hinzufügen, weist HubSpot dem umschließenden HTML-Code automatisch eine `id` zu. Dieses Tag ist eindeutig pro name-Tag. In Situationen, in denen Sie ein Tag in einer for-Schleife verwenden müssen, ist die Festlegung eindeutiger Namen nicht sinnvoll. Fügen Sie den `unique_in_loop`-Parameter zu Ihrem Tag hinzu, um eindeutige IDs zu generieren. Dieser Parameter fügt den Modulnamen an die Nummer der aktuellen SchleifeniIeration an, um sicherzustellen, dass er eindeutig ist. Eindeutige IDs werden nicht nur für gültigen HTML benötigt, sondern sind auch für die [Barrierefreiheit](/docs/cms/best-practices/improve-existing-sites/accessibility) wichtig.
```hubl theme={null}
{% for item in module.icon_field %}
{% icon
name="{{ item.name }}",
style="{{ item.type }}",
unicode="{{ item.unicode }}",
unique_in_loop=True
%}
{% endfor %}
```
# Operatoren und Ausdrucktests
Source: https://developers.hubspot.de/docs/cms/reference/hubl/operators-and-expression-tests
Um die Logik und Funktionalität Ihrer Vorlagen zu erweitern, unterstützt HubL mehrere wichtige Operatoren und Ausdruckstests. Operatoren ermöglichen es Ihnen, mathematische Funktionen auszuführen, Vergleiche durchzuführen, die Logik von Vorlagen komplexer zu machen und die Darstellung durch Markup zu ändern. Darüber hinaus enthält dieser Artikel eine umfassende Liste von Ausdruckstests, die in HubL verwendet werden können.
Um die Logik und Funktionalität Ihrer Vorlagen zu erweitern, unterstützt HubL mehrere wichtige Operatoren und Ausdruckstests. [Operatoren](/docs/cms/reference/hubl/operators-and-expression-tests#operators) ermöglichen es Ihnen, mathematische Funktionen auszuführen, Vergleiche durchzuführen, die Logik von Vorlagen komplexer zu machen und die Darstellung durch Markup zu ändern. Darüber hinaus enthält dieser Artikel eine umfassende Liste von [Ausdruckstests](/docs/cms/reference/hubl/operators-and-expression-tests#expression-tests), die in HubL verwendet werden können.
## Operatoren
Operatoren sind Symbole, die den HubL-Compiler anweisen, verschiedene Operationen auszuführen, die zur endgültigen Ausgabe führen. Operatoren werden zwischen Operanden platziert, um die beiden Werte zueinander in Beziehung zu setzen, sei es zur Ausführung mathematischer Funktionen, zum Erstellen von Vergleichen oder zum Implementieren von booleschen Ausdrücken.
Nachfolgend finden Sie die Operatoren, die Sie in HubL verwenden können, nach Typ geordnet.
### Mathematik
Mathematische Standardoperatoren können zur Berechnung von Werten im Kontext einer Vorlage verwendet werden.
```hubl theme={null}
{% set my_num = 11 %}
{% set my_number = 2 %}
{{ my_num + my_number }}
{{ my_num - my_number }}
{{ my_num / my_number }}
{{ my_num % my_number }}
{{ my_num // my_number }}
{{ my_num * my_number }}
{{ my_num ** my_number }}
```
| Symbol | Beschreibung |
| - | - |
| `+` | Fügt zwei Objekte zusammen, in der Regel Zahlenwerte. Um Zeichenfolgen oder Listen zu verketten, sollten Sie stattdessen den [`~`-Operator](#other-hubl-operators) verwenden. |
| `-` | Subtrahiert eine Zahl von einer anderen. |
| `/` | Dividiert Zahlen. |
| `%` | Gibt den Rest aus der Division von Zahlen zurück. |
| `//` | Teilt zwei Zahlen und gibt das gerundete ganzzahlige Ergebnis zurück. `{{ 20 // 7 }}` ergibt zum Beispiel `2`. |
| `*` | Multipliziert Zahlen. |
| `**` | Nimmt den linken Operanden hoch dem rechten Operanden. |
### Vergleich
Vergleichsoperatoren können verwendet werden, um Werte für Vorlagenlogik auszuwerten. Einige Beispiele für die Verwendung von Vergleichsoperatoren finden Sie in [if-Anweisungen](/docs/cms/reference/hubl/if-statements).
```hubl theme={null}
{% set my_num = 11 %}
{% set my_number = 2 %}
{{ my_num == my_number }}
{{ my_num != my_number }}
{{ my_num > my_number }}
{{ my_num >= my_number }}
{{ my_num < my_number }}
{{ my_num <= my_number }}
```
| Symbol | Kurzschreibweise | Beschreibung |
| - | - | - |
| `==` | ==eq | Gleich. Wird als true ausgewertet, wenn die beiden Objekte gleiche Werte haben. |
| `!=` | ne | Ungleich. Wird als true ausgewertet, wenn die beiden Objekte nicht gleich sind. |
| `>` | gt | Größer als. Wird als true ausgewertet, wenn der Wert des linken Operanden größer als der rechte Operand ist. |
| `>=` | gte | Größer als oder gleich. Wird als true ausgewertet, wenn der linke Operand größer oder gleich dem rechten Operanden ist. |
| `<` | lt | Kleiner als. Wird als true ausgewertet, wenn der linke Operand kleiner als der rechte Operand ist. |
| `<=` | lte | Kleiner als oder gleich. Wird als true ausgewertet, wenn der linke Operand kleiner oder gleich dem rechten Operanden ist. |
> [!TIP]
>
> Die Kurzschreibweise der Vergleichsoperatoren kann in HubL-Filtern verwendet werden, bei denen ein Ausdruck getestet wird, z. B. [`|selectattr()`](/docs/cms/reference/hubl/filters#selectattr).
### Logisch
Mit logischen Operatoren können Sie boolesche Ausdrücke implementieren sowie mehrere Ausdrücke in einzelnen Anweisungen kombinieren.
```text and.txt theme={null}
Two non-empty strings:
{{ "a" and "b" }}
Empty string and non-empty string:
{{ "" and "b" }}
Two non-zero numbers:
{{ 1 and 2 }}
Zero and non-zero number:
{{ 0 and 1 }}
Two non-empty lists:
{{ [1] and [2] }}
Empty list and non-empty list:
{{ [] and [2] }}
Two non-empty dicts:
{{ {a: 1} and {b: 2} }}
Empty dict and non-empty dict:
{{ {} and {b: 2} }}
```
```text or.txt theme={null}
Two non-empty strings:
{{ "a" or "b" }}
Empty string and non-empty string:
{{ "" or "b" }}
Two non-zero numbers:
{{ 1 or 2 }}
Zero and non-zero number:
{{ 0 or 1 }}
Two non-empty lists:
{{ [1] or [2] }}
Empty list and non-empty list:
{{ [] or [2] }}
Two non-empty dicts:
{{ {a: 1} or {b: 2} }}
Empty dict and non-empty dict:
{{ {} or {b: 2} }}
```
```text is / is not.txt theme={null}
Conditional using `is` operator:
{% set string = "strings are a cat's best friend" %}
{% if string is string_containing "cat" %}
Meow
{% else %}
Woof
{% endif %}
Conditional using `not` operator:
{% set string = "strings are a cat's best friend" %}
{% if string is not string_containing "cat" %}
Meow
{% else %}
Woof
{% endif %}
```
```text (expr).txt theme={null}
{% set my_num = 10 %}
{% set my_variable = 5 %}
{{ (my_num + 2) * my_variable }}
```
```text ?.txt theme={null}
{% set date = local_dt %}
{{ date ? date : 'No date'}}
{{ todays_date ? todays_date : 'No date'}}
```
| Symbol | Beschreibung |
| - | - |
| `and` | Gibt `true` zurück, wenn sowohl der linke als auch der rechte Operand truthy sind. Andernfalls wird `false` zurückgegeben. Dieser Operator verhält sich nicht wie der `and`-Operator in Python oder der `&&`-Operator in JavaScript. Im Folgenden erfahren Sie mehr über die Verwendung von `and`-Operatoren. |
| `or` | Gibt den ersten Operanden zurück, wenn er truthy ist. Andernfalls wird der zweite Operand zurückgegeben. Dieser Operator ist äquivalent zu `or` in Python und`\|\|` JavaScript. Im Folgenden erfahren Sie mehr über die Verwendung von `or`-Operatoren. |
| `is` | Verbindet zwei Operanden für eine positive Anweisung. |
| `not` | Negiert eine Anweisung in Verbindung mit `is`. |
| `(expr)` | Gruppieren Sie einen Ausdruck für die Reihenfolge der Operationen. Zum Beispiel: `(10 - 2) * variable`. |
| `?` | Der [ternäre Operator](/docs/cms/reference/hubl/if-statements) kann verwendet werden, um schnell bedingte Logik zu schreiben. Akzeptiert drei Argumente (Ausdruck, „true“-Bedingung, „false“-Bedingung). Wertet einen Ausdruck aus und gibt die entsprechende Bedingung zurück. |
**Verwenden von und/oder-Operatoren**
In HubL verhält sich der `or`-Operator wie der `or`-Operator in Python und der `||`-Operator in JavaScript. Der erste Operand wird zurückgegeben, wenn der Ausdruck als true ausgewertet wird, andernfalls wird der zweite Operand zurückgegeben. Ein häufiger Anwendungsfall für diesen `or` Operator ist das Festlegen eines Fallback-Werts, wenn kein Variablenwert definiert ist.
```hubl theme={null}
Two non-empty strings:
{{ "a" or "b" }}
Empty string and non-empty string:
{{ "" or "b" }}
Defining a fallback value:
{{ some_variable or "default value" }}
```
Der `and`-Operator verhält sich jedoch anders als der `and`-Operator in Python und der `&&`-Operator in JavaScript. In HubL gibt `and` immer einen booleschen Wert zurück: Wenn der Ausdruck als true ausgewertet wird, wird `true` zurückgegeben, andernfalls wird `false` zurückgegeben. Die Python- und JavaScript-Operatoren hingegen geben einen Operandenwert zurück, der darauf basiert, ob die Anweisung als true oder false ausgewertet wird.
```hubl theme={null}
Two non-empty strings:
{{ "a" and "b" }}
Empty string and non-empty string:
{{ "" and "b" }}
```
In HubL werden leere Listen (`[]`) und leere Dicts (`{}`) als falsch betrachtet. Dies entspricht dem Verhalten in Python, unterscheidet sich jedoch von JavaScript, wo `[]` und `{}` truthy sind.
```hubl theme={null}
Empty list and non-empty list:
{{ [] or [2] }}
Empty dict and non-empty dict:
{{ {} and {b: 2} }}
```
### Andere HubL-Operatoren
Nachfolgend sind weitere wichtige HubL-Operatoren aufgeführt, die zur Durchführung verschiedener Aufgaben verwendet werden können.
| Symbol | Beschreibung |
| - | - |
| `in` | Überprüft, ob ein Wert in einer Sequenz enthalten ist. |
| `is` | Führt einen [Ausdruckstest](/docs/cms/reference/hubl/operators-and-expression-tests#expression-tests) durch. |
| `\|` | Wendet einen Filter an. |
| `~` | Verkettet Werte. |
## Ausdrucktests
Ausdruckstests sind verschiedene boolesche Bedingungen, die mithilfe von logischen Operatoren ausgewertet werden können.
### boolean
Überprüft, ob das Objekt boolesch ist (im strengen Sinne, nicht in seiner Fähigkeit, zu einem wahrheitsgemäßen Ausdruck auszuwerten).
```text hubl.txt theme={null}
{% set isActive = false %}
{% if isActive is boolean %}
isActive is a boolean
{% endif %}
```
```text gerenderte ausgabe.txt theme={null}
isActive is a boolean
```
### containing
Überprüft, ob eine Listenvariable einen Wert enthält.
```text hubl.txt theme={null}
{% set numbers = [1, 2, 3] %}
{% if numbers is containing 2 %}
Set contains 2!
{% endif %}
```
```text gerenderte ausgabe.txt theme={null}
Set contains 2!
```
### containingall
Überprüft, ob eine Listenvariable alle Werte einer anderen Liste enthält.
```text hubl.txt theme={null}
{% set numbers = [1, 2, 3] %}
{% if numbers is containingall [2, 3] %}
Set contains 2 and 3!
{% endif %}
{% if numbers is containingall [2, 4] %}
Set contains 2 and 4!
{% endif %}
```
```text gerenderte ausgabe.txt theme={null}
Set contains 2 and 3!
```
### defined
Überprüft, ob eine Variable im Kontext der Vorlage definiert ist. Sie können diesen Ausdruckstest zwar verwenden, aber beim Schreiben einer if-Anweisung ohne Operatoren wird standardmäßig geprüft, ob die Variable definiert ist.
In dem folgenden Beispiel wird der color-Parameter eines Farbmoduls getestet. Hätte der color-Parameter keinen Wert, würde die Vorlage standardmäßig eine schwarze Hintergrundfarbe darstellen. Wenn er angegeben ist, wird die vom Benutzer festgelegte Hintergrundfarbe dargestellt.
```text hubl.txt theme={null}
{% color "my_color" color="#930101", export_to_template_context=True %}
```
```html example.html theme={null}
```
### divisibleby
Überprüft, ob ein Objekt durch eine andere Zahl teilbar ist.
Im Folgenden wird zum Beispiel eine for-Schleife erstellt, die eine Liste von Tierarten durchläuft. Jede Tierart wird in einem div gedruckt, und jedes 5. div hat ein anderes Inline-Styling (Breite:100 %). Dieses Konzept könnte auf einen Blog angewendet werden, in dem für ein bestimmtes Muster von Beiträgen ein anderes Markup gerendert wird. Weitere Informationen zu for-Schleifen und loop.index finden Sie [in diesem Artikel](/docs/cms/reference/hubl/loops).
```text hubl.txt theme={null}
{% set animals = ["lions", "tigers", "bears", "dogs", "sharks"] %}
{% for animal in animals %}
{% if loop.index is divisibleby 5 %}
```
### equalto
Überprüft, ob der Wert einer Variablen gleich einer Konstanten oder einer anderen Variablen ist. Sie können auch den Operator `==` verwenden, um denselben Test durchzuführen.
Im folgenden Beispiel wird die Breite der Blogbeiträge auf der Grundlage der Gesamtzahl der Beiträge in der Schleife angepasst. In der Beispielausgabe wird davon ausgegangen, dass der Blog 4 Beiträge enthält.
```html example.html theme={null}
{% for content in contents %}
{% if loop.length is equalto 2 %}
Post content
{% elif loop.length is equalto 3 %}
Post content
{% elif loop.length is equalto 4 %}
Post content
{% else %}
Post content
Post content
Post content
Post content
```
### even
Überprüft, ob eine numerische Variable eine gerade Zahl ist.
Das folgende Beispiel zeigt eine vereinfachte Blog-Listing-Schleife. Wenn die aktuelle Iteration der Schleife gerade ist, wird dem post item-div die `even-post`-Klasse zugewiesen. Andernfalls wird die `odd-post`-Klasse zugewiesen.
```html example.html theme={null}
{% for content in contents %}
{% if loop.index is even %}
```
### float
Überprüft, ob eine numerische Variable eine Gleitkommazahl ist.
```html example.html theme={null}
{% set quantity = 1.20 %}
{% if quantity is float %}
quantity is a floating point number
{% endif %}
```
```html example.html theme={null}
quantity is a floating-point number
```
### integer
Überprüft, ob eine Variable eine ganze Zahl ist.
```html example.html theme={null}
{% set quantity = 120 %}
{% if quantity is integer %}
Quantity is an integer
{% endif %}
```
```html example.html theme={null}
Quantity is an integer
```
### iterable
Überprüft, ob eine Variable in einer Schleife durchlaufen werden kann.
In diesem Beispiel wird eine Variable namens `jobs` daraufhin überprüft, ob sie durchlaufen werden kann. Da die Variable eine Liste von Jobs enthält, würde die [if-Anweisung](/docs/cms/reference/hubl/if-statements) als `true` ausgewertet werden, und die Schleife würde ausgeführt werden. Hätte die Variable einen einzelnen Wert enthalten, würde die if-Anweisung diesen Wert stattdessen mit anderem Markup ausgeben. [Erfahren Sie mehr über for-Schleifen](/docs/cms/reference/hubl/loops).
```html example.html theme={null}
{% set jobs = ["Accountant", "Developer", "Manager", "Marketing", "Support"] %}
{% if jobs is iterable %}
Available positions
{% for job in jobs %}
{{ job }}
{% endfor %}
{% else %}
Available position
{{ jobs }}
{% endif %}
```
```html example.html theme={null}
Available positions
Accountant
Developer
Manager
Marketing
Support
```
### lower
Überprüft, ob eine Zeichenfolge kleingeschrieben ist.
Im folgenden Beispiel wird mithilfe einer [unless-Anweisung](/docs/cms/reference/hubl/if-statements#unless-statements) und eines lower-Filter sichergestellt, dass eine in einen Textbaustein eingegebene Textzeichenfolge immer kleingeschrieben wird.
```html example.html theme={null}
{% module "my_text" path="@hubspot/text" label="Enter text", value="Some TEXT that should be Lowercase", export_to_template_context=True %}
{% unless widget_data.my_text.value is lower %}
{{ widget_data.my_text.value|lower }}
{% endunless %}
```
```text gerenderte ausgabe.txt theme={null}
some text that should be lowercase
```
### mapping
Überprüft, ob ein Objekt ein Dict (Dictionary/Wörterbuch) ist.
Im folgenden Beispiel wird überprüft, ob das Kontaktobjekt ein Dictionary ist.
```html example.html theme={null}
{% if contact is mapping %}
This object is a dictionary.
{% else %}
This object is not a dictionary.
{% endif %}
```
```text gerenderte ausgabe.txt theme={null}
This object is a dictionary.
```
### none
Überprüft, ob eine Variable einen `null`-Wert enthält.
```html example.html theme={null}
{% module "user_email" path="@hubspot/text" label="Enter user email", value="example@hubspot.com", export_to_template_context=True %}
{% unless widget_data.user_email.value is none %}
{{ widget_data.user_email.value }}
{% endunless %}
```
```text gerenderte ausgabe.txt theme={null}
example@hubspot.com
```
### number
Überprüft, ob der Wert einer Variablen eine Zahl ist.
Im folgenden Beispiel wird überprüft, ob es sich bei einer Variablen um eine Variable handelt, und wenn ja, wird sie in Millionen umgewandelt.
```html example.html theme={null}
{% set my_var = 40 %}
{% if my_var is number %}
{{ my_var * 1000000 }}
{% else %}
my_var is not a number.
{% endif %}
```
```text gerenderte ausgabe.txt theme={null}
40000000
```
### odd
Überprüft, ob eine numerische Variable eine ungerade Zahl ist.
Im Folgenden wird dasselbe Beispiel wie der zuvor beschriebene inverse-even-Ausdruckstest verwendet.
```html example.html theme={null}
{% for content in contents %}
{% if loop.index is odd %}
```
### sameas
Überprüft, ob zwei Variablen den gleichen Wert haben.
Im folgenden Beispiel werden zwei Variablen festgelegt und dann wird überprüft, ob sie gleich sind.
```text hubl.txt theme={null}
{% set var_one = True %}
{% set var_two = True %}
{% if var_one is sameas var_two %}
The variables values are the same.
{% else %}
The variables values are different.
{% endif %}
```
```text gerenderte ausgabe.txt theme={null}
The variables values are the same.
```
### sequence
Ähnlich wie der **iterable**-Test wird mit diesem Ausdruckstest überprüft, ob eine Variable eine Sequenz ist.
Im folgenden Beispiel wird überprüft, ob eine Variable eine Sequenz ist, und dann wird diese Sequenz von Musikgenres durchlaufen.
```html example.html theme={null}
{% set genres = ["Pop", "Rock", "Disco", "Funk", "Folk", "Metal", "Jazz", "Country", "Hip-Hop", "Classical", "Soul", "Electronica" ] %}
{% if genres is sequence %}
Favorite genres
{% for genre in genres %}
{{ genre }}
{% endfor %}
{% else %}
Favorite genre:
{{ genres }}
{% endif %}
```
```html example.html theme={null}
Pop
Rock
Disco
Funk
Folk
Metal
Jazz
Country
Hip-Hop
Classical
Soul
Electronica
```
### string
Überprüft, ob der in einer Variablen gespeicherte Wert ein Text ist.
Im folgenden Beispiel wird überprüft, ob eine Variable eine Zeichenkette ist, und wenn ja, wird ein title-Filter angewendet, um die Großschreibung zu ändern.
```text hubl.txt theme={null}
{% set my_var = "title of section" %}
{% if my_var is string %}
{{ my_var|title }}
{% else %}
my_var is not a string
{% endif %}
```
```text gerenderte ausgabe.txt theme={null}
Title Of Section
```
### string\_containing
Überprüft, ob ein bereitgestellter Substring in einer anderen Zeichenfolge enthalten ist. Dieser Ausdruckstest wird in Verbindung mit dem Operator `is` verwendet.
```text hubl.txt theme={null}
{% if content.domain is string_containing ".es" %}
Markup that will only render on content hosted on .es domains
{% elif content.domain is string_containing ".jp" %}
Markup that will only render on content hosted on .jp domains
{% else %}
Markup that will render on all other domains
{% endif %}
```
```text gerenderte ausgabe.txt theme={null}
Markup that will render on all other domains
```
### string\_startingwith
Überprüft, ob eine Zeichenkette mit einer bestimmten Zeichenkette beginnt. Er wird in Verbindung mit dem Operator `is` verwendet.
```text hubl.txt theme={null}
{% if content.slug is string_startingwith "es/" %}
Markup that will only render on content hosted in a /es/ subdirectory
{% elif content.slug is string_startingwith "jp/" %}
Markup that will only render on content hosted in a /jp/ subdirectory
{% else %}
Markup that will render on all subdirectories
{% endif %}
```
```text gerenderte ausgabe.txt theme={null}
Markup that will render on all subdirectories
```
### truthy
Überprüft, ob ein Ausdruck als `True` ausgewertet wird.
Im folgenden Beispiel wird ein boolesches Kontrollkästchenmodul verwendet, um eine Warnmeldung anzuzeigen.
```html example.html theme={null}
{% boolean "check_box" label="Show alert", value=True, export_to_template_context=True %}
{% if widget_data.check_box.value is truthy %}
Danger!
{% endif %}
```
```html example.html theme={null}
Danger!
```
### undefined
Überprüft, ob eine Variable im Kontext der Vorlage undefiniert ist. Dieser Test unterscheidet sich vom `none`-Ausdruckstest dadurch, dass undefined `true` ist, wenn die Variable vorhanden ist, aber keinen Wert hat; none hingegen ist `true`, wenn die Variable einen Nullwert hat.
Im folgenden Beispiel wird eine Vorlage auf das Vorhandensein der Variablen "my\_var" überprüft.
```text hubl.txt theme={null}
{% if my_var is undefined %}
A variable named "my_var" does not exist on this template.
{% else %}
{{ my_var }}
{% endif %}
```
```text gerenderte ausgabe.txt theme={null}
A variable named "my_var" does not exist on this template.
```
### upper
Überprüft, ob eine Zeichenkette durchgehend in Großbuchstaben geschrieben ist. Nachfolgend finden Sie ein umgekehrtes Beispiel für den [obigen Test](#lower) des `lower`-Ausdrucks.
```text hubl.txt theme={null}
{% module "my_text" path="@hubspot/text" label="Enter text", value="Some TEXT that should be Uppercase", export_to_template_context=True %}
{% unless widget_data.my_text.value is upper %}
{{ widget_data.my_text.value|upper }}
{% endunless %}
```
```text gerenderte ausgabe.txt theme={null}
SOME TEXT THAT SHOULD BE UPPERCASE
```
### within
Überprüft, ob eine Variable in einer Liste vorhanden ist.
```text hubl.txt theme={null}
{% set numbers = [1, 2, 3] %}
{% if 2 is within numbers %}
2 is in the list!
{% endif %}
{% if 4 is within numbers %}
4 is in the list!
{% endif %}
```
```text gerenderte ausgabe.txt theme={null}
2 is in the list!
```
# Drag-&-Drop-Bereich-HubL-Tags
Source: https://developers.hubspot.de/docs/cms/reference/hubl/tags/dnd-areas
Die HubL-Tags werden zum Erstellen von Drag-&-Drop-Bereichen verwendet, mit denen Entwickler Seitenabschnitte erstellen können, die Layout-, Stil- und Inhaltsänderungen direkt in den Content-Editoren unterstützen.
[MitDrag-&-Drop-Bereichen](https://developers.hubspot.de/docs/guides/cms/content/templates/drag-and-drop/overview) können Entwickler Seitenabschnitte und globale Teilvorlagen erstellen, die Layout-, Stil- und Inhaltsänderungen direkt in den Content-Editoren unterstützen. Siehe das [Tutorial zum Erstellen eines Drag-&-Drop-Bereichs](/docs/cms/start-building/building-blocks/drag-and-drop/tutorial) für eine Einführung in das Einrichten von Drag-&-Drop-Bereichen.
Drag-&-Drop-Bereiche basieren auf einem 12-spaltigen, responsiven Raster. Drag-&-Drop-Tags rendern Markup mit Klassennamen, die Spalten und Zeilen bezeichnen. Sie müssen ein Stylesheet hinzufügen, das auf diese Klassennamen ausgerichtet ist. Ein Beispiel für Layout-Stile, die Sie implementieren können, finden Sie in der [CMS Hub Boilerplate](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/css/objects/_layout.css). Ihr Stylesheet kann mithilfe von [`{{ require_css() }}`](/docs/cms/reference/hubl/tags/standard-tags#require-css) zur Vorlage hinzugefügt werden.
> [!WARNING]
>
> ### Bitte beachten:
>
> Drag-&-Drop-Bereiche können zurzeit noch nicht in [Blogbeiträgen](/docs/cms/start-building/building-blocks/templates/blog) und [E-Mail-Vorlagen](https://developers.hubspot.de/docs/guides/cms/content/templates/overview#email) verwendet werden.
## dnd\_area
Ein [Drag-&-Drop-Bereich](https://developers.hubspot.de/docs/guides/cms/content/templates/drag-and-drop/overview) ist ein Container, der einen Teil der Webseite in Bezug auf Struktur, Design und Inhalt bearbeitbar macht. Der Text eines `{% dnd_area %}`-Tags liefert den Standardinhalt für den Drag-&-Drop-Bereich.
Module selbst können keine Drag-&-Drop-Bereiche enthalten. Um Content-Autoren eine Oberfläche zum Hinzufügen einheitlicher Inhalte innerhalb eines Moduls zu bieten, sollten Sie stattdessen [Wiederholfelder und -gruppen](/docs/cms/reference/fields/module-theme-fields#repeaters) verwenden.
Ein `dnd_area`-Tag kann die folgenden Parameter enthalten:
| Parameter | Typ | Beschreibung |
| - | - | - |
| `class` | Zeichenfolge | Eine dem umschließenden div einesdnd\_area hinzugefügte Klasse |
| `label` | Zeichenfolge | Wird im Editor zur Kennzeichnung des Bereichs in der Seitenleiste verwendet. |
```text eingabe.txt theme={null}
{% dnd_area "unique_name", class="main" %}
{% end_dnd_area %}
```
```text ausgabe.txt theme={null}
```
`dnd_area`-Tags können auch `dnd_section`-Tags enthalten.
> [!WARNING]
>
> **Bitte beachten**: Ein Content-Autor kann die Vorlage einer Seite gegen eine andere Vorlage desselben Typs austauschen, je nachdem, ob sie [dnd\_area](/docs/cms/reference/hubl/tags/dnd-areas)-Tags enthält.
>
> * Mit dem visuellen Drag-&-Drop-Layout-Editor erstellte Vorlagen können gegen andere Drag-&-Drop-Vorlagen oder Code-Vorlagen mit oder ohne `dnd_area`-Tags ausgetauscht werden.
> * Code-Vorlagen mit *dnd\_area*-Tags können nur gegen andere Code-Vorlagen mit `dnd_area`-Tags ausgetauscht werden.
> * Code-Vorlagen ohne `dnd_area`-Tags können nur gegen andere Code-Vorlagen ohne `dnd_area`-Tags ausgetauscht werden.
## dnd\_section
A [`{% dnd_section %}`](/docs/cms/start-building/building-blocks/sections/sections) ist eine Zeile der obersten Ebene und muss innerhalb eines `{% dnd_area %}`-Tags verschachtelt sein. [Abschnitte können auch als Vorlage definiert werden](/docs/cms/start-building/building-blocks/sections/sections#section-templates) und dann in einen `dnd_area` [aufgenommen](/docs/cms/start-building/building-blocks/sections/sections#section-context) werden. So eignen sie sich ideal für die schnelle Erstellung einer einfachen Vorlage.
Ein `dnd_section`-Tag kann die folgenden Parameter enthalten:
| Parameter | Typ | Beschreibung |
| - | - | - |
| `background_color` | Dict | Ein Dictionary, das die Angabe einer [Hintergrundfarbe](#background-color) unterstützt. Kann auch als Zeichenfolge angegeben sein. |
| `background_image` | Dict | Ein Dictionary, das die Angabe eines [Hintergrundbildes](#background-image) unterstützt. |
| `background_linear_gradient` | Dict | Ein Dictionary, das die Angabe eines [linearen Farbverlaufshintergrundes](#background-linear-gradient) unterstützt. |
| `full_width` | Boolesch | Ein boolescher Wert, der festlegt, ob der Abschnitt die volle Breite haben soll oder durch einen inneren Container begrenzt wird. |
| `margin` | Dict | Ein Dictionary, das das Angeben von Randwerten in `cm`, `mm`, `Q`, `in`, `pc`, `pt`, `px`, `em`, `ex`, `ch`, `rem`, `lh`, `vw`, `vh`, `vmin`, `vmax` und `%` unterstützt. Wenn keine Maßeinheit angegeben wird, wird die Standardeinheit `px` angewendet. |
| `max_width` | Ganzzahl | Ein Pixelwert, der die maximale Breite eines Inhalts in einem Wrapping-Dictionary festlegt. |
| `padding` | Dict | Ein Dictionary, das das Angeben von Auffüllungswerten in `cm`, `mm`, `Q`, `in`, `pc`, `pt`, `px`, `em`, `ex`, `ch`, `rem`, `lh`, `vw`, `vh`, `vmin`, `vmax` und `%` unterstützt. Wenn keine Maßeinheit angegeben wird, wird die Standardeinheit `px` angewendet. |
| `vertical_alignment` | Zeichenfolge | Vertikale Ausrichtung des untergeordneten Inhalts. Zu den verfügbaren Optionen gehören:
```
`dnd_section`-Tags können auch die folgenden Tags enthalten:
* `dnd_column`
* `dnd_module`
## dnd\_column
Ein [`{% dnd_column %}`](https://developers.hubspot.de/docs/guides/cms/content/templates/drag-and-drop/overview#column) ist ein vertikaler Strukturbaustein, der eine oder mehrere durch seine übergeordnete Zeile definierten Layoutspalten einnimmt.
DieseS HubL-Tag muss innerhalb eines `{% dnd_area %}`-Tags verschachtelt sein.
Ein `dnd_column`-Tag kann die folgenden Parameter enthalten:
| Parameter | Typ | Beschreibung |
| - | - | - |
| `background_color` | Dict | Ein Dictionary, das die Angabe einer [Hintergrundfarbe](#background-color) unterstützt. |
| `background_image` | Dict | Ein Dictionary, das die Angabe eines [Hintergrundbildes](#background-image) unterstützt. |
| `background_linear_gradient` | Dict | Ein Dictionary, das die Angabe eines [linearen Farbverlaufshintergrundes](#background-linear-gradient) unterstützt. |
| `margin` | Dict | Ein Dictionary, das das Angeben von Randwerten in `cm`, `mm`, `Q`, `in`, `pc`, `pt`, `px`, `em`, `ex`, `ch`, `rem`, `lh`, `vw`, `vh`, `vmin`, `vmax` und `%` unterstützt. Wenn keine Maßeinheit angegeben wird, wird die Standardeinheit `px` angewendet. |
| `max_width` | Ganzzahl | Ein Pixelwert, der die maximale Breite eines Inhalts in einem Wrapping-Dictionary festlegt. |
| `padding` | Dict | Ein Dictionary, das das Angeben von Auffüllungswerten in `cm`, `mm`, `Q`, `in`, `pc`, `pt`, `px`, `em`, `ex`, `ch`, `rem`, `lh`, `vw`, `vh`, `vmin`, `vmax` und `%` unterstützt. Wenn keine Maßeinheit angegeben wird, wird die Standardeinheit `px` angewendet. |
| `vertical_alignment` | Zeichenfolge | Vertikale Ausrichtung des untergeordneten Inhalts. Zu den verfügbaren Optionen gehören:
`TOP`
`MIDDLE`
`BOTTOM`
|
> [!WARNING]
>
> ### Bitte beachten:
>
> Sie können nur einen Hintergrundparameter pro `dnd_column`-Tag verwenden.
```text eingabe.txt theme={null}
{% dnd_column
offset=0,
width=12,
background_color={
r: 255,
g: 0,
b: 0,
a: 1
},
margin={
"top": "1em",
"bottom": "1em"
},
%}
{% end_dnd_column %}
```
```text ausgabe.txt theme={null}
```
Ein `dnd_column`-Tag kann auch `dnd_row` enthalten.
## dnd\_row
Ein [`{% dnd_row %}`](https://developers.hubspot.de/docs/guides/cms/content/templates/drag-and-drop/overview#row) ist ein horizontaler Strukturbaustein, der ein verschachteltes 12-spaltiges Layout-Gitter erzeugt, in dem Spalten und Module platziert werden können.
DieseS HubL-Tag muss innerhalb eines `{% dnd_area %}`-Tags verschachtelt sein.
Ein `dnd_row`-Tag kann die folgenden Parameter enthalten:
| Parameter | Typ | Beschreibung |
| - | - | - |
| `background_color` | Dict | Ein Dictionary, das die Angabe einer [Hintergrundfarbe](#background-color) unterstützt. |
| `background_image` | Dict | Ein Dictionary, das die Angabe eines [Hintergrundbildes](#background-image) unterstützt. |
| `background_linear_gradient` | Dict | Ein Dictionary, das die Angabe eines [linearen Farbverlaufshintergrundes](#background-linear-gradient) unterstützt. |
| `margin` | Dict | Ein Dictionary, das das Angeben von Randwerten in `cm`, `mm`, `Q`, `in`, `pc`, `pt`, `px`, `em`, `ex`, `ch`, `rem`, `lh`, `vw`, `vh`, `vmin`, `vmax` und `%` unterstützt. Wenn keine Maßeinheit angegeben wird, wird die Standardeinheit `px` angewendet. |
| `max_width` | Ganzzahl | Ein Pixelwert, der die maximale Breite eines Inhalts in einem Wrapping-Dictionary festlegt. |
| `padding` | Dict | Ein Dictionary, das das Angeben von Auffüllungswerten in `cm`, `mm`, `Q`, `in`, `pc`, `pt`, `px`, `em`, `ex`, `ch`, `rem`, `lh`, `vw`, `vh`, `vmin`, `vmax` und `%` unterstützt. Wenn keine Maßeinheit angegeben wird, wird die Standardeinheit `px` angewendet. |
| `vertical_alignment` | Zeichenfolge | Vertikale Ausrichtung des untergeordneten Inhalts. Zu den verfügbaren Optionen gehören:
```
Eine dnd\_row kann auch die folgenden Tags enthalten:
* `dnd_column`
* `dnd_module`
## dnd\_module
Ein [`{% dnd_module %}`](https://developers.hubspot.de/docs/guides/cms/content/templates/drag-and-drop/overview#module) ist ein [Modul](https://developers.hubspot.de/docs/guides/cms/content/modules/overview), das von einem div umschlossen wird, dem Layout, Stile und Inhalte hinzugefügt werden können. Das Modul wird durch Verweis auf seinen Pfad angegeben, bei dem es sich entweder um ein HubSpot-Standardmodul (unter Verwendung des `@hubspot/`-Namespace) oder um von Ihnen erstellte Module handeln kann, deren Pfad im Dateiverzeichnisbaum des Design-Managers angegeben wird.
DieseS HubL-Tag muss innerhalb eines `{% dnd_area %}`-Tags verschachtelt sein.
Ein `dnd_module`-Tag kann die folgenden Parameter enthalten:
| Parameter | Typ | Beschreibung |
| - | - | - |
| `path` | Zeichenfolge | Der Pfad zu einem Modul. |
| `horizontal_alignment` | Zeichenfolge | Horizontale Positionierung, unterstützt:`LEFT`, `CENTER`, `RIGHT` |
| `offset` | Ganzzahl | Der Abstand von 0 im 12-Spalten-Raster. |
| `width` | Ganzzahl | Die Anzahl der Spalten, die das 12-Spalten-Raster belegen. |
| `flexbox_positioning` | Zeichenfolge | **Veraltet, nicht verwenden.** Verwenden Sie stattdessen `horizontal_alignment` in Verbindung mit `vertical_alignment` der Zeile oder des Abschnitts. Flexbox-Positionswert für das Modul. Unterstützt eine Zeichenfolge zur Angabe der vertikalen Position, gefolgt von der horizontalen:
`TOP_LEFT`
`TOP_CENTER`
`TOP_RIGHT`
`MIDDLE_LEFT`
`MIDDLE_CENTER`
`MIDDLE_RIGHT`
`BOTTOM_LEFT`
`BOTTOM_CENTER`
`BOTTOM_RIGHT`
|
> [!TIP]
>
> Haben Sie ein altes Modul, dessen Feldname mit einem der oben genannten `dnd_module`-Parameter übereinstimmt? Sie können [Standardwerte über einen Feldparameter übergeben](/docs/cms/reference/modules/using-modules-in-templates#passing-fields-that-have-dnd-associated-parameters), ähnlich wie bei einer Feldgruppe.
```text eingabe.txt theme={null}
{% dnd_module
path="@hubspot/rich_text",
offset=0,
width=8,
%}
{% module_attribute "html" %}
```
## Hintergrund
Es gibt mehrere Möglichkeiten, Hintergründe für Drag-&-Drop-Elemente in Spalten, Abschnitten und Zeilen festzulegen: [`background_image`](#background-image)[`background_linear_gradient`](#background-linear-gradient) und [`background_color`](#background-color).
### background\_color
Die Drag-&-Drop-Tags für Spalten, Abschnitte und Zeilen unterstützen Hintergrundfarben. Sie können die Standard-Hintergrundfarbe für ein Drag-&-Drop-Element mithilfe von `background_color` festlegen. Dieser Parameter basiert auf einer Zeichenfolge und kann die folgenden Formate enthalten, die im folgenden Beispiel beschrieben werden.
```hubl theme={null}
{% dnd_section %}
// Hex Value (both 3 and 6 char length)
{% dnd_column background_color="#F7F7F7" %}
{% end_dnd_column %}
{% dnd_column background_color="#FFF" %}
{% end_dnd_column %}
// Both RGB and RGBA
{% dnd_column background_color="rgb(255,255,255)" %}
{% end_dnd_column %}
{% dnd_column background_color="rgba(0,0,0,.25)" %}
{% end_dnd_column %}
{% end_dnd_section %}
```
### background\_linear\_gradient
Die Drag-&-Drop-Elemente für Spalten, Abschnitte und Zeilen unterstützen lineare Hintergrundverläufe. Mit dem `background_linear_gradient`-Parameter können Sie einen Standardfarbverlauf festlegen. Der Parameter erwartet ein Dictionary. Derzeit werden nur zwei Farbstopps unterstützt.
| Parameter | Typ | Beschreibung |
| - | - | - |
| `direction` | Zeichenfolge | Die Richtung des Farbverlaufs.
`to bottom`
`to top`
`to left`
`to right`
|
| `colors` | Array | Array von Farbzeichenfolgen. Derzeit werden 2 Werte unterstützt, der Anfang und das Ende. Die Werte werden als Zeichenfolgen bereitgestellt, und die folgenden Formate werden unterstützt:
`RGB`
`RGBA`
`3 char hex`
`6 char hex`
`8 char hex`
|
```hubl theme={null}
{% dnd_section
background_linear_gradient={
"direction": "to bottom",
"colors": [
"#1EB6C3",
"#2A2859"
]
}
%}
{% dnd_module path="@hubspot/rich_text" width="6" %}
{% end_dnd_module %}
{% end_dnd_section %}
```
### background\_image
Die Drag-&-Drop-Elemente für Spalten, Abschnitte und Zeilen unterstützen Hintergrundbilder. Sie können ein Standard-Hintergrundbild angeben, indem Sie den `background_image`-Parameter verwenden, der ein Dictionary erwartet.
| Schlüssel | Typ | Beschreibung |
| - | - | - |
| `backgroundPosition` | Zeichenfolge | Die Hintergrundposition des Bildes. Unterstützt eine Zeichenfolge zur Angabe der vertikalen Position, gefolgt von der horizontalen.
`TOP_LEFT`
`TOP_CENTER`
`TOP_RIGHT`
`MIDDLE_LEFT`
`MIDDLE_CENTER`
`MIDDLE_RIGHT`
`BOTTOM_LEFT`
`BOTTOM_CENTER`
`BOTTOM_RIGHT`
|
| `backgroundSize` | Zeichenfolge | Die CSS-Eigenschaft für die Hintergrundgröße, die für das Bild verwendet wird. Unterstützte Werte sind:
`cover`
`contain`
`auto`
|
| `imageUrl` | Zeichenfolge | Absolute URL zum Bild. |
```hubl theme={null}
{% dnd_section
background_image = {
"backgroundPosition": "MIDDLE_CENTER",
"backgroundSize": "cover",
"imageUrl": "https://www.example.com/bg-image.jpg"
},
%}
{% dnd_module path="@hubspot/rich_text" width="6" %}
{% end_dnd_module %}
{% end_dnd_section %}
```
## Wie Drag-&-Drop-Stilparameter auf der Seite angezeigt werden
Wenn Sie stilbasierte Parameter wie [Hintergründe](#background), Ränder oder Auffüllungen verwenden, werden die Klassennamen automatisch für Ihre Abschnitte, Spalten, Zeilen und Module berechnet. Die von Ihnen zugewiesenen Eigenschaftswerte werden dann zu diesen automatisch erstellten Klassennamen hinzugefügt, und der daraus resultierende CSS-Code wird dann vor dem abschließenden ``-Tag auf der Seite in einem `
" The Content Optimization System
matches content with context to create a highly personalized, relevant and
meaningful customer experience.
"
Dharmesh Shah,HubSpot
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `module_id` | Zeichenfolge | Die ID des zu rendernden Moduls. |
| `path` | Zeichenfolge | Der Pfad des zu rendernden Moduls. Führender Schrägstrich für einen absoluten Pfad, ansonsten ist der Pfad relativ zur Vorlage. Verweisen Sie auf HubSpot-Standardmodule mit Pfaden, die ihren HubL-Tags entsprechen, wie @hubspot/rich\_text, @hubspot/linked\_image usw. |
## Editor-Platzhalter
Um Platzhalterinhalte für ein Modul im Editor darzustellen, können Sie entweder Standardinhalte zu Modulfeldern hinzufügen oder das `editor_placeholder`-HubL-Tag verwenden. Dies kann nützlich sein, wenn das Modul keinen Standard-Content hat oder benötigt, oder um die Modulerstellung zu optimieren.
Um einen Editor-Platzhalter zu einem benutzerdefinierten Modul hinzuzufügen, fügen Sie zunächst eine [if-Anweisung](/docs/cms/reference/hubl/if-statements) zum HTML-Code des Moduls hinzu, um den Platzhalter zu rendern, wenn im Editor kein Inhalt ausgewählt ist. Zum Beispiel könnte der folgende Code verwendet werden, um einen Editor-Platzhalter zu einem CTA-Modul hinzuzufügen:
```hubl theme={null}
{% if module.label %}
{% cta guid="{{ module.guid }}" label="my_cta" %}
{% elif is_in_editor %}
{% editor_placeholder %}
{% endif %}
```
> [!NOTE]
>
> Die erste `if`-Anweisung gibt an, ob das Modul vorhanden ist. Dann identifiziert die `elif`-Anweisung, ob das Modul im Kontext des Editors mithilfe der `is_in_editor`-Variablen gerendert wird.
>
> Diese Variable gibt `true` zurück, wenn der Inhalt in einem beliebigen Content-Editor gerendert wird, aber Sie können mit anderen [In-App-Editor- und Vorschau-Variablen ](/docs/cms/reference/hubl/variables#in-app-editor-and-preview-variables) noch spezifischer sein.
Definieren Sie dann den Platzhalterinhalt in der `meta.json`-Datei des Moduls.
```json theme={null}
{
"global": false,
"host_template_types": ["PAGE"],
"module_id": 62170380654,
"is_available_for_new_content": true,
"placeholder": {
"show_module_icon": true,
"title": "Call to action",
"description": "Select a CTA"
}
}
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `show_module_icon` | Boolesch | Ob das Symbol des Moduls angezeigt werden soll. |
| `title` | Zeichenfolge | Der Titel, der im Platzhalter erscheint. |
| `description` | Zeichenfolge | Die Beschreibung, die im Platzhalter erscheint. |
## Flexible Spalte
Flexible Spalten sind vertikale Spalten in einer Vorlage, mit denen Content-Autoren mithilfe des [Content-Editors](https://knowledge.hubspot.com/de/website-pages/edit-page-content-in-a-drag-and-drop-area) Module in die Seite einfügen und entfernen können. Wenn Sie eine flexible Spalte mit HubL programmieren, können Sie andere HubL-Module so einbinden, dass sie standardmäßig in der flexiblen Spalte erscheinen. Das nachstehende Code-Beispiel zeigt die grundlegende Syntax und ein Beispiel für eine flexible Spalte mit einem Rich-Text- und Formularmodul als Standard-Content.
Bitte beachten Sie, dass flexible Spalten nur zu Seitenvorlagen hinzugefügt werden können, nicht zu Blog- oder E-Mail-Vorlagen. Module können keine flexiblen Spalten enthalten, aber sie können stattdessen [wiederholbare Felder und Gruppen](/docs/cms/reference/fields/module-theme-fields#repeaters) enthalten, die eine ähnliche Funktionalität bieten.
```text eingabe.txt theme={null}
{% widget_container "my_flexible_column" label="My flex column"%}
{% module "rich_text" path="@hubspot/rich_text" %}
{% module "linked_image" path="@hubspot/linked_image" %}
{% end_widget_container %}
```
```text ausgabe.txt theme={null}
Something Powerful
Tell The Reader More
The headline and subheader tells us what you're
offering, and the form header closes the deal. Over here
you can explain why your offer is so great it's worth filling out a form
for.
```
> [!WARNING]
>
> ### Hinweis:
>
> Wenn Sie dieses Tag verwenden, muss das`label` dem `name`-Wert folgen, damit die flexible Spalte im Content-Editor funktioniert. Die folgende Syntax ist beispielsweise ungültig:
>
> `[% widget_container label="My label" "my_flexible_column" %}`
## Formular
Ermöglicht Benutzern die Auswahl eines HubSpot-Formulars, das sie ihrer Seite hinzufügen können. Der folgende Code enthält ein Beispiel für die Verwendung der Standard-Tag-Syntax von HubL und ein Beispiel für die Verwendung der [Blocksyntax](/docs/cms/reference/modules/using-modules-in-templates#block-syntax).
```text eingabe.txt theme={null}
{% form "my_form"
form_to_use="{formID}",
title="Free Trial"
%}
{% module_block form "my_form"
form_follow_ups_follow_up_type="",
form_to_use="9e633e9f-0634-498e-917c-f01e355e83c6",
title="Free Trial",
notifications_are_overridden=True,
response_message="Thanks for submitting the form.",
response_type="inline",
overrideable=True,
gotowebinar_webinar_key="",
webinar_id="",
webinar_source"",
label="Form"
%}
{% module_attribute "notifications_override_email_addresses" is_json=True %}
["email_address@website.com"]
{% end_module_attribute %}
{% end_module_block %}
```
```text ausgabe.txt theme={null}
Free Trial
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `form_key` | Zeichenfolge | Gibt eine eindeutige ID für das Formular auf Seitenebene an. |
| `form_to_use` | Zeichenfolge | Gibt an, welches Formular standardmäßig geladen werden soll, basierend auf der Formular-ID. Diese ID ist in der URL des Formular-Editors eines jeden Formulars verfügbar. |
| `title` | Zeichenfolge | Füllt ein `h3`-Header-Tag über dem Formular aus. |
| `no_title` | Boolesch | Bei `True` wird das h3-Tag über dem Titel entfernt. |
| `form_follow_ups_follow_up_type` | Aufzählung | Legt Folgeaktionen fest, z. B. das Aufnehmen eines Kontakts in einen Workflow oder das Senden einer einfachen Follow-up-E-Mail. Mögliche Werte sind `no_action`, `simple` und `automation`. |
| `simple_email_for_live_id` | Zahl | Gibt die ID der einfachen Follow-up-E-Mail für die Live-Seite an. |
| `simple_email_for_buffer_id` | Zahl | Gibt die ID der einfachen Follow-up-E-Mail für die automatisch gespeicherte Version einer Seite an. |
| `follow_up_type_simple` | Boolesch | Wenn true, wird eine einfache Follow-up-E-Mail aktiviert. Alternative zu `form_follow_ups_follow_up_type`. |
| `follow_up_type_automation` | Boolesch | Wenn true, werden Einsendungen in einen Workflow aufgenommen. Alternative zu `form_follow_ups_follow_up_type`. |
| `simple_email_campaign_id` | Zahl | Gibt die ID der einfachen Follow-up-E-Mail an. Alternative zu `simple_email_for_live_id`. |
| `form_follow_ups_workflow_id` | Zahl | Gibt die ID des Workflows an, in den Einsendungen aufgenommen werden sollen. |
| `response_redirect_url` | Zeichenfolge | Bei einer Weiterleitung zu einer externen Seite gibt dieser Parameter die URL an, zu der weitergeleitet werden soll. |
| `response_redirect_id` | Zahl | Bei einer Weiterleitung zu einer von HubSpot gehosteten Seite gibt dieser Parameter die Seiten-ID dieser Seite an. Die Seiten-ID ist in der URL des Seiten-Editors der einzelnen Seiten verfügbar. |
| `response_response_type` | Aufzählng | Legt fest, ob zu einer anderen Seite weitergeleitet oder eine Inline-Dankesnachricht bei der Einsendung angezeigt werden soll. Der Wert dieses Parameters sollte entweder `"redirect"` oder `"inline"` (Standard) sein. |
| `response_message` | Zeichenfolge | Legt eine Inline-Danksagung fest Dieser Parameter unterstützt HTML. |
| `notifications_are_overridden` | Boolesch | Wenn dieser Wert auf `True` gesetzt ist, sendet das Formular Benachrichtigungen an die im `notifications_override_email_addresses`-Parameter ausgewählten E-Mail-Adressen, anstatt an die Standardwerte des Formulars. Die Standardeinstellung ist `False`. |
| `notifications_override_guid_buffer` | Zeichenfolge | ID der Überschreibungseinstellungen in der automatisch gespeicherten Version der Seite. |
| `notifications_override_guid` | Zeichenfolge | ID der Überschreibungseinstellungen in der Live-Version der Seite. |
| `notifications_override_email_addresses` | JSON | Block-Syntax unterstützt eine JSON-Liste von E-Mail-Empfängern, die bei der Einsendung des Formulars benachrichtigt werden sollen. Diese E-Mail-Adressen haben Vorrang vor den Einstellungen für E-Mail-Benachrichtigungen, die im Formular festgelegt sind. |
| `sfdc_campaign` | Zeichenfolge | Gibt die Salesforce-Kampagne an, in die Kontakte, die das Formular einsenden, aufgenommen werden sollen. Der Wert dieses Parameters sollte die ID der SFDC-Kampagne sein und ist nur für Accounts verfügbar, die [mit Salesforce integriert](https://knowledge.hubspot.com/de/salesforce/install-the-hubspot-salesforce-integration) sind. |
| `gotowebinar_webinar_key` | Zeichenfolge | : Gibt das GoToWebinar-Webinar an, für das Kontakte nach dem Einsenden des Formulars registriert werden sollen. Nur verfügbar für Accounta, die die [GoToWebinar-Integration](https://knowledge.hubspot.com/de/integrations/use-the-gotowebinar-integration-with-hubspot) verwenden. |
| `webinar_id` | Zeichenfolge | : Ein allgemeineres Feld, das die ID des Microsoft Teams- oder GoToWebinar-Webinars angibt, für das Kontakte nach dem Einsenden des Formulars registriert werden sollen. Nur in Accounts verfügbar, die die [GoToWebinar](https://knowledge.hubspot.com/de/integrations/use-the-gotowebinar-integration-with-hubspot)- oder [Microsoft Teams](https://knowledge.hubspot.com/de/integrations/connect-hubspot-and-microsoft-teams)-Integrationen verwenden, und wenn `support_all_webinar_types` in der [Definition der Formularfelder](/docs/cms/reference/fields/module-theme-fields#form)auf `true` gesetzt ist. |
| `webinar_source` | Zeichenfolge | Die ID der Integrations-App, entweder GoToWebinar (`35161`) oder Microsoft Teams (`221635`). |
## Fußzeile
Rendert Copyright-Informationen mit dem Jahr und dem Unternehmensnamen, die in den [Marketing-E-Mail-Einstellungen](https://knowledge.hubspot.com/de/marketing-email/edit-office-location-information-in-email-footers#edit-your-default-email-footer-information-in-your-settings) des Accounts angegeben sind.
```text eingabe.txt theme={null}
{% page_footer "page_footer" %}
```
```text ausgabe.txt theme={null}
```
## Galerie
Erzeugt ein HubSpot-Galerie-Tag. Dieses Galerie-Tag basiert auf [Slick](http://kenwheeler.github.io/slick/). Sie können zwar ein Galeriemodul mit der HubL-Standardsyntax erstellen, müssen jedoch die Block-Syntax verwenden, wenn Sie Standardfolien mit HubL vordefinieren möchten. Beide Methoden sind unten dargestellt. Galeriebilder werden mithilfe von JavaScript verzögert geladen.
```text eingabe.txt theme={null}
{% gallery "crm_gallery" %}
<-- Block syntax -->
{% widget_block gallery "Gallery" display_mode="standard" sizing="static", transition="slide", caption_position="below", auto_advance=True, overrideable=True, description_text="", show_pagination=True, label="Gallery", loop_slides=True, num_seconds=5 %}
{% widget_attribute "slides" is_json=True %}
[{
"caption": "CRM Contacts App",
"show_caption": true,
"link_url": "http://www.hubspot.com/crm",
"alt_text": "Screenshot of CRM Contacts",
"img_src": "http://go.hubspot.com/hubfs/Contacts-View-1.png?t=1430860504240",
"open_in_new_tab": true
},
{
"caption": "HubSpot CRM Contact Profile",
"show_caption": true,
"link_url": "http://www.hubspot.com/",
"alt_text": "HubSpot CRM Contact Profile",
"img_src": "http://cdn2.hubspot.net/hubfs/53/Contact-Profile.png?t=1430860504240",
"open_in_new_tab": true
}]
{% end_widget_attribute %}
{% end_widget_block %}
```
```text ausgabe.txt theme={null}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `slides` | JSON | Eine JSON-Liste mit der Standardbeschriftung, der Link-URL, dem ALT-Text, der Bildquelle und der Angabe, ob das Bild in einer neuen Registerkarte geöffnet werden soll. Siehe Block-Syntax oben. | |
| `loop_slides` | Boolesch | Wenn „True“, werden die Folien in einer Schleife durchlaufen. | `True` |
| `num_seconds` | Zahl | Zeit in Sekunden für die Pause zwischen den Folien | `5` |
| `show_pagination` | Boolesch | Stellt Schaltflächen unter dem Schieberegler bereit, um zwischen den Folien zu navigieren. | `True` |
| `sizing` | Aufzählung | Bestimmt, ob der Schieberegler seine Größe in Abhängigkeit von der Höhe der Folien ändert. Mögliche Werte sind: „static“ oder „resize“. | `"static"` |
| `auto_advance` | Boolesch | Folien werden nach der in num\_seconds angegebenen Zeit automatisch weitergeschaltet. | `False` |
| `transition` | Aufzählung: | Legt die Art des Folienübergangs fest. Mögliche Werte sind: „fade“ oder „slide“. | `"slide"` |
| `caption_position` | Aufzählung | Beeinflusst die Positionierung der Beschriftung auf oder unter der Folie. Mögliche Werte sind „below“ oder „superimpose“. | `"below"` |
| `display_mode` | Aufzählung | Legt fest, wie die Bildergalerie angezeigt werden soll. Mögliche Werte sind: „standard", „lightbox", „thumbnail“. | `"standard"` |
| `lightboxRows` | Zahl | Wenn display\_mode auf „lightbox“ festgelegt ist, steuert dieser Parameter die Anzahl der in der Lightbox angezeigten Zeilen. | `3` |
## Header
Erzeugt ein Header-Modul, das Text als h1-h6-Tag darstellt.
```text eingabe.txt theme={null}
{% header "header" %}
{% header "my_header" header_tag="h1", overrideable=True, value="A clear and bold header", label="Header" %}
```
```text ausgabe.txt theme={null}
A clear and bold header
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `header_tag` | Zeichenfolge | Wählen Sie das zu rendernde Header-Tag aus. Mögliche Werte sind: h1, h2, h3, h4, h5, h6. | `h1` |
| `value` | Zeichenfolge | Rendert Standardtext innerhalb des Überschriftenmoduls. | `"A clear bold header"` |
## Symbol
Fügt ein icon-Tag hinzu, mit dem die Benutzer ein Symbol zur Verwendung auswählen können. Unterstützte Symbolsätze sind FontAwesome [5.0.10](https://github.com/FortAwesome/Font-Awesome/releases/tag/5.0.10), [5.14.0](https://github.com/FortAwesome/Font-Awesome/releases/tag/5.14.0) und [6.4.2](https://github.com/FortAwesome/Font-Awesome/releases/tag/6.4.2).
Dieses Tag kann nicht in Modulen verwendet werden, die für E-Mail aktiviert sind.
```text eingabe.txt theme={null}
{% icon
name="Accessible Icon"
style="REGULAR"
unicode="f368"
icon_set="fontawesome-5.14.0"
purpose="decorative"
title="Accessible Icon"
%}
```
```text ausgabe.txt theme={null}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `name` | Zeichenfolge | Name des Symbols. | |
| `style` | Zeichenfolge | Stil des Symbols. Mögliche Werte: `REGULAR` oder `SOLID` | `REGULAR` |
| `unicode` | Zeichenfolge | Die Unicode-Zeichendarstellung des Symbols. | |
| `icon_set` | Zeichenfolge | Der zu verwendende FontAwesome-Symbolsatz. Mögliche Werte sind:
`fontawesome-5.14.0`
`fontawesome-5.0.10`
`fontawesome-6.4.2`
| |
| `purpose` | Zeichenfolge | Der Zweck des Symbols, das für die [Barrierefreiheit](https://docs.fontawesome.com/v5/web/other-topics/accessibility) verwendet wird. Mögliche Werte sind `decorative` oder `semantic`. Wenn es auf `decorative` festgelegt ist, wird dem Symbol ein zusätzliches `aria-hidden="true"`-Attribut hinzugefügt. | `decorative` |
| `title` | Zeichenfolge | Das title-Element der svg des Symbols, zusammen mit einem `labelledby`-Attribut, das auf den Titel verweist. | |
## Bild
Erstellt ein Bild-Tag (img), mit dem Benutzer ein Bild aus dem Content-Editor auswählen können. Wenn Sie möchten, dass das Bild mit einer Ziel-URL verknüpft wird, sollten Sie linked\_image unten verwenden.
```text eingabe.txt theme={null}
{% image "image" %}
{% image "executive_image" label="Executive photo", alt="Photo of Brian Halligan", src="//cdn2.hubspot.net/hub/53/file-733888619-jpg/assets/hubspot.com/about/management/brian-home.jpg", width="300" %}
```
```text ausgabe.txt theme={null}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `alt` | Zeichenfolge | Legt den Standard-ALT-Text für das Bild fest. | |
| `src` | Zeichenfolge | Füllt das src-Attribut des img-Tags aus. | |
| `width` | Zahl | Legt das width-Attribut des img-Tags fest. | `The width of the image` |
| `height` | Zahl | Legt eine min-height in einem style-Attribut des img-Tags **nur für E-Mail-Vorlagen** fest. | `The height of the image` |
| `hspace` | Zahl | Legt das hspace-Attribut des img-Tags fest. | |
| `align` | Zeichenfolge | Legt das align-Attribut des img-Tags fest. Mögliche Werte sind: „left“, „right“ & „center“. | |
| `style` | Zeichenfolge | Fügt Inline-CSS-Deklarationen zum img-Tag hinzu. Zum Beispiel style="border:1px solid blue; margin:10px". | |
| `loading` | Zeichenfolge | Steuert das loading-Attribut des img-Elements. [Wird für browserbasiertes Lazy Loading verwendet.](/docs/cms/best-practices/testing-staging-performance/lazy-loading) | |
## Bildquelle
Ein Bild-SRC-Modul erstellt eine Bildauswahl im Content-Editor, aber anstatt ein img-Tag auszugeben, wird die URL des Bildes dargestellt. Dieses Tag wird in der Regel mit dem `no_wrapper=True`-Parameter verwendet, sodass das Bild src zu Inline-CSS oder anderem Markup hinzugefügt werden kann. Eine Alternative zur Verwendung dieses Tags ist die Verwendung des [`export_to_template_context`](/docs/cms/reference/modules/export-to-template-context)-Parameters.
```text eingabe.txt theme={null}
{% image_src "image_src" %}
{% image_src "executve_image_src" src="//cdn2.hubspot.net/hub/53/file-733888614-jpg/assets/hubspot.com/about/management/dharmesh-home.jpg", no_wrapper=True %}
```
```text ausgabe.txt theme={null}
//cdn2.hubspot.net/hub/53/file-733888614-jpg/assets/hubspot.com/about/management/dharmesh-home.jpg
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `src` | Zeichenfolge | Gibt die Standard-URL-Bildquelle an. |
## Sprachumschaltung
Fügt ein Globus-Symbol mit Links zu den übersetzten Versionen einer bestimmten CMS-Seite hinzu. Erfahren Sie [in diesem Artikel mehr über mehrsprachige Inhalte](https://knowledge.hubspot.com/de/website-and-landing-pages/create-pages-in-multiple-languages).
```text eingabe.txt theme={null}
{% language_switcher "language_switcher" overrideable=false, display_mode="localized", label="Language Switcher" %}
```
```text ausgabe.txt theme={null}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `display_mode` | Aufzählung | Die Sprache des Textes in der Sprachumschaltung. Werte sind:
`Pagelang` bedeutet, dass die Namen der Sprachen in der Sprache der Seite angezeigt werden, auf der sich die Sprachauswahl befindet.
`Localized` bedeutet, dass die Namen jeder Sprache in ihrer eigenen Sprache angezeigt werden.
`Hybrid` ist eine Kombination aus beidem.
| `Localized` |
## Verlinktes Bild
Erstellt ein vom Benutzer auswählbares Bild, das in einen Link eingeschlossen ist. Dieses Tag verfügt über alle Parameter eines Bildmoduls mit zwei zusätzlichen Parametern, die die Ziel-URL des Links angeben und ob der Link in einem neuen Fenster geöffnet wird.
```text eingabe.txt theme={null}
{% linked_image "linked_image" %}
{% linked_image "executive_image"
label="Executive photo",
link="https://twitter.com/bhalligan", \
open_in_new_tab=True,
alt="Photo of Brian Halligan",
src="//cdn2.hubspot.net/hub/53/file-733888619-jpg/assets/hubspot.com/about/management/brian-home.jpg", width="300"
%}
```
```text ausgabe.txt theme={null}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `alt` | Zeichenfolge | Legt den Standard-ALT-Text für das Bild fest. | |
| `src` | Zeichenfolge | Füllt das src-Attribut des img-Tags aus. | |
| `width` | Zahl | Legt das width-Attribut des img-Tags fest. | `The width of the image` |
| `height` | Zahl | Legt eine min-height in einem style-Attribut des img-Tags **nur für E-Mail-Vorlagen** | `The height of the image` |
| `hspace` | Zahl | Legt das hspace-Attribut des img-Tags fest. | |
| `align` | Zeichenfolge | Legt das align-Attribut des img-Tags fest. Mögliche Werte sind: „left“, „right“ & „center“. | |
| `style` | Zeichenfolge | Fügt Inline-CSS-Deklarationen zum img-Tag hinzu. Zum Beispiel style="border:1px solid blue; margin:10px". | |
| `open_in_new_tab` | Boolesch | Legt fest, ob die Ziel-URL in einer anderen Registerkarte geöffnet werden soll oder nicht. | `False` |
| `link` | Zeichenfolge | Legt die Ziel-URL des Links fest, der das img-Tag einschließt. | |
| `target` | Zeichenfolge | Legt das target-Attribut des Link-Tags fest. | |
| `loading` | Zeichenfolge | Steuert das loading-Attribut des img-Elements. [Wird für browserbasiertes Lazy Loading verwendet.](/docs/cms/best-practices/testing-staging-performance/lazy-loading) | |
## Logo
Ein logo-Tag rendert das Logo Ihres Unternehmens aus den [Brand-Kit-Einstellungen](https://knowledge.hubspot.com/de/branding/edit-your-logo-favicon-and-brand-colors#edit-your-logo) des Accounts.
```text eingabe.txt theme={null}
{% logo "logo" %}
{% logo "my_logo" width="200" %}
```
```text ausgabe.txt theme={null}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `alt` | Zeichenfolge | Legt den Standard-ALT-Text für das Bild fest. | `Value in brand kit settings` |
| `src` | Zeichenfolge | Füllt das src-Attribut des img-Tags aus. | `Value in brand kit settings` |
| `link` | Zeichenfolge | Legt die Ziel-URL des Links fest, der das img-Tag einschließt. | |
| `width` | Zahl | Legt das width-Attribut des img-Tags fest. | `The width of the image` |
| `height` | Zahl | Legt eine min-height in einem style-Attribut des img-Tags **nur für E-Mail-Vorlagen** | `The height of the image` |
| `hspace` | Zahl | Legt das hspace-Attribut des `img`-Tags fest. | |
| `align` | Zeichenfolge | Legt das align-Attribut des `img`-Tags fest. Mögliche Werte sind `left`, `right` und `center`. | |
| `style` | Zeichenfolge | Fügt Inline-CSS-Deklarationen zum img-Tag hinzu. Beispiel:`style="border:1px solid blue; margin:10px"` | |
| `suppress_company_name` | Boolesch | Blendet Unternehmensnamen aus, wenn kein Bild-Logo festgelegt ist. | `False` |
| `use_account_default` | Boolesch | Auf `true` festlegen, um den Unternehmensnamen aus den Standardeinstellungen des Accounts zu verwenden. | `False` |
| `open_in_new_tab` | Boolesch | Legt fest, ob die Ziel-URL in einer anderen Registerkarte geöffnet werden soll oder nicht. | `False` |
| `override_inherited_src` | Boolesch | Wenn auf `true` festgelegt, wird src vom Logo-Widget verwendet und nicht src voden Einstellungen oder der Vorlage geerbt. | `True` |
| `heading_level` | Zeichenfolge | Bei Verwendung nicht verknüpfter textbasierter Logos wird das textbasierte Logo in eine der folgenden verfügbaren Optionen als HTML-Tag eingeschlossen: `h1`, `h2`, `h3`, `h4`. | `h1` |
| `loading` | Zeichenfolge | Steuert das Attribut zum Laden des img-Elements für [browserbasiertes Lazy-Loading](/docs/cms/best-practices/testing-staging-performance/lazy-loading). | |
## Menü
Erzeugt ein erweitertes Menü basierend auf einer Menüstruktur unter **Inhaltseinstellungen > Erweiterte Menüs.** Unter [Menüs und Navigation](/docs/cms/start-building/building-blocks/modules/menus-and-navigation) finden Sie weitere Informationen zur Verwendung von Menüs in [Vorlagen](https://developers.hubspot.de/docs/cms/start-building/building-blocks/templates/overview) und [Modulen](https://developers.hubspot.de/docs/cms/start-building/building-blocks/modules/overview). Wenn `id` auf `null` festgelegt ist, stellt das menu-Tag das Standardmenü für den HubSpot-Account dar.
```text eingabe.txt theme={null}
{% menu "menu" %}
{% menu "my_menu"
id=456,
site_map_name="Default",
overrideable=False,
root_type="site_root",
flyouts="true",
max_levels="2",
flow="horizontal",
label="Advanced Menu"
%}
```
```text ausgabe.txt theme={null}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `id` | Zahl | ID der Menüstruktur von „Erweiterte Menüs“ in den Inhaltseinstellungen. | |
| `site_map_name` | Zeichenfolge | Name der Menüstruktur von „Erweiterte Menüs“ in den Inhaltseinstellungen. | `"default"` |
| `root_type` | Aufzählung | Gibt den Typ der erweiterten Menüs an. Zu den Optionen gehören „site\_root“, „top\_parent“, „parent“, „page\_name“, „page\_id“ und „breadcrumb“. Diese Werte entsprechen „Statisch“, „Dynamisch nach Bereich“, „Dynamisch nach Seite“ und „Breadcrumb“. | `"site_root"` |
| `flyouts` | Zeichenfolge | Bei true wird der Menüstruktur eine Klasse hinzugefügt, die so gestaltet werden kann, dass untergeordnete Menüpunkte angezeigt werden, wenn Sie den Mauszeiger über den übergeordneten Punkt bewegen. Bei false werden untergeordnete Menüpunkte immer angezeigt. | `"true"` |
| `max_levels` | Zahl | Legt fest, wie viele Ebenen von verschachtelten Menüs im Markup dargestellt werden. Dieser Parameter legt die Anzahl der untergeordneten Menüebenen an, auf die erweitert werden kann. | `2` |
| `flow` | Aufzählung | Legt die Ausrichtung der Menüpunkte fest. Dadurch werden der Menüstruktur Klassen hinzugefügt, sodass sie entsprechend formatiert werden können. Mögliche Werte sind „horizontal", „vertical“ oder „vertical\_flyouts“. Horizontale Menüs zeigen Elemente nebeneinander und vertikale Menüs zeigen Elemente untereinander an. | `"horizontal"` |
| `root_key` | Zeichenfolge | Wird verwendet, um den Stamm des Menüs zu finden. Wenn root\_type auf page\_id oder page\_name festgelegt ist, sollte dieser Parameter die Seiten-ID bzw. das Label der Seite sein. | `"horizontal"` |
| `label` | Zeichenfolge | Etwas Rich-Content, um diese Entität zu beschreiben | `False` |
| `label` | Zeichenfolge | Etwas Rich-Content, um diese Entität zu beschreiben | `False` |
## Require\_css
Ein HubL-Tag, das ein style-Element in die Warteschlange stellt, das im `` gerendert werden soll.
Dieses Tag ähnelt der [require\_css-Funktion](/docs/cms/reference/hubl/functions#require-css), mit der Ausnahme, dass Stile mit diesem Tag inline und nicht aus einem Stylesheet eingefügt werden. Dieses Tag wird auch nicht gegen andere Instanzen des CSS auf derselben Seite dedupliziert. Wenn Sie ein Modul erstellen und ein Stylesheet einfügen möchten, dieses Modul jedoch mehrmals auf einer einzelnen Seite verwenden möchten, sollten Sie stattdessen die `require_css` verwenden.
```text eingabe.txt theme={null}
{{ standard_header_includes }}
{% require_css %}
{% end_require_css %}
{{ standard_footer_includes }}
```
```text ausgabe.txt theme={null}
```
## Require\_head
Ein HubL-Tag, das alles, was in `standard_header_includes` (der `` der Vorlage) platziert ist, in die Warteschlange stellt. Für die meisten JavaScript und CSS siehe `require_js` und `require_css`. Einige Anwendungsfälle für `require_head` sind die Bereitstellung von Meta-Tags und speziellen Link-Tags (wie prefetch und preconnect) von Modulen.
```hubl theme={null}
{% require_head %}
{% end_require_head %}
```
## Require\_js
Ein HubL-Tag, das ein zu renderndes Skriptelement in die Warteschlange stellt. Um ein Skript von einer anderen Datei in die Warteschlange zu stellen, um es im `
` über ein ``-Element darzustellen (im Gegensatz zu inline wie hier gezeigt), verwenden Sie stattdessen die HubL-Funktion [`require_js(absolute_url)`](/docs/cms/reference/hubl/functions#require-js).
```text eingabe.txt theme={null}
{{ standard_header_includes }}
{% require_js position="footer" %}
{% end_require_js %}
{{ standard_footer_includes }}
```
```text ausgabe.txt theme={null}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `position` | Zeichenfolge | Legt die Position fest, an der das Inline-Skript gerendert werden soll. Zu den Optionen gehören: `"head"` und `"footer"`. | `"footer"` |
## Rich-Text
Erzeugt einen WYSIWYG-Content-Editor.
```text eingabe.txt theme={null}
{% rich_text "rich_text" %}
{% rich_text "left_column" label="Enter HTML here" html="
The headline and subheader tells us what you're offering, and the form header closes the deal. Over here you can explain why your offer is so great it's worth filling out a form for.
The headline and subheader tells us what you're offering, and the form
header closes the deal. Over here you can explain why your offer is so great
it's worth filling out a form for.
Remember:
Bullets are great
For spelling out benefits and
Turning visitors into leads.
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `html` | Zeichenfolge | Standard-Rich-Text-Inhalt für das Modul. | `
Something Powerful
Tell The Reader More
The headline and subheader tells us what you're offering, and the form header closes the deal. Over here you can explain why your offer is so great it's worth filling out a form for.
Remember:
Bullets are great
For spelling out [benefits](#) and
Turning visitors into leads.
` |
## RSS-Listing
Lädt eine Liste von Inhalten aus einem internen oder externen RSS-Feed.
> [!WARNING]
>
> ### Hinweis:
>
> Dieses Modul wird asynchron auf der Client-Seite geladen. Wenn Sie also den Feed nach dem Laden bearbeiten möchten, müssen Sie eine globale JS-Funktion definieren, die diese Bearbeitung übernimmt. Verwenden Sie die Funktion `hsRssFeedComplete(feeds)`, wobei `feeds` der jQuery-Selektor in allen Feeds ist, die abgeschlossen wurden. Sie können das DOM-Objekt in dieser Funktion direkt bearbeiten.
```text eingabe.txt theme={null}
{% rss_listing "rss_listing" %}
{% rss_listing "my_rss_listing" rss_url="", publish_date_text="posted at", feed_source={rss_url="", is_external=False, content_group_id="30808594297"}, click_through_text="Read more", show_date=True, include_featured_image=True, overrideable=False, publish_date_format="short", show_detail=True, show_author=True, number_of_items="3", is_external=False, title="", content_group_id="24732847", label="RSS Listing", limit_to_chars="200", attribution_text="by" %}
```
```text ausgabe.txt theme={null}
First things first: Cron jobs are scripts that get executed based on
time. Understanding where this shorthand name comes from may help
you remember this:
Read more
This article was authored by a member of the HubSpot developer
community, Joshua Beatty.
Read more
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `show_title` | Boolesch | Zeigt den Titel des RSS-Feeds oder blendet ihn aus. | `True` |
| `show_date` | Boolesch | Zeigt das Beitragsdatum an. | `True` |
| `show_author` | Boolesch | Zeigt den Namen des Autors an. | `True` |
| `show_detail` | Boolesch | Zeigt eine Beitragszusammenfassung bis zu der durch den `limit_to_chars`-Parameter festgelegten Anzahl von Zeichen an. | `True` |
| `title` | Zeichenfolge | Füllt eine Überschrift über der RSS-Feed-Liste aus. | |
| `limit_to_chars` | Zahl | Maximale Anzahl von Zeichen, die in der Zusammenfassung angezeigt werden. | `200` |
| `publish_date_format` | Zeichenfolge | Format für das Veröffentlichungsdatum Mögliche Werte sind `"short"`, `"medium"` und `"long"`. Akzeptiert auch benutzerdefinierte Formate, einschließlich `"MMMM d, yyyy 'at' h:mm a"`. | `"short"` |
| `attribution_text` | Zeichenfolge | Der Text, der einem Autor einen Beitrag zuschreibt. | `"by"` |
| `click_through_text` | Zeichenfolge | Der Text, der am Ende der Zusammenfassung eines Beitrags für den Klick-Link angezeigt wird | `"Read more"` |
| `publish_date_text` | Zeichenfolge | Der Text, der angibt, wann ein Beitrag veröffentlicht wurde. | `"posted at"` |
| `include_featured_image` | Boolesch | Zeigt ein Bild mit einem Link zum Beitrag für von HubSpot generierte RSS-Feeds an. | `False` |
| `item_title_tag` | Zeichenfolge | Gibt das HTML-Tag für jeden Beitragstitel an. | `span` |
| `is_external` | Boolesch | Der RSS-Feed stammt von einem externen Blog. | `False` |
| `number_of_items` | Zahl | Maximale Anzahl an anzuzeigenden Beiträgen. | `5` |
| `publish_date_language` | Zeichenfolge | Gibt die Sprache des Veröffentlichungsdatums an. | `en_US` |
| `rss_url` | Zeichenfolge | Die URL, unter der sich der RSS-Feed befindet. | |
| `content_group_id` | Zeichenfolge | ID für Blog, wenn Feed-Quelle interner Blog ist. | |
| `select_blog` | Zeichenfolge | Kann verwendet werden, um einen internen HubSpot-Blog-Feed auszuwählen. | `default` |
| `feed_source` | Zeichenfolge | Legt die Quelle für einen RSS-Feed fest. Wenn intern, ist das allgemeine Format `{rss_url="", is_external=False, content_group_id="2502431580"}`. Wenn extern, ist das allgemeine Format `{rss_url="http://blog.hubspot.com/marketing/rss.xml", is_external=True}`. | |
| `tag_id` | Zahl | ID für das Tag, wenn die Feed-Quelle ein interner Blog ist. | |
## Bereichsüberschrift
Erzeugt eine HTML-Überschrift und eine `
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `orientation` | Aufzählung | Definiert Klassen von Menü-Markup, die es ermöglichen, die Ausrichtung von Menüelementen auf der Seite zu formatieren. Mögliche Werte sind `"horizontal"` und `"vertical"`. | `"horizontal"` |
| `menu_tree` | JSON | Menüstruktur mit Namen der Seiten-Links und Ziel-URLs. | `[]` |
## Social-Media-Sharing
Social-Media-Sharing-Tags generieren Social-Media-Symbole, die zum Teilen einer bestimmten Seite verwendet werden können. Dieses Modul kann mit der [Block-Syntax](/docs/cms/reference/modules/using-modules-in-templates#block-syntax) verwendet werden, um die Symbolbilder und mehr anzupassen.
```text eingabe.txt theme={null}
{% social_sharing "social_sharing" %}
{% social_sharing "my_social_sharing" use_page_url=True %}
Block Syntax Example:
{% widget_block social_sharing "my_social_sharing" label="Social Sharing", use_page_url=True, overrideable=True %}
{% widget_attribute "pinterest" is_json=True %}{"custom_link_format": "", "pinterest_media": "http://cdn1.hubspot.com/hub/158015/305390_10100548508246879_837195_59275782_6882128_n.jpg", "enabled": true, "network": "pinterest", "img_src": "https://static.hubspot.com/final/img/common/icons/social/pinterest-24x24.png"}{% end_widget_attribute %}
{% widget_attribute "twitter" is_json=True %}{"custom_link_format": "", "enabled": true, "network": "twitter", "img_src": "https://static.hubspot.com/final/img/common/icons/social/twitter-24x24.png"}{% end_widget_attribute %}
{% widget_attribute "linkedin" is_json=True %}{"custom_link_format": "", "enabled": true, "network": "linkedin", "img_src": "https://static.hubspot.com/final/img/common/icons/social/linkedin-24x24.png"}{% end_widget_attribute %}
{% widget_attribute "facebook" is_json=True %}{"custom_link_format": "", "enabled": true, "network": "facebook", "img_src": "https://static.hubspot.com/final/img/common/icons/social/facebook-24x24.png"}{% end_widget_attribute %}
{% widget_attribute "email" is_json=True %}{"custom_link_format": "", "enabled": true, "network": "email", "img_src": "https://static.hubspot.com/final/img/common/icons/social/email-24x24.png"}{% end_widget_attribute %}
{% end_widget_block %}
```
```text ausgabe.txt theme={null}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `use_page_url` | Boolesch | Bei true teilt das Modul standardmäßig die URL der Seite. | `True` |
| `link` | Zeichenfolge | Gibt eine andere URL zum Teilen an, wenn `use_page_url` false ist. | |
| `pinterest` | JSON | Parameter für das Pinterest-Link-Format und die Quelle des Symbolbildes. | `See block syntax example, above` |
| `twitter` | JSON | Parameter für das Twitter-Link-Format und die Quelle des Symbolbildes. | `See block syntax example, above` |
| `linked_in` | JSON | Parameter für das LinkedIn-Link-Format und die Quelle des Symbolbildes. | `See block syntax example, above` |
| `facebook` | JSON | Parameter für das Facebook-Link-Format und die Quelle des Symbolbildes. | `See block syntax example, above` |
| `email` | JSON | Parameter für das E-Mail-Link-Format und die Quelle des Symbolbildes. | `See block syntax example, above` |
## Abstandshalter
Ein spacer-Tag erzeugt ein leeres span-Tag. Dieses Tag kann als Abstandshalter formatiert werden. In Drag-and-Drop-Layouts wird das Abstandshaltermodul in einen Container mit der Klasse „span1-span12“ eingeschlossen, um festzulegen, wie viel Platz das Modul im zwölfspaltigen responsiven Raster einnehmen soll.
```text eingabe.txt theme={null}
{% space "space" %}
{% space "spacer" label="Horizontal Spacer" %}
```
```text ausgabe.txt theme={null}
```
## Systemseiten-Tags
Die folgenden Tags können auf [Systemseiten](https://developers.hubspot.de/docs/cms/start-building/building-blocks/templates/overview#system-pages) verwendet werden, z. B. auf den Seiten zum Zurücksetzen des Passworts oder zum Abonnieren von E-Mails.
### E-Mail-Back-up Abo-Kündigung
Das Abo-Kündigungs-Back-up-Tag wird für E-Mail-Empfänger gerendert, falls HubSpot deren E-Mail-Adresse nicht ermitteln kann, wenn dieser Empfänger versucht, ein Abo zu kündigen. Mit diesem Tag wird ein Formular adargestellt, in das der Kontakt seine E-Mail-Adresse eingeben kann, um sich von der E-Mail-Kommunikation abzumelden. Es sollte auf einer [Abmelde-Backup-Systemvorlage](https://knowledge.hubspot.com/de/design-manager/use-system-templates-to-customize-error-subscription-and-password-prompt-pages) verwendet werden.
```text eingabe.txt theme={null}
{% email_simple_subscription "email_simple_subscription" %}
{% email_simple_subscription "email_simple_subscription"
header="Email Unsubscribe",
input_help_text="Your email address:",
input_placeholder="email@example.com",
button_text="Unsubscribe",
label="Backup Unsubscribe"
%}
```
```text ausgabe.txt theme={null}
Email Unsubscribe
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `header` | Zeichenfolge | Rendert Text in einem h1-Tag über dem Abmeldeformular. | `"Email Unsubscribe"` |
| `input_help_text` | Zeichnefolge | Rendert Hilfetext in einem h3-Tag über dem Feld für das E-Mail-Abmeldeformular. | `"Your email address:"` |
| `input_placeholder` | Zeichenfolge | Fügt Platzhaltertext im E-Mail-Adressformularfeld hinzu. | `"email@example.com"` |
| `button_text` | Zeichenfolge | Ändert den Text der Schaltfläche zum Absenden des Abmeldeformulars. | `"Unsubscribe"` |
### E-Mail-Abonnements
Dieses Modul rendert, wenn ein E-Mail-Empfänger seine Abonnementeinstellungen bearbeiten möchte. Es sollte auf einer [Abo-Einstellungen-Systemvorlage](https://knowledge.hubspot.com/de/design-manager/use-system-templates-to-customize-error-subscription-and-password-prompt-pages) verwendet werden.
```text eingabe.txt theme={null}
{% email_subscriptions "email_subscriptions" %}
{% email_subscriptions "email_subscriptions"
resubscribe_button_text="Yes, resubscribe me!",
unsubscribe_single_text="Uncheck the types of emails you do not want to receive:",
subheader_text="\n If this is not your email address, please ignore this page since the email associated with this page was most likely forwarded to you.\n",
unsubscribe_all_unsubbed_text="You are presently unsubscribed from all of our emails. Would you like to receive our emails again?",
button_text="Update email preferences", label="Subscription Preferences", header="Communication Preferences",
unsubscribe_all_option="Unsubscribe me from all mailing lists.",
unsubscribe_all_text="Or check here to never receive any emails:"
%}
```
```text ausgabe.txt theme={null}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `header` | Zeichenfolge | Rendert Text in einem h1-Tag über dem Formular für die Abonnementeinstellungen. | `"Communication Preferences"` |
| `subheader_text` | Zeichenfolge | Füllt Text unterhalb der Überschrift über den Abmeldeeinstellungen. | `"
If this is not your email address, please ignore this page since the email associated with this page was most likely forwarded to you.
"` |
| `unsubscribe_single_text` | Zeichenfolge | Rendert Text in einem `
` über den Abonnementoptionen. | `"Uncheck the types of emails you do not want to receive:"` |
| `unsubscribe_all_text` | Zeichenfolge | Rendert Text in einem `
` über der Kontrollkästcheneingabe für die Abmeldung von allen E-Mails. | `"Or check here to never receive any emails:"` |
| `unsubscribe_all_unsubbed_text` | Zeichenfolge | Füllt Text in einem `
` aus, das rendert, wenn ein Kontakt derzeit von allen E-Mails abgemeldet ist. | `"You are presently unsubscribed from all of our emails. Would you like to receive our emails again?"` |
| `unsubscribe_all_option` | Zeichenfolge | Legt den Text neben der Kontrollkästcheneingabe für die Abmeldung von allen E-Mails fest. | `"Unsubscribe me from all mailing lists."` |
| `button_text` | Zeichenfolge | Legt den Text der Schaltfläche „Einsenden“ fest, mit der die Abo-Einstellungen aktualisiert werden. | `"Update email preferences"` |
| `resubscribe_button_text` | Zeichenfolge | Legt den Text der Schaltfläche „Einsenden“ fest, wenn Kontakte sich erneut anmelden. | `"Yes, resubscribe me!"` |
### E-Mail-Abo-Bestätigung
Die Aktualisierungsbestätigung für E-Mail-Abonnements ist ein Modul, das der Danksagungsvorlage hinzugefügt werden kann, wenn ein Empfänger seine Abonnementeinstellungen aktualisiert oder sich abmeldet. Es sollte auf einer [Abo-Einstellungen-Systemvorlage](https://knowledge.hubspot.com/de/design-manager/use-system-templates-to-customize-error-subscription-and-password-prompt-pages) verwendet werden.
```text eingabe.txt theme={null}
{% email_subscriptions_confirmation "email_subscriptions_confirmation" %}
{% email_subscriptions_confirmation "email_subscriptions_confirmation"
label="Subscriptions Update Confirmation",
unsubscribe_all_success="You have successfully unsubscribed from all email communications.",
subscription_update_success="You have successfully updated your email preferences.",
subheader_text="\n If this is not your email address, please ignore this page since the email associated with this page was most likely forwarded to you.\n"
%}
```
```text ausgabe.txt theme={null}
example@email.com
If this is not your email address, please ignore this page since the
email associated with this page was most likely forwarded to you.
You have successfully updated your email preferences.
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `header` | Zeichenfolge | Rendert Text in einem h1-Tag über dem Abmeldeformular. | `"Communication Preferences"` |
| `subheader_text` | Zeichenfolge | Füllt Text über der Bestätigungsnachricht. | `"
If this is not your email address, please ignore this page since the email associated with this page was most likely forwarded to you.
"` |
| `unsubscribe_all_success` | Zeichenfolge | Legt den Text fest, der angezeigt wird, wenn sich jemand von sämtlicher E-Mail-Kommunikation abmeldet. | `"You have successfully unsubscribed from all email communications."` |
| `subscription_update_success` | Zeichenfolge | Legt den Text fest, wenn ein Empfänger seine Abo-Einstellungen aktualisiert. | `"You have successfully updated your email preferences."` |
### Anmeldung für zugriffsbeschränkte Inhalte
Erstellt ein Anmeldeformular für den Zugang zu [privatem Content](https://knowledge.hubspot.com/de/website-pages/require-member-registration-to-access-private-content).
```text eingabe.txt theme={null}
{% member_login "my_login" %}
{% member_login "my_login"
email_label="Email",
password_label="Password",
remember_me_label="Remember Me",
reset_password_text="Forgot your password?",
submit_button_text="Login",
show_password="Show password"
%}
```
```text ausgabe.txt theme={null}
You've made too many attempts at this request. Please try this action again
in a few minutes.
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `email_label` | Zeichenfolge | Das Label für das E-Mail-Eingabefeld. | `"Email"` |
| `password_label` | Zeichenfolge | Das Label für das Passworteingabefeld. | `"Password"` |
| `remember_me_label` | Zeichenfolge | Das Label für das Kontrollkästchen „Merken“. | `"Remember Me"` |
| `reset_password_text` | Zeichenfolge | Der Text für den Hyperlink zum Zurücksetzen des Passworts. | `"Forgot your password?"` |
| `submit_button_text` | Zeichenfolge | Der Text für die Schaltfläche „Einsenden“. | `"Login"` |
| `show_password` | Zeichenfolge | Der Text für den Link zum Enthüllen des Passworts. | `"Show password"` |
### Registrierung einer Zugriffsberechtigung
Erstellt ein Formular zur Registrierung für den Zugang zu [privatem Content](https://knowledge.hubspot.com/de/website-pages/require-member-registration-to-access-private-content).
```text eingabe.txt theme={null}
{% member_register "my_register" %}
{% member_register "my_register"
email_label="Email",
password_label="Password",
password_confirm_label="Confirm Password",
submit_button_text="Save Password",
show_password="Show password"
%}
```
```text ausgabe.txt theme={null}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `email_label` | Zeichenfolge | Das Label für das E-Mail-Eingabefeld. | `"Email"` |
| `password_label` | Zeichenfolge | Das Label für das Passworteingabefeld. | `"Password"` |
| `password_confirm_label` | Zeichenfolge | Das Label für das Feld zur Bestätigung des Passworts. | `"Confirm Password"` |
| `submit_button_text` | Zeichenfolge | Der Text für die Schaltfläche „Einsenden“. | `"Save Password"` |
| `show_password` | Zeichenfolge | Der Text für den Link zum Enthüllen des Passworts. | `"Show password"` |
### Anfrage zum Zurücksetzen des Passworts
Erstellt ein Formular zum Versenden einer E-Mail zum Zurücksetzen des Passworts für den Zugriff auf passwortgeschützte Seiten.
```text eingabe.txt theme={null}
{% password_reset_request "my_password_reset_request" %}
{% password_reset_request "my_password_reset_request"
email_label="Email",
submit_button_text="Send Reset Email"
%}
```
```text ausgabe.txt theme={null}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `email_label` | Zeichenfolge | Das Label für das E-Mail-Eingabefeld. | `"Email"` |
| `submit_button_text` | Zeichenfolge | Der Text für die Schaltfläche „Einsenden“. | `"Send Reset Email"` |
| `password_reset_message` | Zeichenfolge | Die Nachricht, die angezeigt wird, nachdem die E-Mail zum Zurücksetzen des Passworts angefordert wurde. | `False` |
### Zurücksetzen des Passworts
Rendert ein Formular zum Zurücksetzen des Passworts für den Zugriff auf passwortgeschützte Seiten.
```text eingabe.txt theme={null}
{% password_reset "my_password_reset" password_label="Password", password_confirm_label="Confirm Password", submit_button_text="Save password", show_password="Show password" %}
```
```text ausgabe.txt theme={null}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `password_label` | Zeichenfolge | Das Text-Label für das Feld zur Eingabe des Passworts. | `"Email"` |
| `password_confirm_label` | Zeichenfolge | Das Text-Label für das Feld zur Eingabe der Passwortbestätigung. | `"Send Reset Email"` |
| `submit_button_text` | Zeichenfolge | Das Text-Label für die Schaltfläche „Formular einsenden“. | `False` |
| `show_password` | Zeichenfole | Das Text-Label für die Schaltfläche zum Einblenden des eingegebenen Passwortwerts. | `False` |
| `password_requirements` | Zeichenfolge | Das Text-Label, das die Passwortanforderungen beschreibt. | `False` |
### Passwortaufforderung
Fügt eine Passwortaufforderung zu passwortgeschützten Seiten hinzu.
```text eingabe.txt theme={null}
{% password_prompt "password_prompt" %}
{% password_prompt "my_password_prompt"
submit_button_text="Submit",
bad_password_message="Sorry, please try again.\n",
label="Password Prompt"
%}
```
```text ausgabe.txt theme={null}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `submit_button_text` | Zeichenfolge | Label für Schaltfläche unter dem Kennworteingabefeld. | `"Submit"` |
| `bad_password_message` | Zeichenfolge | Bei Eingabe eines falschen Passworts wird eine Meldung angezeigt. | `"
Sorry, please try again.
"` |
| `password_placeholder` | Zeichenfolge | Definiert einen Platzhaltertext im Passwortfeld. | `"Password"` |
## Text
Erzeugt eine einzelne Textzeile. Dieses Tag kann in Verbindung mit dem `no_wrapper=True`-Parameter nützlich sein, um Ihrem Markup hinzugefügt zu werden. Wenn Sie zum Beispiel möchten, dass Ihre Endbenutzer das Ziel eines vordefinierten Anchors definieren können, könnten Sie die `href` mit einem Texmodul mit `no_wrapper=True` ausfüllen.
```text eingabe.txt theme={null}
{% text "text" %}
{% text "simple_text_field" label="Enter text here", value="This is the default value for this text field" %}
```
```text ausgabe.txt theme={null}
This is the default value for this text field
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `value` | Zeichenfolge | Legt den Standardtext für das einzeilige Textfeld fest. |
## Textbereich (Textarea)
Ein Textbereich (textarea) ähnelt einem Textmodul insofern, dass Benutzern die Eingabe von Klartext ermöglicht wird, ihnen aber einen größeren Bereich für das Arbeiten im Content-Editor bietet. Dieses Modul unterstützt kein HTML. Wenn Sie „textarea“ direkt innerhalb eines vordefinierten Wrapping-Tags verwenden möchten, fügen Sie den `no_wrapper=true`-Parameter hinzu.
```text eingabe.txt theme={null}
{% textarea "my_textarea" %}
{% textarea "my_textarea" label="Enter plain text block", value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a urna quis lacus vehicula rutrum.", no_wrapper=True %}
```
```text ausgabe.txt theme={null}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a urna quis
lacus vehicula rutrum.
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `value` | Zeichenfolge | Legt den Standardtext von „textarea“ fest. |
## Video-Player
Rendern Sie einen Video-Player für eine Videodatei vom Datei-Manager, für die die Einstellung *Einbetten, Teilen und Tracking zulassen* aktiviert ist.
**Eingabe**
```hubl theme={null}
{% video_player "embed_player" %}
{% video_player "embed_player" overrideable=False, type="scriptV4", hide_playlist=True, viral_sharing=False, embed_button=False, width="600", height="375", player_id="6178121750", style="", conversion_asset="{"type":"FORM","id":"9a77c63f-bee6-4ff8-9202-b0af020ea4b2","position":"POST"}" %}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `hide_playlist` | Boolesch | Blendet die Video-Playlist aus. | `True` |
| `playlist_color` | Zeichenfolge | Ein HEX-Farbwert für die Playlist. | |
| `play_button_color` | Zeichenfolge | Ein HEX-Farbwert für die Wiedergabe- und Pausentasten. | `#2A2A2A` |
| `embed_button` | Boolesch | Zeigt die Schaltfläche „Einbetten“ im Player an. | `False` |
| `viral_sharing` | Boolesch | Zeigt die Schaltfläche zum Teilen in sozialen Netzwerken im Player an. | `False` |
| `width` | Zahl | Breite des eingebetteten Video-Players. | `Auto` |
| `height` | Zahl | Höhe des eingebetteten Video-Players. | `Auto` |
| `player_id` | Nummer | Die `player_id` des einzubettenden Videos. | |
| `style` | Zeichenfolge | Zusätzlicher Stil für Player. | |
| `conversion_asset` | JSON | Event-Einstellung für Player. Kann CTA oder Formular vor oder nach der Videowiedergaben darstellen. Dieser Parameter nimmt ein JSON-Objekt mit drei Parametern auf: Typ (FORM oder CTA), id (die GUID des Typobjekts), Position (POST oder PRE). | `See above example` |
| `placeholder_alt_text` | Zeichenfolge | Der ALT-Text des Videos. | |
# HubL-Variablen
Source: https://developers.hubspot.de/docs/cms/reference/hubl/variables
HubSpot-Vorlagen können eine Vielzahl vordefinierter Variablen verwenden, die zur Darstellung praktischer Website- und E-Mail-Elemente genutzt werden können. Diese Seite ist eine Referenzauflistung dieser Variablen.
HubSpot-Vorlagen können eine Vielzahl vordefinierter Variablen verwenden, die zur Darstellung praktischer Website- und E-Mail-Elemente genutzt werden können. Diese Seite ist eine Referenzauflistung dieser Variablen. [Erfahren Sie mehr über das Erstellen Ihrer eigenen Variablen](/docs/cms/reference/hubl/variables-macros-syntax) in einer [HubL-Vorlage](/docs/cms/start-building/building-blocks/templates/html-hubl-templates) oder einem [Modul](https://developers.hubspot.de/docs/guides/cms/content/modules/overview).
Während die meisten der auf dieser Seite aufgeführten Variablen optional sind, gibt es einige wenige Variablen, die für die Erstellung von E-Mails und Seiten aus Ihren Vorlagen erforderlich sind.
> [!WARNING]
>
> Die unten aufgeführten Variablen können einzeln verwendet werden, indem sie wie auf unserer [Seite für Variablen und Makros](/docs/cms/reference/hubl/variables-macros-syntax) beschrieben in das `}}`-Trennzeichen eingeschlossen werden. Sie können diese Variablen optional mit anderen Teilen der HubL-Vorlagensprache wie [Schleifen](/docs/cms/reference/hubl/loops), [Filtern](/docs/cms/reference/hubl/filters), [Funktionen](/docs/cms/reference/hubl/functions), [Tags](/docs/cms/reference/hubl/tags/standard-tags) und mehr verwenden.
## In allen Vorlagen verfügbare Variablen
Die folgenden HubL-Variablen können in E-Mail-, Seiten- oder Blog-Vorlagen verwendet werden.
Um zusätzliche Informationen zur Ausgabe dieser Variablen zu erhalten, können Sie den [pprint-Filter](/docs/cms/reference/hubl/filters#pprint) verwenden, wie unten gezeigt.
```text eingabe.txt theme={null}
{% set variable = content %}
{{variable|pprint}}
```
```text ausgabe.txt theme={null}
(ContentMeta: { "canonicalUrl" : "https://www.website.com/url-slug",
"deferDynamicValues" : false, "featuredImageAltText" : "", "featuredImageHeight"
: 0, "featuredImageUrl" : "", "featuredImageWidth" : 0, "htmlTitle" : "",
"linkRelCanonicalUrl" : "https://www.website.com/url-slug", "metaDescription" :
"", "metaKeywords" : "", "name" : "", "unescapedHtmlTitle" : "",
"unescapedMetaDescription" : null })
```
\| Variable | Typ | Beschreibung |
\| --- | --- | --- | --- |
\| `account` | Dict | : Diese Variable ist ein Dictionary, das die [Unternehmenseigenschaftswerte](/docs/api-reference/crm-properties-v3/guide) des [primären zugeordneten Unternehmens](https://knowledge.hubspot.com/de/records/associate-records#understand-the-primary-company-association) eines bekannten Kontakts speichert. Sie können über diese Variable auf bestimmte Unternehmenseigenschaften (sowohl benutzerdefinierte als auch standardmäßige) zugreifen, indem Sie einen Punkt gefolgt vom internen Namen der Eigenschaft hinzufügen. Zum Beispiel würde `account.name` den Namen des primären Unternehmens ausgeben, das mit dem Kontakt verknüpft ist. \
\
Das Verwenden dieser Variable deaktiviert das Speichern von Seiten im Cache. [Hier](/docs/cms/best-practices/testing-staging-performance/prerendering) erfahren Sie mehr über das Prerendering von Seiten und JavaScript-Alternativen. |
\| `company_domain` | Zeichenfolge | Gibt die Unternehmens-Domain aus, die über **Website** > **Seiten** > **Branding** > **Logo-Link** festgelegt wurde. |
\| `contact` | Dict | : Diese Variable ist ein Dictionary, in dem die [Kontakteigenschaftswerte](/docs/api-reference/crm-properties-v3/guide) eines bekannten Kontakts gespeichert werden. Sie können über diese Variable auf bestimmte Kontakteigenschaften (sowohl benutzerdefinierte als auch standardmäßige) zugreifen, indem Sie einen Punkt gefolgt vom internen Namen der Eigenschaft hinzufügen. `contact.firstname` würde zum Beispiel den Vornamen des Kontakts ausgeben. \
\
Das Verwenden dieser Variable deaktiviert das Speichern von Seiten im Cache. [Hier](/docs/cms/best-practices/testing-staging-performance/prerendering) erfahren Sie mehr über das Prerendering von Seiten und JavaScript-Alternativen. |
\| `content` | Dict | Diese Variable ist ein Dictionary, in dem verschiedene Eigenschaften gespeichert werden, die sich auf einen bestimmten Inhalt wie eine E-Mail, eine Seite oder einen Beitrag beziehen. |
\| `content.absolute_url` | Zeichenfolge | Gibt die vollständige URL der Seiten-, Beitrags- oder Webseite-Version einer E-Mail aus. |
\| `content.archived` | Boolesch | Diese Variable wird als `true` ausgewertet, wenn die Seite oder E-Mail vom Benutzer als archiviert markiert wurde. |
\| `content.author_email` | Zeichenfolge | Die E-Mail-Adresse des Content-Autors. |
\| `content.author_name` | Zeichenfolge | Der Vor- und Nachname des Content-Autors. |
\| `content.author_username` | Zeichenfolge | Der HubSpot-Benutzername des Content-Autors. |
\| `content.campaign` | Zeichenfolge | Die GUID für die Marketingkampagne, mit der diese Seite oder E-Mail verknüpft ist. Diese eindeutige ID finden Sie in der URL einer bestimmten Kampagne im Kampagnen-Tool. |
\| `content.campaign_name` | Zeichenfolge | Der Name der Marketingkampagne, mit der diese Seite, dieser Beitrag oder diese E-Mail verknüpft ist. |
\| `content.created` | Datetime | Ein Datetime-Objekt, das in UTC-Zeit angibt, wann der Inhalt ursprünglich erstellt wurde. Diese Variable kann mit dem [Datetime-Filter](/docs/cms/reference/hubl/filters#datetimeformat) formatiert werden. |
\| `content.meta_description` | Zeichenfolge | Beim Abrufen der Metabeschreibung einer Seite ist es besser, die Variable `page_meta.meta_description` zu verwenden. |
\| `content.name` | Zeichenfolge | Der Name eines Beitrags, einer E-Mail oder einer Seite. Bei Seiten und E-Mails wird der interne Name des Inhalts ausgegeben, bei Beiträgen der Beitragstitel. Bei Blogbeiträgen ist dies der Titel des Beitrags, der angezeigt wird. Bei anderen Inhaltstypen handelt es sich in der Regel um einen internen Namen. Diese Variable enthält einen Wrapper, sodass sie über die Benutzeroberfläche bearbeitet werden kann, wenn sie in Blogbeiträgen enthalten ist. Wenn Sie den Namen des Inhalts ohne einen Wrapper ausgeben möchten, verwenden Sie `page_meta.name`. |
\| `content.publish_date` | Datetime | Ein Datetime-Objekt, das in UTC-Zeit angibt, wann der Inhalt veröffentlicht wurde. Diese Variable kann mit dem [format\_datetime-Filter](/docs/cms/reference/hubl/filters#format-datetime) formatiert werden. |
\| `content.publish_date_localized` | Zeichenfolge | Die Zeichenfolge, die das Datum und die Uhrzeit angibt, zu der der Inhalt unter Verwendung der in den [Standardeinstellungen](https://knowledge.hubspot.com/de/account-management/change-your-language-and-region-settings) des Accounts definierten Zeitzone veröffentlicht wurde. Diese Variable unterliegt auch den [Sprach- und Datumsformateinstellungen](https://knowledge.hubspot.com/de/blog/manage-your-blog-template-and-settings#set-your-blog-s-date-formats). |
\| `content.template_path` | Zeichenfolge | Der Dateipfad des Design-Managers zu Ihrer Vorlage (z. B. `custom/page/web_page_basic/my_template.html`). |
\| `content.slug` | Zeichenfolge | Der URL-Slug der Seiten-, Beitrags- oder Webseite-Version einer E-Mail. Dies ist der Wert, der auf die Domain folgt. In `https://example.com/about-us` ist der Slug beispielsweise `about-us`. Verwenden Sie stattdessen für `content.absolute_url` die vollständige URL. |
\| `content.updated` | Datetime | Ein Datetime-Objekt, das in UTC-Zeit angibt, wann der Benutzer den Inhalt zuletzt aktualisiert hat. Diese Variable kann mit dem Datetime-Filter formatiert werden. Entspricht nicht `content.publish_date` bei der ersten Veröffentlichung. Verwenden Sie den[ | `|between_times`](/docs/cms/reference/hubl/filters#between-times)-Filter, um zu prüfen, ob ein Beitrag nach der Veröffentlichung aktualisiert wurde. |
\| `content_id` | Zeichenfolge | Gibt die eindeutige ID für eine Seite, einen Beitrag oder eine E-Mail aus. Diese ID ist in der URL des Editors zu finden. Sie können diese Variable als Alias für `content.id` verwenden. |
\| `favicon_link` | Zeichenfolge | Gibt die Quelle des Favicons aus. [Hier](https://knowledge.hubspot.com/de/branding/edit-your-logo-favicon-and-brand-colors#add-or-edit-your-favicon) erfahren Sie mehr über das Festlegen von Favicons in HubSpot. |
\| `hub_id` | Zeichenfolge | Die ID Ihres HubSpot-Accounts. |
\| `hubspot_analytics_tracking_code` | Zeichenfolge | Enthält den Analytics-Tracking-Code. Dieses Tag ist nicht erforderlich, da `standard_footer_includes` den Tracking-Code bereits rendert. |
\| `local_dt` | Datetime | Ein Datetime-Objekt mit der aktuellen Zeit in der Zeitzone, die in Ihren Berichtseinstellungen definiert ist. Durch die Verwendung dieser Variablen wird das Speichern von Seiten im Cache deaktiviert, um die aktuelle Zeit zurückzugeben. [Hier](/docs/cms/best-practices/testing-staging-performance/prerendering) erfahren Sie mehr über das Prerendering von Seiten und JavaScript-Alternativen. |
\| `local_time_zone` | Zeichenfolge | Die Zeitzone, wie in Ihren HubSpot-Berichtseinstellungen konfiguriert. |
\| `page_meta.canonical_url` | Zeichenfolge | Die offizielle URL, unter der diese Seite aufgerufen werden sollte. Enthält normalerweise keine Abfragezeichenfolgenparameter. Verwenden Sie dies für das `rel="canonical"`-Tag. HubSpot kanonisiert URLs automatisch. |
\| `page_meta.html_title` | Zeichenfolge | Der Titel der Seite. Diese Variable sollte im ``-Tag von HTML-Vorlagen verwendet werden. |
\| `page_meta.meta_description` | Zeichenfolge | Die Metabeschreibung einer Seite. Diese Variable sollte im "description" `<meta>`-Tag von HTML-Vorlagen verwendet werden. |
\| `page_meta.name` | Zeichenfolge | Ein Alias für `content.name`. |
\| `portal_id` | Zeichenfolge | Ein Alias für die `hub_id`-Variable. |
\| `request_contact` | Dict | Dies ist ein Dictionary mit Daten zum gewünschten Kontakt. Nicht in E-Mail-Vorlagen verfügbar. Das Verwenden dieser Variable deaktiviert das Speichern von Seiten im Cache. [Hier](/docs/cms/best-practices/testing-staging-performance/prerendering) erfahren Sie mehr über das Prerendering von Seiten und JavaScript-Alternativen. |
\| `site_settings` | Dict | Dies ist ein Dictionary, das verschiedene Seiten-, Blog- und E-Mail-Einstellungen enthält, einschließlich [Farben und Schriftarten](#color-and-font-settings) sowie [Details zur E-Mail-Fußzeile](#email-variables). |
\| `year` | Zeichenfolge | Gibt das aktuelle Jahr aus. |
## E-Mail-Variablen
Nachfolgend finden Sie die HubL-Variablen, die in E-Mail-Vorlagen verwendet werden können. Einige Variablen, z. B. die [Farb- und Schriftarteinstellungsvariablen](#color-and-font-settings), können in anderen Inhaltstypen verwendet werden, wenn Sie Ihre E-Mail-Farb- und Schriftarteinstellungen an anderer Stelle referenzieren möchten.
### Erforderliche Variablen für E-Mail-Vorlagen
Um [CAN-SPAM](https://knowledge.hubspot.com/de/marketing-email/edit-office-location-information-in-email-footers)-konform zu sein, müssen für alle über HubSpot versendeten E-Mails bestimmte Unternehmens- und Opt-out-Informationen angegeben werden. Diese Informationen werden durch die folgenden Variablen festgelegt, die enthalten sein müssen. Werte für diese Token werden aus den [Marketing-E-Mail-Einstellungen](https://knowledge.hubspot.com/de/marketing-email/edit-office-location-information-in-email-footers#edit-your-default-email-footer-information-in-your-settings) des Accounts übernommen.
Es gibt zusätzliche E-Mail-Variablen, die optional sind und [weiter unten auf dieser Seite](#email-content) aufgeführt sind.
| Variable | Typ | Beschreibung |
| - | - | - |
| `site_settings.company_city` | Zeichenfolge | : Gibt die Stadt des Unternehmens aus. |
| `site_settings.company_name` | Zeichenfolge | : Gibt den Namen des Unternehmens aus. |
| `site_settings.company_state` | Zeichenfolge | : Gibt das Bundesland des Unternehmens aus. |
| `site_settings.company_street_address_1` | Zeichenfolge | : Gibt die Adresse des Unternehmens aus. |
| `unsubscribe_link` | Zeichenfolge | Gibt die URL der Seite aus, die es den Empfängern ermöglicht, die Abonnementeinstellungen zu verwalten oder sich von der E-Mail-Kommunikation abzumelden. Diese Variable sollte im `href`-Attribut eines `<a>`-Anchor-Tag sein. |
### Farb- und Schriftarteinstellungen
Es gibt mehrere grundlegende Farb- und Schriftartsteuerelemente in Ihren [Marketing-E-Mail-Einstellungen](https://knowledge.hubspot.com/de/marketing-email/manage-your-marketing-email-account-settings), die in E-Mails ausgegeben werden können. Wenn angegeben, können Sie einige dieser Variablen in Seiten- und Blog-Vorlagen verwenden, indem Sie `site_settings.` vor der Variable hinzufügen.
| Variable | Typ | Beschreibung |
| - | - | - |
| `background_color` | Zeichenfolge | Dies ist die Einstellung für die Hintergrundfarbe als Hexadezimalwert. Um diesen Wert in Seiten- oder Blog-Vorlagen auszugeben, verwenden Sie `site_settings.background_color`. |
| `body_border_color` | Zeichenfolge | Dies ist die Einstellung für die Textrahmenfarbe als Hexadezimalwert. Diese Option ist verfügbar, wenn Sie in den Einstellungen über das Dropdown-Menü *Optionen für Rahmenfarbe* den Eintrag **E-Mail-Rahmenfarbe manuell festlegen** auswählen. Um diesen Wert in Seiten- oder Blog-Vorlagen auszugeben, verwenden Sie `site_settings.body_border_color`. |
| `body_border_color_choice` | Zeichenfolge | Der Wert für diese Variable wird über das Dropdown-Menü *Optionen für Rahmenfarbe* in den Einstellungen gesteuert. Die Werte sind: `BORDER_AUTOMATIC`, `BORDER_MANUAL`, `BORDER_NONE`. Um diesen Wert in Seiten- oder Blog-Vorlagen auszugeben, verwenden Sie `site_settings.body_border_color_choice`. |
| `body_color` | Zeichenfolge | Dies ist die Einstellung für die Textfarbe als Hexadezimalwert. Um diesen Wert in Seiten- oder Blog-Vorlagen auszugeben, verwenden Sie `site_settings.body_color`. |
| `primary_accent_color` | Zeichenfolge | Dies ist die Einstellung für die primäre Akzentfarbe als Hexadezimalwert. Um diesen Wert in Seiten- oder Blog-Vorlagen auszugeben, verwenden Sie `site_settings.primary_accent_color`. |
| `primary_font` | Aufzählung | Dies ist die Einstellung für die primäre Schriftart als Zeichenfolge. Um diesen Wert in Seiten- oder Blog-Vorlagen auszugeben, verwenden Sie `site_settings.primary_font`. |
| `primary_font_color` | Zeichenfolge | : Dies ist die Einstellung für die primäre Schriftartfarbe als Hexadezimalwert. Um diesen Wert in Seiten- oder Blog-Vorlagen auszugeben, verwenden Sie `site_settings.primary_font_color`. |
| `primary_font_size` | Zeichenfolge | Dies ist die Einstellung für die primäre Schriftgröße als `px`-Wert. Verwenden Sie `site_settings.primary_font_size` für Blog-Vorlagen . |
| `primary_font_size_num` | Zahl | Zahl der primären Schriftart, ausgenommen `px`. |
| `secondary_accent_color` | Zeichenfolge | : Dies ist die Einstellung für die sekundäre Akzentfarbe als Hexadezimalwert. Um diesen Wert in Seiten- oder Blog-Vorlagen auszugeben, verwenden Sie `site_settings.secondary_accent_color`. |
| `secondary_font` | Aufzählung | Dies ist die Einstellung für die sekundäre Schriftart als Zeichenfolge. Um diesen Wert in Seiten- oder Blog-Vorlagen auszugeben, verwenden Sie `site_settings.secondary_font`. |
| `secondary_font_color` | Zeichenfolge | : Dies ist die Einstellung für die sekundäre Schriftfarbe als Hexadezimalwert. Um diesen Wert in Seiten- oder Blog-Vorlagen auszugeben, verwenden Sie `site_settings.secondary_font_color`. |
| `secondary_font_size_num` | Zeichenfolge | Zahl der sekundären Schriftart, ausgenommen `px`. |
### E-Mail-Content
| Variable | Typ | Beschreibung |
| - | - | - |
| `content.create_page` | Boolesch | Ist `True`, wenn es eine Webseiten-Version der E-Mail gibt. |
| `content.email_body` | Rich-Text | Der Haupttext der E-Mail. Diese Variable stellt ein Rich-Text-Modul dar. |
| `content.emailbody_plaintext` | Zeichenfolge | Dies ist die optionale Überschreibung des Klartext-E-Mail-Textes. |
| `content.from_name` | Zeichenfolge | Dies ist der Absendername des E-Mail-Absenders. |
| `content.reply_to` | Zeichenfolge | Dies ist die Antwortadresse für die E-Mail. |
| `content.subject` | Zeichenfolge | Dies ist der Betreff der E-Mail. |
| `email_body_padding` | Zeichenfolge | Die [Einstellung für die Auffüllung des E-Mail-Textes](https://knowledge.hubspot.com/de/marketing-email/manage-your-marketing-email-account-settings#size). |
| `email_body_width` | Zeichenfolge | Die [Einstellung für die Breite des E-Mail-Textes](https://knowledge.hubspot.com/de/marketing-email/manage-your-marketing-email-account-settings#size). |
| `site_settings.company_street_address_2` | Zeichenfolge | Gibt die Adresszeile 2 aus den [CAN-SPAM-Footer-Einstellungen](https://knowledge.hubspot.com/de/marketing-email/edit-office-location-information-in-email-footers) des Accounts aus. |
| `site_settings.office_location_name` | Zeichenfolge | Gibt den Namen des Bürostandorts aus den [CAN-SPAM-Footer-Einstellungen](https://knowledge.hubspot.com/de/marketing-email/edit-office-location-information-in-email-footers) des Accounts aus. |
| `subscription_confirmation_url` | Zeichenfolge | Gibt die URL der Bestätigungsseite für die Abonnementeinstellungen aus. Diese URL wird beim Senden dynamisch generiert. |
| `subscription_name` | Zeichenfolge | Gibt den Namen des für diese E-Mail angegebenen E-Mail-Typs aus. |
| `unsubscribe_anchor` | Zeichenfolge | Generiert ein Anchor-Tag mit dem Wort "unsubscribe", verlinkt mit Ihrer Abmeldeseite. |
| `unsubscribe_link_all` | Zeichenfolge | Rendert einen Link zur Abmeldung von sämtlicher E-Mail-Kommunikation, im Gegensatz zu einem Link zur Verwaltung der Abonnementeinstellungen. |
| `unsubscribe_section` | Zeichenfolge | Rendert einen Abschnitt zur Abmeldung, der einen Abmeldelink sowie einen Hilfetext enthält. |
| `view_as_page_section` | Zeichenfolge | Generiert einen Link mit Hilfetext, der zu einer Webseiten-Version einer E-Mail führt. |
| `view_as_page_url` | Zeichenfolge | Generiert einen Link, der zu einer Webseiten-Version einer E-Mail führt. |
### Variablen für E-Mails mit privatem Content
Die folgende Liste von Variablen ist nur innerhalb von E-Mail-Vorlagen verfügbar, die für [E-Mail-Vorlagen mit privatem Content](https://knowledge.hubspot.com/de/website-pages/require-member-registration-to-access-private-content#customize-your-membership-registration-page-and-email-templates) verwendet werden.
| Variable | Typ | Beschreibung |
| - | - | - |
| `membership_company_name` | Zeichenfolge | Der Unternehmensname, wie er in den [Content-Einstellungen](https://knowledge.hubspot.com/de/website-pages/manage-private-content-settings#edit-general-settings-for-private-content) des Accounts festgelegt ist. |
| `membership_domain` | Zeichenfolge | Die Domain der Website mit privatem Content. |
| `membership_logo_src` | Zeichenfolge | Die URL des anzuzeigenden Logos, wie in den [Brand-Kit-Einstellungen](https://knowledge.hubspot.com/de/branding/edit-your-logo-favicon-and-brand-colors) des Accounts festgelegt. |
| `membership_logo_alt` | Zeichenfolge | Das Attribut des Logos `alt`, wie in den [Brand-Kit-Einstellungen](https://knowledge.hubspot.com/de/branding/edit-your-logo-favicon-and-brand-colors) des Accounts festgelegt. |
| `membership_registration_link` | URL | Link zur Registrierungsseite für die Website mit privatem Content. |
| `membership_password_saved_link` | URL | Link zur Seite mit dem gespeicherten Passwort. Der Link leitet den Besucher auf eine zufällige eingeschränkte Seite weiter, auf die er Zugriff hat. |
| `membership_password_reset_link` | URL | Link zur Seite zum Zurücksetzen des Passworts für die Website mit privatem Content. |
| `membership_passwordless_auth_link` | URL | Link zur passwortlosen Anmeldeseite für Mitglieder. |
| `membership_verify_registration_link` | URL | Link für die Seite zur Verifizierung der Registrierung. |
| `membership_website_admin` | Zeichenfolge | Der Name des Administrators der Website, wie in den [Einstellungen für privaten Content](https://knowledge.hubspot.com/de/website-pages/manage-private-content-settings#edit-general-settings-for-private-content) des Accounts festgelegt. |
## Variablen für Website-Seiten
Die folgenden Variablen sind für Website-Seiten, Landingpages, Systemseiten und Blogs verfügbar.
### Erforderliche Variablen für Seitenvorlagen
Um eine Code-Datei als bearbeitbare Seite oder Blog-Vorlage zu veröffentlichen, müssen die folgenden Variablen enthalten sein. Um eine HTML-Datei ohne diese Variablen zu veröffentlichen, um sie in einer anderen Vorlage zu verwenden, schließen Sie `isAvailableForNewContent: false` in die [Vorlagenannotationen](/docs/cms/start-building/building-blocks/templates/html-hubl-templates#template-annotations) ein.
| Variable | Typ | Beschreibung |
| - | - | - |
| `standard_footer_includes` | Zeichenfolge | Rendert den [HubSpot-Tracking-Code](https://developers.hubspot.de/docs/guides/cms/content/templates/overview#hubspot-tracking-code) und jeden anderen Code, der in Ihrem Footer-HTML in den [**Content-Einstellungen**](https://app.hubspot.com/l/settings/website/pages/all-domains/page-templates) oder in den Optionen einer bestimmten Seite enthalten ist. Dieses Tag sollte direkt vor dem schließenden body-Tag eingefügt werden. |
| `standard_header_includes` | Zeichenfolge | Fügt [jQuery, layout.css](https://developers.hubspot.de/docs/guides/cms/content/templates/overview#included-cms-files), alle angehängten Stylesheets, ein Meta-Viewport-Tag, Google-Analytics-Tracking-Code, andere Seiten-Meta-Informationen sowie Code hinzu, der dem Head-Tag auf Domain-/Vorlagen-/Seitenebene hinzugefügt wird. Diese Variable sollte den `<head>`-HTML-Vorlagen hinzugefügt werden. |
### Inhalts- und Kontaktvariablen
| Variable | Typ | Beschreibung |
| - | - | - |
| `builtin_body_classes` | Zeichenfolge | : Gibt dynamisch hilfreiche Klassen aus, die das Markup von Inhalten, die mit dieser Vorlage erstellt wurden, unterscheiden (d. h. Typ des Inhalts und Name des Inhalts). Dies erleichtert die Formatierung verschiedener Inhaltstypen oder bestimmter Seiten. Diese Variable sollte im class-Attribut des body-Tags von Code-Vorlagen verwendet werden. |
| `request_contact.is_logged_in` | Zeichenfolge | Gibt an, ob der anfragende Kontakt für den [privaten Content](https://knowledge.hubspot.com/de/website-pages/require-member-registration-to-access-private-content) einer Website angemeldet ist oder nicht. Der Wert dieser Variablen gibt `true` zurück, wenn der anfragende Kontakt angemeldet ist, und `false`, wenn der anfragende Kontakt abgemeldet ist. Ein Kontakt kann abgemeldet werden, indem er über eine Ihrer [verknüpften Domains](https://knowledge.hubspot.com/de/domains-and-urls/connect-a-domain-to-hubspot) an `https://<www.yourdomain.com>/_hcms/mem/logout` weitergeleitet wird. Das Verwenden dieser Variable deaktiviert das Speichern von Seiten im Cache. [Hier](/docs/cms/best-practices/testing-staging-performance/prerendering) erfahren Sie mehr über das Prerendering von Seiten und JavaScript-Alternativen. |
| `request_contact.list_memberships` | Zeichenfolge | Diese Variable gibt ein Dictionary von IDs zurück, die die Listen darstellen, in denen der Kontakt Mitglied ist. Das Verwenden dieser Variable deaktiviert das Speichern von Seiten im Cache. [Hier](/docs/cms/best-practices/testing-staging-performance/prerendering) erfahren Sie mehr über das Prerendering von Seiten und JavaScript-Alternativen. |
| `content.language` | Dict | Dies ist ein Dictionary mit Informationen zu den Spracheinstellungen einer Seite. <ul><li>`content.language.languageTag` gibt die Sprach-ID einer Seite zurück (z. B. `"en"` oder `"es"`).</li><li>`content.language.textDirection.value` gibt die Textrichtung der Sprache der Seite zurück (z. B. `"rtl"` oder `"ltr"`).</li></ul> |
## HTTP-Anfragevariablen
Die folgenden Variablen geben Informationen zur HTTP-Seitenanfrage aus. Einige dieser Variablen verhindern das Speichern von Seiten, da die Daten beim Laden der Seite dynamisch ausgefüllt werden müssen. [Hier](/docs/cms/best-practices/testing-staging-performance/prerendering) erfahren Sie mehr über das Prerendering von Seiten und JavaScript-Alternativen.
| Variable | Typ | Beschreibung |
| - | - | - |
| `request.cookies` | Dict | Dies ist ein Dictionary mit Cookie-Namen, die Cookie-Werten zugeordnet sind. Das Verwenden dieser Variable deaktiviert das Speichern von Seiten im Cache. |
| `request.domain` | Zeichenfolge | Dies ist die für den Zugriff auf diese Seite verwendete Domain. |
| `request.full_url` | Zeichenfolge | Die für den Zugriff auf diese Seite verwendete URL. |
| `request.path` | Zeichenfolge | Dies ist die Pfadkomponente der URL. |
| `request.path_and_query` | Zeichenfolge | Dies ist die Pfad- und Abfragekomponente der URL. |
| `request.query` | Zeichenfolge | Dies ist die Abfragezeichenfolgenkomponente der URL. `request.query_dict` teilt die Abfragezeichenfolgen automatisch in Schlüssel-Wert-Paare auf und wird für die meisten Anwendungsfälle gegenüber der Raw Query empfohlen. |
| `request.query_dict` | Dict | Die Abfragezeichenfolge, die in ein Name->Wert-Dictionary umgewandelt wird. |
| `request.referrer` | Zeichenfolge | Dies ist der HTTP-Referrer, also die URL der Seite, die auf die aktuelle Seite verlinkt hat. Das Verwenden dieser Variable deaktiviert das Speichern von Seiten im Cache. |
| `request.remote_ip` | Zeichenfolge | Dies ist die IP-Adresse des Besuchers. Das Verwenden dieser Variable deaktiviert das Speichern von Seiten im Cache. |
| `request.scheme` | Zeichenfolge | Dies ist das Protokoll der Anfrage (entweder `http` oder `https`). |
| `request.search_engine` | Zeichenfolge | Dies ist die Suchmaschine, mit der diese Seite gefunden wurde, falls zutreffend (z. B. `google`, `aol`, `live`, `yahoo`, `images.google`). |
| `request.search_keyword` | Zeichenfolge | Dies ist der Suchbegriff, mit dem diese Seite gefunden wurde, falls zutreffend. |
| `request.headers` | Zeichenfolge | Dies ist ein Dictionary von verfügbaren Anfrage-Headern. Durch die Verwendung dieser Variablen wird das Speichern von Seiten im Cache deaktiviert, um individualisierte Header für jede Anfrage zu interpretieren. |
## Blog-Variablen
Die folgenden Variablen sind für Blog-Vorlagen verfügbar. Einige Variablen sind nur für Beitrags-Listings verfügbar, während andere nur für Blogbeiträge verfügbar sind.
| Variable | Typ | Beschreibung |
| - | - | - |
| `blog_author` | Zeichenfolge | Diese Variable enthält Informationen zum Blog-Autor für Listing-Seiten von Blog-Autoren. Sie kann verwendet werden, um bedingte Logik zum [Darstellen von Markup für Blog-Autoren-Listings](/docs/cms/start-building/building-blocks/templates/blog#if-blog-author-statement) zu erstellen. Sie enthält außerdem die folgenden Eigenschaften:<ul><li>`blog_author.avatar`</li><li>`blog_author.bio`</li><li>`blog_author.display_name`</li><li>`blog_author.email`</li><li>`blog_author.facebook`</li><li>`blog_author.google_plus`</li><li>`blog_author.has_social_profiles`</li><li>`blog_author.linkedin`</li><li>`blog_author.twitter`</li><li>`blog_author.website`</li></ul> |
| `content.blog_post_author` | Zeichenfolge | Diese Variable enthält individuelle Informationen zum Blogbeitragsautor für einen bestimmten Beitrag. Sie kann die folgenden Eigenschaften enthalten:<ul><li>`content.blog_post_author.avatar`</li><li>`content.blog_post_author.bio`</li><li>`content.blog_post_author.display_name`</li><li>`content.blog_post_author.email`</li><li>`content.blog_post_author.facebook`</li><li>`content.blog_post_author.google_plus`</li><li>`content.blog_post_author.has_social_profiles`</li><li>`content.blog_post_author.linkedin`</li><li>`content.blog_post_author.slug`</li><li>`content.blog_post_author.twitter`</li><li>`content.blog_post_author.website`</li></ul> |
| `blog` | Zeichenfolge | Ein Alias für `group`. Sie können zum Beispiel entweder `blog.absolute_url` oder `group.absolute_url`verwenden. |
| `content.comment_count` | Ganzzahl | Die Anzahl der Kommentare für den aktuellen Blogbeitrag. |
| `content.comment_list` | Zeichenfolge | Eine Liste der Kommentare für den aktuellen Blogbeitrag. |
| `current_page_num` | Ganzzahl | Der ganzzahlige Index der aktuellen Seite von Blogbeiträgen in der Ansicht. |
| `content.featured_image` | Zeichenfolge | Die Quell-URL des Feature-Bildes, das bei der Veröffentlichung des Blogs ausgewählt wurde. |
| `content.featured_image_alt_text` | Zeichenfolge | Der ALT-Text des Feature-Bildes. |
| `last_page_num` | Ganzzahl | Der ganzzahlige Index der letzten Seite von Blogbeiträgen in der Ansicht. |
| `next_page_num` | Ganzzahl | Der ganzzahlige Index der nächsten Seite von Blogbeiträgen in der Ansicht. |
| `content.next_post_featured_image` | Zeichenfolge | Die URL des Feature-Bildes des nächsten Blogbeitrags, sofern ein solcher existiert. |
| `content.next_post_featured_image_alt_text` | Zeichenfolge | ALT-Text für das Feature-Bild des nächsten Beitrags, wenn ALT-Text vorhanden ist. |
| `content.next_post_name` | Zeichenfolge | Der Name des nächsten Blogbeitrags, sofern ein solcher existiert. |
| `content.next_post_slug` | Zeichenfolge | Der URL-Slug des nächsten Blogbeitrags, sofern ein solcher existiert. |
| `content.post_body` | Zeichenfolge | Der Text des Blogbeitrags. |
| `content.post_list_content` | Zeichenfolge | Der Inhalt des Blogbeitrags, geändert für die Listing-Seite. Die endgültige Ausgabe wird durch die [Zusammenfassungseinstellungen des Blogs](https://knowledge.hubspot.com/de/blog/manage-your-blog-template-and-settings#select-your-blog-templates) gesteuert. Wenn in den Einstellungen Feature-Bilder aktiviert sind, entfernt diese Variable automatisch alle Bilder oberhalb des [„Mehr erfahren“-Trennzeichens](http://knowledge.hubspot.com/de/blog/create-and-publish-blog-posts). |
| `content.post_list_summary_featured_image` | Zeichenfolge | Das Feature-Bild für Beitragszusammenfassungen, das in der Blog-Listing-Vorlage verwendet werden soll, wie in den [Blog-Einstellungen](https://knowledge.hubspot.com/de/blog/manage-your-blog-template-and-settings#select-your-blog-templates) festgelegt. |
| `content.post_summary` | Zeichenfolge | Die Zusammenfassung des Blogbeitrags. Dieser Inhalt wird durch das [„Mehr erfahren“-Trennzeichen](http://knowledge.hubspot.com/de/blog/create-and-publish-blog-posts) im Blog-Editor bestimmt. |
| `content.previous_post_featured_image` | Zeichenfolge | Die URL des Feature-Bildes des vorherigen Blogbeitrags, sofern ein solcher existiert. |
| `content.previous_post_featured_image_alt_text` | Zeichenfolge | ALT-Text für das Feature-Bild des vorherigen Beitrags, wenn ALT-Text vorhanden ist. |
| `content.previous_post_name` | Zeichenfolge | Der Name des vorherigen Blogbeitrags, sofern ein solcher existiert. |
| `content.previous_post_slug` | Zeichenfolge | Der URL-Slug des vorherigen Blogbeitrags, sofern ein solcher existiert. |
| `content.publish_date_localized` | Zeichenfolge | Dies ist eine Zeichenfolge, die das Datum und die Uhrzeit der Veröffentlichung des Blogbeitrags angibt, formatiert entsprechend den [Sprach- und Datumsformatierungseinstellungen](https://knowledge.hubspot.com/de/blog/manage-your-blog-template-and-settings#set-your-blog-s-date-formats) des Blogs. |
| `simple_list_page` | Boolesch | Dieser Wert gibt an, ob es sich bei der angeforderten Seite um die Seite „Alle Beiträge“ handelt, die Links zu allen Blog-Beiträgen enthält. |
| `content.topic_list` | Dict | Kann verwendet werden, um Markup für eine Themenübersicht zu rendern, indem sie in einer Schleife durchlaufen wird. `{% for topic in content.topic_list %}`Die Elemente darin enthalten die folgenden Eigenschaften: `name` und `slug`. |
| `contents` | Zeichenfolge | Dies ist eine Abfolge Ihrer Blogbeiträge, die mithilfe einer for-Schleife durchlaufen werden, verfügbar auf [Blog-Listing-Seiten](/docs/cms/start-building/building-blocks/templates/blog#if-is-listing-view-statement). |
| `contents.total_count` | Ganzzahl | Gesamtzahl an Beiträgen in einem Listing (normal, Themen, Autoren usw.). |
| `contents.total_page_count` | Ganzzahl | Gesamtzahl der Seiten mit Beiträgen, basierend auf der Anzahl der Beiträge pro Seite. |
| `contents_topics` | Zeichenfolge | Ruft eine Liste aller Blog-Themen in der contents-Abfolge von Beiträgen ab. |
| `group` | Dict | Dies ist das Dictionary mit den Variablen, die sich auf einen gesamten Blog beziehen. |
| `group.absolute_url` | Zeichenfolge | Basis-URL eines Blogs. |
| `group.allow_comments` | Boolesch | Wird als `true` ausgewertet, wenn Kommentare erlaubt sind. |
| `group.description` | Zeichenfolge | Die Meta-Beschreibung des Blogs, wie in den [Blog-Einstellungen](https://knowledge.hubspot.com/de/blog/manage-your-blog-template-and-settings#select-your-blog-templates) festgelegt. Wird für die Metabeschreibung auf bestimmten Listing-Seiten verwendet. |
| `group.header` | Zeichenfolge | Der Header des Blogs. |
| `group.html_title` | Zeichenfolge | Der Titel dieses Blogs, wie er im `<title>`-Tag angezeigt werden soll. |
| `group.id` | Zeichenfolge | Die eindeutige ID eines Blogs. Diese ID ist in der URL des Blog-Dashboards für einen bestimmten Blog zu finden. |
| `group.language` | Dict | Dies ist ein Dictionary, das Informationen zur Sprache eines Blogs enthält. `group.language.languageTag` kann in Bedingungen verwendet werden, um unterschiedliche Inhalte für die verschiedenen Sprachvarianten eines mehrsprachigen Blogs darzustellen. |
| `group.public_title` | Zeichenfolge | Der Titel dieses Blogs, wie er oben auf den gerenderten Seiten erscheinen soll. |
| `group.show_summary_in_listing` | Boolesch | Gibt an, ob Beitragszusammenfassungen auf der Blog-Listing-Seite angezeigt werden, wie in den [Blog-Einstellungen](https://knowledge.hubspot.com/de/blog/use-a-featured-image-on-a-page-or-blog-post#display-featured-images-on-a-blog-listing-page) festgelegt. |
| `group.slug` | Zeichenfolge | Der Pfad zu diesem Blog. |
| `group.use_featured_image_in_summary` | Boolesch | Gibt an, ob Feature-Bilder in Beitragszusammenfassungen angezeigt werden, wie in den [Blog-Einstellungen](https://knowledge.hubspot.com/de/blog/manage-your-blog-template-and-settings#select-your-blog-templates) festgelegt. |
| `archive_list_page` | Boolesch | Gibt `true` zurück, wenn die Seite eine Blog-Archivseite ist. Bsp.: `https://www.example.com/blog/archive/2020/02` würde `true` zurückgeben. |
## Dynamische Seiten mit CRM-Objekten
Die folgenden Variablen werden verwendet, um [dynamische Seiten mit CRM-Objekten zu erstellen](/docs/cms/start-building/features/data-driven-content/hubdb/overview#crm-object-dynamic-pages). Diese Variablen sind nur für dynamische Seiten mit CRM-Objekten verfügbar.
| Variable | Typ | Beschreibung |
| - | - | - |
| `dynamic_page_crm_object` | Dict | Das CRM-Objekt der dynamischen Seite, das mit dem Seitenanfragepfad übereinstimmt. Wenn die Anfrage an die Listing-Seite gerichtet ist, lautet dieser Wert `null`. |
| `dynamic_page_crm_object_type_fqn` | Zeichenfolge | Der vollständig qualifizierte Name (Fully Qualified Name, FQN) des CRM-Objekts. Der FQN ist eine zugewiesene eindeutige ID für das Objekt, einschließlich der ID Ihres HubSpot-Accounts und des Objektnamens. Der FQN kann in der [`crm_objects`-Funktion](/docs/cms/reference/hubl/functions#crm-objects) verwendet werden. |
## HubDB-Variablen
Die folgenden Variablen werden für die Erstellung dynamischer Seiten mithilfe von [HubDB](/docs/cms/start-building/features/data-driven-content/crm-objects#hubdb-dynamic-pages) verwendet. Diese Variablen sind nur für [dynamische HubDB-Seiten](/docs/cms/start-building/features/data-driven-content/hubdb/overview#hubdb-dynamic-pages) verfügbar.
| Variable | Typ | Beschreibung |
| - | - | - |
| `dynamic_page_hubdb_table_id` | Long | Dies ist die ID der Tabelle, die auf der Registerkarte *Erweiterte Einstellungen* des Seiten-Editors ausgewählt wurde. |
| `dynamic_page_hubdb_row` | Dict | Die HubDB-Zeile der dynamischen Seite, die mit dem Seitenanfragepfad übereinstimmt. Wenn die Anfrage an die Listing-Seite gerichtet ist, lautet dieser Wert `null`. |
| `row.hs_id` | Lang | Die interne ID einer HubDB-Zeile. |
| `row.hs_name` | Zeichenfolge | Der Name der HubDB-Zeile. |
| `row.hs_path` | Zeichenfolge | Der Pfad der HubDB-Zeile. Wird verwendet, um eine Anfrage an eine einzelne Zeile in der Tabelle aufzulösen, die durch `dynamic_page_hubdb_table_id` angegeben wird. |
| `row.hs_child_table_id` | Lang | Die ID der untergeordneten Tabelle der HubDB-Zeile. Kann verwendet werden, um verschachtelte Vorlagen zu erstellen. |
| `row.hs_parent_row` | Dict | Die übergeordnete Zeile der HubDB-Zeile. Kann nur verwendet werden, wenn untergeordnete Tabellen für verschachtelte Vorlagen verwendet werden. |
| `dynamic_page_route_level` | Ganzzahl | Aktuelle Tiefe einer Seite in einer dynamischen Vorlage mit mehreren Ebenen. Der Wert beginnt bei `0` und wird mit jeder zusätzlichen Tabellenebene erhöht. |
## Menüknotenvariablen
Die folgenden Variablen können für das Objekt verwendet werden, das von der Funktion [menu-Funktion von HubL](/docs/cms/reference/hubl/functions#menu) zurückgegeben wird.
| Variable | Typ | Beschreibung |
| - | - | - |
| `node.label` | Zeichenfolge | Das Menülabel der Seite. |
| `node.url` | Zeichenfolge | URL der Seite. |
| `node.pageId` | Zahl | ID der Seite, wenn in HubSpot. |
| `node.contentGroupId` | Zahl | Blog-ID der Seite, wenn es sich um einen HubSpot-Blogbeitrag handelt. |
| `node.parentNode` | Objekt | Der übergeordnete Knoten des aktuellen Knotens. Der übergeordnete Knoten enthält den aktuellen Knoten in seiner `children`-Eigenschaft. |
| `node.children` | Liste | Die Liste der untergeordneten Knoten für den aktuellen Knoten. |
| `node.activeBranch` | Boolesch | Wird als `true` ausgewertet, wenn sich der Knoten in der obersten Verzweigung befindet, in der sich die aktuelle Seite befindet. |
| `node.activeNode` | Boolesch | Wird als `true` ausgewertet, wenn der Knoten die aktuelle Seite ist. |
| `node.level` | Zahl | Die Anzahl der Ebenen der Tiefe, die der aktuelle Knoten von den Knoten der obersten Ebene entfernt ist. |
| `node.pageTitle` | Zeichenfolge | Name der Inhaltsseite, sofern in HubSpot. |
| `node.slug` | Zeichenfolge | Pfad-Slug der Seite. |
| `node.linkTarget` | Zeichenfolge | Link-Ziel der Seite. |
## In-App-Editor und Vorschauvariablen
Sie können die folgenden Variablen verwenden, um zu überprüfen, ob der Inhalt im Content-Editor oder der Vorschau gerendert wird. Sie können diese beispielsweise verwenden, um zu verhindern, dass Code im Editor ausgeführt wird, während der Code noch auf Live-Seiten ausgeführt wird.
```hubl theme={null}
{% if is_in_page_editor %}
Display something different within the page editor.
{% endif %}
```
| Variable | Typ | Beschreibung |
| - | - | - |
| `is_in_hs_app` | Zeichenfolge | Gibt `true` zurück, wenn Inhalte innerhalb der HubSpot-App gerendert werden. |
| `is_in_editor` | Zeichenfolge | Gibt `true` zurück, wenn Inhalte innerhalb der HubSpot-App gerendert werden. |
| `is_in_global_content_editor` | Zeichenfolge | Gibt `true` zurück, wenn Inhalte innerhalb des Editors für globalen Content gerendert werden. |
| `is_in_theme_editor` | Zahl | Gibt `true` zurück, wenn Inhalte innerhalb des Design-Editors gerendert werden. |
| `is_in_page_editor` | Zeichenfolge | Gibt `true` zurück, wenn Inhalte innerhalb der HubSpot-App gerendert werden. |
| `is_in_blog_post_editor` | Zeichenfolge | Gibt `true` zurück, wenn Inhalte innerhalb des Blogbeitrag-Editors gerendert werden. |
| `is_in_email_editor` | Zeichenfolge | Gibt `true` zurück, wenn Inhalte innerhalb des E-Mail-Editors gerendert werden. |
| `is_in_previewer` | Zahl | Gibt `true` zurück, wenn Inhalte innerhalb eines beliebigen Vorschaukontextes gerendert werden. |
| `is_in_theme_previewer` | Objekt | Gibt `true` zurück, wenn Inhalte innerhalb der Design-Vorschau gerendert werden. |
| `is_in_template_previewer` | Zeichenfolge | Gibt `true` zurück, wenn Inhalte innerhalb der Vorlage-Vorschau gerendert werden. |
| `is_in_page_previewer` | Zeichenfolge | Gibt `true` zurück, wenn Inhalte innerhalb der Seitenvorschau gerendert werden. |
| `is_in_blog_post_previewer` | Zeichenfolge | Gibt `true` zurück, wenn Inhalte innerhalb der Blogbeitragsvorschau gerendert werden. |
| `is_in_email_previewer` | Zeichenfolge | Gibt `true` zurück, wenn Inhalte innerhalb der E-Mail-Vorschau gerendert werden. |
| `is_in_module_previewer` | Zeichenfolge | Gibt `true` zurück, wenn Inhalte innerhalb der Modulvorschau gerendert werden. |
# Syntax von HubL-Variablen & -Makros
Source: https://developers.hubspot.de/docs/cms/reference/hubl/variables-macros-syntax
Erfahren Sie, wie Sie HubL-Variablen & -Makros verwenden können, um dynamische Seiten in CMS Hub und E-Mails zu erstellen.
HubL verwendet Variablen zum Speichern und Ausgeben von Werten in der Vorlage. Variablen können in Vorlagenlogik verwendet oder mit for-Schleifen durchlaufen werden. Neben Variablen sind Makros ein weiteres nützliches Tool, um sich wiederholende, aber dynamische Code-Abschnitte in Ihren Vorlagen zu drucken.
Variablen sind Ausdrücke, die durch `}}`begrenzt sind. Die grundlegende Syntax von Variablen lautet wie folgt:
```hubl theme={null}
// variables
{{ variable }}
{{ dict.attribute }}
```
## Variablen
Variablen sind entweder ein einzelnes Wort in einem Ausdruck oder ein Attribut eines Dictionarys. HubL verwendet Python-basierte Datenstrukturen, Dictionaries oder **Dicts** genannt, um verschiedene Variablensätze zu speichern. HubSpot verwendet beispielsweise ein „content“-Dictionary, um viele Attribute zu speichern, die sich auf den mit dieser Vorlage erstellten Inhalt beziehen. Zum Beispiel druckt die `content.absolute_url` die URL eines bestimmten Inhalts.
HubSpot verfügt über viele vordefinierte Variablen, die in Ihren Seiten-, Blog- und E-Mail-Vorlagen verwendet werden können. Wir verfügen über eine [Referenzliste von Variablen](/docs/cms/reference/hubl/variables). Sie können auch die [Entwicklerinformationen](/docs/cms/start-building/introduction/developer-environment/troubleshooting/troubleshooting#developer-info) anzeigen, wenn Sie eine beliebige Seite in Ihrem Account aufrufen, um die auf dieser Seite verfügbaren Variablen anzuzeigen.
Sie können nicht nur die Werte von Variablen und Dictionary-Attributen in einer Vorlage drucken, sondern auch eigene Variablen definieren. Sie können Zeichenfolgen, boolesche Werte, Ganzzahlen und Sequenzen speichern oder Dictionaries in einer einzigen Variablen erstellen. Variablen werden innerhalb von Anweisungstrennzeichen mit dem Wort „set“ definiert. Einmal gespeicherte Variablen können dann gedruckt werden, indem der Variablenname als Ausdruck angegeben wird. Unten sehen Sie verschiedene Arten von Informationen, die in Variablen gespeichert und dann gedruckt werden.
Variablen sollten entweder aus einzelnen Wörtern bestehen oder Unterstriche für Leerzeichen verwenden (z. B. my\_variable). **HubL unterstützt keine Variablennamen mit Bindestrichen.**
```text hubl.txt theme={null}
{% set string_var = "This is a string value stored in a variable" %}
{{ string_var}}
{% set bool_var = True %}
{{ bool_var}}
{% set int_var = 53 %}
{{ int_var}}
{% set seq_var = ["Item 1", "Item 2", "Item 3"] %}
{{ seq_var}}
{% set var_one = "String 1" %}
{% set var_two = "String 2" %}
{% set sequence = [var_one, var_two] %}
{{ sequence }}
{% set dict_var = {"name": "Item Name", "price": "$20", "size":"XL"} %}
{{ dict_var.price }}
```
```text ausgabe.txt theme={null}
This is a string value stored in a variable True 53 [Item1, Item2, Item3]
[String 1, String 2] $20
```
Jedes der obigen Beispiele speichert einen anderen Variablentyp, wobei das letzte Beispiel zwei verschiedene Variablen in einer Sequenz speichert.
Neben der Ausgabe von Werten können Variablen in [if-Anweisungen](/docs/cms/reference/hubl/if-statements), als [Filterparameter](/docs/cms/reference/hubl/filters), als [Funktionsparameter](/docs/cms/reference/hubl/functions) sowie in [for-Schleifen](/docs/cms/reference/hubl/loops) (nur Sequenzvariablen) zur Iteration verwendet werden.
Eine gängige Anwendung ist die Verwendung von Variablen zur Definition allgemeiner CSS-Werte in Ihrem Stylesheet. Zum Beispiel wenn Sie eine Farbe haben, die Sie in Ihrer CSS-Datei immer wieder verwenden. Auf diese Weise können Sie, wenn Sie die Farbe ändern müssen, den Variablenwert ändern, und alle Verweise auf diese Variable werden bei der nächsten Veröffentlichung der Datei aktualisiert.
```css example.css theme={null}
<!-- defines variable and assigns HEX color -->
{% set primaryColor = "#F7761F" %}
a {
color: {{ primaryColor }}; {# prints variable HEX value #}
}
```
```text ausgabe.txt theme={null}
a {
color: #f7761f;
}
```
## Makros
Mit HubL-Makros können Sie mehrere Anweisungen mit einem dynamischen Wert drucken. Wenn es beispielsweise einen Code-Block gibt, den Sie immer wieder schreiben müssen, kann ein Makro eine gute Lösung sein, da es den Code-Block ausgibt und dabei bestimmte Argumente, die Sie ihm übergeben, austauscht.
Das Makro wird in einer HubL-Anweisung definiert, benannt und mit Argumenten versehen. Das Makro wird dann in einer Anweisung aufgerufen, die seine dynamischen Werte übergibt und den endgültigen Code-Block mit den dynamischen Argumenten ausgibt. Die grundlegende Syntax eines Makros lautet wie folgt:
```hubl theme={null}
{% macro name_of_macro(argument_name, argument_name2) %}
{{ argument_name }}
{{ argument_name2 }}
{% endmacro %}
{{ name_of_macro("value to pass to argument 1", "value to pass to argument 2") }}
```
Wenn Ihr Makro Leerzeichen in Form von neuen Zeilen zurückgibt, können Sie Leerzeichen in Vorlagen manuell entfernen. Wenn Sie ein Minuszeichen (`-`) an den Anfang oder das Ende eines Blocks, eines Kommentars oder eines Variablenausdrucks setzen, werden die Leerzeichen vor oder nach diesem Block entfernt.
```hubl theme={null}
{% macro name_of_macro(argument_name, argument_name2) -%}
{{ argument_name }}
{{ argument_name2 }}
{%- endmacro %}
```
Unten sehen Sie eine praktische Anwendung eines Makros, um eine CSS3-Eigenschaft mit den verschiedenen Anbieter-Präfixen und einem dynamischen Wert zu drucken. Damit können Sie 5 Codezeilen mit einem einzigen Makro-Tag drucken.
```css example.css theme={null}
{% macro trans(value) %}
-webkit-transition: {{value}};
-moz-transition: {{value}};
-o-transition: {{value}};
-ms-transition: {{value}};
transition: {{value}};
{% endmacro %}
a {
{{ trans("all .2s ease-in-out") }}
}
```
```text ausgabe.txt theme={null}
a {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
```
> [!WARNING]
>
> Mit Makros haben Sie die Möglichkeit, rekursiven Code zu erstellen. Um Probleme bei der Zuverlässigkeit und Performance zu vermeiden, können Sie Makros nur 20 Ebenen tief verschachteln. Wenn Sie diese Grenze überschreiten, erhalten Sie eine Fehlermeldung vom Typ: `max. Rekursionslimit von 20 für <your macro name>-Makro erreicht`
## Aufruf
In manchen Fällen möchten Sie vielleicht zusätzliche dynamische Informationen in den Makroblock zurückgeben. Sie können zum Beispiel ein großes Stück Code haben, das Sie zusätzlich zu den Argumenten in das Makro zurückführen wollen. Sie können dies mit Hilfe von call block und caller() tun. Ein Aufrufblock funktioniert im Wesentlichen wie ein Makro, erhält aber keinen eigenen Namen. Der caller()-Ausdruck gibt an, wo der Inhalt des Aufrufblocks wiedergegeben wird.
Im folgenden Beispiel wird zusätzlich zu den beiden Argumenten ein `<p>` in ein Makro eingefügt.
```html example.html theme={null}
{% macro render_dialog(title, class) %}
<div class="{{ class }}">
<h2>{{ title }}</h2>
<div class="contents">
{{ caller() }}
</div>
</div>
{% endmacro %}
{% call render_dialog("Hello World", "greeting") %}
<p>This is a paragraph tag that I want to render in my.</p>
{% endcall %}
```
```text ausgabe.txt theme={null}
<div class="greeting">
<h2>Hello World</h2>
<div class="contents">
<p>This is a simple dialog rendered by using a macro and a call block.</p>
</div>
</div>
```
## Import
Eine weitere nützliche Funktion von Makros ist, dass sie vorlagenübergreifend verwendet werden können, indem eine Vorlagendatei in eine andere importiert wird. Hierfür müssen Sie das **import** -Tag verwenden. Mit dem import-Tag können Sie einen Design-Manager-Dateipfad zur Vorlage angeben, die Ihre Makros enthält, und den Makros einen Namen in der Vorlage geben, in die Sie sie einfügen. Sie können dann Werte an diese Makros übergeben, ohne sie umdefinieren zu müssen.
Nehmen wir zum Beispiel an, Sie haben eine HTML-Vorlagendatei, die die folgenden 2 Makros enthält. Ein Makro wird definiert, um einen Header-Tag einzurichten, und eines, um einen Footer-Tag zu erzeugen. Diese Datei wird im Design-Manager unter dem Namen `my_macros.html` gespeichert.
```hubl theme={null}
<!-- my_macros.html file -->
{% macro header(tag, title_text) %}
<header> <{{ tag }}>{{ title_text }} </{{tag}}> </header>
{% endmacro %}
{% macro footer(tag, footer_text) %}
<footer> <{{ tag }}>{{ footer_text }} </{{tag}}> </footer>
{% endmacro %}
```
In der Vorlage, die diese Makros verwenden soll, wird ein import-Tag verwendet, das den Dateipfad zur `my_macros.html`-Datei angibt. Er benennt auch die Gruppe der Makros (in diesem Beispiel `header_footer`). Makros können dann ausgeführt werden, indem der Makroname an den Namen der importierten Vorlage angehängt wird. Siehe das folgende Beispiel.
```html example.html theme={null}
{% import "custom/page/web_page_basic/my_macros.html" as header_footer %}
{{ header_footer.header("h1", "My page title") }}
<p>Some content</p>
{{ header_footer.footer("h3:", "Company footer info") }}
```
```text ausgabe.txt theme={null}
<header><h1>My page title</h1></header>
<p>Some content</p>
<footer><h3>Company footer info</h3></footer>
```
## Von (from)
Wenn Sie nur bestimmte Makros importieren möchten, anstatt alle Makros in einer separaten .html-Datei, können Sie das **from**-Tag verwenden. Geben Sie mit dem from-Tag nur die Makros an, die Sie importieren möchten. Im Allgemeinen bietet die Verwendung von **import** mehr Flexibilität, diese Alternative wird jedoch ebenfalls unterstützt.
Das folgende Beispiel greift auf dieselbe `my_macros.html`-Datei aus dem vorherigen Abschnitt dieses Artikels zu. Diesmal werden jedoch nicht alle Makros importiert, sondern nur das Makro für den Footer.
```html example.html theme={null}
{% from "custom/page/web_page_basic/my_macros.html" import footer %}
{{ footer("h2", "My footer info") }}
```
```text ausgabe.txt theme={null}
<footer><h2>My footer info</h2></footer>
```
## Variablen innerhalb von Schleifen
> [!WARNING]
>
> Alle innerhalb von Schleifen definierten Variablen sind auf den Bereich dieser Schleife beschränkt und können nicht von außerhalb der Schleife aufgerufen werden.
Sie können Variablen, die außerhalb einer Schleife definiert sind, aus einer Schleife heraus aufrufen, aber nicht umgekehrt.
Sie können auch Funktionen verwenden, um Objekte zu verändern, um Werte in Dictionaries festzulegen oder Listenoperationen durchzuführen. Im folgenden Beispiel wird die [`.update` Listenoperation](/docs/cms/reference/hubl/functions#update) verwendet:
```text eingabe.txt theme={null}
{% set obj = {val : 0} %}
{% for i in range(0, 10) %}
{% do obj.update({val: obj.val + i }) %}
{% endfor %}
{{ obj.val }}
```
```text ausgabe.txt theme={null}
45
```
# Build-Statusüberprüfungen
Source: https://developers.hubspot.de/docs/cms/reference/react/build-health-checks
# @hubspot/cms-Komponenten-Bibliothek
Source: https://developers.hubspot.de/docs/cms/reference/react/cms-components-library
# Drag-&-Drop-Bereiche in einer benutzerdefinierten E-Mail-Vorlage bestimmen
Source: https://developers.hubspot.de/docs/cms/start-building/building-blocks/drag-and-drop/custom-email-template
So bestimmen Sie Drag-&-Drop-Bereiche in einer benutzerdefinierten E-Mail-Vorlage
> **Unterstützte Produkte**
[Mit Drag-&-Drop-Bereichen](https://developers.hubspot.de/docs/guides/cms/content/templates/drag-and-drop/overview) haben Entwickler die Möglichkeit, Abschnitte mit benutzerdefinierten E-Mail-Vorlagen zu erstellen, die Änderungen an Layout, Stil und Content direkt im E-Mail-Editor zulassen. Entwickler können so anhand einer kleinere Anzahl von E-Mail-Vorlagen mit globaler Struktur Content-Autoren in die Lage versetzen, eine Vielzahl von Seiten mit unterschiedlichen Zwecken und Layouts zu erstellen.
> [!WARNING]
>
> **Hinweis:** Benutzerdefinierte E-Mail-Vorlagen dürfen nur einen Drag-&-Drop-Bereich enthalten.
**1. Neue HTML-Vorlage erstellen**
Erstellen Sie eine neue HTML-Vorlage, die den HubL- und HTML-Code enthält, aus dem Ihr Drag-&-Drop-Bereich dann besteht.
* Gehen Sie dazu in Ihrem HubSpot-Account zu **Content** > **Design-Manager**.
* Erstellen Sie in der linken Seitenleiste eine neue Datei, indem Sie auf **Datei** > **Neue Datei** klicken.
* Klicken Sie im Dialogfeld auf das Dropdown-Menü **Was möchten Sie erstellen?** und wählen Sie **HTML und HUBL** aus.
* Klicken Sie auf **Weiter**.
* Klicken Sie auf das Dropdown-Menü **Vorlagentyp** und wählen Sie dann **E-Mail** aus.
* Geben Sie einen **Namen** für die Vorlage ein.
* Um den Speicherort der Vorlage zu aktualisieren, klicken Sie unter *Dateispeicherort* auf **Ändern** und wählen Sie dann einen neuen Ordner aus, in dem die Vorlage erstellt wird.
* Klicken Sie auf **Erstellen**.
**2. HubL-Tags zum Vorlagen-Header hinzufügen**
Beachten Sie die folgenden erforderlichen und optionalen Tags, die Sie aus Gründen des Stylings und der Kompatibilität in den `<head>`-Abschnitt Ihrer E-Mail-Vorlage einfügen können:
### Erforderliche Daten
`{{ dnd_area_stylesheet }}`
Dieses Tag stellt Folgendes bereit:
* Fügt zugehörige Medienabfragen hinzu
* Behebt bekannte Styling-Probleme in Outlook
* Setzt Ränder und Auffüllungen zurück
* Aktiviert Anti-Aliasing
* Fügt etwas CSS hinzu
### Optionale Tags
Um sicherzustellen, dass Ihre Vorlage auf allen gängigen E-Mail-Clients einheitlich dargestellt wird, können Sie auch die folgenden optionalen HubL-Tags zu Ihrer Vorlage hinzufügen:
* `{{ email_header_includes }}`: Mit diesem Tag wird CSS in Ihre Vorlage eingefügt, um das Styling konsistent darzustellen, häufige Styling-Probleme zu beheben und Metadaten zum HTML-Code der E-Mail hinzuzufügen. Beim Parsen dieses HubL-Tags wird der folgende Content innerhalb des `<head>` im HTML-Code der E-Mail hinzugefügt:
| Parameter | Beschreibung |
| - | - |
| `<meta name="x-apple-disable-message-reformatting">` | Verhindern, dass iOS 11 automatisch E-Mails skaliert |
| `<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">` | Informiert Browser und E-Mail-Clients darüber, welche unterschiedlichen Zeichen von ihnen erwartet werden |
| `<meta http-equiv="X-UA-Compatible" content="IE=edge">` | Ermöglicht CSS3- und Medienabfragen unter Windows Phone 7.5, informiert Internet Explorer, Content im höchstmöglichen Modus zu rendern, und ermöglicht es dem Browser, auszuwählen, mit welchem Version von Internet Explorer die E-Mail gerendert werden soll |
| `<meta name="viewport" content="width=device-width, initial-scale=1.0"/>` | Legt die sichtbare Fläche auf die Breite des Gerätebildschirms fest, wodurch Ihre E-Mail responsiv wird |
* `{{ reset_css_stylesheet }}`: Durch das Einfügen dieses Tags werden eine Reihe von Styling-Problemen in Outlook behoben und die Ränder und Auffüllungen Ihrer E-Mail werden zurückgesetzt.
* `{{ outlook_background_snippet }}`: Mit diesem Tag wird das Hintergrundbild oder die Hintergrundfarbe in Outlook festgelegt, sofern Sie eine zugehörige CSS-Regel für den Hintergrund angegeben haben.
**3. Einen Drag-&-Drop-Bereich erstellen**
Nachdem Sie das `{{ dnd_area_stylesheet }}`-HubL-Tag und alle anderen optionalen Tags zum `<head>` Ihrer Vorlage hinzugefügt haben, können Sie einen `dnd_area` im Text der Vorlage konfigurieren.
### Leeren Drag-&-Drop-Bereich erstellen
Ein `dnd_area` ist der Container, der einen Teil der Webseite in Bezug auf Struktur, Design und Inhalt bearbeitbar macht. Der Text eines `dnd_area`-Tags liefert den Standardinhalt für den Drag-&-Drop-Bereich.
Der Drag-&-Drop-Bereich kann entweder in einem `<div>` oder einem `<table>` enthalten sein. Eine Einschränkung des Drag-&-Drop-Bereichs besteht darin, dass die Mindestbreite auf 624 Pixel festgelegt ist. Dieser Wert kann nicht überschrieben werden.
Dieses Tag allein erzeugt eine Ablagezone, in die Content-Autoren im E-Mail-Editor Module ziehen können.
Der folgende Code würde einen leeren Drag-&-Drop-Bereich angeben:
```hubl theme={null}
{% dnd_area "main" %}
<!-- generates an empty drag and drop area drop-section -->
{% end_dnd_area %}
```
### Einen Drag-&-Drop-Bereich mit leeren Spalten erstellen
Sie können Ihren Drag-&-Drop-Bereich auch anpassen, um Standardabschnitte und -spalten anzugeben, indem Sie die Felder `dnd_section` und `dnd_column` verwenden.
Der folgende HubL-Code würde beispielsweise einen Drag-&-Drop-Bereich mit 3 Spalten angeben:
```hubl theme={null}
{% dnd_area "main" %}
{% dnd_section padding={'top': 25, 'bottom': '20} %}
{% dnd_column width=4 %}
{% end_dnd_column %}
{% dnd_column width=4 %}
{% end_dnd_column %}
{% dnd_column width=4 %}
{% end_dnd_column %}
{% end_dnd_section %}
{% end_dnd_area %}
```
> [!WARNING]
>
> Das `dnd_row`-HubL-Tag wird derzeit nicht in E-Mail-Vorlagen unterstützt.
**4. Drag-&-Drop-Bereich mit Modulen hinzufügen**
Um den Abschnitt vorab mit Inhalt zu füllen, können wir das `dnd_module`-Tag verwenden, um ein Modul einzubinden, indem wir auf seinen Pfad verweisen. Das Modul muss innerhalb eines Abschnitts und einer Spalte hinzugefügt werden, damit der Drag-&-Drop-Bereich vorab mit Content gefüllt wird.
Im folgenden Beispiel wird auf ein Standard-HubSpot-Modul verwiesen, aber Sie können auch von Ihnen erstellte Module einbeziehen, indem Sie deren Pfad im Dateiverzeichnisbaum Ihrer Design-Tools angeben.
Um einen Standardwert für Ihr `dnd_module` festzulegen, können Sie das `module_attribute`-Tag verwenden.
```hubl theme={null}
{% dnd_area "main", full_width=False %}
{% dnd_section padding={
'top':'25',
'bottom':'20'
}, full_width=False %}
{% dnd_column width=6 %}
{% dnd_module path='@hubspot/image_email', img={
'alt':'NavyLogo',
'height':38,
'src':'email_dnd_template_images/NavyLogo.png',
'width':120
}, alignment='center', hs_enable_module_padding=True, hs_wrapper_css={
'padding-bottom':'10px',
'padding-left':'20px',
'padding-right':'20px',
'padding-top':'10px'
} %}
{% end_dnd_module %}
{% end_dnd_column %}
{% dnd_column width=6 %}
{% end_dnd_column %}
{% end_dnd_section %}
{% end_dnd_area %}
```
**5. Drag-&-Drop-Vorlage weiter anpassen und gestalten**
Jedes Drag-&-Drop-HubL-Tag (z. B. `dnd_area`, `dnd_section`, `dnd_column` usw.) enthält verschiedene Parameter, die Sie verwenden können, um ein Standard-Styling bereitzustellen und andere Verhaltensweisen festzulegen, z. B. das Label, das in der Seitenleiste des E-Mail-Editors angezeigt wird.
Um mehr über die für die einzelnen Tags verfügbaren Parameter zu erfahren, sehen Sie sich die folgenden Links für die einzelnen Tags an:
* [dnd\_area](/docs/cms/reference/hubl/tags/dnd-areas#dnd-area)
* [dnd\_section](/docs/cms/reference/hubl/tags/dnd-areas#dnd-section)
* [dnd\_column](/docs/cms/reference/hubl/tags/dnd-areas#dnd-column)
* [dnd\_module](/docs/cms/reference/hubl/tags/dnd-areas#dnd-module)
# Drag-&-Drop-Vorlagen
Source: https://developers.hubspot.de/docs/cms/start-building/building-blocks/drag-and-drop/drag-and-drop-templates
Drag-&-Drop-Design-Manager-Vorlagen sind Vorlagen, die mit einem visuellen Designer erstellt wurden. Sie werden nicht für neue Vorlagen empfohlen, da Code-Vorlagen ein besseres Erlebnis bieten.
> **Unterstützte Produkte**
> [!WARNING]
>
> **Drag-&-Drop-Vorlagen werden für neue Vorlagen nicht empfohlen.** Diese Vorlagen können nicht Teil eines Designs sein und unterstützen daher keine Designfunktionen wie Designfelder und Designmodule. Drag-&-Drop-Vorlagen werden in CMS Hub Starter **NOT** unterstützt, verwenden Sie stattdessen `dnd_area`. Drag-&-Drop-Vorlagen unterstützen nicht einige der neueren Funktionen des CMS ([Mitgliedschaften](/docs/cms/start-building/features/memberships/overview), [Drag-&-Drop-Bereiche](https://developers.hubspot.de/docs/guides/cms/content/templates/drag-and-drop/overview), [wiederverwendbare Abschnitte](/docs/cms/start-building/building-blocks/sections/sections), GraphQL und viele andere Funktionen). Sie sind nicht erweiterbar und bieten Content-Autoren und Entwicklern keine so gute Umgebung wie Code-Vorlagen. Stattdessen empfehlen wir codierte [HTML + HubL-Vorlagen](/docs/cms/start-building/building-blocks/templates/html-hubl-templates) mit [Drag-&-Drop-Bereichen](https://developers.hubspot.de/docs/guides/cms/content/templates/drag-and-drop/overview), die Entwicklern und Marketern ein besseres Erlebnis bieten. Für einen schnellen Einstieg in das CMS empfehlen wir Ihnen, sich die [HubSpot Theme Boilerplate](https://github.com/HubSpot/cms-theme-boilerplate) anzusehen, die mit codierten Vorlagen erstellt wurde.
Drag-&-Drop-[Vorlagen](https://developers.hubspot.de/docs/guides/cms/content/templates/overview) wurden für weniger technisch bewandte Benutzer entwickelt, um auf einfache Weise eine Website im HubSpot-CMS erstellen zu können. Drag-&-Drop-Vorlagen nutzen einen visuellen Vorlagendesigner, der HTML + HubL unter der Haube generiert.
Damit das Tracking benutzerdefinierter Events funktioniert, wird die HTML-Ausgabe von HubSpot gesteuert und Sie haben keine direkte Kontrolle über die strukturellen Teile davon. Zusätzlich **wird eine layout.css-Datei auf die Seite geladen, die ein einfaches 12-Spalten-Gitter auf Basis von Bootstrap 2 ermöglicht**. Dies macht alle Websites, die mit Drag-&-Drop-Vorlagen erstellt wurden, standardmäßig responsiv, sodass Inhaltszeilen vertikal gestapelt werden. Für eine anspruchsvollere und individuelle Optimierung für Mobilgeräte sollten Sie Ihre eigenen responsiven Stile hinzufügen.
Drag-&-Drop-Vorlagen werden im Design-Manager erstellt und bei der Interaktion mit ihnen über die API oder die [Tools für lokale Entwicklung](/docs/developer-tooling/local-development/hubspot-cli/install-the-cli) als JSON dargestellt. Aufgrund der Beschaffenheit von Drag-&-Drop-Vorlagen ist die einzige empfohlene Methode, sie zu bearbeiten, über die Design-Manager-Schnittstelle. **Wenn Sie lieber programmieren, Versionskontrolle verwenden oder einfach in der Lage sein möchten, Ihre bevorzugten Tools lokal zu bearbeiten, bieten HTML + HubL-codierte Vorlagen die beste Umgebung für Entwickler.** Die [dnd\_area](/docs/cms/reference/hubl/tags/dnd-areas)-Funktionalität für HTML + HubL-Vorlagen ermöglicht auch Content-Autoren ein besseres Erlebnis als die Drag-&-Drop-Oberfläche des Design-Managers, da sie im visuellen Content-Editor verbleibt.
## Drag-&-Drop-Vorlagendesigner
Um eine Drag-&-Drop-Vorlage zu erstellen, öffnen Sie den Design-Manager und erstellen Sie im Finder eine neue Datei, wählen Sie eine Vorlage sowie den [Typ der Vorlage](https://developers.hubspot.de/docs/guides/cms/content/templates/overview#template-types) aus, die Sie erstellen.
Drag-&-Drop-Vorlagen bestehen aus Bausteinen. Diese Bausteine, oder Blöcke, sind Module, Gruppen, globale Gruppen und flexible Spalten.
[Erfahren Sie, wie Sie den Drag-&-Drop-Vorlagendesigner verwenden](https://knowledge.hubspot.com/de/design-manager/structure-and-customize-template-layouts).
### Module
Module sind wiederverwendbare Komponenten, die bearbeitbare Teile einer Seite sind. Module bestehen aus einem HTML + HubL-Vorlagenfragment, CSS, JS und Feldern. Module können von Content-Autoren in flexiblen Spalten und dnd\_areas platziert werden und sind ihr wichtigste Mittel, um die Inhalte ihrer Website zu verwalten. Sie können Module für eine beliebige Anzahl von Funktionen erstellen: Suche, Bildergalerien, Menüs, komplexe Marketinganimationen, Taschenrechner, Produktvergleiche – die Möglichkeiten sind Ihrer Vorstellungskraft überlassen und dem, was Sie für ein gutes Nutzererlebnis für Content-Autoren halten. Über die Felder steuert der Content-Editor die Ausgabe. Module sind nicht nur für Drag-&-Drop-Vorlagen ein wichtiges Element, sie sind ein sehr wichtiger Kernbaustein von CMS Hub. In Drag-&-Drop-Vorlagen können die Standardwerte für Modulfelder im [Inspektor](https://knowledge.hubspot.com/de/design-manager/a-quick-tour-of-the-design-manager) konfiguriert werden. [Erfahren Sie mehr über Module.](https://developers.hubspot.de/docs/guides/cms/content/modules/overview)
### Gruppen
Gruppen sind Wrapper für andere Gruppen und Module. Sie könnenüber CSS-Klassen und HTML-Wrapper verfügen. Gruppen manifestieren sich als umhüllender HTML mit Layout-Klassen, um die Platzierung und Dimensionierung der Gruppen zu erleichtern. Die Gruppen können auch einen internen Namen haben. Damit können Sie im Design-Manager [Module gruppieren](https://knowledge.hubspot.com/de/design-manager/structure-and-customize-template-layouts#group-modules), wodurch es einfacher wird, Teile einer Seite visuell zu identifizieren. Ein Beispiel hierfür könnten Seitenleisten oder Banner sein.
> [!WARNING]
>
> Da [HTML + HubL](/docs/cms/start-building/building-blocks/templates/html-hubl-templates)-Dateien der empfohlene Pfad für neue Websites, Spalten, Abschnitte und Zeilen von [Drag-&-Drop-Bereichen](https://developers.hubspot.de/docs/guides/cms/content/templates/drag-and-drop/overview) sind, ersetzen Drag-&-Drop-Bereiche weitgehend die Zwecke von Gruppen.
>
> Zusätzlich kann ein Entwickler Teilvorlagen und [globale Teilvorlagen](/docs/cms/start-building/building-blocks/global-content) erstellen, die zusätzlich zu Drag-&-Drop-Bereichen Freeform-Code enthalten können.
>
> Drag-&-Drop-Bereiche, Teilvorlagen und globale Teilvorlagen werden in Drag-&-Drop-Vorlagen nicht unterstützt.
### Globale Gruppen
Globale Gruppen sind Gruppen, deren Bearbeitung sich auf die gesamte Website und nicht nur auf die Seite, auf der sie sich befinden, auswirkt. Globale Gruppen können in mehreren Vorlagen vorhanden sein und werden am häufigsten für Website-Header und Footer verwendet. Globale Gruppen ähneln Teilvorlagen, sind aber auf die Struktur beschränkt, die durch Drag-&-Drop-Vorlagen erzwungen wird. Sie können bei Bedarf in HTML + HubL-Dateien eingebettet werden, in den meisten Fällen ist es allerdings sinnvoller, stattdessen eine globale Teilvorlage zu verwenden.
### Flexible Spalten
Flexible Spalten sind ein spezieller Typ von Gruppe. Sie können einen Standardsatz von Modulen enthalten, aber Content Editoren können Module darin hinzufügen, entfernen und verschieben. Flexible Spalten ermöglichen eine eindimensionale Neuanordnung von Modulen, vertikal nach oben und unten. [Im Gegensatz zu dnd\_area-Tags](https://developers.hubspot.de/docs/guides/cms/content/templates/drag-and-drop/overview) **unterstützen flexible Spalten weder Abschnitte noch die Formatierungsmöglichkeiten von Modulen innerhalb dieser Abschnitte.** Flexible Spalten sind nicht nur für Drag-&-Drop-Vorlagen ein wichtiges Element, es gibt auch ein [HubL-Tag](/docs/cms/reference/hubl/tags/standard-tags#flexible-column), das in [HTML + HubL](/docs/cms/start-building/building-blocks/templates/html-hubl-templates)-Vorlagen verwendet werden kann. [Erfahren Sie, wie Sie eine flexible Spalte zu einer Drag-&-Drop-Vorlage hinzufügen](https://knowledge.hubspot.com/de/design-manager/structure-and-customize-template-layouts#add-a-flexible-column).
> [!TIP]
>
> Es wird allgemein empfohlen, Drag-&-Drop-Bereiche zu verwenden, da sie meistens nützlicher sind und alle Funktionen bieten, die auch flexible Spalten bieten.
>
> Es kann in einigen Fällen dennoch nützlich sein, eine flexible Spalte zu verwenden, z. B. für eine Seitenleiste. Für Hauptinhaltsbereiche sind Drag-&-Drop-Bereiche jedoch viel flexibler.
Warum sollten Sie flexible Spalten verwenden? Websites sind in der Regel nicht starr. Sie werden über lange Zeiträume hinweg erstellt und gepflegt. Eine Homepage zum Beispiel für ein Unternehmen kann vorgestellte Produkte präsentieren und sich häufig ändern, wenn sich die Marketinganforderungen des Unternehmens im Laufe der Zeit ändern. Dass Inhalte innerhalb einer flexiblen Spalte hinzugefügt/entfernt und von Content-Editoren geändert werden können, erleichtert Marketern die Arbeit und ermöglicht es Entwicklern, sich auf das zu konzentrieren, was ihnen Spaß macht, nämlich coole Sachen zu entwickeln, anstatt kleine Seitenanpassungen vorzunehmen.
Ebenso können Seiten auf einer Website unterschiedliche strukturelle Anforderungen haben. Flexible Spalten geben Marketern die Kontrolle, diese Seiten mit benutzerdefinierten Modulen zu erstellen.
### Benutzerdefinierten Code zu Ihren Drag-&-Drop-Vorlagen hinzufügen
Sie können Ihren Drag-&-Drop-Vorlagen auf mehrere Arten benutzerdefinierten Code hinzuzufügen. Bei der primären Methode erfolgt dies über benutzerdefinierte Module. Manchmal müssen Sie jedoch möglicherweise Code hinzufügen, der um Module oder Gruppen gehüllt wird. Klicken Sie dazu auf das Modul oder die Gruppe, um sie im Inspektor anzuzeigen und das umhüllende HTML-Feld zu finden. Fügen Sie dort Ihren HTML hinzu.
Manchmal müssen Sie Code zum Header Ihres HTML oder Code direkt über dem `</body>` hinzufügen. Stellen Sie bei geöffneter Vorlage sicher, dass Sie nichts ausgewählt haben. Der Inspektor zeigt die Felder für die Vorlage selbst an. Hier können Sie Stylesheets und JavaScript-Dateien verlinken und gleichzeitig zusätzlichen HTML im Header oder kurz vor dem `</body>` -Tag hinzufügen.
Verwenden Sie dafür den [Inspektor](https://knowledge.hubspot.com/de/design-manager/a-quick-tour-of-the-design-manager). Der Inspektor verfügt über Felder auf Vorlagenebene für [Stylesheets, JavaScript](https://knowledge.hubspot.com/de/design-manager/a-quick-tour-of-the-design-manager##attach-stylesheets-and-javascript-files), [`<head>`-Markup](https://knowledge.hubspot.com/de/design-manager/a-quick-tour-of-the-design-manager#customize-your-template-s-head-and-body-options) usw.
# Übersicht über Drag-&-Drop-Bereiche
Source: https://developers.hubspot.de/docs/cms/start-building/building-blocks/drag-and-drop/overview
Drag-&-Drop-Bereiche ermöglichen Content-Autoren das Platzieren von Modulen, das Ändern von Layout und Formatieren mit einigen Stilen innerhalb der Content-Editoren. Entwickler erstellen vordefinierte Layouts.
Mit Drag-&-Drop-Bereichen lassen sich Seitenbereiche und globale Teilvorlagen erstellen, in denen Content-Autoren Module platzieren, das Layout ändern und Styling innerhalb des Content-Editors hinzufügen können. Durch die Verwendung von Drag-&-Drop-Bereichen müssen Sie weniger Vorlagen erstellen, da Content-Autoren in der Lage sind, Layouts selbst zu gestalten.
Im Folgenden erfahren Sie mehr über das `dnd_area`-Erlebnis und entsprechende Konzepte. Weitere Informationen, um anzufangen, finden Sie unter [Erste Schritte mit dnd\_area](/docs/cms/start-building/building-blocks/drag-and-drop/tutorial) und in der [dnd\_area Referenzdokumentation](https://developers.hubspot.de/docs/reference/cms/hubl/tags/dnd-areas).
> [!WARNING]
>
> ### Hinweis:
>
> Drag-&-Drop-Bereiche können nicht in [Blogbeiträgen](/docs/cms/start-building/building-blocks/templates/blog) und [E-Mail-Vorlagen](/docs/cms/start-building/building-blocks/templates/overview#email) verwendet werden.
## Die Sicht des Content-Autors
Wenn ein Content-Autor eine Seite mit einer Vorlage erstellt, die über Drag-&-Drop-Bereiche verfügt, sieht er zunächst eine Seite mit vordefinierten Modulen in einem Layout, das Sie als Entwickler gestaltet haben. Dieses anfängliche Layout ist die Grundlage dafür, wie Seiten, die diese Vorlage verwenden, aussehen können. Mithilfe von Drag-&-Drop-Bereichen kann der Content-Autor dann die Seite ausbauen, beispielsweise durch:
* Hinzufügen von Modulen, Abschnitten, Zeilen und Spalten
* Ändern der Größe von Modulen und Aktualisieren ihres Contents und Stylings, z. B. durch Anpassen der Ausrichtung und Hinzufügen von Hintergründen
Dies gibt Content-Autoren genügend Flexibilität, um einfache Änderungen an der Seite vorzunehmen, ohne dass er einen Entwickler für kleine Anpassungen bemühen muss.
> [!WARNING]
>
> ### Hinweis:
>
> Ein Content-Autor kann die Vorlage einer Seite gegen eine andere Vorlage desselben Typs austauschen, je nachdem, ob sie [dnd\_area](https://developers.hubspot.de/docs/reference/cms/hubl/tags/dnd-areas)-Tags enthält.
>
> * Mit dem visuellen Drag-&-Drop-Layout-Editor erstellte Vorlagen können gegen andere Drag-&-Drop-Vorlagen oder Code-Vorlagen mit oder ohne `dnd_area`-Tags ausgetauscht werden.
> * Code-Vorlagen mit *dnd\_area*-Tags können nur gegen andere Code-Vorlagen mit `dnd_area`-Tags ausgetauscht werden.
> * Code-Vorlagen ohne `dnd_area`-Tags können nur gegen andere Code-Vorlagen ohne `dnd_area`-Tags ausgetauscht werden.
>
> Wenn die Seitenvorlage ausgetauscht wird, bleiben alle vorhandenen Inhalte, die den Drag-&-Drop-Bereichen der ersten Vorlage hinzugefügt wurden, erhalten.
## Die Sicht des Entwicklers
Die Entwicklung mit Drag-&-Drop-Bereichen ähnelt der Arbeit mit gängigen CSS-Frameworks und deren Rastern. Zunächst gestaltet der Entwickler die Seite mit Containern, die als [Bereiche](/docs/cms/start-building/building-blocks/sections/sections) bezeichnet werden und Zeilen enthalten. Innerhalb dieser Zeilen befinden sich Module und Spalten. Im Folgenden erfahren Sie mehr über diese [Elemente](#drag-and-drop-area-elements).
Zwar können Sie fast alles fest in die Vorlage programmieren, aber das Ziel bei der Entwicklung mit Drag-&-Drop-Bereichen besteht darin, Standardseiten-Content zu erstellen, der später vom Content-Autor bearbeitet werden kann.
Schauen Sie sich die [CMS Hub-Boilerplate-Vorlagen](https://github.com/HubSpot/cms-theme-boilerplate/tree/main/src/templates) an, um `dnd_area`-Tags bei der Anwendung zu sehen.
## „Drag-&-Drop-Bereich“-Elemente
Wenn Sie eine Seite mit Drag-&-Drop-Bereichen erstellen, enthalten diese die folgenden Elemente:
* [**dnd\_area**](https://developers.hubspot.de/docs/reference/cms/hubl/tags/dnd-areas#dnd-area)**:** das Drag-&-Drop-Element der obersten Ebene, das das Ziehen und Ablegen von Modulen im Content-Editor ermöglicht. Sie können keine Drag-&-Drop-Bereiche verschachteln. Zum Beispiel kann ein `dnd_section`-Element keinen `dnd_area`-Tag enthalten.
* [**dnd\_section**](https://developers.hubspot.de/docs/reference/cms/hubl/tags/dnd-areas#dnd-section)**:** der äußerste Container in einem `dnd_area`-Element. Kann `dnd_row`, `dnd_column` und `dnd_module` enthalten. Sie können ein `dnd_section`-Element nicht in anderen Drag-&-Drop-Elementen verschachteln.
* [**dnd\_column**](https://developers.hubspot.de/docs/reference/cms/hubl/tags/dnd-areas#dnd-column)**:** kann `dnd_row` enthalten. Mehrere Spalten innerhalb eines `dnd_row`-Elements richten den Inhalt der Zeile horizontal aus.
* [dnd\_row](https://developers.hubspot.de/docs/reference/cms/hubl/tags/dnd-areas#dnd-row)**:** kann `dnd_module`- und `dnd_column`-Elemente enthalten.
* [dnd\_module](https://developers.hubspot.de/docs/reference/cms/hubl/tags/dnd-areas#dnd-module)**:** ein Modul-Wrapper, zu dem das Modul-Layout, Stile und Content hinzugefügt werden können.
Im Folgenden erfahren Sie mehr über die einzelnen Tags. Darüber hinaus können Sie den [Leitfaden „Erste Schritte mit Drag-&-Drop-Bereichen“](/docs/cms/start-building/building-blocks/drag-and-drop/tutorial) durchgehen, um einen praktischen Eindruck zu erhalten.
Das nachstehende Diagramm enthält eine weitere Aufschlüsselung der Hierarchie der verschiedenen Drag-&-Drop-Elemente.
Eine Videoanleitung zur Visualisierung von Drag-&-Drop-Bereichen finden Sie im Folgenden:
[https://www.youtube.com/embed/RUs24n8DfzA](https://www.youtube.com/embed/RUs24n8DfzA)
Lesen Sie weiter, um mehr über Drag-&-Drop-Abschnitte, Zeilen, Spalten und Module zu erfahren.
### Abschnitte
Abschnitte sind ein spezieller Typ von Zeilen, die mit dem [`dnd_section`](https://developers.hubspot.de/docs/reference/cms/hubl/tags/dnd-areas#drag-and-drop-section-code-dnd-section-code-)-Tag erstellt werden. Dies ist das einzige Drag-&-Drop-Element, das ein direkter Abkömmling eines `dnd_area`-Elements sein kann. Sie können sich die Abschnitte wie ein Container mit äußerer Umhüllung vorstellen. Sie haben die Möglichkeit, den Inhalt in voller Breite oder mit einer begrenzten maximalen Breite in der Mitte anzuzeigen. Da die Abschnitte Spalten und Module umschließen, ist es einfach, große Teile des Inhalts neu anzuordnen und zu implementieren. Das `dnd_section`-Tag rendert kein HTML-`<section>`-Element.
Nachfolgend sehen Sie einen Screenshot, der zeigt, wie ein Abschnitt im Seiten-Editor angezeigt wird.
Neben dem `dnd_section`-Tag können Sie auch [Abschnittsvorlagen](/docs/cms/start-building/building-blocks/sections/sections#create-reusable-sections) erstellen, bei denen es sich um vordefinierte, wiederverwendbare Abschnitte handelt, auf die Content-Autoren im Seiten-Editor zugreifen können. Sie könnten beispielsweise den im obigen Screenshot gezeigten Abschnitt als Abschnittsvorlage erstellen, damit ein Content-Autor in der Lage ist, ihn bei Bedarf schnell zu den Seiten hinzuzufügen. Abschnittsvorlagen haben einige einzigartige Fähigkeiten, einschließlich der Möglichkeit, sie ähnlich wie eine Standard-hubL-Teilvorlage zu nutzen.
### Spalten
Spalten sind Wrapper für Zeilen und Module und können innerhalb einer Zeile oder eines Abschnitts platziert werden. Sie werden mithilfe des [`dnd_column`](https://developers.hubspot.de/docs/reference/cms/hubl/tags/dnd-areas#drag-and-drop-column-code-dnd-column-code-)-Tags erstellt.
Verwenden Sie mehrere Spalten innerhalb einer Zeile, um Zeilen und die darin enthaltenen Module horizontal zu platzieren.
Spalten sind vertikale Bereiche, die Zeilen enthalten können. Sie können Spalten in verschiedenen Größen erstellen, indem Sie ihre Breite ändern. Die Größe einer Zeile ist 12 „Spalten“ breit, dies bezieht sich auf das CSS Grid. Die Spalten innerhalb einer Zeile können beliebig kleiner als 12 sein, dürfen aber in der Summe nicht mehr als 12 ergeben.
Wenn mehrere Zeilen innerhalb einer Spalte platziert werden, erscheinen die Module innerhalb dieser Zeilen vertikal gestapelt. Da Module selbst Spalten sind, kann ein Modul kein direkter Abkömmling einer Spalte sein, sondern muss sich innerhalb einer Zeile befinden.
Das Erscheinungsbild einer Spalte im Seiten-Editor.
### Zeilen
Zeilen sind Wrapper für Spalten. Zeilen werden in Vorlagen mithilfe des [`dnd_row`](https://developers.hubspot.de/docs/reference/cms/hubl/tags/dnd-areas#drag-and-drop-row-code-dnd-row-code-)-Tags erstellt. Da es sich bei den Modulen um Spalten handelt, können Sie sie direkt innerhalb einer Zeile platzieren. Dadurch werden die Module horizontal nebeneinander angezeigt.
Module können vertikal organisiert werden, indem sie innerhalb von Zeilen platziert werden. Wenn Sie ein Modul über einem anderen platzieren möchten, müssen Sie dieses Modul in einer Zeile platzieren. Sie würden dann ein weiteres Modul in einer Zeile über oder unter dieser ersten Zeile hinzufügen.
Das Erscheinungsbild einer Zeile im Seiten-Editor.
### Module
[Module](/docs/cms/start-building/building-blocks/modules/overview) sind ein grundlegender Bestandteil von CMS Hub und dienen als wiederverwendbare Grundbausteine, mit denen Sie eine Website zusammenstellen und Inhalte anzeigen können. Bei der Erstellung einer Vorlage platzieren Sie Module innerhalb von Drag-&-Drop-Zeilen und -Abschnitten mithilfe des [`dnd_module`](https://developers.hubspot.de/docs/reference/cms/hubl/tags/dnd-areas#drag-and-drop-module-code-dnd-module-code-)-Tags. Module sind auch Spalten. Das heißt, wenn Sie zwei Modul-Tags oder ein Modul und eine Spalte direkt nebeneinander platzieren, werden sie horizontal nebeneinander angezeigt.
Innerhalb eines Moduls können keine Drag-&-Drop-Elemente platziert werden. Module können nicht direkte untergeordnete Elemente von [`dnd_area`](https://developers.hubspot.de/docs/reference/cms/hubl/tags/dnd-areas#drag-and-drop-area-code-dnd-area-code-) sein.
## HTML-Struktur und -Styling
Drag-&-Drop-Bereiche und ihre Elemente haben, wenn sie gerendert werden, Klassennamen für ein 12-Spalten-Raster auf der Grundlage von Bootstrap 2. Um den Einstieg zu erleichtern, können Sie die [\_Layout.css](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/css/objects/_layout.css)-Datei aus der [CMS Hub-Boilerplate](https://github.com/HubSpot/cms-theme-boilerplate/) verwenden. Dies bietet Standardstile für diese Klassennamen.
Sie sind nicht verpflichtet, dieses Stylesheet zu verwenden und können stattdessen Ihre eigenen Styles bereitstellen. Wenn Sie Ihre Website auf der Grundlage der CMS Design-Boilerplate erstellen und Ihr eigenes CSS nutzen möchten, müssen Sie [layout.css vom Aufruf in base.html entfernen](https://github.com/HubSpot/cms-theme-boilerplate/blob/5abaf2a4c45a95dbed1d459f7f0f6407350752ac/src/templates/layouts/base.html#L8). Für Ihr eigenes CSS Grid müssen Sie dieselben Rasterklassennamen verwenden, aber das Styling ist Ihnen überlassen.
Drag-&-Drop-Bereiche erstellen, wenn sie gerendert werden, Divs mit Klassen, die vom Seiten-Editor verwendet werden. Beispiele dafür wären `widget-span` und `widget-type-cell`. Sie sollten diese Klassen nicht direkt anvisieren, da sie vom Seiten-Editor verwendet werden und sich in Zukunft ändern könnten.
Fügen Sie stattdessen in Ihrem [`dnd_area`](https://developers.hubspot.de/docs/reference/cms/hubl/tags/dnd-areas#drag-and-drop-area-code-dnd-area-code-)-HubL einen class-Parameter mit einem Klassennamen hinzu, den Sie verwenden möchten
```html theme={null}
<div class="container-fluid my-custom-class">
<div class="row-fluid-wrapper">
<div class="row-fluid">
<div
class="span12 widget-span widget-type-cell "
style=""
data-widget-type="cell"
data-x="0"
data-w="12"
></div>
<!--end widget-span -->
</div>
</div>
</div>
```
### Editor und Attributstile
Mit Drag-&-Drop-Bereichen können Content-Autoren das Styling der Seite beeinflussen. Sie können zum Beispiel einen Abschnitt mit einem Hintergrund versehen. Entwickler können Standardwerte für diese Einstellungen über Attribute übergeben.
Wenn die Seite tatsächlich gerendert wird, werden die Stile, die auf der Grundlage dieser Einstellungen generiert werden, zum `standard_header_includes`-Element hinzugefügt.
## Migration flexibler Spalten
Wenn Sie Vorlagen, die mit flexiblen Spalten erstellt wurden, auf die Verwendung von Drag-&-Drop-Bereichen umstellen, beachten Sie dabei bitte Folgendes.
Flexible Spalten sind nicht dasselbe wie Drag-&-Drop-Bereiche. Sie können nicht von einer Vorlage, die nur eine flexible Spalte hat, zu einer Vorlage wechseln, die nur einen Drag-&-Drop-Bereich hat. Diese Einschränkung wurde eingeführt, da der Content nicht von der flexiblen Spalte auf den Drag-&-Drop-Bereich übertragen werden konnte. Zur Veranschaulichung, warum das so ist, nehmen wir an, Sie haben Ihre neue Vorlage so aufgebaut, dass Sie eine Seitenleiste und einen Hauptinhaltsbereich haben. Ihre Seitenleiste ist eine flexible Spalte, Ihr Hauptinhalt ist ein Drag-&-Drop-Bereich. Das Tool zum Austauschen würde die flexible Spalte auf die flexible Spalte übertragen.
Erfahren Sie mehr über das [Hinzufügen von Drag-&-Drop-Bereichen zu bestehenden Seiten](https://developers.hubspot.de/docs/guides/cms/improve-older-sites/add-theme-features-to-existing-sites#drag-and-drop-areas)
## Verwandte Ressourcen
* [Hinzufügen von Drag-&-Drop-Bereichen zu bestehenden Websites](https://developers.hubspot.de/docs/guides/cms/improve-older-sites/add-theme-features-to-existing-sites#drag-and-drop-areas)
* [Erstellen eines Drag-&-Drop-Bereichs](/docs/cms/start-building/building-blocks/drag-and-drop/tutorial)
* [Anzeigen von Drag-&-Drop-Bereichen – YouTube](https://www.youtube.com/watch?v=RUs24n8DfzA\&feature=youtu.be)
# Erstellen eines Drag-&-Drop-Bereichs
Source: https://developers.hubspot.de/docs/cms/start-building/building-blocks/drag-and-drop/tutorial
Verwendung von Drag-&-Drop-Bereichen zur Unterstützung von Content-Autoren, damit diese schnell und einfach Layout, Stil und Inhalt ändern können
> **Unterstützte Produkte**
[Drag-&-Drop-Bereiche](https://developers.hubspot.de/docs/guides/cms/content/templates/drag-and-drop/overview) sind Abschnitte einer Vorlage, die als leere Container fungieren und direkt im Seiten-Editor geändert werden können. Durch die Integration von Drag-&-Drop-Bereichen in eine Vorlage können Content-Autoren Module nach Bedarf im Seiten-Editor hinzufügen und verwalten, anstatt sich auf statische Module zu verlassen, die in die Vorlage integriert sind.
Neben der Verwendung von Drag-&-Drop-Bereichen als leere Ablagezonen für Content-Autoren können Sie auch Drag-&-Drop-Bereiche mit verschiedenen Modulen, Layouts und Content vorab als Ausgangspunkt füllen.
In diesem Tutorial lernen Sie, wie Sie einen einfachen Drag-&-Drop-Bereich einrichten. Weitere Ressourcen für Entwickler zu Drag-&-Drop-Bereichen finden Sie in der [Boilerplate](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/home.html) für Best Practices zur Implementierung sowie in der [Referenzdokumentation für HubL-Tags für Drag-&-Drop-Bereiche](/docs/cms/reference/hubl/tags/dnd-areas).
> [!WARNING]
>
> **Hinweis**: Ein Content-Autor kann die Vorlage einer Seite gegen eine andere Vorlage desselben Typs austauschen, je nachdem, ob sie [dnd\_area](/docs/cms/reference/hubl/tags/dnd-areas)-Tags enthält.
>
> * Mit dem visuellen Layout-Editor erstellte Drag-&-Drop-Vorlagen können gegen andere Drag-&-Drop-Vorlagen oder Code-Vorlagen mit oder ohne *dnd\_area*-Tags ausgetauscht werden.
> * Code-Vorlagen mit *dnd\_area*-Tags können nur gegen andere Code-Vorlagen mit *dnd\_area*-Tags ausgetauscht werden.
> * Code-Vorlagen ohne *dnd\_area*-Tags können nur gegen andere Code-Vorlagen ohne *dnd\_area*-Tags ausgetauscht werden.
>
> Wenn die Seitenvorlage ausgetauscht wird, bleiben alle vorhandenen Inhalte, die den Drag-&-Drop-Bereichen der ersten Vorlage hinzugefügt wurden, erhalten.
**1. Eine neue HTML-Vorlage erstellen**
Erstellen Sie eine neue HTML-Vorlage, die den HubL- und HTML-Code enthält, aus dem Ihr Drag-&-Drop-Bereich dann besteht.
> [!NOTE]
>
> Drag-&-Drop-Bereiche basieren auf einem 12-spaltigen, responsiven Raster. Drag-&-Drop-Tags rendern Markup mit Klassennamen, die Spalten und Zeilen bezeichnen. Sie sind für das Hinzufügen eines Stylesheets verantwortlich, das auf diese Klassennamen abzielt. Ein Beispiel für Layout-Stile, die Sie implementieren können, finden Sie in der [CMS-Boilerplate von HubSpot](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/css/objects/_layout.css). Ihr Stylesheet kann mithilfe von [`{{ require_css() }}`](/docs/cms/reference/hubl/tags/standard-tags#require-css) zur Vorlage hinzugefügt werden.
**2. Einen Drag-&-Drop-Bereich erstellen**
Ein `dnd_area` ist der Container, der einen Teil der Webseite in Bezug auf Struktur, Design und Inhalt bearbeitbar macht. Der Text eines `dnd_area`-Tags liefert den Standardinhalt für den Drag-&-Drop-Bereich.
Dieses Tag allein erzeugt eine Ablagezone, in die Content-Autoren im Content-Editor Module ziehen können.
```hubl theme={null}
{% dnd_area "body_dnd_area" %}
<!-- generates an empty drag and drop area drop-section -->
{% end_dnd_area %}
```
**3. Einen Abschnitt mit einem Modul erstellen**
Ein `dnd_section` ist eine Zeile der obersten Ebene und kann nur ein direktes untergeordnetes Element eines `dnd_area` sein. Abschnitte unterstützen eine Reihe von Parametern, die die Standardwerte für die stilistischen Steuerelemente bestimmen, die Content-Autoren für Abschnitte in den Content-Editoren haben.
Als Beispiel wird mit dem folgenden Code ein Abschnitt mit einem Hintergrundbild (`background_image`) erstellt. Dieser Bereich wird durch einen `vertical-alignment`-Parameter zentriert und hat eine maximale Breite von `1000px` für untergeordneten Content. Eine vollständige Liste der unterstützten Parameter für die Drag-&-Drop-HubL-Tags finden Sie in der [Referenzdokumentation für HubL-Tags für Drag-&-Drop-Bereiche](/docs/cms/reference/hubl/tags/dnd-areas).
Um den Abschnitt mit Content vorab zu füllen, enthält der Code auch ein `dnd_module`-Tag, um ein Modul einzuschließen, indem auf dessen Pfad verwiesen wird. In diesem Beispiel ruft das `dnd_module` das Standard-Rich-Text Modul von HubSpot ab, wie durch den `path`-Parameter festgelegt. Ein Standardwert für das Rich-Text-Modul wird mit dem `module_attribute`-Tag angegeben.
```hubl theme={null}
{% dnd_area "body_dnd_area" %}
{% dnd_section
background_image = {
'backgroundPosition': 'MIDDLE_CENTER',
'backgroundSize': 'cover',
'imageUrl': 'https://www.dragndrop.com/bg-image.jpg'
},
max_width=1000,
vertical_alignment='MIDDLE'
%}
{% dnd_module path='@hubspot/rich_text' %}
{% module_attribute "html"%}
This is your main headline.
Use this space to tell everyone about what you have to offer.
{% end_module_attribute %}
{% end_dnd_module %}
{% end_dnd_section %}
{% end_dnd_area %}
```
Dies führt dazu, dass die Drag-&-Drop-Fläche ein Modul enthält, das Content-Autoren im Content-Editor bearbeiten können. Beachten Sie, wie sich das Festlegen von `max_width` in `dnd_section` auf den Content auswirkt.
**4. Mehrere Module einbeziehen**
Um mehr als ein Modul einzubinden, verwenden Sie mehrere `dnd_module`-Tags. Durch Festlegen der `offset`- und `width`-Parameter, die auf einem 12-Spalten-Raster beruhen, können Sie ein Bildmodul neben dem Rich-Text-Modul platzieren, wie unten dargestellt.
```hubl theme={null}
{% dnd_area "body_dnd_area" %}
{% dnd_section
background_image={
'backgroundPosition': 'MIDDLE_CENTER',
'backgroundSize': 'cover',
'imageUrl': 'https://www.dragndrop.com/bg-image.jpg'
},
max_width=1000,
vertical_alignment='MIDDLE'
%}
{% dnd_module path='@hubspot/rich_text', width=8, offset=0, label="Rich Text" %}
{% module_attribute "html"%}
<h1>This is your main headline.</h1>
Use this space to tell everyone about what you have to offer.
{% end_module_attribute %}
{% end_dnd_module %}
{% dnd_module path='@hubspot/linked_image',
width=4,
offset=8,
img={
"src": "https://www.dragndrop.com/placeholder-image.jpg",
"alt": "Stock placeholder image"
}
%}
{% end_dnd_module %}
{% end_dnd_section %}
{% end_dnd_area %}
```
Jetzt hat die Seite ein bearbeitbares Bildmodul sowie ein Drag-Handle, mit dem Content-Autoren die Breite und den Versatz der Module ändern können. Beachten Sie, wie durch Festlegen von `vertical_alignment` in `dnd_section` der Inhalt vertikal zentriert wird.
**5. Spalten und Zeilen einbeziehen**
Um den Drag-&-Drop-Bereich komplexer zu gestalten, können Sie Zeilen und Spalten mithilfe der `dnd_row`- und `dnd_column`-Tags einbinden. Zeilen und Spalten verhalten sich ähnlich wie Abschnitte im Content-Editor, in dem Content-Autoren sie verschieben, klonen, löschen oder formatieren können.
```hubl theme={null}
{% dnd_area "body_dnd_area" %}
{% dnd_section
background_image={
'backgroundPosition': 'MIDDLE_CENTER',
'backgroundSize': 'cover',
'imageUrl': 'https://www.dragndrop.com/bg-image.jpg'
},
max_width=1000,
vertical_alignment='MIDDLE'
%}
{% dnd_module path='@hubspot/linked_image',
width=6,
img={
"src": "https://www.dragndrop.com/placeholder-image.jpg",
"alt": "Stock placeholder image"
}
%}
{% end_dnd_module %}
{% dnd_column width=6, offset=6 %}
{% dnd_row
padding={
'bottom': 15
}
%}
{% dnd_module path='@hubspot/rich_text' %}
{% module_attribute "html"%}
<h1>This is your main headline.</h1>
Use this space to tell everyone about what you have to offer.
{% end_module_attribute %}
{% end_dnd_module %}
{% end_dnd_row %}
{% dnd_row %}
{% dnd_module path='@hubspot/form' %}
{% end_dnd_module %}
{% end_dnd_row %}
{% end_dnd_column %}
{% end_dnd_section %}
{% end_dnd_area %}
```
Jetzt haben Content-Autoren zusätzlich zu den Modulen und Abschnitten weitere Stil- und Layoutoptionen für bestimmte Zeilen und Spalten.
**6. Generische Stile für Drag-&-Drop-Komponenten festlegen**
Die verschiedenen Komponenten von Drag-&-Drop-Bereichen, Abschnitten, Spalten, Zeilen und Modulen haben alle Klassen, die mit CSS formatiert werden können. Die bearbeitbaren Stile und Optionen für diese Komponenten können mit CSS und nicht mit HubL festgelegt werden. Zum Beispiel kann die Standardauffüllung in `dnd_sections` mit CSS festgelegt werden:
```css theme={null}
.dnd-section {
padding: 80px 20px;
}
```
Die generischen CSS-Selektoren für die Komponenten von Drag-&-Drop-Bereichen sind `.dnd-section`, `.dnd-column`, `.dnd-row` und `.dnd-module`. Abgesehen von diesen `dnd`-Präfix-Klassen basieren die tatsächlichen Rasterklassennamen im Markup auf Bootstrap-2-Namen. Das bedeutet nicht, dass Sie Bootstrap 2 mit Drag-&-Drop-Bereichen verwenden müssen. Wenn Sie einen `dnd_area` zu Ihrer Seite hinzufügen, sind Sie für die Angabe der Stile verantwortlich, mit denen das Raster funktioniert. Ein Beispiel für Layout-Stile, die Sie implementieren können, finden Sie in der [CMS-Boilerplate von HubSpot](https://github.com/HubSpot/cms-theme-boilerplate/tree/main/src/css/objects). Ihr Stylesheet kann mithilfe von [`{{ require_css() }}`](/docs/cms/reference/hubl/tags/standard-tags#require-css) zur Vorlage hinzugefügt werden.
## Verwandte Tutorials
* [Erste Schritte mit Designs](/docs/cms/start-building/building-blocks/themes/getting-started)
* [Erste Schritte mit benutzerdefinierten Modulen](/docs/cms/start-building/building-blocks/modules/overview)
* [Hinzufügen von Designfunktionen zu einer vorhandenen Website](/docs/cms/best-practices/improve-existing-sites/add-theme-features-to-existing-sites)
# Alias-Zuordnung
Source: https://developers.hubspot.de/docs/cms/start-building/building-blocks/fields/alias-mapping
# Vererbung von Markeneinstellungen
Source: https://developers.hubspot.de/docs/cms/start-building/building-blocks/fields/brand-and-settings-inheritance
Erfahren Sie, wie Sie Markeneinstellungen wie Logos und Markenfarben innerhalb eines Designs oder in HubL/HTML- und CSS-Dateien verwenden können.
Über die [Markeneinstellungen](https://knowledge.hubspot.com/settings/customize-branding-for-your-hubspot-content#customize-your-company-logo-and-colors) können Benutzer festlegen, dass die Markenfarben, -Logos und -Favicons des Unternehmens überall in HubSpot verwendet werden. Dadurch können Sie mit Token in der `fields.json`-Datei eines Designs und in HTML/HubL- und CSS-Dateien auf diese Markeneinstellungen zugreifen. Sie können auch auf Markenfarben innerhalb der `fields.json`-Datei eines Moduls zugreifen.
Nach dem Hinzufügen dieser Token in einer `fields.json`-Datei können Content-Autoren ihre Werte im Editor für Designeinstellungen bearbeiten. Wenn Sie diese Token in einem HTML-, HubL- oder CSS-Code hinzufügen, werden die Werte fest kodiert und können im Seiten-Editor von Content-Autoren nicht geändert werden.
Im Folgenden erfahren Sie mehr über die verfügbaren Variablen für Markeneinstellungen sowie Beispiele für die Umsetzung.
## Variablen für Markeneinstellungen
Im Folgenden finden Sie eine Liste der Optionen, auf die Sie in den Markeneinstellungen innerhalb des Werts des `property_value_paths`-Objekts oder in HTML/HubL- und CSS-Dateien zugreifen können.
### Farben
Auf Markenfarben kann sowohl innerhalb der [fields.json](#fields-json-color)-Datei eines Designs oder Moduls als auch innerhalb von HTML/HubL- und CSS-Dateien mithilfe der folgenden HubL-Token zugegriffen werden:
* **Primär:**
* `{{brand_settings.primaryColor}}`
* `{{brand_settings.colors[0]}}`
* **Sekundär:** `{{brand_settings.secondaryColor}}`
* **Akzentfarben:**
* `{{brand_settings.accentColor1}}`
* `{{brand_settings.accentColor2}}`
* `{{brand_settings.accentColor3}}`
* **Weitere Farben:**
* `{{brand_settings.colors[1]}}`
* `{{brand_settings.colors[2]}}`
* `{{brand_settings.colors[3]}}`
Um direkt auf den Hex-Code einer Farbe zuzugreifen, berücksichtigen Sie einen `hex`-Filter im Token. Zum Beispiel: `{{brand_settings.primaryColor.hex}}`.
Um die Farben von Markeneinstellungen in die `fields.json`-Datei eines Designs oder Moduls aufzunehmen, verwenden Sie das folgende Format:
```json theme={null}
//Example of using the primary color in within a theme's
// field.json file
{
"name": "branding_color",
"label": "branding_color",
"type": "color",
"default": {
"color": "#26ff55",
"opacity": 60
},
"inherited_value": {
"property_value_paths": {
"color": "brand_settings.primaryColor"
}
}
}
```
> [!WARNING]
>
> Es kann vorkommen, dass Acounts möglicherweise keine zusätzlichen Farben in ihren Markeneinstellungen konfiguriert haben. Wenn Ihr Code auf eine vererbte Farbe verweist, die in den Markeneinstellungen nicht vorhanden ist, wird die folgende Fallback-Logik verwendet:
>
> * `secondaryColor` greift auf die erste zusätzliche Farbe (`colors[1]`) zurück.
> * `accentColor1` greift auf die zweite zusätzliche Farbe (`colors[2]`) zurück.
> * `accentColor2` greift auf die dritte zusätzliche Farbe (`colors[3]`) zurück.
> * `accentColor3` greift auf die vierte zusätzliche Farbe (`colors[4]`) zurück.
> * Zusätzliche Farben (z. B. `colors[3]`) greifen auf den `default`-Wert zurück. Wenn keine Standardfarbe für die Eigenschaft festgelegt wurde, wird `primaryColor` verwendet.
### Logos
Auf Markenlogos kann in der `fields.json`-Datei in einem Modul sowie in HTML/HubL- und CSS-Dateien zugegriffen werden.
Sie können die folgenden Token verwenden, um auf das primäre Logo zuzugreifen, das in den Markeneinstellungen festgelegt wurde:
* `{{brand_settings.primaryLogo}}`
* `{{brand_settings.logos[0]}}`
Alle zusätzlichen Logos können mithilfe von `{{brand_settings.logos[1-19]}}` aufgerufen werden.
Darüber hinaus können Sie auf die folgenden Logo-Attribute zugreifen:
* **Logo-URL:** `{{brand_settings.primaryLogo.link}}`
* **Logo-ALT-Text:** `{{brand_settings.primaryLogo.alt}}`
* **Logo-Höhe:** `{{brand_settings.primaryLogo.height}}`
* **Logo-Breite:** `{{brand_settings.primaryLogo.width}}`
* **Link zum Bild des Logos:** `{{brand_settings.primaryLogo.src}}`
### Favicons
Auf Marken-Favicons kann nur innerhalb von HTML/HubL- und CSS-Dateien zugegriffen werden.
Sie können die folgenden Token verwenden, um auf das primäre Logo zuzugreifen, das in den Markeneinstellungen festgelegt wurde:
* `{{brand_settings.primaryFavicon}}`
* `{{brand_settings.favicons[0]}}`
Alle zusätzlichen Favicons können mithilfe von `{{brand_settings.favicons[1-19]}}` aufgerufen werden.
Sie können direkt auf die URL des Logos zugreifen, indem Sie einen `src`-Filter berücksichtigen. Zum Beispiel: `{{brand_settings.primaryFavicon.src}}`.
# Benutzerdefinierte Schriftarten zu einem Design hinzufügen
Source: https://developers.hubspot.de/docs/cms/start-building/building-blocks/fields/custom-fonts
# oEmbed
Source: https://developers.hubspot.de/docs/cms/start-building/building-blocks/fields/oembed
# Mithilfe von JavaScript Modul- und Design-Felder schreiben
Source: https://developers.hubspot.de/docs/cms/start-building/building-blocks/fields/write-fields-using-javascript
# Globaler Content
Source: https://developers.hubspot.de/docs/cms/start-building/building-blocks/global-content
Globaler Content ist Inhalt, der in allen Vorlagen wiederverwendet werden kann, um konsistente Informationen wie Header und Footer, Seitenleisten, Logos oder andere Komponenten zu erstellen.
Globaler Content ist Inhalt, der über Teile einer Website verteilt ist. Häufige Beispiele sind Website-Header, -Footer und Seitenleisten. Als Entwickler legen Sie fest, welche Komponenten global sein sollen, indem sie globale Teilvorlagen verwenden oder Module global machen. HubSpot stellt Content-Autoren eine andere Bearbeitungsumgebung bereit, die es ihnen erleichtert, den globalen Content zu bearbeiten und die Änderungen vor der Veröffentlichung seitenübergreifend in der Vorschau anzuzeigen. Um mehr darüber zu erfahren, wie Sie Ihren globalen Content bearbeiten können, lesen Sie bitte den Artikel über die [Verwendung von globalem Content in mehreren Vorlagen](https://knowledge.hubspot.com/design-manager/use-global-content-across-multiple-templates) in der HubSpot-Wissensdatenbank.
## Überblick
Globaler Content wird am besten zur Anzeige der gleichen Informationen auf mehreren Seiten verwendet. Zum Beispiel den Header und Footer Ihrer Website, z. B. den Header oben auf dieser Seite.
Im Folgenden finden Sie einige weitere Beispiele für Bereiche, in denen Sie globalen Content verwenden können:
* Sekundäre Navigation für verschiedene Abschnitte Ihrer Website
* Copyright-Footer (oder Unterfußzeilen)
* Seitenleisten für Blogbeiträge (zur Anzeige der letzten Beiträge, Autorenlisten und mehr)
> [!WARNING]
>
> Da globaler Content an mehreren Stellen auf einer Website verwendet wird, ist es umso wichtiger, dass Sie [Ihre globalen Teilvorlagen und Module barrierefrei gestalten und entwickeln](/docs/cms/best-practices/improve-existing-sites/accessibility).
### Globale Teilvorlagen vs. Globale Module
Als Entwickler können Sie globale Teilvorlagen und globale Module erstellen, mit einigen wesentlichen Unterschieden zwischen ihnen:
* Globale Teilvorlagen sind eine Art von Vorlage, die mit HTML & HubL erstellt wurde und auf Ihrer gesamten Website wiederverwendet werden kann. Die gebräuchlichsten Arten von globalen Teilverlagen sind Header, Seitenleisten- und Footer von Websites.
* Globale Module sind Module, die aus einzelnen oder mehreren Inhalten bestehen, die auf mehreren Seiten Ihrer Website verwendet werden können. Einige häufige Arten von globalen Modulen können Elemente wie Blog-Abonnementformulare, sekundäre Navigationselemente und Calls-to-Action sein.
Sie sollten es vermeiden, globale Module in globale Teilvorlagen aufzunehmen, da dies zu einem negativen Content-Bearbeitungserlebnis führen kann.
> [!NOTE]
>
> Alle Module und Felder in Ihren globalen Teilvorlagen und globalen Modulen lassen sich problemlos im [Editor für globalen Content](https://knowledge.hubspot.com/design-manager/use-global-content-across-multiple-templates) bearbeiten.
## Globale Teilvorlagen
### Eine globale Teilvorlage erstellen
Eine globale Teilvorlage ist ein Typ von Vorlage, den Sie lokal über das HubSpot CLI erstellen können, indem Sie den [create-Befehl](https://developers.hubspot.de/docs/guides/cms/tools/local-development-cli#create) wie unten gezeigt verwenden.
```shell theme={null}
hs create template <partial-file-name>
```
Wenn Sie aufgefordert werden, einen Typ von Vorlage auszuwählen, wählen Sie `global partial` aus.
Dadurch wird Ihre Vorlage im gewünschten Verzeichnis erstellt und die HTML-Datei enthält die folgenden Annotationen zur Vorlage.
```html theme={null}
<!--
templateType: global_partial
label: Page Header
-->
```
Ein Beispiel für eine Teilvorlage mit globalen Content bietet [unsere Boilerplate bei GitHub.](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/partials/header.html)
### Drag-&-Drop-Bereiche zu globalen Teilvon hinzufügen
Sie können Drag-&-Drop-Funktionen für Inhalte in Ihren Teilvorlage mit globalen Content aktivieren, indem Sie `dnd_area`-Tags hinzufügen, ähnlich wie bei der Aktivierung in Seitenvorlagen. Weitere Informationen finden Sie in der [Dokumentation zum Drag-&-Drop-Bereich](/docs/cms/reference/hubl/tags/dnd-areas).
### Eine Teilvorlage in Ihrer vorhandenen Vorlage berücksichtigen
Um eine Teilvorlage mit globalen Content in eine Ihrer bestehenden Vorlagen einzufügen, verwenden Sie das HubL-Tag `global_partial` und verweisen dabei auf den Pfad zu Ihrer Teilvorlage. Nachfolgend finden Sie ein Beispiel aus [der CMS-Boilerplate](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/layouts/base.html#L21), das dieses Tag verwendet.
```hubl theme={null}
{% global_partial path="../partials/header.html" %}
```
Wenn globale Teilvorlagen ausgegeben werden, enthalten sie ein `<div>`-Wrapping um die globale Teilvorlage. Dies wird vom Seiten-Editor verwendet, um zu erkennen, dass es sich um eine globale Teilvorlage handelt.
```html theme={null}
<div
data-global-resource-path="cms-theme-boilerplate/templates/partials/header.html"
>
<!-- Your header.html code is output here -->
</div>
```
> [!WARNING]
>
> ### Bitte beachten:
>
> Verwenden Sie `global_partial` nicht innerhalb des `<head>` einer Vorlage. Dies würde zu ungültigem HTML führen.
>
> In den meisten Situationen, in denen Sie eine globale Teilvorlage im Header verwenden sollten, ist es möglicherweise sinnvoller, stattdessen ein globales Modul mit einem [`{%require_head%}`](/docs/cms/reference/hubl/tags/standard-tags#require-head) zu verwenden, um benutzerdefinierten Code in den Header einzufügen und trotzdem Modulfelder bereitzustellen.
## Globale Module
Sie können globale Module wie jedes andere Modul mithilfe des CLI erstellen, indem Sie den `hs create`-Befehl wie unten gezeigt ausführen.
```shell theme={null}
hs create module <module_name>
```
Ein globales Modul unterscheidet sich durch das `global`-Flag in der `meta.json`-Datei des Moduls.
```json theme={null}
// meta.json file
{
"css_assets": [],
"external_js": [],
"global": true,
"help_text": "",
"host_template_types": ["PAGE"],
"js_assets": [],
"other_assets": [],
"smart_type": "NOT_SMART",
"tags": [],
"is_available_for_new_content": false
}
```
Sie können auch [globale Module in HubSpot mithilfe des Design-Managers erstellen](https://knowledge.hubspot.com/design-manager/create-and-edit-modules).
Erfahren Sie mehr über das Arbeiten mit Modulen in den folgenden verwandten Ressourcen:
* [Überblick über Module](https://developers.hubspot.de/docs/guides/cms/content/modules/overview)
* [Standardmodule von HubSpot](/docs/cms/reference/modules/default-modules)
* [Konfigurieren von Modulen](/docs/cms/reference/modules/configuration)
* [Verwenden von Modulen in Vorlagen](/docs/cms/reference/modules/using-modules-in-templates)
# Inhaltssuche
Source: https://developers.hubspot.de/docs/cms/start-building/building-blocks/modules/content-search
Nutzung der nativen Suchfunktionalität innerhalb von CMS Hub, Inhaltssuche. Das CMS von HubSpot verfügt über eine integrierte Suchfunktion, die es Ihren Besuchern ermöglicht, die gesuchten Inhalte leicht zu finden.
HubSpot CMS verfügt über eine integrierte Suchfunktion, die es Ihren Besuchern ermöglicht, die gesuchten Inhalte leicht zu finden. Ihr gesamter HubSpot-Inhalt wird automatisch in der HubSpot-eigenen Suchmaschine indexiert, sodass Sie kein Drittanbieter-Suchtool für Ihre Website einrichten müssen.
## Suchen nach Inhalt
Die Suchmaschine ist über die [Website-Suche-API](/docs/api-reference/cms-site-search-v3/guide) zugänglich. Diese API unterstützt zahlreiche Filteroptionen, die es Ihnen ermöglichen, eine sehr individuelle und leistungsstarke Suche auf Ihrer Website zu erstellen. Wenn Sie z. B. eine Suche in Ihren Blog integrieren möchten, können Sie nach `type=BLOG_POST` suchen, damit nur Blog-Beiträge zurückgegeben werden. Wenn Sie die Suche in die spanische Version Ihrer Website integrieren möchten, könnten Sie `language=es` abfragen, um nur spanische Seiten zurückzugeben.
Die API gibt JSON zurück, der mit JavaScript geparst werden kann, um die Ergebnisse auf Ihrer Website anzuzeigen. Bei allen Inhaltstypen werden die Domain, der Titel, die URL und die Sprache der Seite zurückgegeben. Die zurückgegebene Beschreibung ist eine Textprobe aus dem Inhalt, die dem Suchbegriff am besten entspricht. Ein `<span class="hs-search-highlight hs-highlight-html">`-Element umschließt perfekt passenden Text und ermöglicht es Ihnen, passenden Text mit CSS hervorzuheben.
Je nach Art des gesuchten Inhalts liefern die Ergebnisse leicht unterschiedliche Informationen, sodass Sie die Ergebnisse für einzelne Inhaltstypen unterschiedlich anzeigen können. Bei Blog-Beiträgen werden beispielsweise Informationen darüber zurückgegeben, welche Tags der Beitrag hat, wer der Autor ist und wann er veröffentlicht wurde.
```json theme={null}
// json
{
"total": 850,
"offset": 0,
"limit": 10,
"results": [
{
"id": 3761238962,
"score": 0.30858153,
"type": "SITE_PAGE",
"domain": "designers.hubspot.com",
"url": "https://developers.hubspot.com/docs/cms/search",
"language": "en",
"title": "Content Search",
"description": "Using HubSpot’s native search engine, content search, to implement <span class="hs-search-highlight hs-highlight-html">search on your website</span>"
},
{
"id": 3254581958,
"score": 0.30858153,
"type": "BLOG_POST",
"domain": "designers.hubspot.com",
"url": "https://designers.hubspot.com/blog/getting-started-with-local-development",
"featuredImageUrl":"https://designers.hubspot.com/hubfs/local-development.jpg"
"title": "Getting Started with Local Development",
"description":"The beta Local Development Tooling connects your local workflow to HubSpot, allowing you to utilize <span class="hs-search-highlight hs-highlight-html">version control</span>, your favorite text editor and various web development technologies when developing on the HubSpot CMS."
"authorFullName": "William Spiro",
"tags": [
"Website Development",
"Local Development"
],
"publishedDate": 1447938000000
}
}
```
## Implementieren der Suche auf Ihrer Website
Es gibt zwei Standardmodule, die Sie zur einfachen Implementierung der Suche auf Ihrer Website verwenden können und die die [Website-Suche-API](/docs/api-reference/cms-site-search-v3/guide) nutzen: `search_input` und `search_results`.
### Website-Sucheingabe
Ein Eingabefeld, in das die Besucher Suchbegriffe eingeben können. Dieses Modul kann sich an jeder Stelle auf Ihrer Website befinden. Dieses Modul kann folgendermaßen in eine Vorlage mit `{% module "search_input" path="@hubspot/search_input" %}` aufgenommen werden.
```hubl theme={null}
{% module "search_input" path="@hubspot/search_input" %}
```
### Website-Suchergebnisse
Gibt eine Auflistung von Inhalten auf der Grundlage des Suchbegriffs zurück. Dieses Modul kann sich an jeder Stelle auf Ihrer Website befinden. Dieses Modul kann folgendermaßen in eine Vorlage aufgenommen werden:
```hubl theme={null}
{% module "search_results" path="@hubspot/search_results" %}
```
Wenn die Funktionalität dieser Module nicht Ihren Vorstellungen von der Suche auf Ihrer Website entspricht, können Sie Ihre eigenen Suchmodule oder -funktionen erstellen. Die Standard-Suchmodule sind so konzipiert, dass sie je nach Ihren Suchanforderungen erweitert werden können. Sie können diese Module im Design-Manager anzeigen und klonen, indem Sie im Finder nach ihren Namen suchen, oder Sie können sie mit dem [CMS-CLI](https://developers.hubspot.de/docs/guides/cms/tools/local-development-cli) in Ihre lokale Umgebung abrufen, indem Sie `hs fetch @hubspot/search_input.module` oder `hs fetch @hubspot/search_results.module` ausführen.
## Suchergebnisvorlage
Jede Domain hat standardmäßig ihre eigene Suchergebnisseite. Die Vorlage und der Pfad für diese Seite werden unter **„Einstellungen“ > „Website“ > „Seiten“** auf der [Registerkarte „Systemseiten“](https://app.hubspot.com/l/settings/website/pages/all-domains/system-pages) für bestimmte Domains festgelegt. Die [Suchergebnissevorlage der CMS Theme Boilerplate](https://github.com/HubSpot/cms-theme-boilerplate/blob/master/src/templates/system/search-results.html) ist ein Beispiel dafür. Die für die Suchergebnisseite festgelegte Domain wird automatisch mit den Standardsuchmodulen verknüpft. Sie können jedoch die [Website-Suche-API](/docs/api-reference/cms-site-search-v3/guide) verwenden, um Ihre Suchergebnisse so zu erstellen, wie Sie es auf allen Seiten Ihrer Website wünschen.
## Wie wird festgelegt, was bei der Suche Vorrang hat?
Die Reihenfolge der Suchergebnisse wird durch mehrere gewichtete Vergleiche zwischen den Seiteninhalten und dem Suchbegriff des Besuchers festgelegt. Die Seiteninhalte werden in Vergleichsfelder mit unterschiedlichen Gewichtungen getrennt, je nachdem, wo der Inhalt im HTML-Code Ihrer Seiten verwendet wird. Vergleichsfelder werden nach Gewichtung gruppiert:
1. HTML-Titel
2. Meta-Beschreibung
3. H1 HTML-Elemente
4. H2 HTML-Elemente
5. H3 HTML-Elemente
6. Andere HTML-Elemente
Bitte beachten Sie, dass sich diese Liste ändern kann.
Wenn Sie unserem Indexierer mitteilen möchten, dass er bestimmte Elemente auf einer Seite gezielt verstärken soll, können Sie den Inhalt in eine `hs-search-keyword`-Klasse einpacken.
## Indexierung während der Entwicklung steuern
Bei der Entwicklung einer neuen Website ist es nützlich, die Website-Suche zu testen, ohne sich Gedanken darüber zu machen, ob die Website von Suchmaschinen wie Google indexiert wird.
In Ihrer [`robots.txt`](https://knowledge.hubspot.com/cos-general/customize-your-robots-txt-file) können Sie HubSpot anweisen, alles zu crawlen, während Sie andere Bots blockieren.
```shell theme={null}
# Block all bots
User-agent: *
Disallow: /
# Allow HubSpot Site Search Indexing
User-agent: HubSpotContentSearchBot
Allow: /
```
> [!WARNING]
>
> Wenn eine Ihrer Seiten ein Meta-Tag hat, das keinen Index angibt, wird die Seite trotzdem nicht indexiert, auch wenn dies in der `robots.txt` erlaubt ist.
>
> Denken Sie auch daran, Ihre `robots.txt` vor dem Start zu überprüfen, um sicherzustellen, dass alles so indexiert wird, wie Sie es wünschen.
## Standard-Indexierungsverhalten
Da das CMS die Absicht bestimmter Seitentypen kennt, ist die Inhaltssuche in der Lage, die Indexierung auf sichere Weise einschränken, um die Indexierung von Seiten mit bestimmten Inhaltstypen zu ermöglichen. Beispiele für Seiten mit bestimmten Inhaltstypen:
* Website-Seiten
* Landingpages
* Wissensdatenbankartikel
* Blog-Beiträge
**Systemseiten und passwortgeschützte Seiten werden nicht indexiert.** Seiten mit eingeschränkter CMS-Mitgliedschaft werden in der Hubspot-Inhaltssuche nur für Benutzer angezeigt, die angemeldet sind und Zugriff auf diese Seiten haben.
## Wie kann ich ausschließen, dass Seiten in den Suchergebnissen angezeigt werden?
Wenn Sie eine Seite für die Indexierung durch Suchmaschinen über Ihre Website [`robots.txt`](https://knowledge.hubspot.com/cos-general/customize-your-robots-txt-file)-Datei oder über `meta`-Tags blockieren, wird sie nicht für die Website-Suche indexiert.
Fügen Sie in Ihrer `robots.txt` ein `disallow` hinzu.
```shell theme={null}
# Block all bots
User-agent: *
Disallow: /path-to-page
# Block just HubSpot Site Search Indexing
User-agent: HubSpotContentSearchBot
Disallow: /path-to-page
```
Sie können auch ein `NOINDEX, NOFOLLOW`-Meta-Tag im `<head>` auf Seiten- oder Vorlagenebene hinzufügen.
```html theme={null}
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW" />
```
> [!TIP]
>
> Sie müssen Robots nicht sowohl mit `robots.txt` als auch mit dem Meta-Tag blockieren. Dies kann später zu Verwirrung führen, wenn Sie die Indexierung einer Seite zulassen möchten.
## Abschnitte einer Seite von der Indexierung in der Suche ausschließen
Manchmal gibt es Bereiche einer Seite, die nicht in den Suchergebnissen erscheinen sollten. Dies können Inhalte aus einem Header, einem Footer, einer Seitenleiste usw. sein. Wenn dies der Fall ist, können Sie die `hs-search-hidden`-Klasse zu Ihrem HTML-Code für diese Bereiche hinzufügen, damit die Suche den Inhalt darin ignoriert.
# E-Mail-Standardmodule
Source: https://developers.hubspot.de/docs/cms/start-building/building-blocks/modules/default-email-modules
# HubSpot-Formulare
Source: https://developers.hubspot.de/docs/cms/start-building/building-blocks/modules/forms
Erfahren Sie, wie Sie mithilfe von Modulen, HubL oder dem Einbettungscode Formulare zu Ihrer HubSpot-Website oder zu externen Seiten hinzufügen. Erfahren Sie dann, wie Sie sie mit Stilen formatieren können.
Verwenden Sie HubSpot-Formulare, um Informationen von Website-Benutzern zu erfassen, auf die Sie dann in HubSpot zugreifen können. Sie können Links zu Formularen direkt mit Benutzern teilen, [Formulardaten über die API übermitteln](https://developers.hubspot.de/docs/guides/api/marketing/forms) und sie mithilfe des CMS auf Ihren Website-Seiten einbetten.
Formulare sind ein zentraler Bestandteil von HubSpot und können in einem HubSpot-Account jeder Abonnementstufe erstellt werden. Formulare sind nicht nur für Kunden-Konversionen wichtig, sondern auch, weil Formulardaten in anderen HubSpot-Tools und -Elementen wie Smart-Content, Listen, Workflows, Content-Personalisierung und mehr verwendet werden können.
Nach dem [Erstellen eines HubSpot-Formulars](https://knowledge.hubspot.com/de/forms/create-forms) können Sie es zu Ihren Vorlagen und Seiten hinzufügen. Je nach Anwendungsfall gibt es mehrere Möglichkeiten, ein Formular zu einer Vorlage hinzuzufügen:
* [Mithilfe des Standardformularmoduls](#the-default-form-module)
* [Durch Hinzufügen eines Formularfelds zu einem benutzerdefinierten Modul](#form-fields-in-custom-modules)[](#using-the-form-hubl-tag)
* [Durch Einbetten mithilfe des Formular-Einbettungscodes](#using-the-form-embed-code)
## Das Standardformularmodul
Wenn Ihre Vorlage über [Drag-&-Drop-Bereiche](/docs/cms/reference/hubl/tags/dnd-areas) verfügt, können Content-Autoren das [Standardformularmodul](/docs/cms/reference/modules/default-modules#form) über den Seiten-Editor zu einer Seite hinzufügen und dann die Formularoptionen in der linken Seitenleiste konfigurieren.
Um ein Formularmodul direkt in eine Vorlage mit Drag-&-Drop-Bereichen zu codieren, referenzieren Sie es als `dnd_module`.
```hubl theme={null}
{% dnd_area "dnd_area" class='body-container body-container__landing', label='Main section' %}
{% dnd_section vertical_alignment='MIDDLE' %}
{% dnd_column width=6, offset=6 %}
{% dnd_row %}
<!-- Form module tag for use in templates -->
{% dnd_module path='@hubspot/form' %}
{% end_dnd_module %}
{% end_dnd_row %}
{% end_dnd_column %}
{% end_dnd_section %}
{% end_dnd_area %}
```
Um ein Formularmodul zu einer Vorlage außerhalb eines Drag-&-Drop-Bereichs hinzuzufügen, referenzieren Sie es stattdessen als ein Standard-`module`.
```hubl theme={null}
{% module "form"
path="@hubspot/form"
form={
"form_id": "9e633e9f-0634-498e-917c-f01e355e83c6",
"response_type": "redirect",
"message": "Thanks for submitting the form.",
"redirect_id": null,
"redirect_url": "http://www.google.com"
}
%}
```
Bei beiden Implementierungen können Sie dem module-Tag Parameter hinzufügen, um Einstellungen wie das zu verwendende Formular und die Weiterleitungsoptionen festzulegen, wie im obigen Code-Beispiel gezeigt. Weitere Informationen zu den verfügbaren Parametern finden Sie in der [Dokumentation zu Standardmodulen](/docs/cms/reference/modules/default-modules#form).
### Klonen des Standardmoduls
Sie können das Standardmodul nicht nur verwenden, wie es ist, sondern es auch klonen, um es bearbeitbar zu machen, damit Sie es nach Bedarf anpassen können. Sie könnten beispielsweise das Standardformularmodul klonen, ein Farbfeld hinzufügen und dann den HTML-Code des Moduls in ein `<section>`-Tag mit Formatierung einschließen, um die Farbe als Hintergrund hinzuzufügen:
* Gehen Sie im Design-Manager der linken Seitenleiste zum **@hubspot**-Ordner, klicken Sie dann mit der rechten Maustaste auf **form.module** und wählen Sie **Modul klonen** aus.
* Klicken Sie in der rechten Seitenleiste auf **Feld hinzufügen** und wählen Sie dann **Farbe** aus.
* Fügen Sie ein `<section>`-Tag um den HTML-Content herum hinzu und fügen Sie dann Formatierung hinzu, um das Farbfeld zu referenzieren, z. B.:
`<section style="background:{{ module.color_field.color }}">`
## Formularfelder in benutzerdefinierten Modulen
Wenn Sie ein benutzerdefiniertes Modul erstellen, können Sie ein Formular berücksichtigen, indem Sie ein [Formularfeld](/docs/cms/reference/fields/module-theme-fields#form) hinzufügen und dazu das Code-Snippet des Felds zum HTML des Moduls hinzufügen. Sie können beispielsweise ein Anfrageformular für eine Beratung zu einem Modul hinzufügen, das ein Bild eines Produkts und ein beschreibendes Leistungsversprechen enthält.
So fügen Sie einem benutzerdefinierten Modul über den Design-Manager ein Formularfeld hinzu:
* Klicken Sie in der rechten Seitenleiste des Modul-Editors auf **Feld hinzufügen** und wählen Sie dann **Formular** aus.
* Nachdem Sie das Feld hinzugefügt haben, bewegen Sie den Mauszeiger über das Feld in der rechten Seitenleiste, klicken Sie dann auf **Aktionen** und wählen Sie **Snippet kopieren** aus.
* Fügen Sie das Snippet in das HTML-Feld des Moduls ein.
### Formularoptionen im Editor einschränken
Nach dem Hinzufügen zu einer Seite haben Content-Autoren in der Regel die Kontrolle über viele Aspekte des Formulars, einschließlich des zu verwendenden Formulars und der Formularfelder selbst. Sie können jedoch die im Seiten-Editor vorgegebenen Steuerungsmöglichkeiten einschränken, indem Sie die `fields.json`-Datei des Formularmoduls [lokal](/docs/developer-tooling/local-development/hubspot-cli/install-the-cli) so ändern, dass sie die folgenden Felder enthält:
| Parameter | Typ | Beschreibung |
| - | - | - |
| `disable_inline_form_editing` | Zeichenfolge | Legen Sie die `disable_inline_form_editing`-Eigenschaft auf `true` fest, um alle Steuerelemente der Inline-Formularbearbeitung im Formularmodul auszublenden. Dazu gehören die Formularfelder, der Text der Einsenden-Schaltfläche, die Datenschutz- und Einwilligungsoptionen sowie CAPTCHA. |
| `required_property_types` | Array | Ein Array, das angibt, welche Formulare basierend auf den Eigenschaftentypen der Formularfelder ausgewählt werden können. Zu den Werten gehören: `"CONTACT"`, `"COMPANY"` und `"TICKET"`. |
Wenn Sie beispielsweise ein Modul entwickelt haben, das nur für Formulare verwendet werden sollte, mit denen Besucher die verschiedenen Serviceabteilungen Ihres Unternehmens kontaktieren können, können Sie Content-Autoren erlauben, nur Formulare auszuwählen, die Ticket-Eigenschaften verwenden.
```json theme={null}
// Form field
{
"id": "843b4f0f-0ed7-5b10-e86a-5cc8a0f11a0c",
"name": "form_field_1",
"display_width": null,
"label": "Form",
"required": false,
"locked": false,
"type": "form",
"disable_inline_form_editing": true,
"required_property_types": ["TICKET"],
"default": {
"response_type": "inline",
"message": "Thanks for submitting the form."
}
}
```
## Verwendung des Formular-Einbettungscodes
Wenn ein Modul- oder HubL-Tag nicht ideal ist oder wenn Sie ein Formular zu einer externen Seite hinzufügen möchten, können Sie es stattdessen mit dem [Formular-Einbettungscode](https://knowledge.hubspot.com/de/forms/how-can-i-share-a-hubspot-form-if-im-using-an-external-site#add-the-form-embed-code) einbetten. Sie können auch den Formular-Einbettungscode anpassen, um die Funktionalität der Formular zu erweitern. Alle Anpassungsoptionen für Formular-Einbettungscode und mehr finden Sie im Referenzleitfaden für Formulare.
> [!WARNING]
>
> ### Hinweis:
>
> * Optionen zum Anpassen von Formularen sind nur für in HubSpot erstellte Formulare verfügbar, die [als unformatiertes HTML-Formular festgelegt](https://knowledge.hubspot.com/de/forms/how-can-i-share-a-hubspot-form-if-im-using-an-external-site#with-css-in-your-external-stylesheet-marketing-hub-professional-enterprise-or-legacy-marketing-hub-basic-only) wurden. Der HubSpot-Account muss über ein ***Marketing Hub*** oder ***Content Hub*** *Professional*- oder *Enterprise*-Abonnement verfügen.
> * HubSpot-Formulare sollten nur mit der von HubSpot gehosteten JavaScript-Datei geladen werden. Das Erstellen einer Kopie des Formular-Einbettungscodes und Self-Hosting werden nicht unterstützt. Verbesserungen von HubSpot in den Bereichen Sicherheit, Antispam, Barrierefreiheit und Performance werden nicht auf Ihre Formular übertragen, wenn Sie sich entscheiden, den Formular-Einbettungscode von HubSpot selbst zu hosten.
Nachfolgend finden Sie ein Beispiel für einen Formular-Einbettungscode ohne Anpassung.
```html theme={null}
<script
charset="utf-8"
type="text/javascript"
src="//js.hsforms.net/forms/embed/v2.js"
></script>
<script>
hbspt.forms.create({
region: 'na1',
portalId: '123456',
formId: 'df93f0c1-2919-44ef-9446-6a29f9a7f',
});
</script>
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `portalId` | Zahl oder Zeichenfolge | Die ID des HubSpot-Accounts, in dem das Formular erstellt wurde. Dies wird verwendet, um die Formulardefinition abzurufen. |
| `formId` | Zeichenfolge | Die ID des Formulars, die zum Abrufen der Formulardefinition verwendet wird. |
| `region` | Zeichenfolge | Die [Region](https://knowledge.hubspot.com/de/account-security/hubspot-cloud-infrastructure-and-data-hosting-frequently-asked-questions) des Accounts, in dem das Formular erstellt wurde. Dies wird verwendet, um die Formulardefinition abzurufen. Mögliche Werte sind `na1` oder `eu1`. |
### Internationalisierung hinzufügen
Standardmäßig stellt HubSpot eine Reihe von Validierungsnachrichten in vielen verschiedenen Sprachen bereit, auf die Sie mit dem `locale`-Parameter zugreifen können. Sie können auch benutzerdefinierte Sprachen hinzufügen oder die Fehlermeldungen und die im Formular angezeigten Monate/Tage der Datumsauswahl mit dem `translation`-Parameter außer Kraft setzen.
Erfahren Sie in der [Referenzdokumentation zu Formularen](https://developers.hubspot.de/docs/reference/cms/forms) mehr über Fehlermeldungen bei der Internationalisierung und der Formularvalidierung.
```js theme={null}
hbspt.forms.create({
portalId: "",
formId: "",
locale: "en",
translations: {
en: {
fieldLabels: {
email: "Electronic mail",
},
required: "Hey! That's required!",
submitText: "Custom Submit Button Text",
submissionErrors: {
MISSING_REQUIRED_FIELDS: "Please fill in all required fields!",
},
},
},
});
```
## Formular-Events
Formulare bieten zwei Möglichkeiten, Funktionen an Events zu binden: Callbacks im Formular-Einbettungscode von HubSpot und globale Formular-Events. Erfahren Sie mehr über die verfügbaren Formular-Einbettungscode-Callbacks und globale Formular-Events in der [Referenzdokumentation für Formulare](https://developers.hubspot.de/docs/reference/cms/forms).
```js theme={null}
// Example form embed code callback
hbspt.forms.create({
portalId: "",
formId: "",
onBeforeFormSubmit: function ($form) {
// YOUR SCRIPT HERE
},
});
// Example listener
window.addEventListener("message", event => {
if (event.data.type === "hsFormCallback" && event.data.eventName === "onFormSubmitted") {
someAnalyticsLib("formSubmitted");
console.log("Form Submitted! Event data: ${event.data}");
}
});
```
## Formularformatierung
Während HubSpot [globale Formularstile](https://knowledge.hubspot.com/de/forms/set-global-form-colors-and-fonts) sowie eine [formularspezifische Einstellungsebene](https://knowledge.hubspot.com/de/forms/create-forms#style-and-preview-your-form) anbietet, können Sie ein Formular auch gestalten, je nachdem, wie es zu Ihren CMS-Seiten hinzugefügt wird.
> [!WARNING]
>
> ### Hinweis:
>
> Alle in Content Hub generierten Formulare (mit Ausnahme des Formular-Einbettungscodes) ignorieren jegliche Stile, die über die globalen Formulareinstellungen oder die individuellen Einstellungen des Formulars konfiguriert werden.
### Formatierung von Formularen über das Standardformularmodul oder das HubL-Tag
HubSpot-Formulare, die zu HubSpot-Seiten hinzugefügt werden, können mithilfe des CSS Ihrer Website formatiert werden. HubSpot enthält eine Reihe unterschiedlicher Klassen und Attribute in Formularen, die generiert werden, bei denen Sie Stile anwenden können. Als Ausgangspunkt verweisen wir auf das [Formular-CSS der HubSpot Boilerplate](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/css/elements/_forms.css), das die besten Praktiken für das Formatieren von Formularen darstellt.
### Formatierung von Formularen über ein benutzerdefiniertes Modul
Formulare in benutzerdefinierten Modulen können durch CSS im CSS-Bereich des Moduls im Design-Manager formatiert werden. Indem Sie CSS auf das Modul beschränken, können Sie sicherstellen, dass immer, wenn das Modul einer Seite hinzugefügt wird, die Stile übernommen werden. Es wird empfohlen, dem Formular einen Wrapper hinzuzufügen und diesen dann als Top-Level-Selektor für das CSS zu verwenden. Dadurch wird verhindert, dass die Formatierung der Formulare Ihres benutzerdefinierten Moduls durch zusätzliche Stile im Hauptstylesheet Ihrer Website überschrieben wird. Nachfolgend finden Sie einen Screenshot des benutzerdefinierten Moduls von oben, das dem CSS-Fenster hinzugefügt wurde.
### Definieren von benutzerdefiniertem Styling für eingebettete Formulare
Wenn Sie eine \*\* *Marketing Hub*- \*\* oder \*\* *CMS Hub*-Lizenz \*\* in der *Professional*- oder *Enterprise*-Version haben, können Sie Definitionen für CSS-Variablen verwenden, um globale Stile zu definieren, Schaltflächen und anderen Eingaben anzupassen sowie Ihre mehrstufigen Formulare und Fortschrittsbalken anzupassen.
Erfahren Sie mehr darüber, wie Sie [benutzerdefinierte CSS-Definitionen auf Ihr eingebettetes Formular](https://developers.hubspot.de/docs/reference/cms/forms#define-custom-styling-for-embedded-forms-using-css) anwenden.
### Formatierung von Formularen, die über den Formular-Einbettungscode hinzugefügt werden
Wenn Sie den Formular-Einbettungscode verwenden, können Sie das Formular mit den [Einstellungen für globale Formularstile](https://knowledge.hubspot.com/de/forms/set-global-form-colors-and-fonts) oder mit dem CSS Ihrer Website formatieren.
Mit den Einstellungen für globale Formularstile können Sie Standardeinstellungen für jedes Formular im Account konfigurieren. Sie können [diese Stile auch für ein einzelnes Formular im Formular-Editor überschreiben](https://knowledge.hubspot.com/de/forms/create-forms#style-and-preview-your-form).
Wenn Sie ein ***Marketing Hub***- oder ***CMS Hub*** *Professional*- oder *Enterprise*-Abonnement haben, können Sie beim Erstellen eines Formulars die Option **Als unformatiertes HTML-Formular festlegen** auswählen. Mit dieser Einstellung wird das Formular als HTML und nicht als Iframe gerendert, wodurch das Formatieren des eingebetteten Formulars mit CSS vereinfacht wird.
Erfahren Sie mehr über das [Formatieren von eingebetteten Formularen in der Wissensdatenbank](https://knowledge.hubspot.com/de/forms/how-can-i-share-a-hubspot-form-if-im-using-an-external-site).
# Module und Abschnitte im Seiten-Editor ausblenden
Source: https://developers.hubspot.de/docs/cms/start-building/building-blocks/modules/hide-modules-and-sections
# Menüs und Navigation
Source: https://developers.hubspot.de/docs/cms/start-building/building-blocks/modules/menus-and-navigation
HubSpot bietet einige integrierte Tools, die die Erstellung und Verwaltung dieser Menüs vereinfachen. Für die Programmierarbeit bietet HubSpot mehrere Lösungen für die Anzeige von Menüs, sodass Sie die Lösung wählen können, die für Ihre Website am sinnvollsten ist.
Fügen Sie Navigationsmenüs auf Ihrer Website ein, um Benutzern zu helfen, die benötigten Informationen zu finden. Navigationsmenüs befinden sich häufig in den Headern, Seitenleisten und Footern einer Website. HubSpot bietet einige integrierte Lösungen zum Hinzufügen von Menüs zu Ihren Seiten, abhängig von Ihrem Anwendungsfall, aber Sie können bei Bedarf auch Ihre eigenen Menüs erstellen. Ihr Account enthält auch eine [Einstellungsseite zum Erstellen und Verwalten von Menüs](#navigation-settings), die die verschiedenen Menümethoden referenzieren können.
* **Standardmenüs:** HubSpot bietet zwei Standardmenütypen, die nach Bedarf sofort verwendet werden können. Diese Menüs können als Module im Seiten-Editor in [Drag-&-Drop-Bereichen](https://developers.hubspot.de/docs/guides/cms/content/templates/drag-and-drop/overview) oder in Vorlagen hinzugefügt werden, oder Sie können sie mithilfe von [HubL-Tags](#menu-hubl-tags) zu benutzerdefinierten Modulen hinzufügen.
* **Menü:** Über das Standardmenü, das häufig für die globale Navigation verwendet wird, z. B. im Header oder Footer der Website, können Sie ein Menü auswählen, das Sie in Ihren Navigationseinstellungen konfiguriert haben, und es dann mit Optionen wie maximale Ebenen, Anzeigeeinstellungen und Ausrichtung weiter konfigurieren.
* **Einfaches Menü:** Das Modul „Einfaches Menü“ wird häufig für die seitenbezogene Navigation verwendet, z. B. für Pillar-Seiten, und ermöglicht es Ihnen, Menüs auf Seitenebene zu erstellen. Anstatt auf ein Menü zu verweisen, das Sie in Ihren Navigationseinstellungen erstellt haben, werden einfache Menüelemente im Content-Editor verwaltet und verfügen über weniger Konfigurationsoptionen als das Standardmenü. Dies ermöglicht es Content-Autoren, Menüs auf bestimmten Seiten nach Bedarf zu aktualisieren, ohne die globale Navigation zu beeinträchtigen.
* **Benutzerdefinierte Menüs:** Wenn die Standardmenüoptionen nicht Ihren Anforderungen entsprechen, können Sie Ihre eigenen benutzerdefinierten Lösungen erstellen. Dies kann vom Erstellen benutzerdefinierter Module mit Standardmenüs über die Standard-HubL-Tags [mennu und simple\_menu](#menu-hubl-tags) bis hin zur Verwendung der [HubL-Funktion menu()](#menu-hubl-function) reichen, um eine vollständig benutzerdefinierte Lösung mit Repeater-Gruppen oder HubDB zu erstellen. Allerdings sollten Sie beim Erstellen eines komplizierten benutzerdefinierten Menüs die Funktionen und Möglichkeiten des Editors berücksichtigen. In vielen Fällen kann es sinnvoller sein, die `menu`- und `simple_menu`-Felder mit der `menu()`-Funktion zu verwenden, damit ein ausgewogenes Verhältnis zwischen benutzerdefinierter Lösung und intuitiver Bearbeitungsumgebung besteht.
Im Folgenden erfahren Sie mehr über die verschiedenen Möglichkeiten, Menüs auf Seiten einzubinden und die Navigationseinstellungen in HubSpot zu verwalten.
## Navigationseinstellungen
In jedem Account berücksichtigt HubSpot [Navigationseinstellungen,](https://knowledge.hubspot.com/cos-general/set-up-your-site-s-navigation-menus) sodass Sie Menüs mit mehreren Ebenen erstellen können, die in Menümodulen und menu-Tags referenziert werden. Dadurch wird eine einzige Informationsquelle für eine Reihe von Menüelementen erstellt, sodass Sie ein Menü nur einmal aktualisieren müssen, um alle Seiten zu aktualisieren, die dieses Menü referenzieren. Sie können so viele Menüs wie nötig erstellen, und jedes Menü enthält Optionen zum Klonen, Löschen, Umbenennen und Anzeigen des Änderungsverlaufs.
Um Menüs in HubSpot zu erstellen und zu verwalten, gehen Sie zu **Einstellungen** > **Website** > **Navigationsmenüs**. Weitere Informationen zu den Navigationseinstellungen finden Sie in der [Wissensdatenbank von HubSpot](https://knowledge.hubspot.com/website-pages/set-up-your-site-s-navigation-menus).
Wenn Sie mit Menüs in HubL arbeiten, müssen Sie möglicherweise die ID des Menüs referenzieren. Dies gilt nicht für einfache Menüs, da deren Menüelemente im Editor festgelegt sind.
Wenn Sie ein benutzerdefiniertes Modul erstellen, können Sie die Menü-ID am einfachsten erhalten, indem Sie ein Menüfeld erstellen. Dieses Feld ermöglicht es dem Content-Autor, ein Menü aus einem Dropdown-Menü auszuwählen, und gibt die Menü-ID zurück. Wenn Sie die Menü-ID hardcodieren müssen, können Sie sie von der URL abrufen, wenn Sie das Menü auf der Seite mit den Navigationseinstellungen anzeigen.
Beachten Sie, dass beim ersten Aufruf der Seite die Standardmenü-ID nicht in der URL angezeigt wird. Um die ID für dieses Standardmenü zu erhalten, müssen Sie ein anderes Menü auswählen und dann das Standardmenü erneut auswählen.
> [!NOTE]
>
> Eine bewährte Methode für Header von Websites, die oft die umfangreiche Hauptnavigation enthalten, ist die Bereitstellung eines [„Zum Inhalt springen“-Links](/docs/cms/best-practices/improve-existing-sites/accessibility#adding-a-skip-to-content-link). Dies hilft Benutzern, die mit der Tastatur navigieren, langwierige Menüs zu überspringen.
## HubL-menu-Tags
Verwenden Sie die HubL-Tags `menu` und `simple_menu`, um Menüfunktionen zu benutzerdefinierten Modulen hinzuzufügen. Wenn Sie das Tag zu einem Modul hinzufügen, wird das Menü auf der Seite gerendert. Damit Content-Autoren die Optionen des Menüs im Seiten-Editor konfigurieren können, müssen Sie auch das [Menü](/docs/cms/reference/fields/module-theme-fields#form) oder das [einfache Menüfeld](/docs/cms/reference/fields/module-theme-fields#simple-menu) in das Modul aufnehmen.
Im Folgenden erfahren Sie mehr über die einzelnen Typen von Menü-Tags.
### Standardmenü
Das [HubL-menu-Tag](/docs/cms/reference/hubl/tags/standard-tags#menu) generiert Standard-HTML für Menüs mit Klassennamen, die bereits für die tiefen Ebenen, den aktiven Status und für das Vorhandensein von untergeordneten Elementen vorgesehen sind. Das Menü-Tag kann innerhalb von [benutzerdefinierten Modulen](https://developers.hubspot.de/docs/guides/cms/content/modules/overview) verwendet werden, sodass es eine einfache Möglichkeit zur Erstellung von Navigationsmenüs für die Hauptnavigation und die Seitenleistennavigation darstellt. Für dieses Tag müssen Sie die [Menü-ID](#menu-id) angeben.
```hubl theme={null}
{% menu "menu" %}
{% menu "my_menu" id=456, site_map_name='Default', overrideable=False, root_type='site_root', flyouts='true', max_levels='2', flow='horizontal', label='Advanced Menu' %}
```
### Einfaches Menü
Das [simple\_menu](/docs/cms/reference/hubl/tags/standard-tags#simple-menu)-Tag funktioniert ähnlich wie das menu-Tag, indem [Standardmenü-HTML](https://developers.hubspot.de/docs/guides/cms/content/default-menu-markup) generiert wird mit Klassennamen für tiefe Ebenen, aktive Zustände und ob das Element Unterelemente hat. Der Unterschied besteht darin, dass dieses Tag ein Dict der Menüstruktur anstelle einer Menü-ID erwartet. Dies ist hilfreich, wenn die Felder eines Moduls die Struktur eines Menüs bestimmen sollen, anstatt die Navigationseinstellungen zu verwenden. Sie können diesen Typ von Modul beispielsweise für das Inhaltsverzeichnis einer Pillar-Seite verwenden.
```hubl theme={null}
{% simple_menu menu_tree=[{"contentType": null, "subCategory": null, "pageLinkName": null, "pageLinkId": null, "isPublished": false, "categoryId": null, "linkParams": null, "linkLabel": "Home", "linkTarget": null, "linkUrl": "http://www.hubspot.com", "children": [], "isDeleted": false}, {"contentType": null, "subCategory": null, "pageLinkName": null, "pageLinkId": null, "isPublished": false, "categoryId": null, "linkParams": null, "linkLabel": "About", "linkTarget": null, "linkUrl": "http://www.hubspot.com/internet-marketing-company", "children": [{"contentType": null, "subCategory": null, "pageLinkName": null, "linkUrl": "http://www.hubspot.com/company/management", "isPublished": false, "children": [], "linkParams": null, "linkLabel": "Our Team", "linkTarget": null, "pageLinkId": null, "categoryId": null, "isDeleted": false}], "isDeleted": false}, {"contentType": null, "subCategory": null, "pageLinkName": null, "pageLinkId": null, "isPublished": false, "categoryId": null, "linkParams": null, "linkLabel": "Pricing", "linkTarget": null, "linkUrl": "http://www.hubspot.com/pricing", "children": [], "isDeleted": false}] %}
```
## Standardmenümodule
HubSpot bietet Standardmodule, die Sie Code-Vorlagen hinzufügen können, sowie Seiten über den Seiten-Editor, wenn eine Vorlage [Drag-&-Drop-Bereiche](/docs/cms/reference/hubl/tags/dnd-areas) enthält. Jedes Modul hat ein anderes Bearbeitungserlebnis, wobei das Standardmenü mehr Konfigurationsoptionen bietet als das einfache Menü.
Da Module nicht verschachtelt werden können, können Sie diese Module nicht innerhalb anderer Module platzieren. Stattdessen sollten Sie das [menu- oder simple-menu-Tag](#hubl-menu-tags) verwenden.
```hubl theme={null}
{% module "main_nav" path="@hubspot/menu", label="Menu" id="123456" %}
{% module "menu" path="@hubspot/simple_menu", label="Simple Menu" menu_tree=[{"contentType": null, "subCategory": null, "pageLinkName": null, "pageLinkId": null, "isPublished": false, "categoryId": null, "linkParams": null, "linkLabel": "Home", "linkTarget": null, "linkUrl": "http://www.hubspot.com", "children": [], "isDeleted": false}, {"contentType": null, "subCategory": null, "pageLinkName": null, "pageLinkId": null, "isPublished": false, "categoryId": null, "linkParams": null, "linkLabel": "About", "linkTarget": null, "linkUrl": "http://www.hubspot.com/internet-marketing-company", "children": [{"contentType": null, "subCategory": null, "pageLinkName": null, "linkUrl": "http://www.hubspot.com/company/management", "isPublished": false, "children": [], "linkParams": null, "linkLabel": "Our Team", "linkTarget": null, "pageLinkId": null, "categoryId": null, "isDeleted": false}], "isDeleted": false}, {"contentType": null, "subCategory": null, "pageLinkName": null, "pageLinkId": null, "isPublished": false, "categoryId": null, "linkParams": null, "linkLabel": "Pricing", "linkTarget": null, "linkUrl": "http://www.hubspot.com/pricing", "children": [], "isDeleted": false}] %}
```
### Standardmenü-Markup
Standardmenümodule werden von ihren jeweiligen HubL-Menü-Tags (`menu` und `simple_menu`) angetrieben, um Standard-Menü-HTML zu generieren. Wie andere HubSpot-Module werden auch die Menümodule in Modul-Wrapper-Markup eingeschlossen. Diese `div`- und `span`-Tags machen das Modul mit dem Content-Editor bearbeitbar. Das Menü-Markup sowohl der Menü- als auch der einfachen Menümodule ist das gleiche, mit Ausnahme einiger Klassen, die auf den Wrapper und die Menü-Container angewendet werden.
```html theme={null}
<div
id="hs_cos_wrapper_widget_1711642118872"
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module widget-type-menu"
style=""
data-hs-cos-general-type="widget"
data-hs-cos-type="module"
>
<span
id="hs_cos_wrapper_widget_1711642118872_"
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_menu"
style=""
data-hs-cos-general-type="widget"
data-hs-cos-type="menu"
>
<div
id="hs_menu_wrapper_widget_1711642118872_"
class="hs-menu-wrapper active-branch flyouts hs-menu-flow-horizontal"
role="navigation"
data-sitemap-name="default"
data-menu-id="162449947934"
aria-label="Navigation Menu"
>
<ul role="menu">
<li
class="hs-menu-item hs-menu-depth-1 hs-item-has-children"
role="none"
>
<a
href="https://developers.hubspot.de/docsjavascript:;"
aria-haspopup="true"
aria-expanded="false"
role="menuitem"
>Menu item 1</a
>
<ul role="menu" class="hs-menu-children-wrapper">
<li class="hs-menu-item hs-menu-depth-2" role="none">
<a
href="https://developers.hubspot.de/docs//freecrmtest.hubspotpagebuilder.com/test"
role="menuitem"
>A</a
>
</li>
<li class="hs-menu-item hs-menu-depth-2" role="none">
<a href="https://www.wikipedia.org/" role="menuitem">B</a>
</li>
</ul>
</li>
<li
class="hs-menu-item hs-menu-depth-1 hs-item-has-children"
role="none"
>
<a
href="https://developers.hubspot.de/docsjavascript:;"
aria-haspopup="true"
aria-expanded="false"
role="menuitem"
>Menu item 2</a
>
<ul role="menu" class="hs-menu-children-wrapper">
<li class="hs-menu-item hs-menu-depth-2" role="none">
<a
href="https://developers.hubspot.de/docs//freecrmtest.hubspotpagebuilder.com/test"
role="menuitem"
>A</a
>
</li>
<li class="hs-menu-item hs-menu-depth-2" role="none">
<a href="https://www.hubspot.com/new-page" role="menuitem">B</a>
</li>
<li class="hs-menu-item hs-menu-depth-2" role="none">
<a href="https://www.hubspot.com/blah" role="menuitem">C</a>
</li>
</ul>
</li>
</ul>
</div>
</span>
</div>
```
Wie oben gezeigt, wird das eigentliche Menü als `ul` gerendert, das in ein `div` mit der `hs-menu-wrapper`-Klasse eingeschlossen ist. Dieser Wrapper verfügt über zusätzliche Klassen, je nachdem, wie das Modul im Seiten-Editor konfiguriert ist, z. B. das Aktivieren von Ausklappmenüs. Erfahren Sie unten mehr über [Klassen, die durch diese Einstellungen hinzugefügt wurden](#classes-added-by-settings).
Innerhalb des `ul` ist jedes Menüelement ein in ein `li` eingeschlossenes `a`-Tag. Das `li`-Tag hat eine Klasse, die die Tiefe des Elements in der Menüstruktur angibt (z. B. `hs-menu-depth-1`). Wenn ein Menüelement ein verschachteltes untergeordnetes Element enthält, hat das entsprechende `li` die zusätzliche Klasse `hs-item-has-children`. Das untergeordnete Menü wird als verschachteltes `ul` mit der Klasse `hs-menu-children-wrapper` gerendert.
Wenn Sie eine Seite besuchen, die in Ihrer Menüstruktur enthalten ist, wird die `active-branch`-Klasse zu den übergeordneten `li`-Elementen hinzugefügt und eine Klasse vom Typ **`active`** wird zum jeweiligen `li`-Element dieser Seite hinzugefügt.
### Standardmenüformatierung
Auf Modulebene haben Sie, unabhängig davon, ob Sie ein Menümodul im Seiten-Editor bearbeiten oder ein Menüfeld in einem benutzerdefinierten Modul bearbeiten, einige Konfigurationsoptionen. Mit den Feldern *Menü*, *Menütyp „Erweitert“* und *Max Ebenen* können Sie steuern, dass die Menüelemente im Seiten-Markup als `li` gerendert werden. Die Ausrichtungs- und Ausklappmenüoptionen wirken sich jedoch auf die CSS-Selektoren aus, die dem `div`-Menü-Wrapper hinzugefügt wurden. Sie können diese Selektoren dann in Ihrem CSS anvisieren.
Im Folgenden erfahren Sie mehr über die Klassen, die dem `div`-Menü-Wrapper in Abhängigkeit von diesen Feldeinstellungen hinzugefügt werden.
| Klasse | Beschreibung |
| - | - |
| `hs-menu-flow-horizontal` | Wird dem `div`-Wrapper hinzugefügt, wenn das Menü auf horizontale Ausrichtung festgelegt ist. |
| `hs-menu-flow-vertical` | Wird dem`div`-Wrapper hinzugefügt, wenn das Menü auf vertikale Ausrichtung festgelegt ist. |
| `flyouts` | Wird dem `div`-Wrapper hinzugefügt, wenn *Ausklappmenüs aktivieren* ausgewählt ist. |
| `no-flyouts` | Wird dem `div`-Wrapper hinzugefügt, wenn *Ausklappmenüs aktivieren* nicht ausgewählt ist. |
Um Ihnen den Einstieg in das Formatieren von Menüs mit Stilen zu erleichtern, finden Sie unten einige Beispiel-CSS-Selektoren, mit denen Sie das menu-Tag und das Standardmenümodul formatieren können.
```css theme={null}
/* Menus */
.hs-menu-wrapper ul {
/* Targets all unordered lists within HubSpot menus */
}
/* Horizontal Menu
========================================================================== */
.hs-menu-wrapper.hs-menu-flow-horizontal ul {
/* Targets all unordered lists within horizontal menus */
}
.hs-menu-wrapper.hs-menu-flow-horizontal ul li {
/* Targets all list items within horizontal menus */
}
.hs-menu-wrapper.hs-menu-flow-horizontal ul li a {
/* Targets all links within horizontal menus */
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul {
/* Targets the top-level unordered list within horizontal menus */
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-menu-depth-1 {
/* Targets top-level list items within the top-level unordered list */
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li a {
/* Targets top-level list links within the top-level unordered list */
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children {
/* Targets list items with children with the top-level unordered list */
}
.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts
> ul
li.hs-item-has-children
ul.hs-menu-children-wrapper {
/* Targets second-level unordered lists when flyouts are enabled (for styling dropdowns) */
}
.hs-menu-wrapper.hs-menu-flow-horizontal
> ul
li.hs-item-has-children
ul.hs-menu-children-wrapper
li
a {
/* Targets links within second-level unordered lists */
}
.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts
> ul
li.hs-item-has-children
ul.hs-menu-children-wrapper
li.hs-item-has-children
ul.hs-menu-children-wrapper {
/* Targets third-level unordered lists (for styling dropdowns)*/
}
.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts
> ul
li.hs-item-has-children:hover
> ul.hs-menu-children-wrapper {
/* Targets second-level unordered list when top-level menu item is hovered (use to reveal dropdowns) */
}
.hs-menu-wrapper.hs-menu-flow-horizontal
> ul
li.hs-item-has-children.active-branch {
/* Targets top-level active branch unordered list */
}
.hs-menu-wrapper.hs-menu-flow-horizontal
> ul
li.hs-item-has-children.active-branch
> ul.hs-menu-children-wrapper {
/* Targets second-level unordered list within active branch */
}
.hs-menu-wrapper.hs-menu-flow-horizontal li.active a {
/* Targets the link within the active list item */
}
/* Vertical Menu
========================================================================== */
.hs-menu-wrapper.hs-menu-flow-vertical ul {
/* Targets all unordered lists within vertical menus */
}
.hs-menu-wrapper.hs-menu-flow-vertical ul li a {
/* Targets all list items within vertical menus */
}
.hs-menu-wrapper.hs-menu-flow-vertical ul li a {
/* Targets all links within vertical menus */
}
.hs-menu-wrapper.hs-menu-flow-vertical > ul {
/* Targets the top-level unordered list within vertical menus */
}
.hs-menu-wrapper.hs-menu-flow-vertical > ul li.hs-menu-depth-1 > a {
/* Targets top-level links in vertical menus */
}
.hs-menu-wrapper.hs-menu-flow-vertical > ul li.hs-item-has-children {
/* Targets top-level list items with children */
}
/* No flyouts
========================================================================== */
.hs-menu-wrapper.hs-menu-flow-vertical.no-flyouts .hs-menu-children-wrapper {
/* Targets child menus when flyouts are disabled */
}
.hs-menu-wrapper.hs-menu-flow-horizontal.no-flyouts
> ul
li.hs-item-has-children
ul.hs-menu-children-wrapper {
/* Targets second-level child menus when flyouts are disabled */
}
```
## HubL-menu()-Funktion
Die [menu()](/docs/cms/reference/hubl/functions#menu)-Funktion ermöglicht es Ihnen, vollständig angepasste Menüstrukturen zu erstellen. Sie gibt ein Objekt zurück, das Sie durchlaufen können, um ein Menü zu erstellen. Es gibt viele [bereitgestellte Eigenschaften für die Menüpunkte](/docs/cms/reference/hubl/variables#menu-node-variables). Beachten Sie, dass Sie bei der Verwendung der Menüfunktion [die volle Verantwortung für die Barrierefreiheit Ihres Menüs](/docs/cms/best-practices/improve-existing-sites/accessibility), die Struktur und die Formatierung tragen.
```hubl theme={null}
{% set node = menu(987) %}
{% for child in node.children %}
{{ child.label }}<br>
{% endfor %}
{% set default_node = menu("default") %}
{% for child in default_node.children %}
{{ child.label }}<br>
{% endfor %}
```
Die [HubSpot CMS Theme Boilerplate](https://github.com/HubSpot/cms-theme-boilerplate) enthält ein [Beispiel für ein Menümodul, das mit der menu()-Funktion erstellt wurde](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/modules/menu.module/module.html). Sie können dies Ihren Bedürfnissen entsprechend ändern, um komplizierte Menüs zu erstellen.
# Überblick über Module
Source: https://developers.hubspot.de/docs/cms/start-building/building-blocks/modules/overview
Ein Verständnis der Module ist der Schlüssel zum Verständnis von CMS Hub und seiner Leistungsfähigkeit. Module sind wiederverwendbare Komponenten, die in Vorlagen verwendet oder über Drag-&-Drop-Bereiche und flexible Spalten zu Seiten hinzugefügt werden können.
Ein Verständnis der Module ist der Schlüssel zum Verständnis von CMS Hub und seiner Leistungsfähigkeit. Module sind wiederverwendbare Komponenten, die in Vorlagen verwendet oder über [Drag-&-Drop-Bereiche](/docs/cms/start-building/building-blocks/drag-and-drop/tutorial) und [flexible Spalten](https://developers.hubspot.de/docs/reference/cms/hubl/tags/standard-tags#flexible-column) zu Seiten hinzugefügt werden können. Zusätzlich zu den Modulen, die HubSpot bereitstellt, können Entwickler ihre eigenen Module für alles von Kundenreferenzen bis zu Fotogalerien erstellen. Module werden [mit den Tools für lokale Entwicklung](/docs/cms/start-building/building-blocks/modules/overview) oder [mithilfe des Design-Managers](https://knowledge.hubspot.com/cos-general/create-and-edit-modules) erstellt.
Ein Modul besteht aus zwei Teilen:
1. Eine [Benutzeroberfläche](#the-user-interface-for-editing), die aus einer Liste von Feldern besteht, die der Benutzer bei der Bearbeitung einer Modulinstanz sieht.
2. Ein HTML+HubL-Vorlagenfragment mit zugehörigem CSS und JS, das definiert, wie HTML generiert wird
## Ein Beispiel
Um besser zu verstehen, was ein Modul ist, sehen wir uns ein einfaches „Teammitglied“-Modul an. Das Modul besteht aus einem Foto, dem Namen des Teammitglieds, seinem Titel und einem kurzen Lebenslauf und sieht wie ein Teil einer CMS-Webseite aus:
### Die Benutzeroberfläche für die Bearbeitung
Der Entwickler erstellt die Benutzeroberfläche (UI) für Module mithilfe von Feldern. Der Entwickler wählt dann die gewünschten Felder anhand der Art des zu erstellenden Moduls, der benötigten Daten und des Bearbeitungserlebnisses aus. In diesem Fall umfasst das Modul:
1. ein Bildfeld für das Foto eines Teammitglieds
2. zwei Textfelder für den Namen und die Position des Teammitglieds
3. ein Rich-Text-Feld für einen kurzen Lebenslauf.
Wenn ein Content-Autor ein Modul bearbeitet, wird die Benutzeroberfläche auf der Grundlage der Felder, die der Entwickler dem Modul hinzugefügt hat, und der jeweiligen Konfiguration der einzelnen Felder aufgebaut.
## Modul vs. Modulinstanz
Es gibt zwei Begriffe, die häufig im Zusammenhang mit Modulen verwendet werden. Es ist wichtig, den Unterschied zwischen ihnen zu kennen.
* **Modul** – wiederverwendbare Komponenten, die zu Vorlagen und Seiten hinzugefügt werden können.
* **Modulinstanz** – die einzelnen gerenderten Module auf der Seite. Sie können separate Feldwerte haben und daher anders aussehen als andere Modulinstanzen, die für dasselbe Modul verwendet werden.
## fields.json
Die Felder für ein Modul werden in JSON als ein Array von Objekten definiert. Jedes Feld verfügt über einen Namen, einen Typ und einen Standardwert. Je nach Art des Feldes, das die Bearbeitung steuert, sind auch andere Eigenschaften verfügbar.
```json theme={null}
// fields.json
[
{
"name": "team_member_photo",
"label": "Team Member Photo",
"required": true,
"responsive": true,
"resizable": true,
"type": "image",
"default": {
"src": "",
"alt": ""
}
},
{
"name": "team_member_name",
"label": "Team member name",
"required": true,
"type": "text",
"default": "Joshua Beck"
},
{
"name": "team_member_position",
"label": "Team member position",
"required": true,
"type": "text",
"default": "CEO, Co-Founder"
},
{
"name": "team_member_bio",
"label": "Team member bio",
"required": true,
"type": "richtext",
"default": "<p>Joshua has over 20 years of experience in the tech industry. He helped start this company in 2015 with the mission of helping people grow. In his spare time he loves hanging out with his kids, going to the beach, and cooking.</p>"
}
]
```
Weitere Informationen zu allen verfügbaren Feldern finden Sie im Artikel zu [Modul- und Designfeldern](https://developers.hubspot.de/docs/reference/cms/fields/module-theme-fields).
### Verwendung von Modulfelddaten zum Rendern von HTML
Die Werte für die einzelnen Felder sind im HTML+HubL-Fragment für ein Modul über eine `module`-Variable verfügbar. Die Daten für die einzelnen Felder können über die Eigenschaften der Modulvariablen abgerufen werden. Beim Beispiel des Teammitglied-Moduls kann der Name des Teammitglieds über `{{ module.team_member_name }}` aufgerufen werden.
```hubl theme={null}
<section class="team-member">
<img class="team-member__image" src="{{ module.team_member_image.src }}" alt="{{ module.team_member_image.alt }}">
<h3 class="team-member__name">{{ module.team_member_name }}</h3>
<p class="team-member__position">{{ module.team_member_position }}</p>
<div class="team-member__bio">{{ module.team_member_bio }}</div>
</section>
```
## Verwenden von Modulen in Vorlagen
Module werden mithilfe des [module](https://developers.hubspot.de/docs/reference/cms/modules/using-modules-in-templates#basic-module-syntax)-, [module\_block](https://developers.hubspot.de/docs/reference/cms/modules/using-modules-in-templates#block-syntax)- oder [dnd\_module](https://developers.hubspot.de/docs/reference/cms/hubl/tags/dnd-areas)-Tags und durch Angabe des Pfades zum Modul als Parameter zu Vorlagen hinzugefügt. Die Standardwerte für Felder in einem Modul können auch auf der Vorlagenebene überschrieben werden, indem wie im zweiten Teil des folgenden Beispiels gezeigt dem module-Tag, das dem Feldnamen entspricht, Parameter hinzugefügt werden.
```hubl theme={null}
{% module "unique_identifier" path="/modules/team-member.module" %}
{# override default values in a module instance #}
{% module "unique_identifier"
path="/modules/team-member.module",
team_member_name="Brian Halligan",
team_member_position="CEO"
%}
```
> [!NOTE]
>
> Module können nicht ineinander verschachtelt werden. In den meisten Fällen, in denen Sie dies vorhaben, geschieht dies in der Regel aus Layout-Gründen. Abschnitte in [Drag-&-Drop-Bereichen](/docs/cms/start-building/building-blocks/drag-and-drop/overview) sind oft die bessere Lösung.
## Module sind eine großartige Option bei den Tools für Barrierefreiheit
Module werden auf der gesamten Website verwendet, manchmal auf mehreren Seiten, sogar mehrfach auf einer Seite. Aus diesem Grund kann [die Erstellung des HTML, CSS und JS Ihres Moduls im Hinblick auf mehr Barrierefreiheit](https://developers.hubspot.de/docs/guides/cms/content/accessibility) einen großen Einfluss darauf haben, wie benutzerfreundlich Ihre Website für Menschen mit und ohne Behinderungen oder Beeinträchtigungen ist.
## Module können die Lokalisierung erleichtern
Ähnlich wie bei der Barrierefreiheit ermöglicht die Erstellung von Modulen, bei denen der gesamte Inhalt auf Feldern basiert, eine spätere Lokalisierung. Sie können zum Beispiel ein Modul „Ausgewählte Artikel“ haben. Anstatt den Text „Ausgewählte Artikel“ zu hart zu codieren, verwenden Sie ein Text- oder Rich-Text-Feld. Dann kann der Text für andere Sprachen geändert werden. Mehr über die Lokalisierung im CMS erfahren Sie unter [Mehrsprachigkeit](https://developers.hubspot.de/docs/guides/cms/content/multi-language-content).
## Erste Schritte
Zum Einstieg können Sie sich unserer Tutorial [Erste Schritte mit Modulen](/docs/cms/start-building/building-blocks/modules/overview) ansehen.
## Weitergehende Ressourcen
* [Konfigurieren eines Moduls](https://developers.hubspot.de/docs/reference/cms/modules/configuration)
* [Verwenden von Modulen in Vorlagen](https://developers.hubspot.de/docs/reference/cms/modules/using-modules-in-templates)
* [Standardmodule](https://developers.hubspot.de/docs/reference/cms/modules/default-modules)
* [Der Modul-Editor](/docs/cms/start-building/building-blocks/modules/overview)
# Überblick über Design
Source: https://developers.hubspot.de/docs/cms/start-building/building-blocks/overview
Erstellung von CMS Hub-Designs, die es Entwicklern ermöglichen, Designsysteme für die Arbeit von Content-Autorenn zu erstellen.
Ein Design ist eine übertragbare und geschlossene Sammlung von Entwicklerelementen, die eine flexible Bearbeitung von Inhalten ermöglichen. Sie können [Designs lokal mit dem HubSpot-CLI unter Verwendung der von Ihnen bevorzugten Tools, Verfahren und Arbeitsabläufe erstellen](/docs/developer-tooling/local-development/hubspot-cli/install-the-cli). Designs und alle ihre Dateien sind auch zwischen Umgebungen und Accounts übertragbar. Eine Videoanleitung für den Einstieg in die Entwicklung von Designs finden Sie im folgenden HubSpot Academy-Video:
## Designs als Paket
Da Designs ein Paket sind, werden sie in der HubSpot-App an verschiedenen Stellen kaskadiert, um eine effiziente Content-Erstellung zu ermöglichen. Entwickler können mithilfe von Designs ein System erstellen, in dem die Content-Autoren arbeiten können. Ein Design kann mit einem beliebigen Maß an Flexibilität ausgestattet werden, ebenso mit Leitlinien, um den Anforderungen Ihres Unternehmens gerecht zu werden.
### Seitenerstellung
Wenn Content-Autoren mit der Erstellung neuer Seiten beginnen, werden sie aufgefordert, zunächst das Design auszuwählen, mit dem sie eine Seite erstellen möchten, und dann die Vorlage auszuwählen, die sie innerhalb des Designs verwenden möchten.
Das Vorschaubild des Designs sowie andere Konfigurationen für ein Design werden in der [theme.json](#theme-json)-Datei festgelegt.
### Designfelder
Mithilfe von Designs können Entwickler eine Reihe von [Designfeldern](#fields-json) erstellen, ähnlich wie Modulfelder, die es Content-Autoren ermöglichen, anhand verschiedener von einem Entwickler entworfenen Steuerelemente und Einstellungen eine globale stilistische Kontrolle über eine Website zu erlangen, ohne CSS bearbeiten zu müssen. Entwickler [verwenden HubL, um in ihrem CSS auf die Werte von Designfeldern zuzugreifen](#using-theme-field-values). Content-Autoren nutzen den Design-Editor, um Designfelder zu ändern, eine Vorschau dieser Änderungen anhand der vorhandenen Vorlagen innerhalb eines Designs anzuzeigen und ihre Änderungen zu veröffentlichen.
Designfelder werden durch die [fields.json-Datei eines Designs](#fields-json) festgelegt.
Wenn Sie ein Design im [Testmodus](/docs/cms/start-building/building-blocks/overview#test-mode) bearbeiten, können Sie auch die JSON-Einstellungen des Designs kopieren. Dadurch können Sie alle Aktualisierungen in die lokale `fields.json`-Datei des Designs einfügen.
### Designmodule
Die Module eines Designs sollten speziell für die Verwendung in den Vorlagen dieses Designs konzipiert sein. Der Content-Editor hebt diese Designmodule hervor, sodass Content-Autoren schnell und einfach Module zu den von ihnen erstellten Seiten hinzufügen können, die für den Kontext der jeweiligen Seite geeignet sind. Die Standardmodule und die übrigen Module in Ihrem HubSpot-Account sind weiterhin verfügbar.
Wenn Sie ein Design ausarbeiten, können Sie [Module und Abschnitte im Seiten-Editor ausblenden](/docs/cms/start-building/building-blocks/modules/hide-modules-and-sections), um eine optimierte Content-Erstellung zu ermöglichen.
## Struktur der Designdatei
Ein Design ist ein einzelnes Verzeichnis mit Dateien. Sie können HTML-, CSS- und JavaScript-Dateien, Module und zusätzliche Dateien einbinden, die in Unterverzeichnissen des übergeordneten Designordners auf beliebige Weise organisiert werden können. Zur Erstellung eines Designs sind zwei JSON-Dateien erforderlich: `theme.json` und `fields.json`. Diese Dateien sollten in den Stammordner des Designs aufgenommen werden.
Um mit einem Beispiel zu beginnen, sehen Sie sich die [CMS Hub-Boilerplate](https://github.com/HubSpot/cms-theme-boilerplate) an.
> [!NOTE]
>
> Zurzeit können .json-Dateien nur über die [Tools für lokale Entwicklung](/docs/developer-tooling/local-development/hubspot-cli/install-the-cli) erstellt und in einen HubSpot-Account hochgeladen werden.
### theme.json
Die `theme.json`-Datei enthält die Meta-Informationen für Ihr Designverzeichnis, z. B. das lesbare Label des Designs, seinen Vorschau-Screenshot und verschiedene Konfigurationen, wie sich das Design verhalten soll. Ihre `theme.json`-Datei sieht dann etwa so aus wie die folgende:
```json theme={null}
// theme.json
{
"label": "Cool Theme",
"preview_path": "./templates/home-page.html",
"screenshot_path": "./images/templates/homepage.jpg",
"enable_domain_stylesheets": false,
"version": "1.0",
"author": {
"name": "Jon McLaren",
"email": "noreply@hubspot.com",
"url": "https://theme-provider.com/"
},
"documentation_url": "https://theme-provider.com/cool-theme/documentation",
"license": "./license.txt",
"example_url": "https://theme-provider.com/cool-theme/demo",
"is_available_for_new_content": true
}
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `label` | Zeichenfolge | Das lesbare Label des Designs, das an verschiedenen Stellen in der HubSpot-App verwendet wird, z. B. im Bildschirm zur Vorlagenauswahl und im Design-Editor. |
| `preview_path` | Zeichenfolge | Ein relativer Pfad zu einer Vorlagendatei im Design, die die Standardvorlage sein soll, die bei der Vorschau eines Designs im Design-Editor verwendet wird. |
| `screenshot_path` | Zeichenfolge | Ein relativer Pfad zu einer Bilddatei, die verwendet wird, um eine Momentaufnahme davon zu erstellen, wie das Design an verschiedenen Stellen der Designauswahl aussieht, z. B. im Bildschirm für die Vorlagenauswahl. |
| `enable_domain_stylesheets` | Boolesch | Aktivieren oder Deaktivieren von Stylesheets, die an Domains in den Website-Einstellungen angehängt sind und in Vorlagen innerhalb des Designs berücksichtigt werden. Der Standardwert ist `false`. |
| `version` | Zeichenfolge | Ganzzahlige Versionsnummer, die `.`-Versionen unterstützt. |
| `Author` | Objekt | Objekt, mit dem Informationen über sich selbst als Designanbieter bereitgestellt werden.`name` Der Name des Anbieters. `email` Die Support-E-Mail-Adresse des Anbieters. `url` Die Website des Anbieters. |
| `documentation_url` | Zeichenfolge | Der Link zur Designdokumentation. |
| `example_url` | Zeichenfolge | Der Live-Beispiel-Link des Designs. |
| `license` | Zeichenfolge | Ein gültiger [SPDX-Identifikator](https://spdx.org/licenses/) oder der relative Pfad zur Lizenz innerhalb Ihres Designs. Diese Lizenz legt fest, welche Nutzung und Änderungen durch den Ersteller des Designs erlaubt sind. Nützlich bei der Einreichung beim Marketplace. |
| `is_available_for_new_content` | Boolesch | Boolescher Wert, der festlegt, ob ein Design auf der Seite des Content-Autors zur Auswahl angezeigt wird. Der Standardwert ist `true`. |
### fields.json
Die `fields.json`-Datei steuert die verfügbaren Felder und Feldgruppen im Design-Editor, einschließlich der [Stilfelder](https://developers.hubspot.de/docs/guides/cms/content/fields/overview#style-fields). Welche Felder Sie berücksichtigen, hängt davon ab, wie viel Kontrolle die Content-Autoren über den Seiten-Editor haben sollen. Die Anzahl der Felder, die für Designs zur Verfügung stehen, ist begrenzter als bei Modulen, da sich Designfelder am besten für Formatierungsoptionen eignen, während [globale Inhalte](/docs/cms/start-building/building-blocks/global-content) besser für Designinhalte geeignet sind.
Anstatt beispielsweise ein Textfeld für den Slogan Ihrer Website zum `field.json` des Designs hinzuzufügen, sollte es als globales Modul hinzugefügt werden, damit die Content-Autoren den Slogan über den Seiten-Editor und nicht über den Design-Editor aktualisieren können.
Diese Felder können in Designs verwendet werden:
* [Boolesch](/docs/cms/reference/fields/module-theme-fields#boolean)
* [Rahmen](/docs/cms/reference/fields/module-theme-fields#border)
* [Auswahl](/docs/cms/reference/fields/module-theme-fields#choice)
* [Farbe](/docs/cms/reference/fields/module-theme-fields#color)
* [Schriftart](/docs/cms/reference/fields/module-theme-fields#font)
* [Bild](/docs/cms/reference/fields/module-theme-fields#image)
* [Zahl](/docs/cms/reference/fields/module-theme-fields#number)
* [Abstand](/docs/cms/reference/fields/module-theme-fields#spacing)
Eine umfassende Dokumentation der möglichen Optionen für Designfelder finden Sie in der [Dokumentation zu Modulen und Designfeldern](/docs/cms/reference/fields/module-theme-fields).
#### Designfeldwerte verwenden
Um auf Feldwerte zuzugreifen, verwenden Sie die Punktnotation und stellen dem Pfad zu dem Wert in `fields.json` das Präfix „theme“ voran. Sie können einen Designfeldwert in Ihren Stylesheets mit einer Syntax wie `{{ theme.path.to.value }}` verwenden. Zum Beispiel das unten dargestellte Schriftartfeld:
```json theme={null}
// fields.json
[
{
"type": "group",
"name": "typography",
"label": "Typography",
"children": [
{
"type": "font",
"name": "h1_font",
"label": "Heading 1",
"load_external_fonts": true,
"default": {
"color": "#000",
"font": "Merriweather",
"font_set": "GOOGLE",
"variant": "700",
"size": "48"
}
}
]
}
]
```
Würde in CSS referenziert folgendermaßen werden:
```css theme={null}
h1 {
font-size: {{ theme.typography.h1_font.size }}px;
font-family: {{ theme.typography.h1_font.font }};
color: {{ theme.typography.h1_font.color }};
text-decoration: {{ theme.typography.h1_font.styles.text-decoration }};
font-style: {{ theme.typography.h1_font.styles.font-style }};
font-weight: {{ theme.typography.h1_font.styles.font-weight }};
}
```
## Designs in einer Vorschau anzeigen
Entwickler müssen manchmal testen können, ob ihre Designfelder ordnungsgemäß funktionieren, ohne dass dies Auswirkungen auf eine echte Seite hat. Hier kommt der Design-Testmodus ins Spiel.
### Testmodus
Der Testmodus bietet Ihnen eine sichere Umgebung, in der Sie mit den Feldern Ihres Designs experimentieren und sicherstellen können, dass sie so funktionieren, wie Sie es erwarten. Die Benutzeroberfläche sieht genauso aus wie [die Designvorschau/der Design-Editor, die bzw. den Content-Autoren sehen](https://knowledge.hubspot.com/website-pages/edit-your-global-theme-settings#edit-theme-settings). Sie können jedoch sicher sein, dass Sie die Einstellungen Ihrer eigentlichen Website nicht ändern. Zum Schutz vor versehentlichen Aktualisierungen der Designeinstellungen ist die Veröffentlichung im Testmodus blockiert. Sie können feststellen, ob Sie sich im Testmodus befinden, da `?testmode=true` in Ihrer Adressleiste angezeigt wird. Außerdem sehen Sie ein Testmodus-Symbol im Header des Design-Editors.
Es gibt zwei Möglichkeiten, den Testmodus zu aktivieren:
* So aktivieren Sie den Testmodus über den Design-Manager:
* Wählen Sie im Design-Manager Ihr **Design** im Finder aus.
* Klicken Sie oben in der linken Seitenleiste auf die Schaltfläche **Vorschau**.
.png)
* So aktivieren Sie den Testmodus über den Seiten-Editor:
* Klicken Sie im Seiten-Editor in der linken Seitenleiste auf die Registerkarte **Design** und klicken Sie dann auf **Designeinstellungen bearbeiten**.
* Fügen Sie der URL `?testmode=true` hinzu und drücken Sie dann die **Eingabetaste**. Sie befinden sich dann im Testmodus.
Eine andere Methode besteht darin, die Designeinstellungen im Seiten-Editor zu öffnen. Fügen Sie dann den Abfrageparameter `?testmode=true` zur URL in Ihrer Adressleiste hinzu.
## Verwandte Ressourcen
* [Erste Schritte mit Designs](/docs/cms/start-building/building-blocks/themes/getting-started)
* [Hinzufügen von Designfunktionen zu bestehenden Websites](/docs/cms/best-practices/improve-existing-sites/add-theme-features-to-existing-sites)
* [HubSpot Theme Boilerplate](/docs/cms/start-building/building-blocks/themes/hubspot-cms-boilerplate)
# Abschnitte
Source: https://developers.hubspot.de/docs/cms/start-building/building-blocks/sections/sections
Abschnitte sind das äußerste untergeordnete Element einer dnd_area. Abschnitte können durch Abschnittsvorlagen wiederverwendbar gemacht oder im Seiten-Editor gespeichert werden.
Der äußerste Container in einem [Drag-&-Drop-Bereich](https://developers.hubspot.de/docs/guides/cms/content/templates/drag-and-drop/overview) wird als Abschnitt bezeichnet. Abschnitte können nicht innerhalb eines anderen [dnd-Elements](https://developers.hubspot.de/docs/guides/cms/content/templates/drag-and-drop/overview#drag-and-drop-areas-and-their-elements) verschachtelt werden, jedoch Module, [Zeilen](https://developers.hubspot.de/docs/guides/cms/content/templates/drag-and-drop/overview#row) und [Spalten](https://developers.hubspot.de/docs/guides/cms/content/templates/drag-and-drop/overview#column) enthalten. Im Seiten-Editor haben Content-Autoren die Möglichkeit, der Seite Abschnitte hinzufügen und diese dann nach Bedarf zu ändern und zu gestalten. Content-Autoren können auch Abschnitte erstellen und speichern, um sie auf anderen Seiten innerhalb desselben Designs zu verwenden, wodurch das Erstellen von Inhalten effizienter wird.
In diesem Artikel erfahren Sie mehr über Abschnitte und wie sie sich im Seiten-Editor verwenden lassen. Wenn Sie ein Design entwickeln, lesen Sie bitte auch die Anleitung zum [Ausblenden von Modulen und Abschnitten](/docs/cms/start-building/building-blocks/modules/hide-modules-and-sections) im Seiten-Editor, um die Content Erstellung effizienter zu gestalten.
## Überblick
Abschnitte können entweder [im Content-Editor von einem Content-Autor](https://knowledge.hubspot.com/de/website-pages/edit-page-content-in-a-drag-and-drop-area#create-a-section) erstellt oder von einem Entwickler mit dem [`dnd_section`](/docs/cms/reference/hubl/tags/dnd-areas#drag-and-drop-section-code-dnd-section-code-)-Tag in ein [`dnd_area`](https://developers.hubspot.de/docs/guides/cms/content/templates/drag-and-drop/overview)-Element eingebaut werden.
Die im Editor verfügbaren Styling-Optionen stehen Ihnen auch beim Kodieren einer Vorlage zur Verfügung. Zum Beispiel:
```hubl theme={null}
<main class="body-container-wrapper">
{% dnd_area 'dnd_area'
label='Main section',
%}
{% dnd_section
background_image={
'backgroundPosition': 'MIDDLE_CENTER',
'backgroundSize': 'cover',
'imageUrl': 'https://example.com/path/to/image.jpg'
},
margin={
'top': 32,
'bottom': 32
},
padding={
'top': '1em',
'bottom': '1em',
'left': '1em',
'right': '1em'
},
max_width=1200,
vertical_alignment='MIDDLE'
%}
{% end_dnd_section %}
{% end_dnd_area %}
</main>
```
Eine vollständige Dokumentation aller verfügbaren Parameter für Drag-&-Drop-Elemente und Anwendungsbeispiele finden Sie in diesem Artikel über [dnd\_area-Tags](/docs/cms/reference/hubl/tags/dnd-areas).
Sie können Abschnitte verwenden, um schnell ein Gerüst für leicht lesbare Vorlagen zu erstellen. Da Sie nur im Kontext angeben, wo sich die vorlagenspezifischen Instanzen unterscheiden, können Sie immer noch zurückgehen und diese Abschnittsvorlage ändern.
> [!WARNING]
>
> **Hinweis:** Wenn Sie einen Abschnitt ändern, wird er in allen Instanzen dieses Abschnitts aktualisiert, mit Ausnahme bestehender Seiten, die eine Vorlage verwenden, die auf den Abschnitt verweist. Seiten, die zuvor mit einer einen Abschnitt enthaltenen Vorlage erstellt wurden, müssen manuell aktualisiert werden, um die neue Version des Abschnitts zu verwenden. Dadurch wird verhindert, dass versehentlich inkompatible Änderungen vorgenommen werden. Um einen Abschnitt auf die neueste Version zu aktualisieren, kann ein Content-Autor zum Seiten-Editor gehen, den neuen Abschnitt zur Seite hinzufügen und dann die alte Version löschen.
## Wiederverwendbare Abschnitte erstellen
Innerhalb eines Designs ist es möglich, vorkonfigurierte Abschnitte einzufügen, die Content-Autoren dann unter Verwendung dieses Designs im Seiten-Editor zu diesem Design hinzufügen können. Solche wiederverwendbaren Abschnitte werden als Abschnittsvorlagendateien erstellt und innerhalb der gleichen Syntax kodiert, die Sie in einem `dnd_area`-Element verwenden.
> [!WARNING]
>
> **Hinweis:** Um einen Abschnitt für mehrere Designs verfügbar zu machen, müssen Sie die Abschnittsvorlagendatei zu jedem Design hinzufügen. Abschnitte, die von Content-Autoren im Content-Editor erstellt wurden, sind ebenfalls nur innerhalb dieses Designs verfügbar.
Im Folgenden erfahren Sie, wie Sie Abschnittsvorlagendateien erstellen und dann in anderen Vorlagendateien darauf verweisen können.
### Vorlage Dateien für Abschnitte
Abschnitt Vorlagen werden in ihrer [Vorlagenanmerkung](/docs/cms/start-building/building-blocks/templates/html-hubl-templates#template-annotations) mit `templateType: section` gekennzeichnet.
```html theme={null}
<!--
templateType: section
label: Banner
description: "A banner typically used at the top of a page highlighting a product or main topic."
isAvailableForNewContent: true
screenshotPath: ../images/section-previews/banner.png
-->
```
| Parameter | Typ | Beschreibung | Wert |
| - | - | - | - |
| `templateType` | Zeichenfolge | Legt den Vorlagentyp fest, der verwendet wird, um zu bestimmen, wo die Vorlage verwendet werden kann und welche Daten dazu zur Verfügung stehen. | `section` |
| `label` | Zeichenfolge | Wird im Seiten-Editor verwendet, um einen für Menschen lesbaren Namen des Abschnitts bereitzustellen. | |
| `description` | Zeichenfolge | Weitere Beschreibung des Abschnitts, die über die Möglichkeiten eines Labels hinausgeht. Wird im Seiten-Editor angezeigt. Maximal 255 Zeichen. | |
| `screenshotPath` | Zeichenfolge/Pfad | Pfad zu einem Screenshot des Abschnitts. Dies wird verwendet, um Content-Autoren eine einfache visuelle Referenz dafür zu geben, wie der Abschnitt aussieht. | |
Eine Abschnittsvorlage muss mit einem `dnd_section`-Tag beginnen und enden. In einer Abschnittsvorlage kann nur ein `dnd_section`-Tag vorhanden sein. Innerhalb dieses Bereichs können Sie Module, Zeilen und Spalten platzieren, wobei Sie den gleichen `dnd_area`-Regeln folgen, die beim [Hinzufügen von einem dnd\_area-Element zu einer Seitenvorlage](/docs/cms/reference/hubl/tags/dnd-areas#dnd-area) gelten. Die Ausnahme besteht darin, dass Sie den Content nur für einen Abschnitt und dessen untergeordnete Drag-&-Drop-Elemente definieren.
```hubl theme={null}
<!--
templateType: section
label: Banner
description: "A banner typically used at the top of a page highlighting a product or main topic."
isAvailableForNewContent: true
screenshotPath: ../images/section-previews/banner.png
-->
{% dnd_section
padding={
'top': 200,
'right': 20,
'bottom': 200,
'left': 20
},
background_image={
'backgroundPosition': 'MIDDLE_CENTER',
'backgroundSize': 'cover',
'imageUrl': context.backgroundImage || get_asset_url('../images/blank-page-banner.png')
},
max_width=778,
vertical_alignment='MIDDLE'
%}
{% dnd_column %}
{% dnd_row %}
{% dnd_module path='@hubspot/rich_text' %}
{% module_attribute 'html' %}
<div style="text-align: center">
{{ context.content || '<h1 style="color: #fff;">Communicate <span style="font-weight: 400;">Your Way</span></h1><p style="color: #fff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dapibus posuere mi, in pretium ante posuere a. Aliquam a risus at eros molestie pretium.</p>' }}
</div>
{% end_module_attribute %}
{% end_dnd_module %}
{% end_dnd_row %}
{% dnd_row %}
{% dnd_module
path='../modules/button',
button_text={{ context.buttonText || 'Subscribe' }}
horizontal_alignment='CENTER'
%}
{% end_dnd_module %}
{% end_dnd_row %}
{% end_dnd_column %}
{% end_dnd_section %}
```
### Eine Teilversion des Abschnitts zu einer Vorlage hinzufügen
Nachdem Sie einen Abschnitt erstellt haben, können Sie innerhalb eines `dnd_area`-Elements darauf verweisen, indem Sie ein `include_dnd_partial`-Tag verwenden. Dieses Tag stellt den Pfad bereit, der auf die Abschnittsdatei verweist, wie unten dargestellt:
```hubl theme={null}
{% dnd_area 'dnd_area' class='body-container body-container--home-page', label='Main section' %}
{# Banner Section #}
{% include_dnd_partial path='../sections/banner.html' context={} %}
{# End Banner Section #}
{% end_dnd_area %}
```
> [!NOTE]
>
> Beachten Sie im obigen Beispiel das Kontext-Argument im `include_dnd_partial`-Tag. Auf diese Weise können Sie instanzspezifische Variablen von der Seitenvorlage für den Abschnitt übernehmen und die Standardwerte in der Abschnittsdatei überschreiben. Weitere Informationen [finden Sie im Abschnittskontext](#section-context).
### Bereichsinhalt
Sie können Bereichskontextvariablen verwenden, um die Standardwerte auf Abschnitts- und Modulebene zu überschreiben Abschnittskontextvariablen werden von Ihnen selbst definiert und sind nicht direkt mit den Modulen und ihren Feldern verknüpft.
In Ihrer Seitenvorlage können Sie diese Kontextvariablen über dem `context`-Parameter im `include_dnd_partial`-Tag festlegen.
```hubl theme={null}
{% dnd_area 'dnd_area' class='body-container body-container--home-page', label='Main section' %}
{# Banner Section #}
{% include_dnd_partial path='../sections/banner.html'
context={
'content': '<h1 style="color: #fff;">Home Page</h1><p style="color: #fff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dapibus posuere mi, in pretium ante posuere a. Aliquam a risus at eros molestie pretium.</p>',
'buttonText': 'Buy Now'
}
%}
{# End Banner Section #}
{% end_dnd_area %}
```
Auf alle Variablen, die Sie Ihrem `context`-Parameter hinzufügen, kann in Ihrer Abschnittsvorlage verwiesen werden. Das folgende Beispiel zeigt, wie die Bild-URL, der Rich-Text-Bereich und die Schaltfläche im Kontext festgelegt werden, falls vorhanden.
```hubl theme={null}
<!--
templateType: section
label: Banner
description: "A banner typically used at the top of a page highlighting a product or main topic."
isAvailableForNewContent: true
screenshotPath: ../images/section-previews/banner.png
-->
{% dnd_section
background_image={
'backgroundPosition': 'MIDDLE_CENTER',
'backgroundSize': 'cover',
'imageUrl': context.backgroundImage || get_asset_url('../images/blank-page-banner.png')
},
max_width=778
%}
{% dnd_column %}
{% dnd_row %}
{% dnd_module path='@hubspot/rich_text' %}
{% module_attribute 'html' %}
<div style="text-align: center">
{{ context.content || '<h1 style="color: #fff;">Communicate <span style="font-weight: 400;">Your Way</span></h1><p style="color: #fff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dapibus posuere mi, in pretium ante posuere a. Aliquam a risus at eros molestie pretium.</p>' }}
</div>
{% end_module_attribute %}
{% end_dnd_module %}
{% end_dnd_row %}
{% dnd_row %}
{% dnd_module
path='../modules/button',
button_text={{ context.buttonText || 'Subscribe' }}
horizontal_alignment='CENTER'
%}
{% end_dnd_module %}
{% end_dnd_row %}
{% end_dnd_column %}
{% end_dnd_section %}
```
> [!NOTE]
>
> Beachten Sie, dass überall dort, wo Kontextvariablen verwendet werden, ein `||` *ODER*-Filter vorhanden ist, um Standard-Content bereitzustellen, falls keiner angegeben wurde. Wenn beispielsweise im Schaltflächen-Modul „if“ einen Wert hat, `context.buttonText` wird er von der Seite verwendet. Andernfalls wird der Text auf `Subscribe` festgelegt.
### Sektionsklassen
In Abschnittsvorlagen können Sie dem Abschnitt-Wrapper mithilfe des Klassenparameters Klasse hinzufügen. Dadurch wird die von Ihnen angegebene Klasse dem Klassenfeld des im `dnd_section`-Abschnitt vorhandenen HTML-Element hinzugefügt. Es wird empfohlen, nach Möglichkeit Styling-Steuerelemente zu verwenden, die in die Abschnitte integriert sind, damit Content-Autoren diese ändern können.
> [!WARNING]
>
> **Hinweis:** Abschnittsklassen werden nur in Abschnittsvorlagen unterstützt.
```hubl theme={null}
{% dnd_section
class='my-hero-section'
padding={
'top': 200,
'right': 20,
'bottom': 200,
'left': 20
},
background_image={
'backgroundPosition': 'MIDDLE_CENTER',
'backgroundSize': 'cover',
'imageUrl': context.backgroundImage || get_asset_url('../images/blank-page-banner.png')
},
max_width=778,
vertical_alignment='MIDDLE'
%}
...
```
> [!WARNING]
>
> Content-Autoren können keine Klassen bearbeiten, hinzufügen oder entfernen. Diese lassen sich nur „entfernen“, indem dazu ein Abschnitt manuell im Editor neu erstellt wird.
>
> Außerdem sollten Sie es vermeiden, das Layout von untergeordneten Abschnitten mit CSS oder JavaScript zu ändern. Denn das kann dazu führen, dass der Content-Autor Probleme mit den Seiten-Editor hat.
### Berichtsvorschau anzeigen
Die einfachste Möglichkeit, während der Entwicklung eine Vorschau des jeweiligen Abschnitts anzuzeigen, ist die Verwendung des Design-Managers. Öffnen Sie eine Vorlage, die ein [`dnd_area`](/docs/cms/reference/hubl/tags/dnd-areas) enthält, wodurch Ihre Abschnittsvorlage mithilfe eines `include_dnd_partial`-Tags aufgerufen wird. Klicken Sie oben rechts auf „Vorschau“. Auf diese Weise können Sie Ihren Abschnitt ständig aktualisieren und die entsprechenden Änderungen umgehend visuell überprüfen. Das ist viel effizienter, als für jede Änderung eine neue Seite erstellen zu müssen.
## Abschnitts-HubL kopieren
Im Seiten-Editor können Sie das HubL-Markup für einen Drag-&-Drop-Abschnitt kopieren, um den Code bei Bedarf wiederzuverwenden. Dies kann hilfreich sein, wenn Sie einen Drag-&-Drop-Abschnitt in einer Code-Datei neu erstellen wollen.
Das HubL-Markup eines Abschnitts kopieren:
* Gehen Sie zu Ihrem Inhalt:
* **Website-Seiten**: Gehen Sie in Ihrem HubSpot-Account zu **Marketing** > \*\* Website \*\* > \*\* Website-Seiten\*\*.
* **Landingpages**: Gehen Sie in Ihrem HubSpot-Account zu **Marketing** > **Landingpages**.
* Bewegen Sie den Mauszeiger über eine Seite und klicken Sie auf **„Bearbeiten“**.
* Fügen Sie im Seiten-Editor den folgenden Parameter zur URL hinzu und drücken Sie dann die **Eingabetaste**: `?developerMode=true`
* Wenn die Seite neu geladen wird, befinden Sie sich jetzt im Entwicklermodus. Sie können den Entwicklermodus jederzeit beenden, indem Sie oben rechts auf **Entwicklermodus beenden** klicken.
* Bewegen Sie den Mauszeiger über den Abschnitt, den Sie kopieren möchten, und klicken Sie dann auf **das Symbol mit dem nach unten gerichteten Pfeil**. Wählen Sie **Als HubL kopieren** aus. Das HubL-Markup wird dann in Ihre Zwischenablage kopiert.
## Verwandte Ressourcen
* [Übersicht über Drag-&-Drop-Bereiche](https://developers.hubspot.de/docs/guides/cms/content/templates/drag-and-drop/overview)
* [HubL-Tags für Drag-&-Drop-Bereiche](/docs/cms/reference/hubl/tags/dnd-areas)
* [Verwenden von Modulen in Vorlagen](/docs/cms/reference/modules/using-modules-in-templates)
* [Erste Schritte mit Drag-&-Drop-Bereichen](/docs/cms/start-building/building-blocks/drag-and-drop/tutorial)
* [So aktivieren Sie den Entwicklermodus im Seiten-Editor von CMS Hub – YouTube](https://www.youtube.com)
# Blog-Vorlagen
Source: https://developers.hubspot.de/docs/cms/start-building/building-blocks/templates/blog
Blog-Listing- und Blogbeitragsvorlagen können verwendet werden, um das Erscheinungsbild des Blogs einer Website anzupassen.
> **Unterstützte Produkte**
HubSpot-Blogs bestehen aus Blog-Listing-Seiten und den einzelnen Blogbeiträgen. Neben dem Listing der einzelnen Blogbeiträge wird die Blog-Listing-Vorlage auch für die Darstellung der Autoren- und Tag-Listing-Seiten verwendet. Sie können entweder eine einzige Vorlage erstellen, um alle Seiten für Listing- und Blogbeitragsseiten darzustellen, oder Sie können zwei separate Vorlagen erstellen.
Im Folgenden erfahren Sie mehr über Blog-Vorlagen-Markup, Vorlagenkomponenten und Anpassungsoptionen.
## Eiine gemeinschaftlich nutzbare Vorlage für die Listing- und Post-Seiten erstellen
Um eine einzelne Vorlage zu erstellen, die die Listing- und Beitragsseiten darstellt, fügen Sie die `templateType: blog`-[Annotation](/docs/cms/start-building/building-blocks/templates/html-hubl-templates#template-annotations) am Anfang Ihrer Vorlagendatei hinzu. Wenn Sie eine Vorlage verwenden, um beides darzustellen, verwenden Sie eine [if-Anweisung](/docs/cms/reference/hubl/if-statements), die auswertet, ob sich der Benutzer eine Listing-Seite oder einen einzelnen Beitrag anschaut. Wenn Sie die [Layouts des Drag-&-Drop-Design-Managers](/docs/cms/start-building/building-blocks/drag-and-drop/drag-and-drop-templates) verwenden, ist diese `if`-Anweisung in die Benutzeroberfläche von Blog-Inhaltsmodulschaltflächen integriert.
Mit der `if is_listing_view`-Anweisung können Sie Ihren Post- und Listing-Code separat schreiben.
```hubl theme={null}
{% if is_listing_view %}
Markup for blog listing template
{% else %}
Markup for blog post template
{% endif %}
```
## Separate Listings und Beitragsvorlagen erstellen
Alternativ können Sie auch separate Vorlagen für [Blogbeitrag-](https://developers.hubspot.de/docs/guides/cms/content/templates/overview#blog-post) und [Listing-Seiten](https://developers.hubspot.de/docs/guides/cms/content/templates/overview#blog-listing) festlegen, um Ihren Code sauberer und für Entwicklerteams lesbarer zu machen und gleichzeitig die Vorlagenauswahl für Content-Autor zu erleichtern. Anstatt die `templateType: blog`-Anmerkung am Anfang jeder Vorlage zu verwenden, fügen Sie die folgenden [Anmerkungen](https://developers.hubspot.de/docs/guides/cms/content/templates/overview#template-types) jeweils oben in der entsprechenden Vorlage ein:
* **Vorlage für den Blogbeitrag:** `templateType: blog_post`
* **Vorlage für das Blog-Listing:** `templateType: blog_listing`
Beim Erstellen separater Beitrags- und Listing-Vorlagen ist die `is_listing_view`-Prüfung nicht erforderlich. Stattdessen [wählen Sie manuell separate Vorlagen](https://knowledge.hubspot.com/de/blog/manage-your-blog-template-and-settings#select-your-blog-templates) in den Blog-Einstellungen des Accounts aus.
Sie können [auch eine vorhandene einheitliche Blog-Vorlage migrieren, um daraus entweder eine Blogbeitrag- oder Blog-Listing-Vorlage zu machen](https://developers.hubspot.de/docs).
### Landing-Page-Vorlage
Die `templateType: blog_listing`-Anmerkung führt dazu, dass die Vorlage in den [Blog-Einstellungen auswählbar ist](https://knowledge.hubspot.com/de/blog/manage-your-blog-template-and-settings), insbesondere für die Listing-Ansicht. Mit diesem Vorlagentyp können Content-Autor auch im Seiten-Editor die Listing-Seite bearbeiten. Durch die Einbeziehung von [Drag-&-Drop-Bereichen](https://developers.hubspot.de/docs/guides/cms/content/templates/drag-and-drop/overview) in die Vorlage lassen sich Module im Seiten-Editor hinzufügen und entfernen, wie dies bei anderen CMS-Seiten der Fall ist. In den [CMS-Boilerplate-Blogvorlagen](https://github.com/HubSpot/cms-theme-boilerplate/pull/349) finden Sie u. a. Beispiele für Drag-&-Drop-Bereiche.
Die Auflistung von Beiträgen wird von einer [for-Schleife](/docs/cms/reference/hubl/loops) generiert, die Ihre Blogbeiträge durchläuft. `contents` ist eine vordefinierte Content-Sequenz, die alle in diesem Blog enthaltenen Beiträge enthält.
```hubl theme={null}
{% for content in contents %}
<div class="post-item">
Post item markup that renders with each iteration.
</div>
{% endfor %}
```
> [!NOTE]
>
> Wir empfehlen Ihnen, alle Textzeichenfolgen in Ihrer Blog-Listing-Vorlage über Felder zu steuern. Dies erleichtert die Erstellung [mehrsprachiger](/docs/cms/start-building/features/multi-language-content) Blogs und gibt Content-Schaffenden mehr Kontrolle.
## Ein Blog-Listing-Modul erstellen
Sie können es Content-Autoren ermöglichen, Module am Rand der Blog-Listing-Inhaltezu platzieren, z. B. an den Seiten oder ganz oben und unten. Um dies zu aktivieren, empfiehlt es sich, ein Blog-Listing-Modul zu erstellen, das ein [Blog-Listing für Schleifen](/docs/cms/start-building/building-blocks/templates/blog#blog-listing-for-loop) verwendet. Ein Beispiel hierfür ist das [Listing-Modul für den CMS-Boilerplate-Blog](https://github.com/HubSpot/cms-theme-boilerplate/tree/main/src/modules/blog-listings.module). [](https://github.com/HubSpot/cms-theme-boilerplate/tree/main/src/modules/blog-listings.module)
HubSpot bietet zwar [Blog-Einstellungen](https://knowledge.hubspot.com/de/blog/manage-your-blog-template-and-settings#select-your-blog-templates) für die Anzeige von Zusammenfassungen und die Verwendung von Feature-Bildern, Sie können diese Funktionen aber auch in Ihr Modul integrieren. Dies ermöglicht es Content-Autoren, diese Funktionen innerhalb des Seiten-Editors und nicht in den Blog-Einstellungen festzulegen.
## Blog-Autor-, Tag- und einfache Listing-Seiten
Neben den Blogbeitrags- und Blog-Listing-Seiten verfügen HubSpot-Blogs auch über Seiten für Blog-Autoren, Blogbeitrag-Tags und einfache Listings. Diese zusätzlichen Seiten verwenden dieselbe Vorlage wie die Blog-Listing-Seite, um Content zu rendern.
> [!NOTE]
>
> Da die Vorlage der Listing-Seite auch von der Blog-Autor-, Tag- und einfachen Listing-Seite genutzt wird, gelten an der Vorlage veröffentlichte Updates auch für diese Seiten.
Um das Layout dieser Seiten einzeln zu konfigurieren, können Sie `if`-Anweisungen verwenden, um Content je nach Seitentyp bedingt zu rendern.
### Ifblog\_author
Im standardmäßigen Blog-Listing-Markup von HubSpot gibt es eine `if blog_author`-Anweisung. Diese Anweisung wird als ‚true‘ gewertet, wenn man die Seite eines Autors aufruft, auf der die vom Autor veröffentlichten Beiträge aufgelistet sind. Die Boilerplate-Vorlage enthält den Namen des Autors, seinen Lebenslauf und seine Social-Media-Konten.
```hubl theme={null}
{% if blog_author %}
<div class="blog-header">
<div class="blog-header__inner">
{% if blog_author.avatar %}
<div class="blog-header__author-avatar" style="background-image: url('{{ blog_author.avatar }}');"></div>
{% endif %}
<h1 class="blog-header__title">{{ blog_author.display_name }}</h1>
<h4 class="blog-header__subtitle">{{ blog_author.bio }}</h4>
{% if blog_author.has_social_profiles %}
<div class="blog-header__author-social-links">
{% if blog_author.website %}
<a href="https://developers.hubspot.de/docs{{ blog_author.website }}" target="_blank">
{% icon name="link" style="SOLID" width="10" %}
</a>
{% endif %}
{% if blog_author.facebook %}
<a href="https://developers.hubspot.de/docs{{ blog_author.facebook }}" target="_blank">
{% icon name="facebook-f" style="SOLID" width="10" %}
</a>
{% endif %}
{% if blog_author.linkedin %}
<a href="https://developers.hubspot.de/docs{{ blog_author.linkedin }}" target="_blank">
{% icon name="linkedin-in" style="SOLID" width="10" %}
</a>
{% endif %}
{% if blog_author.twitter %}
<a href="https://developers.hubspot.de/docs{{ blog_author.twitter }}" target="_blank">
{% icon name="twitter" style="SOLID" width="10" %}
</a>
{% endif %}
</div>
{% endif %}
</div>
</div>
{% else %}
```
### If-Tag
Sie können eine `if tag`-Anweisung verwenden, um nur Code auf einer Seite zum Blogthemen-Listing zu rendern, die Besucher sehen können, wenn sie auf Ihrer Website auf ein Blogthema klicken. Das folgende Beispiel ist ein Snippet, das die Seitentitelvariable verwendet, um den Tag-Namen automatisch am Anfang einer Tag-Listing-Seite zu drucken.
```hubl theme={null}
{% if tag %}
<h3>Posts about {{ page_meta.html_title|split(" | ")|last }}</h3>
{% endif %}
```
### If notsimple\_list\_page
Es gibt zwei Typen von Blog-Listing-Seiten, die gerendert werden können, um Listings von Blogbeiträgen anzuzeigen: die reguläre Listing-Seite und eine einfache Listing-Seite:
– Das reguläre Listing durchläuft die in der Beitrags-Listing-Blog-Einstellung angegebene Anzahl von Beiträgen und nummeriert Seiten entsprechend.
* Ein einfaches Listing ist ein Listing aller Ihrer Beiträge und unterstützt keine Seitennummerierung. Das einfache Listing ist von der [Blog-Einstellung für das Beitragslimit](/docs/cms/start-building/introduction/developer-environment/website-settings#number-of-posts-per-listing-page) nicht betroffen und enthält in der Regel nur Links zu den letzten 200 Blogbeiträgen. Die Adresse Ihrer einfachen Listing-Seite ist die URL Ihres Blogs mit dem Zusatz `/all` am Ende des Pfades.
Sie können eine `if not simple_list_page`-Anweisung verwenden, um zu bestimmen, was in einem einfachen und was in einem regulären Listing dargestellt werden soll. Eine vereinfachte Version dieser Anweisung finden Sie weiter unten.
> [!NOTE]
>
> Beachten Sie bitte, dass die `if`-Anweisung umgekehrte Logik verwendet, was bedeutet, dass mit `else` die einfache Listing-Ansicht definiert wird. Optional können Sie stattdessen eine [unless-Anweisung](/docs/cms/reference/hubl/if-statements#unless-statements) verwenden.
```hubl theme={null}
{% if not simple_list_page %}
Iterated post markup for regular listing
{% else %}
<h2 class="post-listing-simple"><a href="https://developers.hubspot.de/docs{{content.absolute_url}}">{{ content.name }}</a></h2>
{% endif %}
```
## Seitennummerierung von Listings
Blog-Listing-Seiten haben eine automatisch generierte Seitennummerierung. Ihre Listing-Vorlage kann Logik enthalten, die es den Besuchern ermöglicht, einfach durch Ihre Blogbeiträge zu blättern. Der [Boilerplate-Blog](https://boilerplate.hubspotcms.com/blog) erhält durch [folgendes Markup](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/modules/blog-pagination.module/module.html) eine einfache Seitennummerierung:
```hubl theme={null}
{% if contents.total_page_count > 1 %}
<div class="blog-pagination">
{% set page_list = [-2, -1, 0, 1, 2] %}
{% if contents.total_page_count - current_page_num == 1 %}{% set offset = -1 %}
{% elif contents.total_page_count - current_page_num == 0 %}{% set offset = -2 %}
{% elif current_page_num == 2 %}{% set offset = 1 %}
{% elif current_page_num == 1 %}{% set offset = 2 %}
{% else %}{% set offset = 0 %}{% endif %}
<a class="blog-pagination__link blog-pagination__prev-link {{ "blog-pagination__prev-link--disabled" if !last_page_num }}" href="https://developers.hubspot.de/docs{{ blog_page_link(last_page_num) }}">
{% icon name="chevron-left" style="SOLID", width="13", no_wrapper=True %}
Prev
</a>
{% for page in page_list %}
{% set this_page = current_page_num + page + offset %}
{% if this_page > 0 and this_page <= contents.total_page_count %}
<a class="blog-pagination__link blog-pagination__number-link {{ "blog-pagination__link--active" if this_page == current_page_num }}" href="https://developers.hubspot.de/docs{{ blog_page_link(this_page) }}">{{ this_page }}</a>
{% endif %}
{% endfor %}
<a class="blog-pagination__link blog-pagination__next-link {{ "blog-pagination__next-link--disabled" if !next_page_num }}" href="https://developers.hubspot.de/docs{{ blog_page_link(current_page_num + 1) }}">
Next
{% icon name="chevron-right" style="SOLID", width="13", no_wrapper=True %}
</a>
</div>
{% endif %}
```
## Blog-Vorlagen-Markup
Unten sehen Sie das Boilerplate-Markup für die Blogbeitrag- und Blog-Listing-Seitenvorlagen. Sie können dieses Markup auch in der CMS-Boilerplate auf GitHub anzeigen, wie in den einzelnen Abschnitten aufgeführt.
### Blog-Vorlagen-Markup
Alle Blogbeiträge in einem Blog werden mit einer einzigen Blogvorlage erstellt. `Content` ist ein vordefiniertes Objekt von Daten, das Informationen zum angeforderten Blogbeitrag enthält. [Boilerplate-Beiträge](https://boilerplate.hubspotcms.com/blog) werden mit [folgendem Markup](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/blog-post.html) gerendert:
```hubl theme={null}
<div class="content-wrapper">
<div class="blog-post">
<h1>{{ content.name }}</h1>
<div class="blog-post__meta">
<a href="https://developers.hubspot.de/docs{{ blog_author_url(group.id, content.blog_post_author.slug) }}">
{{ content.blog_post_author.display_name }}
</a>
<div class="blog-post__timestamp">
{{ content.publish_date_localized }}
</div>
</div>
<div class="blog-post__body">
{{ content.post_body }}
</div>
{% if content.tag_list %}
<div class="blog-post__tags">
{% icon name="tag" style="SOLID" %}
{% for tag in content.tag_list %}
<a class="blog-post__tag-link" href="https://developers.hubspot.de/docs{{ blog_tag_url(group.id, tag.slug) }}">{{ tag.name }}</a>{% if not loop.last %},{% endif %}
{% endfor %}
</div>
{% endif %}
</div>
<div class="blog-comments">
{% module "blog_comments" path="@hubspot/blog_comments", label="Blog Comments" %}
</div>
</div>
```
Die Informationen zum Autor des Blogbeitrags sind ebenfalls in den `content`-Daten enthalten.
```hubl theme={null}
<img alt="{{ content.blog_post_author.display_name }}" src="{{ content.blog_post_author.avatar }}">
<h3>Written by <a class="author-link" href="https://developers.hubspot.de/docs{{ blog_author_url(group.id, content.blog_post_author.slug) }}">{{ content.blog_post_author.display_name }}</a></h3>
<p>{{ content.blog_post_author.bio }}</p>
{% if content.blog_post_author.has_social_profiles %}
<div class="hs-author-social-section">
<div class="hs-author-social-links">
{% if content.blog_post_author.facebook %}
<a href="https://developers.hubspot.de/docs{{ content.blog_post_author.facebook }}" target="_blank" class="hs-author-social-link hs-social-facebook">Facebook</a>
{% endif %}
{% if content.blog_post_author.linkedin %}
<a href="https://developers.hubspot.de/docs{{ content.blog_post_author.linkedin }}" target="_blank" class="hs-author-social-link hs-social-linkedin">LinkedIn</a>
{% endif %}
{% if content.blog_post_author.twitter %}
<a href="https://developers.hubspot.de/docs{{ content.blog_post_author.twitter }}" target="_blank" class="hs-author-social-link hs-social-twitter">Twitter</a>
{% endif %}
{% if content.blog_post_author.google_plus %}
<a href="https://developers.hubspot.de/docs{{ content.blog_post_author.google_plus }}?rel=author" target="_blank" class="hs-author-social-link hs-social-google-plus">Google+</a>
{% endif %}
</div>
</div>
{% endif %}
```
### Listing-Vorlagen-Markup
Die Inhalte der [Boilerplate-Blog-Listing-Seite](https://boilerplate.hubspotcms.com/blog) für die Schleife werden mit [folgendem Markup](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/blog-index.html) gerendert:
```hubl theme={null}
{% for content in contents %}
{# On the blog homepage the first post will be featured above older posts #}
{% if (loop.first && current_page_num == 1 && !topic) %}
<div class="blog-index__post blog-index__post--large">
<a class="blog-index__post-image blog-index__post-image--large"
{% if content.featured_image %}
style="background-image: url('{{ content.featured_image }}')";
{% endif %}
href="https://developers.hubspot.de/docs{{ content.absolute_url }}"></a>
<div class="blog-index__post-content blog-index__post-content--large">
<h2><a href="https://developers.hubspot.de/docs{{ content.absolute_url }}">{{ content.name }}</a></h2>
{{ content.post_list_content }}
</div>
</div>
{% else %}
<div class="blog-index__post blog-index__post--small">
<a class="blog-index__post-image blog-index__post-image--small"
{% if content.featured_image %}
style="background-image: url('{{ content.featured_image }}')";
{% endif %}
href="https://developers.hubspot.de/docs{{ content.absolute_url }}"></a>
<div class="blog-index__post-content blog-index__post-content--small">
<h2><a href="https://developers.hubspot.de/docs{{ content.absolute_url }}">{{ content.name }}</a></h2>
{{ content.post_list_content|truncatehtml(100) }}
</div>
</div>
{% endif %}
{% endfor %}
```
## Verwandte Ressourcen
* [Blog-Variablen](/docs/cms/reference/hubl/variables#blog-variables)
* [Blog-Vorlagen](/docs/cms/start-building/building-blocks/templates/blog)
* [HubSpot Theme Boilerplate](/docs/cms/start-building/building-blocks/themes/hubspot-cms-boilerplate)
* [So erstellen Sie ein Projekt](https://knowledge.hubspot.com/de/blog/create-a-new-blog)
* [Ihren Blog in HubSpot importieren](https://knowledge.hubspot.com/de/blog/import-your-content-into-hubspot)
# E-Mail-Vorlagen-Markup
Source: https://developers.hubspot.de/docs/cms/start-building/building-blocks/templates/email-template-markup
Der folgende Artikel enthält Informationen darüber, wie Standard-E-Mail-Vorlagen von HubSpot programmiert sind. Da E-Mail-Clients nur bestimmte HTML- und CSS-Funktionen unterstützen, erfordert das Schreiben von Code für E-Mail-Vorlagen, die auf allen Clients konsistent dargestellt werden, ein gewisses Maß an Erfahrung und Geduld. Um die Arbeit zu erleichtern, können HubSpot-E-Mail-Vorlagen entweder als benutzerfreundliche Vorlagenlayouts oder als Code-Dateien erstellt werden.
> **Unterstützte Produkte**
In diesem Artikel erfahren Sie mehr darüber, wie Standard-E-Mail-Vorlagen von HubSpot programmiert sind. Beachten Sie beim Erstellen benutzerdefinierter E-Mail-Vorlagen bitte, dass E-Mail-Clients [nur bestimmte HTML- und CSS-Funktionen unterstützen](http://www.campaignmonitor.com/css/). Aus diesem Grund erfordert das Schreiben von Code für E-Mail-Vorlagen, die auf allen Clients konsistent dargestellt werden sollen, ein gewisses Maß an Erfahrung und Geduld.
In der Wissensdatenbank von HubSpot erfahren Sie, wie Sie [Vorlagenlayouts in der App erstellen](https://knowledge.hubspot.com/de/design-manager/create-page-email-and-blog-templates-in-the-layout-editor) oder [eine bestehende E-Mail als Vorlage speichern](https://knowledge.hubspot.com/de/marketing-email/save-your-marketing-email-as-a-template) können.
## Erforderliche Variablen für E-Mail-Vorlagen
Um mit HubSpot E-Mails versenden zu können, müssen Ihre Vorlagen bestimmte Informationen enthalten. Informieren Sie sich dazu über die [erforderlichen HubL-E-Mail-Variablen](/docs/cms/reference/hubl/variables#required-email-template-variables). Wenn Sie mit Code-Vorlagen arbeiten, sollten Sie auch [Module](https://developers.hubspot.de/docs/guides/cms/content/modules/overview) verwenden, um sicherzustellen, dass der E-Mail-Inhalt problemlos für jede einzelne E-Mail bearbeitet werden kann.
## hs-inline-css and data-hse-inline-css
Eine Herausforderung beim Schreiben von Code für E-Mail-Vorlagen, die auf allen Clients korrekt dargestellt werden, ist [die fehlende Unterstützung für CSS](http://www.campaignmonitor.com/css/) in einem `<style>` innerhalb des `<head>`.
Um das Schreiben von Code für E-Mail-Vorlagen zu vereinfachen, unterstützen Code-E-Mail-Vorlagen von HubSpot ein spezielles style-Tag, das Designern die Möglichkeit gibt, CSS zu schreiben, der kompiliert und in Inline-CSS umgewandelt wird und zu den gewünschten Elementen hinzugefügt wird. Jeder Code, der zu einem style-Tag mit der ID `hs-inline-css` hinzugefügt wird, wird auch zu den Ziel-Tags hinzugefügt.
Microsoft Outlook wendet beispielsweise eine Standard-Schriftart auf den gesamten in `<td>`-Tags enthaltenen Text an, es sei denn, Sie geben für diese Tabellenspalte eine Inline-Schriftart an. Im folgenden Beispiel wird das `hs-inline-css`-style-Tag verwendet, um allen Tabellenspalten in der Vorlage eine Schriftart hinzuzufügen. Bitte beachten Sie, dass alle Medienabfragen in einem separaten`<style>`-Element enthalten sein sollten, da sie nicht inline erfolgen können.
Bitte beachten Sie ebenfalls, dass das `data-hse-inline-css`-Attribut in einem `<style>`-Tag im Abschnitt **Bearbeiten** > **Überschrift bearbeiten** von Drag-&-Drop-Vorlagen `hs-inline-css` ersetzt, um das Gleiche zu erreichen. In Code-Dateien können beide Methoden verwendet werden (solange nur ein`style#hs-inline-css`-Element pro Vorlage vorhanden ist). Es dürfen mehrere `style[data-hs-inline-css="true"]`-Elemente verwendet werden.
```text eingabe.txt theme={null}
<!doctype html>
<html>
<head>
{# coded email templates ONLY: #}
<style type="text/css" id="hs-inline-css">
td {
font-family: Arial, sans-serif;
}
</style>
{# coded OR drag-and-drop email templates: #}
<style type="text/css" data-hse-inline-css="true">
table {
font-family: 'Courier New', sans-serif;
}
</style>
</head>
<body>
<table>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
</body>
</html>
```
```text ausgabe.txt theme={null}
<!doctype html>
<html>
<head>
<style type="text/css" id="hs-inline-css">
td {
font-family: Arial, sans-serif;
}
</style>
<style
type="text/css"
data-hse-inline-css="true"
data-hse-element-inlined="true"
>
table {
font-family: 'Courier New', sans-serif;
}
</style>
</head>
<body>
<table style="font-family:'Courier New', sans-serif">
<tr>
<td style="font-family: Arial, sans-serif">Column 1</td>
<td style="font-family: Arial, sans-serif">Column 2</td>
</tr>
</table>
</body>
</html>
```
## Responsive E-Mail-Vorlage
Das Standard-E-Mail-Vorlagenlayout von HubSpot verwendet das unten stehende Markup. Diese responsiven Layouts enthalten Medienabfragen, die die Bilder und Tabellen responsiv machen. Die responsiven Layouts verwenden [Farb- und Schriftartvariablen](/docs/cms/reference/hubl/variables#color-and-font-settings), die mit **Einstellungen > Marketing > E-Mail** verknüpft sind.
> [!WARNING]
>
> Wenn Sie mit dem responsiven Layout von HubSpot arbeiten, wird jedes `<td>`-Element mit einer Klasse, das die Text-„Spalte“ enthält, responsiv.
```hubl theme={null}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>{% if content.html_title and content.html_title != "" %}{{ content.html_title }}{% else %}{{ content.body.subject }}{% endif %}
{% if content.meta_description %}{% endif %}
{% text "preview_text" label="Preview Text This will be used as the preview text that displays in some email clients", value="", no_wrapper=True %}
{% if content.create_page %}
Not rendering correctly? View this email as a web page here.
{% endif %}
{% logo "logo_image" suppress_company_name=True, overrideable=True, label='Logo' %}
{% content_attribute "email_body" %}
Hi {{ contact.firstname }},
Describe what you have to offer the customer. Why should they read? What did you promise them in the subject line? Tell them something cool. Make them laugh. Make them cry. Well, maybe don't do that...
Use a list to:
Explain the value of your offer
Remind the reader what they’ll get out of taking action
```
## Einfache E-Mail-Vorlage
Einfache HubSpot-Vorlagenlayouts verwenden ein anderes Markup und enthalten keine Mediaenabfragen, die die E-Mail responsiv machen. Einfache Layouts verwenden außerdem [Farb- und Schriftartvariablen](/docs/cms/reference/hubl/variables#color-and-font-settings) die mit **Einstellungen > Marketing > E-Mail** verknüpft sind.
```hubl theme={null}
{% if content.html_title and content.html_title != "" %}{{ content.html_title }}{% else %}{{ content.body.subject }}{% endif %}
{% if content.meta_description %}{% endif %}
{% text "preview_text" label="Preview Text This will be used as the preview text that displays in some email clients", value="", no_wrapper=True %}
{% if content.create_page %}
Not rendering correctly? View this email as a web page here.
{% endif %}
{% logo "logo_image" suppress_company_name=True, overrideable=True, label="Logo" %}
{% content_attribute "email_body" %}
Hi {{ contact.firstname }},
Describe what you have to offer the customer. Why should they read? What did you promise them in the subject line? Tell them something cool. Make them laugh. Make them cry. Well, maybe don't do that...
Use a list to:
Explain the value of your offer
Remind the reader what they’ll get out of taking action
```
## Bei Null beginnen
Wenn Sie von Grund auf neu beginnen, indem Sie eine .html-E-Mail im Design-Manager erstellen, generiert HubSpot automatisch das unten stehende Markup.
```hubl theme={null}
{% if content.html_title and content.html_title != '' %}{{ content.html_title }}{% else %}{{ content.body.subject }}{% endif %}
{% if content.meta_description %}{% endif %}
{% text "preview_text" label="Preview Text This will be used as the preview text that displays in some email clients", value="", no_wrapper=True %}
{% if content.create_page %}
Not rendering correctly? View this email as a web page here.
{% endif %}
{{ site_settings.company_name }}
{{ site_settings.company_street_address_1 }}
{{ site_settings.company_street_address_2 }}
{{ site_settings.company_city }}
{{ site_settings.company_state }}
{{ site_settings.company_zip }}
{{ site_settings.company_country }}
You received this email because you are subscribed to {{ subscription_name }} from {{ site_settings.company_name }}.
Update your email preferences to choose the types of emails you receive.
Unsubscribe from all future emails
```
# HTML- + HubL-Vorlagen
Source: https://developers.hubspot.de/docs/cms/start-building/building-blocks/templates/html-hubl-templates
CMS Hub-Vorlagen sind in HTML und HubL geschrieben. Diese Vorlagen können Bereiche enthalten, die von den Content-Autoren leicht selbst bearbeitet werden können.
HTML + HubL-Vorlagen können für [jede Art von Vorlage](https://developers.hubspot.de/docs/guides/cms/content/templates/overview#template-types) in CMS Hub verwendet werden. Diese Vorlagen sind .html-Dateien, die die [HubL-Vorlagensprache](/docs/cms/reference/hubl/operators-and-expression-tests) unterstützen. Da diese Code-Vorlagen HubL unterstützen, empfiehlt sich für das Anzeigen einer Vorschau die Verwendung der [Vorlagenvorschau im Design-Manager](https://knowledge.hubspot.com/de/website-pages/understand-a-hubspot-template-setup) oder das Anzeigen von Seiten in einem Sandbox-Account. HTML + HubL-Vorlagen können [Teilvorlagen](#partials) enthalten, mit denen häufig verwendete Code-Abschnitte, wie Header und Footer, voneinander getrennt werden können.
HTML + HubL-Vorlagen bieten Entwicklern eine größere Kontrolle als [Drag-&-Drop-Vorlagen eines visuellen Design-Managers](/docs/cms/start-building/building-blocks/drag-and-drop/drag-and-drop-templates). Entwickler wiederum können Content-Autoren durch die [Drag-&-Drop-Funktionalität](/docs/cms/reference/hubl/tags/dnd-areas), die nur mit HTML + HubL-Vorlagen möglich ist, ein besseres Erlebnis bieten.
> [!NOTE]
>
> Die obige Vorlage ist die [base.html-Vorlage](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/layouts/base.html), die in der [CMS Hub-Boilerplate](/docs/cms/start-building/building-blocks/themes/hubspot-cms-boilerplate) enthalten ist, die eine großartige Möglichkeit ist, mit der Entwicklung mit HubSpot zu beginnen.
## Vertrautheit und Tools
Da es sich bei den HTML + HubL-Vorlagen um Code-Dateien handelt, können Sie diese mithilfe Ihrer bevorzugten Tools lokal bearbeiten. Es wird empfohlen, die [Tools für lokale Entwicklung](https://developers.hubspot.de/docs/guides/cms/tools/local-development-cli) von HubSpot zu verwenden, damit Sie Dateien [hochladen](https://developers.hubspot.de/docs/guides/cms/tools/local-development-cli#upload), [abrufen](https://developers.hubspot.de/docs/guides/cms/tools/local-development-cli#fetch), [überwachen](https://developers.hubspot.de/docs/guides/cms/tools/local-development-cli#watch), [erstellen](https://developers.hubspot.de/docs/guides/cms/tools/local-development-cli#create) und anderweitig sicher im Entwickler-Dateisystem sowie im Datei-Manager verwalten können.
Das Erstellen von HTML + HubL-Vorlagen mit HubSpot ähnelt der Verwendung einer anderen Vorlagensprache, die Sie möglicherweise bereits verwendet haben. Der Hauptunterschied besteht darin, dass HubSpot seine ganz eigenen Vorstellungen hat, wie man Content-Autoren am besten ein optimales Erlebnis bietet, und dem Entwickler einen Großteil der Wartungs- und Performanceoptimierungsarbeit abnimmt.
Wenn Sie beispielsweise die CSS-Datei für bestimmte Module auf eine Seite laden möchten, sollten Sie, statt `` zu verwenden, das Stylesheet über `css_assets` in die [meta.json-Datei des Moduls](/docs/cms/reference/modules/configuration#adding-css-and-javascript-dependencies) einfügen. Dies ermöglicht HubSpot, das CSS nur dann bedingt zu laden, wenn das Modul auf einer Seite vorhanden ist. Auf diese Weise wird die Menge an unnötigem geladenen CSS minimiert.
Erfahren Sie mehr über das [Optimieren Ihres HubSpot-Entwicklungsworkflows](/docs/cms/start-building/introduction/developer-environment/creating-an-efficient-development-workflow).
## Vorlagenannotationen
Vorlagenannotationen, die oben in einer Vorlage enthalten sind, konfigurieren wichtige Vorlageneinstellungen, z. B. den Vorlagentyp und ob er zum Erstellen neuer Inhalte verwendet werden kann. Vorlagenannotationen können während des Entwicklungsprozesses jederzeit geändert werden. Im Folgenden erfahren Sie mehr über verfügbare Vorlagenannotationen.
```html theme={null}
...
```
| Annotation | Typ | Beschreibung |
| - | - | - |
| `templateType` | Zeichenfolge | Gibt an, welcher Vorlagentyp eine Datei ist. Werte sind:
|
| `isAvailableForNewContent` | Zeichenfolge | Gibt an, ob eine Vorlage bei der Erstellung von Inhalten zur Auswahl steht. Werte sind: `true`, `false`. Auf `false` festgelegte Vorlagen müssen die [erforderlichen Variablen](/docs/cms/reference/hubl/variables#required-page-template-variables) nicht enthalten. Vorlagen vom Typ `page`, die auf „false“ festgelegt sind, können ebenfalls als [Standardteilvorlagen](#partials) verwendet werden. |
| `enableDomainStylesheets` | Zeichenfolge | Gibt an, ob die Vorlage [Domain-Stylesheets](https://knowledge.hubspot.com/de/design-manager/create-edit-and-attach-css-files-to-style-your-site#attach-or-remove-stylesheets-on-a-domain-level) laden soll. Die Werte umfassen: `true`, `false`. |
| `Label` | Zeichenfolge | Benutzerfreundliche Beschreibung der Vorlage, die im Bildschirm für die Vorlagenauswahl angezeigt wird. Zum Beispiel: `About Page`, `Homepage`, `Pricing`. |
| `screenshotPath` | Zeichenfolge | Der Screenshot, der angezeigt wird, wenn ein Content-Autor eine Vorlage auswählt. Anhand dieses Screenshots sollten Sie Ihre Vorlagen leicht unterscheiden können. |
## Header- und Footer-Incudes
Bei HubSpot-Vorlagen müssen zwei Tags vorhanden sein, es sei denn, die Datei ist eine Teilvorlage. Die beiden Tags sind:
* `{{ standard_header_includes }}` – Wird verwendet, um auf intelligente Weise kombinierte und minifizierte erforderliche CSS-Dateien hinzuzufügen.
* `{{ standard_footer_includes }}` – Wird verwendet, um JavaScript auf intelligente Weise dynamisch am unteren Rand einer Seite hinzuzufügen, z. B. für das HubSpot-Tracking-Skript und Module.
Diese Tags müssen in einer Vorlage oder ihren untergeordneten [Teilvorlagen](#partials) vorhanden sein, damit sie veröffentlicht und verwendet werden können.
## Teilvorlagen
Teilvorlagen sind HTML + HubL-Dateien, die in andere Code-Dateien eingefügt werden können. Mit Teilvorlagen können Sie einen modulareren Ansatz verfolgen, indem Sie Markups zwischen mehreren Vorlagen teilen. Ein Header kann beispielsweise zu einer Teilvorlage gemacht werden, sodass Sie ihn einfach als Komponente einbinden können, ohne ihn erneut codieren zu müssen.
### Standardteilvorlagen
Eine Standardvorlage ist eine wiederverwendbare Vorlage oder Komponente, die Inhalte enthält, die auf einzelnen Seiten bearbeitet werden können. Dies ermöglicht es Content-Autoren, den Inhalt nach Bedarf zu ändern, im Gegensatz zu globalen Teilvorlagen, die immer Inhalte teilen. Beispielsweise würde der folgende Code das Seitenleistenmodul in eine andere Vorlagendatei ziehen.
Standardteilvorlagen müssen die folgenden [Annotationen](/docs/cms/start-building/building-blocks/templates/html-hubl-templates#template-annotations) oben in der Vorlagendatei enthalten:
* `templateType: page`
* `isAvailableForNewContent: false`
```hubl theme={null}
{% include "../partial/sidebar.html" %}
```
### Globale Teilvorlagen
Eine globale Teilvorlage ist ein Typ von [globalem Inhalt](/docs/cms/start-building/building-blocks/global-content#global-partials), der in mehreren Vorlagen verwendet werden kann, wobei der Inhalt in allen Instanzen des Teils gemeinsam genutzt wird. Globale Teilvorlagen werden häufig für Header und Footer verwendet, was Sie beispielsweise im [Header](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/partials/header.html) und [Footer](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/partials/footer.html) der CMS Hub-Boilerplate sehen können. Diese Teilvorlagen werden dann in der [base.html](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/layouts/base.html)-Datei mithilfe des `global_partial`-Tags aufgerufen.
Globale Teilvorlagen müssen die [Annotation](/docs/cms/start-building/building-blocks/templates/html-hubl-templates#template-annotations) `templateType: global_partial` oben in der Datei enthalten.
```hubl theme={null}
{% global_partial path="../partials/header.html" %}
```
### Blöcke und Erweiterungen
Bei der Erstellung komplexer Vorlagen können Sie unterteilte Blöcke erstellen, die eine übergeordnete Vorlage erweitern.
Sie können beispielsweise eine übergeordnete Vorlage erstellen, die die erforderlichen [`standard_header_includes`](/docs/cms/reference/hubl/variables#required-page-template-variables)- und [`standard_footer_includes`](/docs/cms/reference/hubl/variables#required-page-template-variables)-Variablen enthält. Innerhalb dieser Vorlage definieren Sie einen eindeutigen Block unter Verwendung der folgenden Syntax, wobei `body` ein eindeutiger Name ist:
```hubl theme={null}
{% block body %}
{% endblock body %}
```
Dann können Sie in der untergeordneten Vorlage die übergeordnete Vorlage erweitern und dann mehr Inhalt in den `body`-Block einfügen.
```hubl theme={null}
{% extends "./layouts/base.html" %}
{% block body %}
Page Content
Bullet 1
Bullet 2
Bullet 3
{% endblock %}
```
Diese Methode wird in der [base.html](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/layouts/base.html)-Vorlage der CMS Hub Boilerplate verwendet, die dann um die anderen Vorlagen im [Vorlagen-Ordner](https://github.com/HubSpot/cms-theme-boilerplate/tree/main/src/templates) erweitert wird.
### Globale Gruppen
[Globale Gruppen](https://knowledge.hubspot.com/de/design-manager/use-global-content-across-multiple-templates), die mit der Drag-&-Drop-Vorlagendesigner im Design-Manager erstellt wurden, können ebenfalls einbezogen werden. Die Syntax ist unten dargestellt:
```hubl theme={null}
{% include "/path/to/global_header.template.json" %}
```
# Übersicht über Vorlagen
Source: https://developers.hubspot.de/docs/cms/start-building/building-blocks/templates/overview
Vorlagen sind wiederverwendbare Seiten- oder E-Mail-Wrapper, die im Allgemeinen Module und Teilvorlagen in ein Layout platzieren. Content-Autoren wählen eine Vorlage aus, die sie bei der Erstellung einer Seite oder E-Mail verwenden.
Vorlagen definieren das Layout Ihrer HubSpot-Seiten, -E-Mails und -Designs. Eine Vorlage besteht aus Modulen und Teilvorlagen und kann auf andere Elemente wie Stylesheets und JavaScript-Dateien verweisen. Vorlagen können entweder über das [HubSpot-CLI](/docs/cms/start-building/introduction/react-plus-hubl/react-plus-hubl-quickstart) oder im [Design-Manager von HubSpot](https://knowledge.hubspot.com/de/design-manager/create-page-email-and-blog-templates-in-the-layout-editor) erstellt werden. Für Content-Autoren ist das Auswählen einer Vorlage der erste Schritt bei der Erstellung einer Seite oder E-Mail.
Im Folgenden erfahren Sie, wie Sie eine Vorlage erstellen, welche Arten von Vorlagen es gibt und was in Ihren Vorlagen enthalten ist.
## Eine Vorlage erstellen
Um eine Vorlage zu erstellen, können Sie entweder den [Design-Manager in HubSpot](https://knowledge.hubspot.com/de/design-manager/create-page-email-and-blog-templates-in-the-layout-editor) verwenden oder den `hs create template`-CLI-Befehl ausführen.
```shell theme={null}
hs create template [dest]
```
| Parameter | Beschreibung |
| - | - |
| `name` | Der Name der Vorlage |
| `dest` | Der Pfad des lokalen Verzeichnisses, in dem Sie die Vorlage erstellen möchten. Falls nicht vorhanden, wird die Vorlage in dem Verzeichnis erstellt, in dem Sie sich gerade befinden. |
* Navigieren Sie mit den Pfeiltasten zu dem [Typ von Vorlage](#template-types), den Sie erstellen möchten, und drücken Sie dann die **Eingabetaste**.
Die Vorlage wird dann lokal erstellt. Wenn Sie die Vorlage zur Verwendung in Ihrem HubSpot-Account bereitstellen möchten, müssen Sie die Vorlage in Ihren Account [hochladen](https://developers.hubspot.de/docs/guides/cms/tools/local-development-cli#upload). Sie können auch den [watch](https://developers.hubspot.de/docs/guides/cms/tools/local-development-cli#watch)-Befehl verwenden, um automatisch alle neuen Dateien und Änderungen an bestehenden Dateien im aktuellen Arbeitsverzeichnis und in den Unterverzeichnissen hochzuladen.
## Vorschau einer Vorlage anzeigen
Nachdem Sie eine Vorlage aktualisiert haben, können Sie eine Vorschau anzeigen, um sicherzustellen, dass sie so aussieht und sich so verhält wie erwartet. Es gibt verschiedene Möglichkeiten in HubSpot, die Vorschau einer Vorlage anzuzeigen, z. B.:
* **Vorschau einer Vorlage im Design-Manager:** Eignet sich am besten für schnelle visuelle Überprüfungen oder wenn Sie einen Blogbeitrag, ein Listing oder eine kombinierte Vorlage in einer Vorschau anzeigen müssen.
* **Erstellen eines neuen Elements über eine Vorlage:** Eignet sich am besten für das Testen des Drag-and-Drop-Editors und der Content-Erstellung.
### Vorschau mit dem Design-Manager
Die Vorschau von Vorlagen mithilfe des Design-Managers kann für schnelle visuelle Überprüfungen besonders hilfreich sein. Mit der Vorlagenvorschau können Sie auch Anzeigeoptionen konfigurieren, z. B. Viewport-Maße.
So zeigen Sie die Vorschau einer Vorlage im Design-Manager an:
* Gehen Sie in Ihrem HubSpot-Account zu **Marketing** > **Dateien und Vorlagen** > **Design-Manager**.
* Klicken Sie im Datei-Explorer in der linken Seitenleiste auf die **Vorlage**, die Sie in der Vorschau anzeigen möchten.
* Klicken Sie oben rechts auf **Vorschau**.
* Wählen Sie **Live-Vorschau mit Anzeigeoptionen** aus, um eine Vorschau der Vorlage mit Optionen zum Testen der Responsivität und der Domain-Einstellungen wie Stylesheets anzuzeigen. Diese Option zeigt die Seite in einem iFrame an. Auf diese Weise können Sie auch zwischen Blogs und der Blogbeitrags- oder Listing-Ansicht für Blogvorlagen wählen.
* Wählen Sie **Vorschau ohne Anzeigeoptionen** aus, um eine Vorschau der Vorlage ohne zusätzliche Optionen anzuzeigen.
### Vorschau mit einer neuen Seite
Wenn Sie Drag-and-Drop-Bereiche, Standardparameterwerte in Modulen oder andere wichtige Komponenten ändern, empfiehlt es sich, mithilfe der Vorlage eine [Website-Seite](https://knowledge.hubspot.com/de/website-and-landing-pages/create-and-customize-pages), einen [Blog](https://knowledge.hubspot.com/de/blog/create-a-new-blog), einen [Blogbeitrag](https://knowledge.hubspot.com/de/blog/create-and-publish-blog-posts) oder eine [E-Mail](https://knowledge.hubspot.com/de/marketing-email/create-marketing-emails-in-the-drag-and-drop-email-editor) zu erstellen. Sie können dann verschiedene Werte für die Modulfelder ausprobieren und testen, wie Ihre Vorlage tatsächlich aussehen wird. Anschließend können Sie die Vorlage so optimieren, dass Content-Autoren ideal mit ihr arbeiten können. Sie können diese Elemente entweder veröffentlichen oder zu Testzwecken im Entwurfsmodus belassen.
Darüber hinaus können Sie [Content-Staging](https://knowledge.hubspot.com/de/website-pages/redesign-and-relaunch-your-site-with-content-staging#new) oder einen [Entwickler-Sandbox-Account](https://offers.hubspot.com/free-cms-developer-sandbox) verwenden, um Elemente zu erstellen und anzuzeigen, ohne einen Produktions-Account zu beeinträchtigen.
## Vorlagentypen
Vorlagen können für verschiedene Typen von Inhalten verwendet werden, z. B. für Website-Seiten und Blogbeiträge. Bei Code-Vorlagen geben Sie den Typ der Vorlage an, indem Sie eine Annotation am Anfang der Datei hinzufügen.
Im Folgenden erfahren Sie mehr über die verschiedenen Typen von Vorlagen und die Annotationen, die Sie zur Kennzeichnung der einzelnen Typen verwenden können.
> [!WARNING]
>
> ### Hinweis:
>
> Ein Content-Autor kann die Vorlage einer Seite gegen eine andere Vorlage desselben Typs austauschen, je nachdem, ob sie [dnd\_area](https://developers.hubspot.de/docs/reference/cms/hubl/tags/dnd-areas)-Tags enthält.
>
> * Mit dem visuellen Drag-and-Drop-Layout-Editor erstellte Vorlagen können gegen andere Drag-and-Drop-Vorlagen oder Code-Vorlagen mit oder ohne `dnd_area`-Tags ausgetauscht werden.
> * Code-Vorlagen mit *dnd\_area*-Tags können nur gegen andere Code-Vorlagen mit `dnd_area`-Tags ausgetauscht werden.
> * Code-Vorlagen ohne `dnd_area`-Tags können nur gegen andere Code-Vorlagen ohne `dnd_area`-Tags ausgetauscht werden.
### Seite
```html theme={null}
templateType: page
```
Seitenvorlagen sind der Vorlagentyp mit den meisten Möglichkeiten. Sie können als jede Art von Webseite oder [Landingpage](https://blog.hubspot.com/blog/tabid/6307/bid/7177/what-is-a-landing-page-and-why-should-you-care.aspx) dienen. [Seitenlayouts](#layout-css) werden nicht mit Komponenten vorab ausgefüllt. Code-Seitenvorlagen sind mit nur wenig Markup vorab ausgefüllt, darunter vorgeschlagene HubL-Tags für Meta-Informationen, Titel und erforderliche Header- und Footer-[Includes](#included-cms-files). Beispiele für Seiten, die typischerweise eine Seitenvorlage verwenden, sind unter anderem:
* [Homepage](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/home.html)
* [Über uns](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/about.html)
* [Kontakt](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/contact.html)
### E-Mail
```html theme={null}
templateType: email
```
E-Mail-Vorlagen werden vom [E-Mail-Tool](https://www.hubspot.de/products/marketing/email) verwendet. Sie unterliegen strengsten Anforderungen, da sie in vielen verschiedenen E-Mail-Clients angezeigt werden und den Best Practices entsprechen müssen, um eine ordnungsgemäße Zustellbarkeit zu gewährleisten. Die Drag-and-Drop-E-Mail-Vorlagen für [HTML und HubL](/docs/cms/start-building/building-blocks/templates/html-hubl-templates) und den Design-Manager werden bei der Erstellung mit Basiskomponenten vorausgefüllt. Vorlagen mit diesem `templateType` sind nur beim [Erstellen einer E-Mail](https://knowledge.hubspot.com/de/marketing-email/create-and-send-marketing-emails-with-the-updated-classic-editor) als auswählbare Vorlage sichtbar.
Um [CAN-SPAM](https://knowledge.hubspot.com/de/marketing-email/edit-office-location-information-in-email-footers)-konform zu sein, müssen E-Mail-Vorlagen über eine Reihe von [erforderlichen Variablen](https://developers.hubspot.de/docs/reference/cms/hubl/variables#required-email-template-variables) verfügen.
E-Mail-Vorlagen verfügen außerdem über eine integrierte Funktion für [inline-css](/docs/cms/start-building/building-blocks/templates/email-template-markup#hs-inline-css-and-data-hse-inline-css), das `
{% end_require_css %}
{##### Module HTML #####}
```
### Stile und JavaScript
* Stile:
* Module dürfen keine leere Stilgruppe enthalten.
* Das Hartcodieren von Inline-Stilen innerhalb von Modulen wird nicht empfohlen. Verwenden Sie stattdessen dynamische Inlineformatvorlagen, indem Sie Felder zur Steuerung von Stilen aktivieren.
* JavaScript:
* JavaScript muss immer mehrere Instanzen eines Moduls darstellen können. JavaScript im JS-Fenster wird nur einmal pro Seite geladen, unabhängig davon, wie häufig ein Modul vorkommt.
* JavaScript sollte DOM-Elemente anhand von modulspezifischen Klassennamen referenzieren, um sicherzustellen, dass Elemente außerhalb des Moduls nicht unbeabsichtigt betroffen sind.
Beim Erstellen von Modulen können Sie die integrierte Variable `{{name}}` verwenden. Diese Variable ruft die Instanz-ID des Moduls ab (kann nur im Fenster „HTML+HubL“ verwendet werden), um beim CSS- und JS-Markup für komplexe Module zu helfen. [Erfahren Sie mehr darüber in der Entwicklerdokumentation.](/docs/cms/reference/modules/files#require-css-block)
## Feldstruktur
Es müssen die folgenden Anforderungen an die Feldstruktur und -gruppierung erfüllt sein.
### Registerkarte „Content“
* Wenn es innerhalb einer Feldgruppe mindestens ein Steuerelement gibt, müssen alle Steuerelemente in nach ihrer Funktion gekennzeichneten Kategorien gruppiert werden.
* Modulfelder, die der Registerkarte *Content* hinzugefügt wurden, müssen es ermöglichen, den Content eines Moduls anzupassen. Zum Beispiel Steuerelemente für Bilder, Symbole, ALT-Text und Links.
### Registerkarte „Stile“
Die Modulstil-Feldgruppen müssen konsistent sein und einem Muster folgen. Nachfolgend finden Sie eine empfohlene Reihenfolge für Ihre Stilfeldgruppen. Diese Gruppen können sich auf der obersten Ebene befinden oder dürfen nur [mit einer direkt darunterliegenden Gruppe verschachtelt sein](#multi-level-grouping). Leere Gruppen können auch entfernt werden:
* [Voreinstellungen](#presets)
* Text
* Hintergrund
* Rahmen
* Hover
* Ecke
* Abstand
* Ausrichtung
* Benutzerdefinierte Stilgruppen, die nicht zu den oben genannten passen
* Erweitert
Die folgenden Feldtypen müssen auf der *Stile*-Registerkarte enthalten sein, falls vorhanden:
* [Ausrichtung](/docs/cms/reference/fields/module-theme-fields#alignment)
* [Hintergrundbild](/docs/cms/reference/fields/module-theme-fields#background-image)
* [Rahmen](/docs/cms/reference/fields/module-theme-fields#border)
* [Farbe](/docs/cms/reference/fields/module-theme-fields#color)
* [Schriftart](/docs/cms/reference/fields/module-theme-fields#font)
* [Farbverlauf](/docs/cms/reference/fields/module-theme-fields#gradient)
* [Abstand](/docs/cms/reference/fields/module-theme-fields#spacing)
* [Textausrichtung](/docs/cms/reference/fields/module-theme-fields#text-alignment)
Wenn Sie Felder von der Registerkarte *Content* zur Registerkarte *Stile* verschieben, erfahren Sie, wie Sie die [Aliaszuordnung verwenden](/docs/cms/start-building/building-blocks/fields/alias-mapping), um die Formatierung für Module beibehalten, die bereits auf Live-Seiten verwendet werden.
* Die Animationsoptionen sollten immer am unteren Rand der Feldgruppenliste positioniert werden.
* Optionen, die es Content-Autoren ermöglichen, Code-Snippets oder CSS hinzuzufügen, sollten am Ende der Feldgruppenliste unter einem Feld *Erweitert* gruppiert werden.
* Die Steuerelemente sollten über alle Module hinweg standardisiert werden. Zum Beispiel sollten alle Elemente, die ein Steuerelement für den Rahmenradius haben können, dieses Steuerelement anbieten. Es ist nicht ratsam, Steuerelemente für einige Module anzubieten und für andere nicht.
* Modulfelder, die der Registerkarte *Stil* hinzugefügt werden, müssen Möglichkeiten zum Bearbeiten des Modulstiels bieten. Zum Beispiel:
* Stiloptionen wie Farbe, Textstil, Ausrichtung, Abstand, Rahmen und Eckenradius.
* Animationen wie Hover- und Slide-In-Effekte.
* Voreinstellungen wie dunkle und helle Designs, bei denen viele Stile gleichzeitig geändert werden.
### Beispiele für Feldorganisation
#### Voreinstellungen
Voreinstellungen können verwendet werden, um die Optionen für Content-Autoren zu begrenzen, da einige Optionen an die Designeinstellungen gebunden sind. Zum Beispiel enthält das im Growth-Design enthaltene Modul *Symbol* Voreinstellungen für *Dunkel* und *Hell*, um der Website ein konsistentes Erscheinungsbild zu geben, sofern es auf die gesamte Website angewendet wird.
#### Multi-Level-Gruppierung
Wenn Sie noch nicht wissen, ob Sie Stilfelder auf der obersten Ebene halten oder verschachteln möchten, sollten Sie sich das folgende Beispiel ansehen.
Das im Growth-Design enthaltene Modul *Symbol* führt alle Stile auf der obersten Ebene auf, da es sich um eine Komponente handelt. Daher wirken sich alle Stiloptionen auf diese eine Komponente aus.
Das im Growth-Design enthaltene Modul *Sprecherkarte* enthält mehrere Komponenten: das Bild der Karte und den Textinhalt. Modulstile werden daher nach Komponente gruppiert, damit der Styling-Prozess jeder Komponente für den Content-Autor verständlicher ist.
#### Gruppieren von einzelnen Feldern
Das Schaltflächenmodul unten enthält Gruppierungen für *Voreinstellungen*, *Text*, *Hintergrund* und mehr. Obwohl die Feldgruppe *Ecke* nur das Steuerelement „Eckenradius“ enthält, ist sie dennoch gruppiert, um eine einheitliche Erfahrung bei der Content-Erstellung zu schaffen.
# Richtlinien für den HubSpot-Marketplace für Vorlagen
Source: https://developers.hubspot.de/docs/cms/marketplace/template-guidelines
Der HubSpot-Marketplace für Vorlagen hilft Tausenden von Kunden ohne direkten Zugang zu einem Entwickler, ihre Online-Präsenz auszubauen. Er wird von Entwicklern wie Ihnen betrieben, die schöne und benutzerfreundliche Designs, Vorlagen und Module erstellen.
'Der HubSpot-Marketplace für Vorlagen hilft Tausenden von Kunden ohne direkten Zugang zu einem Entwickler, ihre Online-Präsenz auszubauen. Er wird von Entwicklern wie Ihnen betrieben, die schöne und benutzerfreundliche Designs, Vorlagen und Module erstellen.';
Der [HubSpot-Marketplace für Vorlagen](https://ecosystem.hubspot.com/marketplace/templates) hilft Tausenden von Kunden ohne direkten Zugang zu einem Entwickler, ihre Online-Präsenz auszubauen. Es wird von Entwicklern unterstützt, die einfach zu bedienende Vorlagen für Kunden erstellen.
Im HubSpot-Marketplace für Vorlagen können Sie zwei Typen von Vorlagen verkaufen: [Designs](https://ecosystem.hubspot.com/marketplace/website) und [Module](https://ecosystem.hubspot.com/marketplace/modules).
## Warum sollte ich Vorlagen im Marketplace verkaufen?
Der HubSpot-Marketplace hat viel zu bieten für Entwickler oder Agenturen, die eine neue Einnahmequelle erschließen möchten.
* **Nicht exklusiv:** Sie haben hart an der Entwicklung Ihrer Vorlagen gearbeitet. Sie sollten nicht daran gebunden sein, dass Ihre Vorlage nur in unserem Marketplace und nirgendwo sonst zu finden ist. Sie können Ihre Vorlagen auch außerhalb des Marketplaces für Ihre eigenen Projekte verwenden.
* **Einmal erstellen, mehrmals verkaufen:** Sobald Ihre Vorlage im Marketplace gelistet ist, wird sie zu einer 1:viele-Chance. Sie erstellen Ihre Vorlage einfach einmal und es kann an mehrere Kunden weiterverkauft werden.
* **Fördern Sie das Wachstum Ihres Unternehmens:** Bei vielen Entwicklern, die ihre Vorlagen (sowohl kostenlose als auch kostenpflichtige) in unserem Marketplace verkaufen, ist ihr Business sowohl aufgrund der Marketplace-Einnahmen als auch durch zusätzliche Dienstleistungen, die von Käufern nachgefragt wurden, gewachsen.
* **Treten Sie einer Community von Kreativen bei und präsentieren Sie Ihre Kompetenzen:** Vernetzen Sie sich mit einem wachsenden und unterstützenden Ökosystem, um die Zukunft des HubSpot-Marketplace für Vorlagen mitzugestalten und gleichzeitig mehr Sichtbarkeit für Ihre Angebote und Dienstleistungen zu schaffen.
## Überblick und Anforderungen
Um mit dem Verkauf im HubSpot-Marketplace für Vorlagen zu beginnen, [erstellen Sie einen Anbieter-Account für den Vorlagen-Marketplace](https://app.hubspot.com/signup-hubspot/asset-provider).
Jede Vorlage, die eingereicht wird, muss die Compliance-, Design- und Codequalitätsanforderungen erfüllen. Jeder Vorlagentyp hat außerdem seine eigenen Anforderungen, die erfüllt sein müssen, um im Marketplace gelistet zu werden. Sie können diese Anforderungen unten anzeigen:
Bevor Sie mit dem Erstellen von Vorlagen für den Marketplace beginnen, empfiehlt HubSpot dringend, sich die Richtlinien für [das Erstellen für den HHubSpot-Marketplace für Vorlagen](https://www.hubspot.com/template-providers), [Branding](https://www.hubspot.com/providers/template/branding-guidelines), [die Verwendung unserer Marke](https://legal.hubspot.com/tm-usage-guidelines) und[die Verwendung unserer Inhalte](https://www.hubspot.com/content-usage-guidelines) anzusehen. Vorlagen, die gegen diese Richtlinien verstoßen, werden sofort vom Marketplace entfernt, wie in den zusätzlichen Bedingungen von HubSpot beschrieben.
### Designanforderungen
Eine übertragbare und geschlossene Reihe von Vorlagen, Modulen, globalem Content und Stileinstellungen, die im Zusammenspiel eine Bearbeitung von Inhalten ermöglichen, die Marketingteams das Leben leichter machen.
[Designanforderungen anzeigen](https://developers.hubspot.com/docs)
### Modulanforderungen
Eingereichte Designs enthalten Module. Dies sind wiederverwendbare Komponenten, die in Vorlagen verwendet oder über Drag-&-Drop-Bereiche und flexible Spalten zu Seiten hinzugefügt werden kEönnen. Sie können auch eigenständige Module einreichen. Hierbei handelt es sich um Module, die zu einem beliebigen Design im Content-Editor von HubSpot hinzugefügt werden können.
[Modulanforderungen anzeigen](https://developers.hubspot.com/docs)
### Voraussetzungen für Listing-Seiten
Anforderungen, die man einhalten muss, wenn man Vorlagen und deren Listing-Seiten beim Vorlagen-Marketplace einreicht. Diese Standards gelten für alle Vorlagen im Marketplace.
[Anforderungen an Listing-Seiten anzeigen](https://developers.hubspot.com/docs)
### Richtlinien für den Vorlagen-Marketplace
Anforderungen und Compliance-Details für Listing-Vorlagen im Vorlagen-Marketplace.
[Richtlinien für den HubSpot-Marketplace für Vorlagen anzeigen](https://developers.hubspot.com/docs)
## Designs im Marketplace für Vorlagen listen und aktualisieren
Nachdem Sie Ihre Vorlage erstellt haben, reichen Sie sie zur Genehmigung ein, um im HubSpot-Marketplace für Vorlagen gelistet zu werden. Nach der Einreichung werden die Vorlagen einem Überprüfungs- und Genehmigungsprozess durch das Team des HubSpot-Marketplace für Vorlagen unterzogen. [Erfahren Sie, wie Sie Ihre Vorlagen im Vorlagen-Marketplace listen und aktualisieren](https://developers.hubspot.com/docs).
## Unterstützte Zahlungsgateways
HubSpot bietet Marketplace-Anbietern derzeit die Möglichkeit, die folgenden Zahlungsgateways zu verknüpfen, um Zahlungen zu empfangen:
* PayPal ([unterstützte Länder](https://www.paypal.com/us/webapps/mpp/country-worldwide) | [grenzüberschreitende Zahlungen](https://www.paypal.com/us/cshelp/article/what-are-the-cross-border-fees-when-selling-internationally-help550))
* Stripe ([unterstützte Länder](https://stripe.com/global) | [grenzüberschreitende Zahlungen](https://docs.stripe.com/connect/cross-border-payouts))
Zahlungen von Kunden erhalten Sie entsprechend der in Ihrem Marketplace-Anbieterkonto verknüpften Zahlungsmethode:
* Gehen Sie in Ihrem HubSpot-Account zu **Marketplace** > **Anbieterinformationen**.
* Im Abschnitt *Zahlungsmethode* können Sie Ihre Zahlungsinformationen ansehen und aktualisieren.
HubSpot ist nicht für Probleme mit Zahlungsgateways verantwortlich, die möglicherweise während des Kaufprozesses auftreten. HubSpot erhält keinen Anteil an den Transaktionen, und alle Transaktionen werden unabhängig von der HubSpot-Plattform abgewickelt. Wenn Ihre Zahlungsmethode aus irgendeinem Grund nicht mehr funktioniert, können Ihre Elemente vorübergehend gelöscht werden, um ein negatives Kundenerlebnis zu vermeiden.
HubSpot hat Kunden weltweit. Beim Einrichten Ihrer Zahlungsgateways empfehlen wir dringend, Zahlungen von internationalen Währungen (grenzüberschreitende Zahlungen) anzunehmen.
HubSpot ermutigt Anbieter im Marketplace für Vorlagen, das Stripe-Zahlungsgateway zu verwenden, wenn es in ihrem Land verfügbar ist. Wenn Stripe nicht [in Ihrem Land verfügbar ist](https://stripe.com/global), empfehlen wir, das PayPal-Zahlungsgateway zu verwenden.
## Anträge auf Rückerstattung
Gelegentlich kann es vorkommen, dass ein Käufer eine Rückerstattung verlangt. HubSpot empfiehlt, Ihre Rückerstattungsrichtlinie in der Beschreibung eines Angebots deutlich anzugeben und einen Link zur Dokumentation Ihrer Rückerstattungsrichtlinie hinzuzufügen. HubSpot fordert Anbieter auf, gültige Rückerstattungsanträge zu berücksichtigen. Erfahren Sie mehr über allgemeine [Richtlinien für Rückerstattungsanträge](https://knowledge.hubspot.com/resources/marketplace-refund-guidelines).
## Ihre Transaktionen verwalten
Für jede Vorlage, die ein Kunde herunterlädt, wird ein Deal-Datensatz erstellt in Ihrem Anbieter-Account für den Vorlagen-Marketplace erstellt. Alle Deals werden in einer Deal-Pipeline namens *Marketplace-Transaktionen* mit der Deal-Phase *Transaktionen* ausgefüllt. Wenn eine Rückerstattung für eine Transaktion ausgestellt wird, wird die Eigenschaft *Zurückerstattet um* im Deal-Datensatz festgelegt.
Anbieter können [die Deal-Pipeline und Deal-Phasen anpassen](https://knowledge.hubspot.com/object-settings/set-up-and-customize-pipelines) und [die Deal-Eigenschaften in Workflows verwenden](https://knowledge.hubspot.com/workflows/choose-your-workflow-actions#property-management).
## Entfernen von Vorlagen-Listings
HubSpot behält sich das Recht vor, Marketplace-Listings aus folgenden Gründen zu entfernen:
* Es sind Fehler in der Vorlage vorhanden.
* Drittanbieter haben die Einreichung Ihrer Vorlagen pausiert.
* Die Vorlage ist nicht kompatibel mit [von HubSpot-unterstützten Browsern](https://knowledge.hubspot.com/account-security/browsers-supported-by-hubspot).
* Es wird urheberrechtlich geschütztes Material wie Bilder, Symbole, Schriftarten, Audio und Video verwendet, das nicht für den Vertrieb lizensiert ist
* Es werden Vorlagen verwendet, die Benutzer ohne deren informierte, explizite Einwilligung (Opt-in) nachverfolgen.
* Vorlagen (einschließlich der Verknüpfung mit Inhalten vom Vorlagen-Marketplace oder von Ihrer Vorlagen-Demo), die Folgendes enthalten:
* Werbung für oder Teilnahme an rechtswidrige(n) Aktivitäten
* Abwertende, abfällige und/oder böswillige Inhalte
* Unehrliche oder falsche Behauptungen
* Beleidigende Inhalte über Rasse, Religion, Alter, Geschlecht oder sexuelle Ausrichtung
* Module werden entfernt, wenn es andere Elemente auf der Seite/E-Mail beeinflusst, zu der es hinzugefügt wird.
## Häufig gestellte Fragen
> **Gilt die P2B-Verordnung der Europäischen Union vom 12. Juli 2020 für den App Marketplace und den Vorlagen-Marketplace?**
>
> Nein, die neueste P2B-Verordnung der Europäischen Union, die am 12. Juli 2020 in Kraft getreten ist, gilt nicht für den HubSpot App und Vorlagen-Marketplace. [Erfahren Sie mehr](https://wayback.archive-it.org/12090/*/https://ec.europa.eu/digital-single-market/en/business-business-trading-practices).
> **Gibt es einen bestimmten HubSpot-Accounttyp, den ich bei Marketplace einreichen muss?**
>
> Für die Einreichung beim HubSpot-Marketplace für Vorlagen ist ein [Account für Marketplace-Anbieter](https://www.hubspot.com/template-providers) erforderlich.
>
> Manche Partner verwalten ihre Marketplace-Angebote in ihrem Partneraccount, um die Vorlage in demselben Account zu verwenden. Andere Partner verwalten ihre Angebote in einem separaten Marketplace-Account, um die Vorlagen von anderen im Design-Manager zu trennen.
> **Werden Produkte in meinem Account oder im HubSpot Marketplace-System veröffentlicht?**
>
> Produkte, die auf Marketplace eingereicht oder veröffentlicht werden, werden live im HubSpot Marketplace-System bereitgestellt. Dadurch wird sichergestellt, dass Anbieter diese weiterhin in ihrem eigenen Konto bearbeiten können, ohne dass sich die Änderungen auf die Einkäufe der Kunden auswirken. Um ein Marketplace-Angebot zu aktualisieren, muss ein Anbieter das Angebot erneut einreichen, damit es überprüft und erneut veröffentlicht werden kann.
>
> Kunden, die frühere Versionen eines angebotenen Produkts erworben haben, können[kostenlos auf die neueste Version](https://knowledge.hubspot.com/resources/marketplace-customers-frequently-asked-questions#update) aktualisieren.
> **Wie aktualisiere ich meinen Unternehmensnamen?**
>
> Sobald Sie eine Vorlage im Marketplace gelistet haben, müssen Sie sich an den [HubSpot-Support](https://help.hubspot.com/) wenden, um Ihren Unternehmensnamen zu ändern.
> **Warum werden nicht alle meine Produkte angezeigt, wenn ich versuche, ein Listing zu erstellen?**
>
> Mögliche Gründe, warum Sie ein Produkt nicht sehen, wenn Sie versuchen, ein Listing zu erstellen, sind u. a.:
>
> * Die Vorlage ist derzeit im Marketplace gelistet oder enthält Elemente aus einer derzeit gelisteten Vorlage.
> * Die Vorlage wird nicht im Marketplace unterstützt (Transaktions-E-Mails, Ticket-E-Mails usw.).
> * Die Vorlage ist eine Kopie einer Vorlage vom Marketplace.
> **Was sollte ich als Vorschau-Link verwenden?**
>
> Wenn Sie Vorschau-URLs erstellen, müssen Sie Ihren eigenen Domain-Namen verwenden, falls verfügbar. Wenn Sie keine Domain verwenden können, stellt HubSpot jedem Account eine System-Domain in der folgenden URL-Struktur zur Verfügung: `[AccountID].hs-sites.com`
>
> **Bitte beachten**: HubSpot unterstützt keine Vorschauen von Vorlagen, die die `preview.hs-sites.com`-Subdomain verwenden.
> **Kann eine einzige Vorlage in mehreren Designs verwendet werden?**
>
> Ja, eine einzige Vorlage kann in mehreren Designs verwendet werden. Ein häufiges Beispiel dafür, wann eine Vorlage in mehreren Designs verwendet werden darf, ist, wenn ein Anbieter eine Starter- und Premium-Version des gleichen Designs anbietet.
> **Muss ich ein Design oder Modul erneut einreichen, wenn ich Änderungen daran vornehme?**
>
> Ja. Alle Änderungen an einem Design oder Modul müssen erneut im Marketplace zur Vorvalidierung und Genehmigung durch das Qualitätsteam eingereicht werden. Sobald die Änderungen genehmigt sind, werden das Listing und die Vorlage im Marketplace für Kunden aktualisiert.
> **Wie kann ich den Preis eines Designs oder Moduls anpassen?**
>
> Um den Preis eines eingesendeten Produkts anzupassen, müssen Sie ihn erneut an den Marketplace mit aktualisierten Informationen weiterleiten. Preise können nach der Veröffentlichung einer Vorlage nicht von kostenlos in kostenpflichtig oder umgekehrt geändert werden.
> **Wie erhalte ich Marketplace-Zahlungen?**
>
> Zahlungen erhalten Sie entsprechend der Zahlungsmethode, die Sie in Ihrem Marketplace-Anbieterprofil verknüpft haben. Gehen Sie in Ihrem HubSpot-Accounten zu **Marketplace** > **Anbieterinformationen**. Im Abschnitt *Zahlungsmethode* können Sie Ihre Zahlungsinformationen ansehen und aktualisieren.
>
> HubSpot nimmt keinen Anteil an den Transaktionen, und alle Transaktionen werden unabhängig von der HubSpot-Plattform abgewickelt.
> **Wo kann ich Peer-to-Peer-Feedback erhalten oder andere Marketplace-Anbieter kontaktieren?**
>
> Treten Sie dem #marketplace-Kanal im Developer-Slack von HubSpot bei, indem Sie sich unter [https://developers.hubspot.com/slack](https://developers.hubspot.com/community) anmelden.
> **Wenn Kunden eine Rückerstattung beantragen, verbleiben dann die heruntergeladenen Dateien in deren HubSpot-Account?**
>
> Alle mit der Vorlage verknüpften Dateien sowie alle Abhängigkeiten (z. B. Seiten, die mit dem Vorlage erstellt wurden, geklonte Vorlagen und Module) werden entfernt, sobald die Rückerstattung eingeleitet wird.
> **Wie kann ich mich über die neuesten Entwickleranforderungen und -änderungen informieren?**
>
> Um über die neuesten Änderungen auf dem Laufenden zu bleiben, abonnieren Sie das [HubSpot-Entwickler-Änderungsprotokoll](https://developers.hubspot.com/changelog).
# Richtlinien für den HubSpot-Marketplace für Vorlagen
Source: https://developers.hubspot.de/docs/cms/marketplace/template-policies
# Designanforderungen für den HubSpot-Marketplace für Vorlagen
Source: https://developers.hubspot.de/docs/cms/marketplace/theme-requirements
Erfahren Sie mehr über die Anforderungen, die ein Design erfüllen muss, um beim HubSpot-Marketplace für Vorlagen eingereicht zu werden.
'Designanforderungen für den HubSpot-Marketplace für Vorlagen';
'HubSpot-Marketplace für Vorlagen | Designanforderungen (2022)';
'Erfahren Sie mehr über die Anforderungen, die ein Design erfüllen muss, um beim HubSpot-Marketplace für Vorlagen eingereicht zu werden.';
Erfahren Sie mehr über die Anforderungen, die ein Design erfüllen müssen, wenn es beim HubSpot-Marketplace für Vorlagen eingereicht wird.
Wenn Sie gerade erst mit der Erstellung Ihres Designs beginnen, empfehlen wir Ihnen dringend, unsere kostenlose CMS Theme Boilerplate zu verwenden, die Sie aus unserem [Git-Repository](https://github.com/HubSpot/cms-theme-boilerplate) herunterladen oder [in die Design-Manager-Benutzeroberfläche Ihres Accounts importieren](https://www.youtube.com) können.
Überprüfen Sie außerdem die [Anforderungen](https://developers.hubspot.com/docs) an Vorlagen-Listing-Seiten, wenn Sie Ihre Vorlage beim HubSpot-Marketplace für Vorlagen einreichen.
## Designlimits
Beachten Sie die folgenden Obergrenzen pro Design:
* Kostenlose ***CMS Hub***-Accounts können keine Websitesuche, CTA-Funktionen oder native HubSpot-Videos verwenden. Erfahren Sie in der [Übersicht der Produkte und Dienstleistungen von HubSpot](https://legal.hubspot.com/hubspot-product-and-services-catalog) mehr darüber, was in ***CMS Hub***-Abonnements enthalten ist.
* Designs dürfen nicht mehr enthalten als:
* 50 Vorlagen [(Mindestanzahl an Seiten)](#templates-css%2C-sections%2C-page-templates%2C-etc.)
* 50 Module (mindestens 5)
* 50 Abschnitte (mindestens 5)
* Designs dürfen Folgendes **nicht** enthalten:
* E-Mail-Vorlagen
* HubDB-Funktionen
* Serverlose Funktionen
* CRM-Objektfelder
* [Flexible Spalten in Vorlagen](https://developers.hubspot.com/docs#flexible-columns)
**Module vs. Abschnitte**
Abschnitte sind hilfreich, da Content-Autoren sie nur in Ablagezonen mit voller Breite auf der Seite ablegen können, was Ihnen als Entwickler hilft, ein großartiges fertiges Produkt zu gewährleisten.
Insbesondere Abschnitte mit festem Layout, in denen der Content-Autor keine Elemente innerhalb des Abschnitts verschieben kann, sind ein großartiges Tool, um kreative Formatierungen und Layouts bereitzustellen, die sonst mit dem Drag-&-Drop-Editor nicht bewerkstelligen lassen.
Abschnitte bieten auch zusätzliche Vorteile für die Benutzerfreundlichkeit des Content-Autors, da er einzelne Module innerhalb des Abschnitts auswählen kann, sodass seine Modulformulare kürzer und gezielter auf das zu bearbeitende Element ausgerichtet sind.
## Allgemeine Anforderungen an Designs
* Alle eingereichten Designs müssen unterscheidbar und original sein. Zum Beispiel zählt ein und dasselbe Design mit anderen Texten oder Platzhalterinhalten beispielsweise nicht als eigenständiges Design. [Erfahren Sie mehr über die Compliance-Anforderungen des HubSpot-Marketplace für Vorlagen](https://developers.hubspot.com/docs#template-marketplace-compliance).
* Ein Design muss mit HTML- und HubL-Vorlagen und [dnd\_area](/docs/cms/reference/hubl/tags/dnd-areas)-Tags erstellt werden.
* Designs müssen einem 12-Spalten-Rastersystem entsprechen.
### Struktur der Designdatei
Alle Designs sollten eine ordnungsgemäße Ordnerstruktur enthalten und unter einem „übergeordneten“ Ordner gruppiert werden, der Ihr Produkt-Listing beschreiben sollte. Wenn Sie beispielsweise ein Design mit dem Namen „Super-Toll“ für den Marketplace erstellen, sollte Ihre Struktur ähnlich dem Bild unten aussehen. Erfahren Sie mehr über die Struktur von [Designdateien](https://developers.hubspot.com/docs#theme-file-structure).
### Relative lokale Dateipfade für Vorlagen
Wenn Sie sich auf Designelemente beziehen, müssen Sie relative lokale Dateipfade verwenden. Der beste Weg, diese hinzuzufügen, ist die Verwendung der [get\_asset\_url](/docs/cms/reference/hubl/functions#get-asset-url)-Funktion, die die öffentliche URL eines Elements, einer Datei oder einer Vorlage zurückgibt. Sie können auch [diese Funktion generieren](/docs/cms/reference/hubl/functions#get-asset-url), indem Sie entweder mit der rechten Maustaste auf eine **Datei** klicken und **Öffentliche URL kopieren** auswählen oder indem Sie auf **Aktionen** klicken und dann **Öffentliche URL kopieren** auswählen.
Ein Stylesheet, auf das durch `require_css` und `get_asset_url` verwiesen wird, muss beispielsweise wie folgt formatiert sein:
**Eingabe**
```hubl theme={null}
{{require_css(get_asset_url('../../css/main.css')) }}
```
**Ausgabe**
```html theme={null}
//cdn2.hubspot.net/hub/1234567/hub_generated/template_assets/1565970767575/custom/styles/style.min.css
```
Überprüfen Sie im folgenden Video die Unterschiede in der Dateistruktur in Ihrem Entwickler-Account im Vergleich zu Dateien, die einem Marketplace-Kunden bereitgestellt werden:
## Design-Performance
Bei Google Lighthouse muss ein Design Scores über den folgenden Schwellenwerten aufweisen:
* **Desktop-Barrierefreiheit:** 65
* **Desktop-Best Practices:** 80
* **Desktop-Performance:** 70
* **Mobil-Performance:** 40
Erfahren Sie, [wie Sie mithilfe des CLI einen Google Lighthouse-Bericht für Ihr Design erstellen](/docs/developer-tooling/local-development/hubspot-cli/install-the-cli).
* Designdateien sollten minimiert werden können.
* Alle Bilddateien sollten weniger als 1 MB groß sein.
* Alle Bild-Tags sollten ein `alt`-Attribut haben (ein Wert von `""` ist zulässig).
* Alle Bild-Tags sollten über ein `loading`-Attribut verfügen (ein Wert von `""` ist zulässig).
### Vorschau-URLs für Designs
Sie müssen Ihren eigenen Domain-Namen verwenden, wenn Sie Vorschau-URLs erstellen. Sie können nicht die von HubSpot bereitgestellte Domain verwenden, die folgende URL-Struktur hat: `[AccountID].hs-sites.com`\[AccountID].hs-sites.com
Es muss eine Live-Website verwendet werden, das Image der Demo-Website kann nicht verwendet werden.
Sollte Ihre Live-Demo zu irgendeinem Zeitpunkt unzugänglich werden, behält sich HubSpot das Recht vor, Ihr Design mit einer Benachrichtigung an den Anbieter zu löschen/zu entfernen, bis die Live-Demo wieder zugänglich wird.
## Verwenden von jQuery
jQuery ist im HubSpot-Account eines Kunden [nicht standardmäßig aktiviert](https://knowledge.hubspot.com/de/website-pages/include-jquery-across-your-hubspot-pages). Wenn Ihr Design auf jQuery basiert, muss eine Version von jQuery enthalten sein, um sicherzustellen, dass das Design wie erwartet funktioniert.
Wenn Sie beispielsweise ein Modul hinzufügen, das jQuery erfordert, der Rest der Website jedoch nicht, müssen Sie den folgenden Code verwenden, um jQuery zu laden:
```hubl theme={null}
{# this checks if the "Include jQuery" option in Settings > CMS > Pages is checked #}
{% if not site_settings.include_jquery %}
{{ require_js("../jquery-3.4.1.js", "footer") }}
{% endif %}
```
## Designkonfiguration (theme.json)
Die `theme.json`-Datei muss die folgenden Parameter enthalten:
```json theme={null}
// theme.json
{
"label": "Cool Theme",
"preview_path": "./templates/home-page.html",
"screenshot_path": "./images/templates/homepage.jpg",
"enable_domain_stylesheets": false,
"version": "1.0",
"author": {
"name": "Jon McLaren",
"email": "noreply@hubspot.com",
"url": "https://theme-provider.com/"
},
"documentation_url": "https://theme-provider.com/cool-theme/documentation",
"license": "./license.txt",
"example_url": "https://theme-provider.com/cool-theme/demo",
"is_available_for_new_content": true
}
```
Bitte überprüfen Sie Ihre `theme.json`-Datei und stellen Sie Folgendes sicher:
* Der Name des Labels stimmt mit dem Namen in deinem Design-Listing überein.
* Wenn Sie die kostenlose CMS-Theme Boilerplate von HubSpot verwenden, dürfen keine Boilerplate-Werte vorhanden sein. Dazu gehören Autoreninformationen, URL der Dokumentation, Beispiel-URL usw.
* Die URL der Dokumentation wird aufgelöst und enthält eine Dokumentation zur Verwendung Ihres Designs.
* Der Vorschaupfad ist eine gültige Datei in Ihrem Design.
* Der Screenshot-Pfad ist eine gültige Datei und hängt mit deinem Design zusammen.
* Die Beispiel-URL wird aufgelöst und führt zu einer Demo Ihres Designs. Verwenden Sie für die Beispiel-URL nicht die Subdomains `preview.hs-sites.com` oder `[AccountID].hs-sites.com`.
Erfahren Sie mehr über [theme.json-Parameter](https://developers.hubspot.com/docs#theme-json).
## Designeinstellungen (fields.json)
Die `fields.json`-Datei steuert die verfügbaren Felder und Feldgruppen im Design-Editor, einschließlich der Stilfelder. Welche Felder Sie berücksichtigen, hängt davon ab, wie viel Kontrolle die Content-Autoren über den Seiten-Editor haben sollen.
* Die `fields.json`-Datei muss mindestens drei Farbfelder enthalten.
* Um Kompatibilität zwischen Designs und unabhängigen Modulen zu gewährleisten, müssen Designs den folgenden Standardkriterien für die Benennung von Farb- und Schriftartfeldern folgen: `primary_color`, `secondary_color`, `heading_font`und `body_font`. Erfahren Sie mehr über die [Kompatibilität von Modul und Design](https://developers.hubspot.com/docs#module-compatibility-with-themes).
Wenn Designfelder keine `primary_color`-, `secondary_color`-, `heading_font`- oder `body_font`-Felder haben, kann das `alternate_names`-Feld verwendet werden.
Erfahren Sie mehr über diese [fields.json-Parameter](https://developers.hubspot.com/docs#fields-json) und [sehen Sie sich ein Beispiel einer fields.json-Datei](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/fields.json) in der HubSpot CMS Boilerplate an.
Für Designeinstellungen gilt außerdem:
* Sie dürfen keine Konflikte mit Ihren Editor-Stilen oder über ein Modul festgelegten Stilen verursachen. Verwenden Sie zum Beispiel nicht `!important` in Ihrem CSS-Stylesheet, da es Endbenutzern ein Überschreiben erschwert und einen Konflikt verursachen würde.
* Es müssen aussagekräftige Label für jede Einstellung verwendet werden, damit Content-Autoren wissen, was sie aktualisieren.
* Sie müssen für alle Vorlagen in einem Design gelten, es sei denn, es gibt einen bestimmten Anwendungsfall für zusätzliche Stile. Beispielsweise müssen Änderungen am Stil und der Größe von `h1`-Überschriften in Designeinstellungen für alle `h1`-Tags im Design gelten.
Ein Design **muss** mindestens die folgenden Designfelder enthalten:
**Typografiefelder:**
* Felder für Haupttext-Schriftart (`p`-Tags)
* Schriftartfelder `h1` bis `h6`
* Hyperlinkfarbe (`a`-Tags), einschließlich Stile für das Darüberbewegen des Mauszeigers
**Formularfelder:**
* Hintergrundfarbe für Formular
* Formularrahmenfarbe
* Farbe für Formularlabel
* Rahmenfarbe für Formularfeld
* Formular-Button – Dazu gehören Einstellungen für Button-Text, Hintergrundfarbe und Stile für das Darüberbewegen des Mauszeigers.
Zusätzlich gilt:
* Felder innerhalb Ihres Designs müssen ggf. logisch gruppiert werden. Beispielsweise sollten mehrere mit Typografie verknüpfte Felder unter einer Gruppe `Typography` gruppiert werden.
* Designfelder sollten separate Farb- und Schriftartsteuerelemente für Schaltflächen und Formulare sowie separate Farb-, Logo- und Schriftartsteuerelemente für Header und Footer haben.
* Wenn Module in einem Design Logos verwenden, muss mindestens ein Logofeld von den [Markeneinstellungen](/docs/cms/start-building/building-blocks/fields/brand-and-settings-inheritance) des Accounts etwas übernehmen. Wenn Sie ein Bildfeld zum Rendern eines Logos verwenden, muss das Bildfeld nicht die Markeneinstellungen übernehmen.
## Vorlagen (CSS, Abschnitte, Seitenvorlagen usw.)
### Abschnitte
* Sie müssen gegebenenfalls [Abschnitte](https://developers.hubspot.com/docs#reusable-sections) verwenden. Es **müssen** mindestens fünf Abschnitte in einem Design enthalten sein.
* Abschnitte müssen eindeutige und funktionierende Screenshots enthalten.
* Abschnitte und Module sollten nicht redundant sein.
### Seitenvorlagen
Ein Design muss mindestens die folgenden Vorlagentypen enthalten:
* Eine Website-Seitenvorlage oder eine Landingpage-Vorlage.
* Bei der Aufnahme von mehrseitigen Vorlagen muss jede Vorlage einen anderen Zweck haben. Zum Beispiel eine Startseite, eine *„Über uns“*-Seite, eine Landingpage in voller Breite und eine Landingpage mit einer rechten Seitenleiste.
* Es wird empfohlen, mindestens acht Seitenvorlagen in ein Design aufzunehmen.
* Separate Vorlagen für Blog-Listings und Blog-Beiträge.
* **Blog-Listing-Vorlage**: Die Seite, auf der alle Blog-Beiträge in einem Listing-Format angezeigt werden (bekannt als Blogroll). Der Vorlagentitel muss widerspiegeln, dass er für die Listing-Seite bestimmt ist.
* **Blog-Beitragsvorlage**: Die Blog-Beitragsdetailseite, die einzelne Blog-Beiträge anzeigt. Der Vorlagentitel muss widerspiegeln, dass er für den Blogbeitrag bestimmt ist.
* Darüber hinaus müssen Felder für Blog-Kommentare und Blog-Autoren so formatiert werden, dass sie dem Design entsprechen.
* Systemseitenvorlagen:
* **404-Fehler-Vorlage**: Wird angezeigt, wenn Besucher eine Seite aufrufen, die nicht vorhanden ist.
* **500-Fehler-Vorlage**: Wird angezeigt, wenn auf der Website ein interner Fehler auftritt.
* **Vorlage mit Aufforderung zur Passworteingabe**: Wird angezeigt, wenn eine Seite passwortgeschützt ist.
* **Abonnementvorlage**: Eine Seite für die Abonnementeinstellungen, auf der E-Mail-Empfänger die Arten von E-Mails verwalten können, die sie abonniert haben.
* **Vorlage für Abo-Update**: Eine Bestätigungsseite, die angezeigt wird, wenn ein E-Mail-Empfänger seine E-Mail-Abo-Einstellungen aktualisiert.
* **Vorlage für Back-up Abo-Kündigung**: Die Seite, die für E-Mail-Empfänger angezeigt wird, die E-Mails abbestellen möchten, wenn HubSpot deren E-Mail-Adressen nicht bestimmen kann.
* **Suchergebnisvorlage**: Zeigt Suchergebnisse an, die bei der Verwendung der [Website-Suche](/docs/cms/start-building/building-blocks/modules/content-search) zurückgegeben werden. Nur für kostenpflichtige ***CMS Hub***-Accounts verfügbar.
### Benennung der Seitenvorlage
* Wenn Sie Vorlagen mit ähnlichen Namen haben, fügen Sie beschreibende Wörter hinzu, die den Unterschied zwischen ihnen angeben.
* Achten Sie auf eine konsistente Groß- und Kleinschreibung, entfernen Sie Bindestriche und vermeiden Sie die Verwendung von Kurzschrift (z. B. buchstabieren Sie den Hintergrund, anstatt bg zu verwenden).
* Ihr Unternehmensname oder Designname muss nicht im Vorlagennamen enthalten sein.
## Module
Erfahren Sie [hier](https://developers.hubspot.com/docs) mehr über die Anforderungen an Designnmodule und einzelne Module.
## Globaler Content
### Globale Teilvorlagen
[Globale Teilvorlagen](/docs/cms/start-building/building-blocks/global-content) sind eine Art von Vorlage, die mit HTML und HubL erstellt wurde und auf Ihrer gesamten Website wiederverwendet werden kann. Die gebräuchlichste Art von globalen Teilvorlagen sind Website-Header, Seitenleisten und Website-Footer. Erfahren Sie, wie Sie [globale Teilvorlagen](/docs/cms/start-building/building-blocks/global-content#creating-a-global-content-partial-template-using-local-development-tools) erstellen:
* Designs müssen globale Teilvorlagen enthalten.
* Globale Teilvorlagen müssen nutzbare [Drag-&-Drop-Bereiche](https://developers.hubspot.com/docs) enthalten. Zum Beispiel können Sie den Drag-&-Drop-Bereich nicht mit einer "hide"-Klasse ausblenden.
* Sie müssen verwendbare Drag-&-Drop-Bereiche in Kopf- und Fußzeilen integrieren.
* Bei Menüs, die global auf einer Website verwendet werden, müssen Benutzer außerdem auch [ein HubSpot-Navigationsmenü auswählen können](/docs/cms/start-building/building-blocks/modules/menus-and-navigation), das sie in ihren Account-Einstellungen erstellt haben.
Vermeiden Sie es, globale Module in globale Teilvorlagen aufzunehmen, da dies zu einem negativen Endbenutzererlebnis führen kann.
## Mehrsprachige Unterstützung
Designs müssen in der Lage sein, mehrere Sprachversionen zu unterstützen, und sollten die Sprachen angeben, die sie unterstützen. Dies kann durch das Hinzufügen des [Sprachumschaltmoduls](/docs/cms/reference/modules/default-modules#language-switcher) in einem globalen Header erreicht werden, das es den Kunden ermöglicht, die Sprachoptionen leicht zu finden und die gewünschte Sprache auszuwählen.
* Sie dürfen nur jeweils eine Sprache gleichzeitig anzeigen. Vermeiden Sie beispielsweise, sowohl Englisch als auch Spanisch gleichzeitig in der Benutzeroberfläche zu haben.
* Vermeiden Sie die Verwendung von fest kodiertem Text. Anstatt zum Beispiel den Text einer Blog-Listing-Schaltfläche als *Mehr lesen* fest zu kodieren, legen Sie den Text innerhalb eines Feldes so fest, dass der Endbenutzer den Text aktualisieren kann, ohne in den Code einsteigen zu müssen.
## Mobile und responsive Elemente
Designs sollten in der Lage sein, ihren Inhalt an das Gerät anzupassen, auf dem sie angezeigt werden. Sie sollten außerdem ein gutes Nutzererlebnis über verschiedene Geräte hinweg bieten. Dies beinhaltet Folgendes, ist aber nicht darauf beschränkt:
* Hauptnavigation
* Schieberegler und Registerkarten
* Große Bilder
* Vermeiden von horizontalem Scrollen (es sei denn, dies ist beabsichtigt)
# Konfigurieren eines Moduls
Source: https://developers.hubspot.de/docs/cms/reference/modules/configuration
Erfahren Sie, wie Sie ein benutzerdefiniertes Modul konfigurieren.
Beim Erstellen eines Moduls stehen eine Reihe von Optionen zur Verfügung, die sich darauf auswirken, wo ein Modul sichtbar ist, wie es identifiziert wird und wie es bearbeitet wird.
Bei der [lokalen Entwicklung](/docs/developer-tooling/local-development/hubspot-cli/install-the-cli) werden Module als Ordner mit dem `.module`-Suffix gespeichert. Diese Ordner enthalten die Dateien, aus denen die Einstellungen des Moduls bestehen, sowie der Code, der zum Rendern des Moduls verwendet wird. Die Konfiguration eines Moduls wird in der [meta.json](#meta-json)-Datei gespeichert, während die Felder separat in einer [fields.json](https://developers.hubspot.de/docs/guides/cms/content/modules/overview#fields-json)-Datei konfiguriert werden.
Die meisten Konfigurationen können auch über den Modul-Editor im [Design-Manager](/docs/cms/start-building/introduction/developer-environment/design-manager) geändert werden.
Konfigurieren Sie auf einer übergeordneten Ebene die Moduloptionen lokal in der `meta.json`-Datei, die die folgenden Eigenschaften enthalten kann:
| Parameter | Type | Description | Default |
| - | - | - | - |
| `icon` | Zeichenfolge | URL zu einem Bild, das als Symbol für ein Modul verwendet werden soll. | |
| `label` | Zeichenfolge | Label, das verwendet wird, wenn Module in den Content Editoren angezeigt werden | |
| `module_id` | Zahl | Eindeutige ID für das Modul, die unabhängig vom Pfad ist. | |
| `is_available_for_new_content` | Boolesch | Der Wert für den Umschalter in der oberen rechten Ecke des Modul-Editors in HubSpot. Bestimmt, ob das Modul im Inhalt verwendet werden kann. | `true` |
| `global` | Boolesch | Gibt an, ob das Modul global ist oder nicht | `false` |
| `host_template_types` | Array | Ein `array` von [Inhaltstypen](https://developers.hubspot.de/docs/guides/cms/content/templates/overview), in denen das Modul verwendet werden kann. Eine oder mehrere von `[ "PAGE", "BLOG_POST", "BLOG_LISTING", "EMAIL" ]`. | |
| `css_assets` | Array | Ein `array` von CSS-Dateien, von denen das Modul abhängt. Unterstützt relative Pfade.z. B. `"css_assets": [{ "path": "../path/to/file.css" }]` | `[]` |
| `css_render_options` | Objekt | Legt mit `async` fest, ob das Modul CSS asynchron gerendert wird: `true`, `false` | `{"async": false}` |
| `js_assets` | Array | Ein `array` von JavaScript-Dateien, von denen das Modul abhängt. Unterstützt relative Pfade.z. B. `"js_assets": [{ "path": "../path/to/file.js" }]` | `[]` |
| `js_render_options` | Objekt | Ändert das JavaScript-Tag des Moduls, das der gerenderten Seite hinzugefügt wurde. Die Optionen umfassen:
`position`: `head` , `footer`
`async`: `true`, `false`
`defer`: `true`, `false`
`type`: `string`
| `{"position":"footer"}` |
| `inline_help_text` | Zeichenfolge | Hilfetext, der am oberen Rand des Moduls in einem blauen Infokasten angezeigt wird (maximal 300 Zeichen).Stellt die für die Verwendung des Moduls erforderlichen Informationen bereit. Wenn Sie feldspezifische Hilfetextinformationen übermitteln möchten, lesen Sie die [Hilfetextfelddokumentation](/docs/cms/reference/fields/module-theme-fields#properties-used-by-all-fields). | `null` |
| `master_language` | Zeichenfolge | Bei [aktivierten Übersetzung](https://knowledge.hubspot.com/design-manager/create-translations-of-your-modules#:~:text=To%20create%20translations%20of%20a,the%20right%2C%20click%20Add%20translations.) der Sprachcode der Sprache, in der die Felder des Moduls ursprünglich geschrieben wurden.z. B. `en` | |
| `placeholder` | Objekt | Legt [Platzhalterinhalt](/docs/cms/reference/hubl/tags/standard-tags#editor-placeholders) für das Modul fest. Umfasst die folgenden Eigenschaften:
`show_module_icon`: ob das Modulsymbol angezeigt wird. `true`, `false`.
`title`: der Titel, der im Editor für das Modul erscheint. Zeichenfolge.
`description`: die Beschreibung, die im Editor für das Modul erscheint. Zeichenfolge.
| |
| `categories` | Array | Ein Array mit bis zu drei [Modulkategorien](#add-categories).Zum Beispiel: `"categories":["FORMS_AND_BUTTONS"]` | |
| `content_tags` | Array | Ein Array von [Modul-Tag-Objekten](#adding-categories-and-tags), das den Tag-Namen und die `source` von `"USER"` enthält.Zum Beispiel: `"content_tags": [{` `"name" : "BUTTONS",` `"source" : "USER"``}]` | |
Im Folgenden erfahren Sie mehr über die Konfigurationsoptionen der einzelnen Module.
## Hinzufügen eines Symbols
Module können ein Symbol enthalten, das im [Design-Manager](/docs/cms/start-building/introduction/developer-environment/design-manager) und in den Seiten- und E-Mail-Editoren angezeigt wird, um den Erstellern von Inhalten visuellen Kontext zu bieten. Es wird empfohlen, verschiedene Symbole für die verschiedenen Modultypen in Ihrem Design zu verwenden. Symbole [für Marketplace-Anbieter verpflichtend](/docs/cms/marketplace/template-guidelines).
Es gibt zwei Möglichkeiten, ein Symbol hinzuzufügen: über den [Design-Manager](#add-an-icon-using-the-design-manager) oder das [CMS CLI](#add-an-icon-using-the-cli).
Modulsymbole müssen als `.svg`-Datei vorliegen und dürfen nicht größer als 10 KB sein. Um ein optimales Ergebnis zu erzielen, sollte Ihr Symbol einfach sein und nur eine Farbe verwenden. Symbole, die mehr als eine Farbe verwenden, werden automatisch für Sie konvertiert. Das standardmäßig angezeigte Modulsymbol ist ein Schraubenschlüssel- und Pinselsymbol.
So fügen Sie ein Symbol mit dem Design-Manager hinzu:
1. In your HubSpot account, navigate to **Marketing** > **Files and Templates** > **Design Tools**.
2. Use the left sidebar to locate the **module** you want to edit, then click the **module name**.
3. In the right sidebar of the module editor, click the **icon** next to the module title.
4. Upload/select your icon. After publishing your changes, the icon will appear within the page editors and design manager.
Um bei der lokalen Entwicklung ein Symbol hinzuzufügen, öffnen Sie die `meta.json`-Datei des Moduls und fügen Sie den Wert des `icon`-Parameters hinzu oder bearbeiten Sie ihn so, dass er ein SVG vom Datei-Manager ist.
```json theme={null}
// meta.json
{
"global": false,
"host_template_types": ["PAGE"],
"icon": "http://example.com/hubfs/code.svg",
"label": "Code block",
"smart_type": "NOT_SMART",
"is_available_for_new_content": true,
"inline_help_text": "This module is for code snippets."
}
```
## Ändern des Labels
Das Label, das bei der Anzeige von Modulen im Editor verwendet wird, kann unabhängig vom Namen des Moduls angepasst werden. Dies ist nützlich, wenn Sie lokal entwickeln, da Sie einen Namen verwenden können, der für Sie sinnvoll ist, während Sie einen anderen Namen haben, den die Autoren der Inhalte sehen.
Der `label`-Parameter wird lokal geändert, um das Label festzulegen. Im Design-Manager gibt es ein Feld im Modul-Editor unterhalb des Modulnamens.
## Ein Modul global machen
Bei normalen Modulen ist der Inhalt jeder Instanz eines Moduls in einer Seite, E-Mail oder Vorlage unabhängig. In einigen Anwendungsfällen ist es sinnvoll, dass alle Instanzen eines Moduls den gleichen Inhalt haben. Bei der lokalen Entwicklung können Sie ein Modul global machen, indem Sie `global` auf `true` festlegen.
Sie können mit dem Design-Manager auch [Module in einer Drag-&-Drop-Vorlage in eine globale Vorlage konvertieren](https://knowledge.hubspot.com/design-manager/use-global-content-across-multiple-templates#create-new-global-content-in-the-design-manager:~:text=To%20convert%20an%20existing%20local%20module%20or%20group).
## Steuern, wo ein Modul zur Verwendung verfügbar ist
Bei der lokalen Entwicklung können Sie über die `hostTemplateTypes`-Eigenschaft steuern, in welchen Inhaltstypen ein Modul verwendet werden kann. Erfahren Sie mehr über die [verfügbaren Vorlagentypen](https://developers.hubspot.de/docs/guides/cms/content/templates/overview#template-types). Module können außerdem ausgeblendet werden, sodass sie nicht direkt zu Seiten hinzugefügt werden können, indem `is_available_for_new_content` auf `false` festgelegt wird. Dies kann beispielsweise für Module hilfreich sein, die für Navigationsmenüs und die Suche erstellt wurden.
Sie können dies im Design-Manager aktualisieren, indem Sie auf die Option **Vorlagentyp** in der rechten Seitenleiste klicken.
## Hinzufügen von CSS- und JavaScript-Abhängigkeiten
Zusätzlich zur Verwendung von `module.css` und `module.js` zum Hinzufügen von CSS und JavaScript, das zu allen Seiten hinzugefügt wird, die eine Modulinstanz enthalten, können Abhängigkeiten, die zwischen Modulen geteilt werden, mithilfe von `css_assets` und `js_assets` hinzugefügt werden. Die Pfade können absolut oder relativ zur `meta.json`-Datei sein.
```json theme={null}
// meta.json
{
"css_assets": [{ "path": "../path/to/file.css" }],
"js_assets": [{ "path": "../path/to/file.js" }]
}
```
> [!WARNING]
>
> **Warnung:** Wenn relative Pfade verwendet werden, um auf Abhängigkeiten zu verweisen, überschreibt die Ausführung von `hs fetch --overwrite` zur Aktualisierung des Moduls für die lokale Entwicklung die relativen Pfade mit absoluten Pfaden.
Mit dem Design-Manager können Sie CSS- und JavaScript-Dateien mit einem Modul verknüpfen, indem Sie den Abschnitt *Verlinkte Dateien* in der rechten Seitenleiste des Modul-Editors verwenden.
## Hinzufügen von Kategorien und Tags
Sie können Modulen Kategorien und Tags zuweisen, um sie in HubSpot-Tools zu organisieren:
* [Kategorien](#categories): Weisen Sie einem Modul Kategorien zu, um sie in Gruppen innerhalb der Content-Editor-Benutzeroberfläche zu organisieren. Dies ermöglicht es Content-Autoren, Module einfacher zu finden, während sie Inhalte in HubSpot erstellen. Beachten Sie Folgendes zu den Kategorien:
* Ein Modul kann bis zu drei Kategorien haben, die vordefiniert sind und nicht angepasst werden können.
* Derzeit werden Kategorien nicht in der Content-Editor-Benutzeroberfläche angezeigt. Sie können jedoch Kategorien zuweisen, wenn die Kategorisierung in Editoren verfügbar ist.
* Nicht kategorisierte Module sind unter der Kategorie *Alle* verfügbar sein.
* [Tags](#tags): Weisen Sie Tags zu, um Module innerhalb des Design-Managers zu organisieren. Auf diese Weise können Sie Module beim Erstellen von Vorlagen leichter finden.
Im Design-Manager können Sie Kategorien und Tags über den Abschnitt *Filter-Tags* der rechten Seitenleiste im Modul-Editor zuweisen. Erfahren Sie unten mehr über die verfügbaren Kategorien und Tags.
Lokal können Sie Kategorien und Tags wie folgt zu der `meta.json`-Datei eines Moduls hinzufügen:
```json theme={null}
// meta.json
{
"label": "Custom module",
"categories": ["image_and_video", "commerce"],
"content_tags": [
{
"name": "BUTTONS",
"source": "USER"
},
{
"name": "CTA",
"source": "USER"
}
],
"is_available_for_new_content": true
}
```
### Kategorien
Das `categories`-Array eines Moduls kann bis zu drei der folgenden Kategorien enthalten (ohne Berücksichtigung von Groß- und Kleinschreibung):
| Kategorie | Beschreibung |
| - | - |
| `blog` | Blogspezifische Module, z. B. eine aktuelle Beitragsliste. |
| `body_content` | Module, die formatiert sind, um Inhalte grafisch darzustellen, z. B. eine Bildergalerie. |
| `commerce` | Handelsspezifische Module wie Preiskarten. |
| `design` | Module, die die Inhaltsstruktur und das Layout beeinflussen, wie Accordions. |
| `functionality` | Module, die dynamische Reaktionen oder Verhaltensweisen auf der Seite enthalten, z. B. Menüs. |
| `forms_and_buttons` | Module, die es Website-Besuchern ermöglichen, Daten einzugeben und zu übermitteln. |
| `media` | Module, die Elemente wie Bilder, Symbole, Videos und Banner enthalten. |
| `social` | Social-Media-spezifische Module wie Social-Media-Sharing. |
| `text` | Module, die nur Text enthalten. |
### Tags
Das `content_tags`-Array eines Moduls kann eines der folgenden Modul-Tag-Objekte enthalten (Groß-/Kleinschreibung beachten):
**Inhaltstypen:**
* `ACCORDION`
* `ANIMATION`
* `BLOG_POST`
* `BUTTONS`
* `CODE`
* `CTA`
* `FEED`
* `FORM`
* `ICON`
* `IMAGE`
* `LISTS`
* `LOGO`
* `MENU`
* `RICH_TEXT`
* `SLIDER`
* `TEXT`
* `VIDEO`
**Funktionen:**
* `BANNER`
* `BLOG`
* `BRANDING`
* `CALCULATOR`
* `CONVERSION`
* `EMAIL`
* `GALLERY`
* `HEADERS`
* `INTERACTION`
* `LAYOUT`
* `MAP`
* `MULTIMEDIA`
* `NAVIGATION`
* `PROGRESS_BAR`
* `SEARCH`
* `SETTINGS`
* `SOCIAL`
* `TRANSLATION`
# Standard-Modulversionierung
Source: https://developers.hubspot.de/docs/cms/reference/modules/default-module-versioning
# Standard-Webmodule
Source: https://developers.hubspot.de/docs/cms/reference/modules/default-modules
Erfahren Sie mehr über die Standardmodule, die HubSpot für das Erstellen von Website Seiten-, Blogbeitrags- und Blog-Listing-Vorlagen bereitstellt. Diese Module sind getrennt von den Standard-E-Mail-Modulen, die für E-Mail-Vorlagen gedacht sind.
Im Folgenden erfahren Sie mehr über die Standardmodule, die HubSpot für das Erstellen von Website Seiten-, Blogbeitrags- und Blog-Listing-Vorlagen bereitstellt. Sie finden auch Standardmodule, die zur Erstellung von Angebotsvorlagen verwendet werden können.
Bei der lokalen Entwicklung können Sie ein bestimmtes Standardmodul mithilfe des Modulpfads [abrufen](https://developers.hubspot.de/docs/guides/cms/tools/local-development-cli#fetch-files) (z. B. `hs fetch @hubspot/linked_image.module`).
Um den Code eines Standardmoduls anzuzeigen, können Sie das Modul im `@hubspot`-Ordner des Design-Managers anzeigen und kopieren. Im Code verwenden einige Standardmodule die Standard-Account-ID 7052064 und nicht diejenige, die zum aktuellen Account gehört.
> [!WARNING]
>
> ### Hinweis:
>
> Standard-Webmodule sind getrennt von [Standard-E-Mail-Modulen](/docs/cms/start-building/building-blocks/modules/default-email-modules), die für E-Mail-Vorlagen vorgesehen sind. Wenn Ihre E-Mail-Vorlagen eines der folgenden Standard-Webmodule enthalten, sollten Sie es [durch das entsprechende E-Mail-spezifische Modul ersetzen](https://developers.hubspot.de/docs/guides/cms/content/templates/default-email-modules):
>
> * `cta`
> * `header`
> * `linked_image`
> * `logo`
> * `post_filter`
> * `post_listing`
> * `section_header`
> * `social_sharing`
> * `text`
## Blogkommentare
Wird in Blogbeiträgen und Blog-Listings unterstützt.
```hubl theme={null}
{% module "blog_comments" path="@hubspot/blog_comments" %}
```
## Blog-E-Mail-Abonnement
Wird in Seiten, Blogbeiträgen und Blog-Listings unterstützt.
```hubl theme={null}
{% module "blog_subscribe" path="@hubspot/blog_subscribe" %}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `select_blog` | Blog | Der Blog, der für das Modul verwendet werden soll. | |
| `title` | String | Titel für das Modul (umhüllt von einem h3-Tag) | `"Subscribe Here!"` |
| `response_message` | Rich-Text | Die Nachricht, die beim Einsenden des Formulars angezeigt wird. | `Thanks for subscribing!` |
## Blogbeiträge
Fügen Sie diese Modul zu Blog Listing-Seiten hinzu, um Blogbeitragsvorschauen mit dem Titel, Feature-Bild, Autor, Veröffentlichungsdatum und mehr von jedem Beitrag anzuzeigen, und zwar mit einer klickbaren Schaltfläche, die zum Beitrag navigiert.
Dieses Standardmodul wurde mit React erstellt und Sie können [seinen Quellcode bei GitHub anzeigen](https://github.com/HubSpot/cms-react/tree/main/default-react-modules/src/components/modules/BlogPosts-V0).
> [!WARNING]
>
> ### Hinweis:
>
> * Auf dieses Modul kann nicht über den Design-Manager zugegriffen werden. Die Modul kann mit HubL in Code-Vorlagen referenziert und im [Editor für Blog Listing-Seiten](https://knowledge.hubspot.com/de/blog/edit-a-blog-listing-page) hinzugefügt werden.
> * Dieses Modul ersetzt das vorherige `blog_listing`-Modul, das veraltet war.
```hubl theme={null}
{% module "blog_posts"
path="@hubspot/blog_posts"
layout="grid",
columns=4,
displayForEachListItem=[
"image",
"title",
"authorName",
"tags",
"publishDate",
"description",
"button"
]
%}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `layout` | Auswahl | Der Inhalt Layout für jede Blogbeitragsvorschau.
`grid` (Standard): richtet Beiträge in einem einfachen Raster aus.
`singleColumn`: richtet Beiträge in einer einzigen Spalte mit Feature-Bildern in einer eigenen Zeile über dem Rest des Beitrag-Contents aus.
`sideBySide`: richtet Beiträge in einer Spalte mit Feature-Bildern aus, die horizontal am Beitragsinhalt ausgerichtet sind.
| `grid` |
| `columns` | Zahl | Bei Verwendung des `grid`-Layouts wird die Anzahl der Beiträge pro Zeile angegeben. Kann `2`, `3` oder `4` sein. | `3` |
| `alternateImage` | Boolesch | Wenn Sie das `sideBySide`-Layout verwenden, legen Sie dies auf `true` fest, um das Feature-Bild abwechselnd auf der rechten und linken Seite der Beitragsvorschau auszurichten. | `false` |
| `fullImage` | Boolesch | Wenn Sie das `grid`- oder das `singleColumn`-Layout verwenden, legen Sie dieses Feld auf `true` fest, um das Feature-Bild zum Hintergrund der Beitragsvorschau zu machen. | `false` |
| `displayForEachListItem` | Array | Der Inhalt, der in jeder Blogbeitragsvorschau enthalten sein soll. Die Auswahlmöglichkeiten umfassen:
`image`: das Feature-Bild des Beitrags.
`title`: der Titel des Beitrags.
`authorImage`: das Bild des Autors des Beitrags.
`authorName`: der Name des Autors des Beitrags.
`tags`: die Blog-Tags des Beitrags.
`publishDate`: das Veröffentlichungsdatum des Beitrags.
`description`: die Metabeschreibung des Beitrags.
`button`: die Schaltfläche „Mehr lesen“, die zum Blogbeitrag verlinkt.
| `[ 'image', 'title', 'authorImage', 'authorName', 'tags', 'publishDate', 'description', 'button' ]` |
| `buttonText` | Zeichenfolge | Der Text, der auf der Schaltfläche „Mehr lesen“ angezeigt wird, falls enthalten. | `Read more` |
## Blogbeitragsfilter
Wird auf Seiten, in Blog-Listings und in Blogbeiträgen unterstützt.
```hubl theme={null}
{% module "post_filter" path="@hubspot/post_filter" %}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `select_blog` | Blog | Wählen Sie einen anzuzeigenden Blog aus. Standardmäßig wird bei Nutzung in einer Blogvorlage der aktuelle Blog und bei anderweitiger Nutzung der Hauptblog verwendet. | |
| `filter_type` | Auswahl | Typ der Filterung der anzuzeigenden Links. Die Auswahlmöglichkeiten umfassen:
`tag`
`month`
`author`
| `tag` |
| `order_by` | Auswahl | Sortierung für die Werte von Filter-Links. Die Auswahlmöglichkeiten umfassen:
`post_count`
`name`
| `post_count` |
| `list_title` | Text | Eine H3-Überschrift. | `"Posts by Tag"` |
| `max_links` | Zahl | Anzahl der anzuzeigenden Filterlinks. Lassen Sie diese Angabe leer, um alle anzuzeigen. | `5` |
| `expand_link_text` | Text | Text, der angezeigt werden soll, wenn mehr als der anzuzeigende `max_links`-Wert verfügbar ist. | `"See all"` |
## Listing des Blogbeitrags
Wird auf Seiten, in Blog-Listings und in Blogbeiträgen unterstützt.
> [!WARNING]
>
> ### Hinweis:
>
> Eine neue Version dieses Moduls wurde Ende März 2024 veröffentlicht. Erfahren Sie mehr über das [neue Standard-Beitrags-Listing-Modul](/docs/cms/reference/modules/default-module-versioning#post-listing).
```hubl theme={null}
{% module "post_listing" path="@hubspot/post_listing" %}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `select_blog` | Blog | Wählen Sie einen anzuzeigenden Blog aus. Standardmäßig wird bei Nutzung in einer Blogvorlage der aktuelle Blog und bei anderweitiger Nutzung der Hauptblog verwendet. | |
| `listing_type` | Auswahl | Der Typ des Listings für Ihre Beiträge. Die Auswahlmöglichkeiten umfassen:
`recent`: das letzte.
`popular_all_time`: am beliebtesten insgesamt.
`popular_past_year`: am beliebtesten im vergangenen Jahr.
`popular_past_six_months`: am beliebtesten in den letzten sechs Monaten.
`popular_past_month`: am beliebtesten im letzten Monat.
| `recent` |
| `list_title` | Text | Eine H3-Überschrift. | `"Recent Posts"` |
| `max_links` | Zahl | Maximale Anzahl an anzuzeigenden Beiträgen. | `5` |
## Schaltfläche
Wird in Seiten, Blogbeiträgen und Blog-Listings unterstützt.
```hubl theme={null}
{% module "button" path="@hubspot/button" %}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `link` | Link | Die URL, zu der die Schaltfläche weiterleitet. | `{ "url": { "type": "EXTERNAL", "href": "www.hubspot.com", "content_id": null }, "open_in_new_tab": false, "no_follow": false }` |
| `button_text` | Text | Text, der auf der Schaltfläche angezeigt wird. | `"Add a button link here"` |
| `style` | Objekt |
`override_default_style` (Boolesch)
`button_font` (Schriftart)
`button_color` (Farbe)
`text_hover_color` (Farbe)
`button_hover_color` (Farbe)
| `{ "override_default_style": false, "button_font": { "color": "#FFFFFF", "size_unit": "px" }, "button_color": { "color": "#000000", "opacity": 100 }, "text_hover_color": { "color": "#000000", "opacity": 100 }, "button_hover_color": { "color": "#CCCCCC", "opacity": 100 } }` |
## Call-to-Action
Wird auf Seiten, in Blog-Listings und in Blogbeiträgen unterstützt.
```hubl theme={null}
{% module "cta" path="@hubspot/cta" %}
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `guid` | Zeichenfolge | GUID des CTA. |
## Daten löschen
Zum 26. Mai 2025 wurde dieses Modul zugunsten der [Datenschutz-Anfrageseiten-Funktion](https://knowledge.hubspot.com/de/privacy-and-consent/manage-data-privacy-requests) eingestellt.
Die Referenzinformationen für dieses Modul wurden in die Dokumentation zu [veralteten Modulen](/docs/cms/versions-deprecations/deprecated/modules#delete-data) verschoben.
## Abgrenzung
Auf Seiten unterstützt. Es gibt eine [neue Version dieses Moduls](/docs/cms/reference/modules/default-module-versioning#divider) für Accounts, die nach dem 25. August 2022 erstellt wurden. [Erfahren Sie mehr über diese Änderung](https://developers.hubspot.com/changelog/divider-module-v1).
```hubl theme={null}
{% module "divider" path="@hubspot/divider" %}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `height` | Zahl | Pixel-(px)-Höhe der Trennlinie. | `1` |
| `width` | Zahl | Breite der Trennlinie als Prozentsatz (%). | `50` |
| `color` | Farbe | Farbe (Hex-Wert) und Deckkraft (Zahl) der Trennlinie. | `{ "color": "#000000", "opacity": 100 }` |
| `line_type` | Auswahl | Typ der Linie. Die Auswahlmöglichkeiten umfassen:
`solid`
`dotted`
`dashed`
| `solid` |
| `alignment` | Auswahl | Horizontale Ausrichtung der Trennlinie. Die Auswahlmöglichkeiten umfassen:
`left`
`center`
`right`
| `center` |
| `show_padding` | Boolesch | Blendet die obere und untere Umrandung der Trennlinie ein/aus. | `false` |
| `padding` | Zahl | Pixel-Wert (px) für die obere und untere Umrandung der Trennlinie. Option verfügbar, wenn `show_padding` gleich `true`. | `5` |
## Daten herunterladen
Zum 26. Mai 2025 wurde dieses Modul zugunsten der [Datenschutz-Anfrageseiten-Funktion](https://knowledge.hubspot.com/de/privacy-and-consent/manage-data-privacy-requests) eingestellt.
Die Referenzinformationen für dieses Modul wurden in die Dokumentation zu [veralteten Modulen](/docs/cms/versions-deprecations/deprecated/modules#download-data) verschoben.
## Formular
Wird in Seiten, Blogbeiträgen und Blog-Listings unterstützt.
```hubl theme={null}
{% module "form"
path="@hubspot/form"
form={
"form_id": "9e633e9f-0634-498e-917c-f01e355e83c6",
"response_type": "redirect",
"message": "Thanks for submitting the form.",
"redirect_id": null,
"redirect_url": "http://www.google.com"
}
%}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `title` | Text | H3-Überschrift | |
| `form` | Objekt | Formularobjekt, einschließlich:
`form_id`: ID für das zu verwendende Formular
`response_type`: was der Besucher nach dem Einsenden des Formulars sieht:
`inline`
`redirect`
`message`: Inline-Nachricht, wenn `response_type` auf `inline`
`redirect_id` festgelegt ist: ID der Seite, zu der weitergeleitet werden soll, wenn `response_type` auf `redirect` festgelegt ist.
`redirect_url`: URL, zu der weitergeleitet werden soll, wenn `response_type` auf `redirect`
| festgelegt ist |
| `{ "form_id": "", "response_type": "redirect", "message": "Thanks for submitting the form.", "redirect_id": null, "redirect_url": "http://www.google.com" }` | | | |
| `notifications_are_overridden` | Boolesch | E-Mail, an die anstelle der Standard-E-Mail eine Formularbenachrichtigung gesendet wird. | `false` |
| `notifications_override_email_addresses` | E-Mail | Kommagetrennte Liste von E-Mails, an die gesendet werden soll, wenn `notifications_are_overridden` gleich `true`. | |
| `follow_up_type_simple` | Boolesch | Das Senden einer Follow-up-E-Mail ist aktiviert. | `false` |
| `simple_email_for_live_id` | Follow-up-E-Mail | ID der Follow-up-E-Mail. Verfügbar, wenn `follow_up_type_simple` gleich `true`. | |
| `sfdc_campaign` | Salesforce-Kampagne | Wenn die Salesforce-Integration aktiv ist, die Kampagnen-ID. | |
## Header
Wird auf Seiten, in Blog-Listings und in Blogbeiträgen unterstützt.
```hubl theme={null}
{% module "header" path="@hubspot/header" %}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `value` | Text | Text für die Überschrift. | `"A clear and bold header"` |
| `header_tag` | Auswahl | Wählen Sie eine Überschriftenebene aus. Auswahlmöglichkeiten umfassen `h1` bis `h6`. | `h1` |
## Horizontaler Abstandhalter
Wird in Seiten, Blog-Listings, Blogbeiträgen und E-Mails unterstützt.
```hubl theme={null}
{% module "horizontal_spacer" path="@hubspot/horizontal_spacer" %}
```
## Symbol
Wird in Seiten, Blog-Listings und Blog-Beiträgen unterstützt. Symbole können aus den Symbolsätzen von Font Awesome 5.0.10 und 5.14.0 übernommen werden.
```hubl theme={null}
{% module "icon" path="@hubspot/icon" %}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `name` | Zeichenfolge | Der Name des Symbols. | `"hubspot"` |
| `purpose` | Auswahl | Eine Barrierefreiheitsoption, die den Zweck des Symbols für Bildschirmleseprogramme kategorisiert. Verfügbare Werte sind:
`decorative:` wird vom Bildschirmleseprogramm ignoriert.
`semantic:` wird vom Bildschirmleseprogramm gelesen.
| `"decorative"` |
| `title` | Zeichenfolge | Eine Barrierefreiheitsoption, die dem Symbol einen Titel zuweist. | |
| `style` | Zeichenfolge | Der Typ des Symbols. Kann einer der folgenden Werte sein: `solid`, `regular`, `light`, `thin` oder `duotone`. | `"solid"` |
| `unicode` | ZeichenfolgeDer Unicode-Wert des Symbols | . | `f3b2` |
## Bild
Wird auf Seiten, in Blog-Listings und in Blogbeiträgen unterstützt.
```hubl theme={null}
{% module "linked_image" path="@hubspot/linked_image" %}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `img` | Bild | Bildobjekt, das Folgendes enthält:
`src`: Bild-URL
`alt`: ALT-Text für Bild
`loading`: Lazy-Loading-Optionen umfassen:
`disabled`
`lazy`
`width`: px-Wert
`height`: px-Wert
| `{ "src": "https://static.hubspot.com/final/img/content/email-template-images/placeholder_200x200.png", "alt": "placeholder_200x200", "loading": "disabled", "width": 200, "height": 200 }` |
| `link` | Text | Optionaler Link für das Bild. | |
| `target` | Boolesch | Öffnet Link in neuer Registerkarte. | `false` |
## Bildraster
Wird auf Seiten, in Blog-Listings und in Blogbeiträgen unterstützt.
```hubl theme={null}
{% module "image_grid" path="@hubspot/image_grid", label="image_grid.module" %}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `slides` | Objekt | Objekt, das Informationen für jede Folie enthält. Objekt enthält:
`img`: Bild-URL.
`link_url`: URL, auf die die Folie verweisen soll
`hover_messages`: Text, der das Bild überlagert, wenn Sie den Mauszeiger darüber bewegen.
| `standard` |
| `lightboxRows` | Zahl | Anzahl der Zeilen in der Lightbox-Galerie, wenn `display_mode` gleich `lightbox`. | `3` |
| `loop_slides` | Boolesch | Ermöglicht das Durchlaufen der Folien in einer Schleife mit „Weiter“/“Zurück“, wenn `display_mode` gleich `standard` oder `thumbnail`. | `true` |
| `auto_advance` | Boolesch | Wechselt automatisch zur nächsten Folie, wenn `display_mode` gleich `standard` oder `thumbnail`. | `true` |
| `num_seconds` | Zahl | Zeitspanne (Sekunden) zwischen dem Wechsel zur nächsten Folie, wenn `display_mode` gleich `standard` oder `thumbnail`. | `5` |
| `show_pagination` | Boolesch | Zeigt Navigationsschaltflächen an, wenn `display_mode` gleich `standard` oder `thumbnail`. | `true` |
| `sizing` | Auswahl | Legt die Höhe der Folien fest, wenn `display_mode` gleich `standard` oder `thumbnail`. Die Auswahlmöglichkeiten umfassen:
`static`: feste Höhe.
`resize`: variable Höhe.
| `static` |
| `transition` | Auswahl | Folienübergangsstile, wenn `display_mode` gleich `standard` oder `thumbnail`. Die Auswahlmöglichkeiten umfassen:
`slide`: Folienübergang.
`fade`: Übergang mit Ausblenden.
| `slide` |
| `caption_position` | Auswahl | Position der Folienbeschriftungen, wenn `display_mode` gleich `standard` oder `thumbnail`. Die Auswahlmöglichkeiten umfassen:
`below`: hält Bildunterschriften immer unter dem Bild.
`superimpose`: legt Bildbeschriftungen über die Bilder.
| `below` |
## Bildergalerie
Wird in Seiten, Blogbeiträgen und Blog-Listings unterstützt.
```hubl theme={null}
{% module "gallery" path="@hubspot/gallery" %}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `slides` | Objekt | Objekt, das Informationen für jede Folie enthält. Objekt enthält:
`img`: Bild-URL.
`show_caption`: boolescher Wert zur Anzeige der Folienbeschriftung.
`caption`: Rich-Text für Beschriftung.
`link_url`: URL, auf die die Folie verlinken soll.
`open_in_new_tab`: boolescher Wert zum Weiterleiten, wenn der Link in einer neuen Registerkarte geöffnet werden soll.
| `standard` |
| `lightboxRows` | Zahl | Anzahl der Zeilen in der Lightbox-Galerie, wenn `display_mode` gleich `lightbox`. | `3` |
| `loop_slides` | Boolesch | Ermöglicht das Durchlaufen der Folien in einer Schleife mit „Weiter“/“Zurück“, wenn `display_mode` gleich `standard` oder `thumbnail`. | `true` |
| `auto_advance` | Boolesch | Wechselt automatisch zur nächsten Folie, wenn `display_mode` gleich `standard` oder `thumbnail`. | `true` |
| `num_seconds` | Zahl | Zeitspanne (Sekunden) zwischen dem Wechsel zur nächsten Folie, wenn `display_mode` gleich `standard` oder `thumbnail`. | `5` |
| `show_pagination` | Boolesch | Zeigt Navigationsschaltflächen an, wenn `display_mode` gleich `standard` oder `thumbnail`. | `true` |
| `sizing` | Auswahl | Legt die Höhe der Folien fest, wenn `display_mode` gleich `standard` oder `thumbnail`. Die Auswahlmöglichkeiten umfassen:
`static`: feste Höhe.
`resize`: variable Höhe.
| `static` |
| `transition` | Auswahl | Folienübergangsstile, wenn `display_mode` gleich `standard` oder `thumbnail`. Die Auswahlmöglichkeiten umfassen:
`slide`: Folienübergang.
`fade`: Übergang mit Ausblenden.
| `slide` |
| `caption_position` | Auswahl | Position der Folienbeschriftungen, wenn `display_mode` gleich `standard` oder `thumbnail`. Die Auswahlmöglichkeiten umfassen:
`below`: hält Bildunterschriften immer unter dem Bild.
`superimpose`: legt Bildbeschriftungen über die Bilder.
| `below` |
## Galerie mit Bild-Schiebereglern
Wird in Seiten, Blogbeiträgen und Blog-Listings unterstützt.
```hubl theme={null}
{% module "unique_name"
path="@hubspot/image_slider_gallery",
slides=[
{
"img": {
"src": "",
"alt": "Default image alt text"
},
"caption": "1 An optional caption for the image that will be added to the gallery. Enter any descriptive text for this image that you would like visitors to be able to read.",
"link_url": ""
},
{
"img": {
"src": "",
"alt": "Default image alt text"
},
"caption": "2 An optional caption for the image that will be added to the gallery. Enter any descriptive text for this image that you would like visitors to be able to read.",
"link_url": ""
}
]
slideshow_settings={
"slides": {
"per_page": 1,
"sizing": "natural",
"aspect_ratio": "16/9",
"show_captions": true,
"caption_position": "below"
},
"movement": {
"transition": "slide",
"loop_slides": false,
"auto_advance": false,
"auto_advance_speed_seconds": 5
},
"navigation": {
"show_main_arrows": true,
"show_thumbnails": false,
"show_dots": false
}
}
%}
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `slides` | Feldgruppe | Eine Feldgruppe mit den folgenden Feldern:
`img`: Bild-URL.
`caption`: Rich-Text für Bildbeschriftung.
`link_url`: URL, zu der die Folie verlinkt.
|
| `slideshow_settings` | Feldgruppe | Die Feldgruppe für die Einstellungen des Bildschiebereglers. Enthält die folgenden Feldgruppen:
`slides`: Folieneinstellungen, einschließlich:
`per_page`: Anzahl der Folien pro Seite.
`sizing`: Bildgröße
`aspect_ratio`: Seitenverhältnis von Bildern.
`show_captions`: ein boolescher Wert
`movement`: Einstellungen für das Gleitverhalten von Bildern.
`navigation`: Einstellungen für die Bildnavigation.
|
| `default_text` | Feldgruppe | Die Standardtextelemente des Moduls, einschließlich:
`default_caption`: Bildbeschriftung.
`default_image_alt_text`: Bildtext.
`slider_aria_label`: Standard-Aria-Label des Moduls.
`arial_label_thumbnails`: Standard-Aria-Thumbnail des Moduls.
`slider_nav_aria_label`: Standard-Aria-Label der Modulnavigation.
`prev`: vorheriger Folientext.
`next`: Weiter mit Folientext.
`first`: „Zu ersten Folie“-Text.
`slideX`: „Zu X Folie“-Text.
`pageX`: „Zu X Seite“-Text.
`play`: „Automatische Wiedergabe starten“-Text.
`pause`: „Automatische Wiedergabe anhalten“-Text.
`carousel`: Karusselltext.
`select`: Text zum Auswählen einer anzuzeigenden Folie.
`slide`: Folientext.
`slidelabel`: Folienlabel.
|
## Sprachumschaltung
Auf Seiten unterstützt.
```hubl theme={null}
{% module "language_switcher" path="@hubspot/language_switcher" %}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `display_mode` | Auswahl | Die Sprache des Textes in der Sprachumschaltung. Die Optionen umfassen:
`pagelang`: die Namen der Sprachen in der Sprache der Seite angezeigt werden, auf der sich die Sprachauswahl befindet.
`localized`: die Namen jeder Sprache in ihrer eigenen Sprache angezeigt werden.
`hybrid`: eine Kombination aus beidem.
| `localized` |
## Logo
Wird auf Seiten, in Blog-Listings und in Blogbeiträgen unterstützt.
```hubl theme={null}
{% module "logo" path="@hubspot/logo" %}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `img` | Bild | Bildobjekt, das Folgendes enthält:
`override_inherited_src`: überschreibt das Standardlogo aus den Einstellungen
`src`: Bild-URL
`alt`: ALT-Text für Logo
| `{ "override_inherited_src": false, "src": null, "alt": null }` |
| `link` | Text | Optionaler Link für das Logo. Wenn keine URL angegeben wird, verlinkt Ihr Logo zu der *Logo-URL*, die in Ihren [Markeneinstellungen](https://knowledge.hubspot.com/de/branding/edit-your-logo-favicon-and-brand-colors#edit-your-logo) festgelegt ist. | |
| `open_in_new_tab` | Boolesch | Öffnet Link in neuer Registerkarte. | `false` |
| `suppress_company_name` | Boolesch | Blendet den Unternehmensnamen aus, wenn ein Bild nicht ausgewählt ist. | `true` |
| `heading_level` | Auswahl | Wählt eine Überschriftenebene aus, wenn kein Bild ausgewählt ist und `suppress_company_name` gleich `false` ist. Die Auswahlmöglichkeiten umfassen `h1` bis `h6`. | `h1` |
## Logo-Raster
Ein anpassbares Raster aus Containern zur einheitlichen Anzeige von Logos. Wird auf Seiten, in Blog-Listings und in Blogbeiträgen unterstützt.
```hubl theme={null}
{% module "logo grid"
path="@hubspot/logo_grid"
group_logos=[
{
"logo": {
"loading": "lazy",
"alt": "company_logo",
"src": "https://www.example.com/Logos/color/logo.png"
}
},
{
"logo": {
"loading": "lazy",
"alt": "company2_logo",
"src": "https://www.example.com/Logos/color/logo2.png"
}
},
{
"logo": {
"alt": "lorem-logo",
"height": 40,
"loading": "lazy",
"max_height": 40,
"max_width": 175,
"src": "https://www.example.com/Logos/color/logo3.png",
"width": 175
}
}
],
styles={
"group_logo": {
"group_background": {
"aspect_ratio": "1/1",
"background_color": {
"color": "#8E7CC3",
"opacity": 100
}
},
"group_spacing": {
"padding": {
"padding": {
"bottom": {
"units": "px",
"value": 75
},
"left": {
"units": "px",
"value": 75
},
"right": {
"units": "px",
"value": 75
},
"top": {
"units": "px",
"value": 75
}
}
}
},
"max_logo_height": 85
},
"group_logo_grid": {
"column_count": 3,
"grid_gap": 54
}
}
%}
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `group_logos` | Array | Ein Array, das ein Objekt für jedes Logo im Raster enthält. |
| `logo` | Objekt | In `group_logos`, ein Objekt für jedes Logo im Raster. Jedes Logo kann die folgenden Parameter enthalten:
`src`: der Dateipfad des Logos.
`loading`: das [Lazy Loading](/docs/cms/best-practices/testing-staging-performance/lazy-loading)-Verhalten des Logos.
`alt`: der ALT-Text
`height`: die Höhe des Logos.
`width`: die Breite des Logos.
`max_height`: die maximale Höhe des Logos.
`max_width`: die maximale Breite des Logos.
|
| `styles` | Array | Ein Array, das die Stilfelder enthält, die sich auf das Rasterlayout, die Logocontainer und die Logo-Bilder auswirken. Dieses Array enthält die folgenden Stilgruppen:
`group_logo`: Stile, die sich auf die Logocontainer und Logo-Bilder auswirken. Enthält Folgendes:
`group_background`: Stile, die das Seitenverhältnis und die Hintergrundfarbe der Rastercontainer festlegen. Die Seitenverhältnisse umfassen: `1/1`, `4/3`, `16/9`.
`group_spacing`: Stile, die die innere Auffüllung des Logocontainers festlegen. Bei breiteren Logos kann ein höherer Auffüllungswert die Logobreite verringern.
`max_logo_height`: die maximale Höhe jedes Logos.
`group_logo_grid`: Stile, die das Rasterlayout festlegen, einschließlich:
`column_count`: die Anzahl der Spalten im Raster.
`grid_gap`: der Abstand zwischen den Rasterelementen.
|
## Meetings
Wird in Seiten, Blogbeiträgen und Blog-Listings unterstützt.
```hubl theme={null}
{% module "meetings" path="@hubspot/meetings" %}
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `meeting` | Meeting | Wählen Sie einen Meetinglink aus. |
## Mitgliedschaftsanmeldungen über Social Media
Bietet Google- und Facebook-Anmeldeoptionen für [Seiten, die Zugriffsberechtigungen erfordern](/docs/cms/start-building/features/memberships/overview). Der Benutzer muss sich mit einem Konto anmelden, das mit der für seinen Kontaktdatensatz im CRM hinterlegten E-Mail-Adresse verknüpft ist. Sie können auswählen, welche Social-Media-Anmeldungen aktiviert werden sollen.
Wird auf Anmeldeseiten für die Mitgliedschaft unterstützt.
```hubl theme={null}
{% module "social" path="@hubspot/membership_social_logins",
clientid=""
appid=""
facebook_enabled=true
google_enabled=true
%}
```
> [!NOTE]
>
> Facebook setzt voraus, dass Sie ein [Facebook-Entwicklerkonto](https://developers.facebook.com/docs/development/register) haben und eine [Facebook-App](https://developers.facebook.com/docs/development/create-an-app) mit grundlegenden Einstellungen erstellt haben. Sobald Sie dies getan haben, übergeben Sie Ihre App-ID an das Modul.
>
> Google erfordert ein Google-Konto und die [Erstellung von Autorisierungsanmeldeinformationen](https://developers.google.com/identity/sign-in/web/sign-in#create_authorization_credentials). Sobald dies erfolgt ist, übergeben Sie die Client-ID Ihrer App an das Modul.
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `facebook_appid` | Zeichenfolge | Ihre Facebook-App-ID. | |
| `facebook_enabled` | Boolesch | Aktiviert die Schaltfläche für die Facebook-Anmeldung. `facebook_appid` ist erforderlich. | `False` |
| `google_clientid` | Zeichenfolge | Ihre Google-Client-ID. | |
| `google_enabled` | Boolesch | Aktiviert die Schaltfläche für die Google-Anmeldung. `google_clientid` ist erforderlich. | `False` |
## Menü
Wird in Seiten, Blogbeiträgen und Blog-Listings unterstützt.
Möchten Sie Ihr eigenes benutzerdefiniertes Menü erstellen? Probieren Sie unsere [menu()-Funktion](/docs/cms/reference/hubl/functions#menu) aus.
```hubl theme={null}
{% module "menu" path="@hubspot/menu" %}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `id` | Menü | ID des Menüs. | |
| `root_type` | Auswahl | Erweiterter Menütyp. Die Auswahlmöglichkeiten umfassen:
`site_root`: Es werden immer Top-Level-Seiten im Menü angezeigt.
`top_parent`: Es werden Seiten im Menü abhängig vom angezeigten Abschnitt angezeigt.
`parent`: Es werden Seiten im Menü abhängig von der angezeigten Seite angezeigt.
| `site_root` |
| `max_levels` | Auswahl | Gibt die Anzahl der untergeordneten Menüebenen an, auf die erweitert werden kann. Die Auswahlmöglichkeiten umfassen `1` bis `10` | `2` |
| `flow` | Auswahl | Ausrichtung des Menüs. Die Auswahlmöglichkeiten umfassen:
`horizontal`
`vertical`
| `horizontal` |
| `flyouts` | Boolesch | Aktiviert die Funktion für untergeordnete Menüelemente. | `true` |
## Fußzeile
Wird auf Seiten, in Blog-Listings und in Blogbeiträgen unterstützt.
```hubl theme={null}
{% module "page_footer" path="@hubspot/page_footer" %}
```
## Passwortaufforderung
Wird in Seiten, Blogbeiträgen und Blog-Listings unterstützt.
```hubl theme={null}
{% module "password_prompt" path="@hubspot/password_prompt" %}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `submit_button_text` | Text | Text, der auf der Einsende-Schaltfläche angezeigt wird. | `"Submit"` |
| `password_placeholder` | Text | Platzhaltertext für das Passwortfeld. | `"Password"` |
| `bad_password_message` | Rich-Text | Nachricht zum Anzeigen, wenn ein Passwort falsch eingegeben wurde. | `"Sorry, please try again. "` |
## Zahlungen
Wird in Seiten, Blogbeiträgen und Blog-Listings unterstützt.
```hubl theme={null}
{% module "payments" path="@hubspot/payments" %}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `payment` | Zeichenfolge | Um festzulegen, dass das Modul einen bestimmten Zahlungslink verwendet, geben Sie die ID des Zahlungslinks ein. Sie [finden die ID](/docs/cms/reference/fields/module-theme-fields#link) in der URL, während Sie den Zahlungslink bearbeiten. | |
| `checkout_location` | Zeichenfolge | Legt fest, ob das Zahlungsformular in einer neuen Registerkarte oder in einer Überlagerung geöffnet werden soll. Verfügbare Werte sind:
`new_tab`: öffnet das Zahlungsformular in einer neuen Registerkarte.
`overlay`: öffnet das Zahlungsformular in einem gleitenden Overlay.
| `"new_tab"` |
| `button_text` | Zeichenfolge | Legt den Text für die Checkout-Schaltfläche fest. | `"Checkout"` |
| `button_target` | Auswahl | Gibt an, ob die Schaltfläche einen Zahlungslink von HubSpot oder einen externen Link verwendet. Die Auswahlmöglichkeiten umfassen:
`payment_link`
`custom_link`
| `"payment_link"` |
| `button_link` | Link | Wenn `button_target` auf `custom_link` festgelegt ist, wird mit dieser Option das Ziel des externen Links festgelegt. Folgende Linktypen werden unterstützt:
`EXTERNAL`
`CONTENT`
| `EXTERNAL` |
## Produkt
Zeigt ein Produkt aus der [Produktbibliothek](https://knowledge.hubspot.com/de/products/how-do-i-use-products) des Accounts an. Wird in Seiten, Blogbeiträgen und Blog-Listings unterstützt.
```hubl theme={null}
{% module
path="@hubspot/product",
product={
"id" : 2124070179
},
group_button={
"button_text" : "Buy",
"override_product_button" : true,
"button_override" : {
"no_follow" : false,
"open_in_new_tab" : false,
"sponsored" : false,
"url" : {
"href" : "https://www.test.com",
"type" : "EXTERNAL"
}
},
group_description={
"description_override" : "Monthly gym membership with access to shared locker facilities.",
"override_product_description" : true
},
group_name={
"heading_level" : "h3",
"name_override" : "Gym membership",
"override_product_name" : true
},
group_image={
"image_override" : {
"alt" : "360_F_317724775_qHtWjnT8YbRdFNIuq5PWsSYypRhOmalS",
"height" : 360,
"loading" : "lazy",
"src" : "https://2272014.fs1.hubspotusercontent-na1.net/hubfs/2272014/360_F_317724775_qHtWjnT8YbRdFNIuq5PWsSYypRhOmalS.jpg",
"width" : 640
},
"override_product_image" : true
}
%}
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `product` | Produkt | Das anzuzeigende Produkt, angegeben durch die Produkt-ID. |
| `group_button` | Feldgruppe | Standardmäßig enthält das Modul eine Schaltfläche, die den Benutzer zur festgelegten URL des Produkts führt. Um das Ziel der Schaltfläche anzupassen, fügen Sie diese optionale Feldgruppe zusammen mit den folgenden Feldern hinzu:
`button_text`: eine Zeichenfolge, die den Text der Schaltfläche festlegt.
`override_product_button`: Legen Sie dies auf `true` fest, um die Standardeinstellungen für Schaltflächen-Links zu überschreiben. Fügen Sie dann ein `button_override`-Objekt hinzu. Erfahren Sie unten mehr über `button_override`.
|
| `button_override` | Objekt | In der `group_button`-Feldgruppe legt dies das URL-Verhalten der Schaltfläche fest, wenn `override_product_button` auf `true` festgelegt ist. Enthält die folgenden Felder:
`no_follow`: boolesches Feld für das [no\_follow](https://ahrefs.com/blog/nofollow-links/)-Verhalten des Links.
`open_link_in_new_tab`: boolesches Feld für das Öffnungsverhalten des Links.
`url`: ein Objekt, das das Ziel der Schaltfläche angibt.
Im `url`-Feld können Sie den Typ des Ziels über das `type`-Feld festlegen, das die folgenden Inhaltstypen unterstützt:
`EXTERNAL`: eine Standard-URL. Nehmen Sie die URL in ein `href`-Feld auf.
`CONTENT`: eine HubSpot-Seite. Nehmen Sie die Seiten-ID in ein `content_id`-Feld auf.
`PAYMENT`: ein Zahlungslink. Nehmen Sie den Zahlungslink in ein `href`-Feld auf.
`EMAIL_ADDRESS`: eine E-Mail-Adresse. Nehmen e die Adresse in ein `href`-Feld auf.
|
| `group_name` | Feldgruppe | Standardmäßig zeigt das Modul den Produktnamen oben im Modul als h3 an. Um den Namen anzupassen, fügen Sie diese optionale Feldgruppe zusammen mit den folgenden Feldern hinzu:
`heading_level`: die Größe der Überschrift. Kann Folgendes sein: `h1` - `h6`.
`override_product_name` auf `true` festlegen, um Text anstelle des Produktnamens anzugeben.
`name_override`: die Zeichenfolge, die oben im Modul angezeigt werden soll.
|
| `group_description` | Feldgruppe | Standardmäßig zeigt das Modul die festgelegte Beschreibung des Produkts an. Um die Beschreibung anzupassen, berücksichtigen Sie diese optionale Feldgruppe zusammen mit den folgenden Feldern:
`override_product_description`: auf `true` festlegen, um die Produktbeschreibung anzupassen.
`description_override`: eine Zeichenfolge, die Ihre neue Beschreibung enthält.
|
| `group_image` | Feldgruppe | Standardmäßig zeigt das Modul das festgelegte Bild des Produkts an. Um dieses Bild anzupassen, fügen Sie diese optionale Feldergruppe mit den folgenden Feldern hinzu:
`override_product_image`: auf `true` festlegen, um ein neues Bild anzugeben.
`image_override`: ein Objekt, das das neue Bild angibt, einschließlich der folgenden Eigenschaften:
`alt`
`height`
`loading`
`src`
`width`
|
## Angebots-Download
Wird in Angebotsvorlagen unterstützt.
```hubl theme={null}
{% module "download" path="@hubspot/quote_download" %}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `button_text` | Zeichenfolge | Der Text, der auf der Download-Schaltfläche angezeigt wird. | `Download` |
| `download_error` | Zeichenfolge | Fehlermeldung, die angezeigt wird, wenn der Download fehlschlägt. | `There was a problem downloading the quote. Please try again.` |
## Angebotszahlung
Wird in Angebotsvorlagen unterstützt.
```hubl theme={null}
{% module "payment" path="@hubspot/quote_payment" %}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `heading_text` | Zeichenfolge | Die Überschrift, die über dem Zahlungsabschnitt einer Angebotsvorlage angezeigt wird. | `Payment` |
| `heading_tag` | Auswahl | Der Typ der Überschrift, die für die Anzeige von `heading_text` verwendet wird. Die Werte umfassen: `h1`, `h2`, `h3`, `h4`, `h5`, `h6`. | `h3` |
| `checkout` | Zeichenfolge | Der Text für die Zahlungsschaltfläche. | `Pay now` |
| `needs_signature` | Zeichenfolge | Schaltflächentext, wenn eine Unterschrift erforderlich ist. | `Payment can't be made because the quote isn't fully signed.` |
| `checkout_error` | Rich-Text | Nachricht, die angezeigt wird, wenn während des Checkouts ein Fehler auftritt. | `There was a problem setting up checkout. Please contact the person who sent you this quote.` |
| `payment_status_error` | Rich-Text | Nachricht, die angezeigt wird, wenn beim Zahlungsversuch ein Fehler auftritt. | `There was a problem loading the payment status for this quote. Please try refreshing the page.` |
| `paid` | Zeichenfolge | Eine Statusanzeige für eine erfolgreiche Zahlung. | `Paid` |
| `payment_processing` | Zeichenfolge | Eine Statusanzeige für die Zahlungsabwicklung. | `Payment processing` |
## Angebotssignatur
Wird in Angebotsvorlagen unterstützt.
```hubl theme={null}
{% module "signature" path="@hubspot/quote_signature" %}
```
Wenn ein Angebot eine elektronische Unterschrift erfordert, sind die folgenden Felder innerhalb eines `esignature`-Objekts verfügbar:
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `pretext` | Rich-Text | Erläuterungstext für die elektronische Unterschrift. | `Before you sign this quote, an email must be sent to you to verify your identity. Find your profile below to request a verification email.` |
| `verify_button` | Zeichenfolge | Text, der auf der Verifizerungsschaltfläche angezeigt wird. | `Verify to sign` |
| `failure` | Zeichenfolge | Hinweistext, der angezeigt wird, wenn die Unterschriftsinformationen nicht abgerufen werden können. | `There was a problem retrieving the signature information. Please reload the page.` |
| `verification_sent` | Zeichenfolge | Eine Statusanzeige, die angezeigt wird, wenn die Verifizierungsanfrage erfolgreich an den Unterzeichner des Angebots gesendet wurde. | `Verification sent` |
| `signed` | Zeichenfolge | Text, der angezeigt wird, wenn das Angebot erfolgreich unterzeichnet wurde. | `Signed` |
Wenn für ein Angebot eine schriftliche Unterschrift erforderlich ist, sind die folgenden Felder innerhalb eines `print_signature`-Objekts verfügbar:
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `header` | Rich-Text | Text, der am Anfang des Unterschriftsabschnitts angezeigt wird. | `Signature` |
| `signature` | Zeichenfolge | Text, der neben dem Unterschriftsfeld angezeigt wird. | `Signature` |
| `date` | Zeichenfolge | Text, der neben dem Datumsfeld angezeigt wird. | `Date` |
| `printed_name` | Zeichenfolge | Text, der neben dem Feld für den gedruckten Namen angezeigt wird. | `Printed name` |
| `countersignature` | Objekt | Ein Objekt, das Inhalte für den Abschnitt mit der Gegenzeichnung enthält. Dieses Objekt kann die folgenden Felder enthalten:
`header`: Text, der oben im Abschnitt für die Gegenzeichnung angezeigt wird.
`countersignature`: Text, der neben dem Feld für die Gegenzeichnung angezeigt wird.
`date`: Text, der neben dem Datums-Feld angezeigt wird.
`printed_name`: Text, der neben dem Feld für den gedruckten Namen angezeigt wird.
| `Signed` |
## Artikel
Wird in Angebotsvorlagen unterstützt. Dieses Modul enthält auch den Standardtext, der in benutzerdefinierten Angeboten verwendet wird.
```hubl theme={null}
{% module "module_165350106057652" path="@hubspot/line_items", label="line_items.module" %}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `title` | Text | Der Titel der Artikelspalte. | `Column description` |
| `use_additional_product_property` | Boolesch | Zeigt ein Kontrollkästchen an, um Benutzern die Auswahl zusätzlicher Artikelspalten von den Produkteigenschaften zu ermöglichen. | `False` |
| `additional_product_properties` | Auswahl | Eine Produkteigenschaft. Die Auswahlmöglichkeiten umfassen:
`price`: Preis des Artikels.
`item_description`: Beschreibung des Artikels.
`quantity`: Anzahl der Artikel.
`amount`: Gesamtkosten der Artikel.
`hs_recurring_billing_start_date`: Startdatum der Abrechnung für wiederkehrende Artikel.
`discount`: Der Rabattbetrag gilt für den Artikel.
| |
| `crm_product_property` | CRM-Objekteigenschaft | Wählen Sie eine beliebige Produkteigenschaft aus, die als Spaltenüberschrift für den Artikel angezeigt werden soll. | |
## Rich-Text
Wird in allen Vorlagentypen unterstützt.
```hubl theme={null}
{% module "rich_text" path="@hubspot/rich_text" %}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `html` | Rich-Text | HTML-Block. | ` ## Something Powerful \n ### Tell The Reader More \n The headline and subheader tells us what you're [offering](https://developers.hubspot.de/docs\"#\"), and the form header closes the deal. Over here you can explain why your offer is so great it's worth filling out a form for. \n Remember: \n
\n
Bullets are great
\n
For spelling out [benefits](https://developers.hubspot.de/docs\"#\") and
\n
Turning visitors into leads.
\n
` |
## RSS-Listing
Wird auf Seiten, in Blog-Listings und in Blogbeiträgen unterstützt.
```hubl theme={null}
{% module "rss_listing" path="@hubspot/rss_listing" %}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `title` | Text | Eine H3-Überschrift. | `"Test"` |
| `rss_feed_type` | Auswahl | Typ des RSS-Feeds. Die Auswahlmöglichkeiten umfassen:
`blog` – von HubSpot gehosteter Blog.
`external` – ein externer RSS-Feed.
| `blog` |
| `rss_url` | Text | RSS-URL, die verwendet werden soll, wenn `rss_feed_type` gleich `external`. | |
| `content_group_id` | Blog | ID des zu verwendenden Blogs, wenn `rss_feed_type` gleich `blog`. | |
| `topic_id` | Tag | (optional) ID des Tags, nach dem gefiltert werden soll, wenn `rss_feed_type` gleich `blog`. | |
| `number_of_items` | Zahl | Maximale Anzahl an anzuzeigenden Beiträgen. | `5` |
| `include_featured_image` | Boolesch | Fügt das Feature-Bild ein. | `false` |
| `show_author` | Boolesch | Zeigt den Namen des Autors an. | `true` |
| `attribution_text` | Text | Der Text, der einem Beitrag einen Autor zuschreibt. Wird angezeigt, wenn `show_author` gleich `true` ist. | `"by"` |
| `show_detail` | Boolesch | Zeigt den Beitragszusammenfassungstext an. | `true` |
| `limit_to_chars` | Zahl | Beschränkt die Länge des Zusammenfassungstextes, wenn `show_detail` gleich `true` ist. | `200` |
| `click_through_text` | Text | Der Text, der am Ende der Zusammenfassung eines Beitrags für den Clickthrough-Link angezeigt wird, wenn `show_detail` gleich `true` ist. | `"Read more"` |
| `show_date` | Boolesch | Zeigt das Veröffentlichungsdatum an. | `true` |
| `publish_date_format` | Auswahl | Format für das Veröffentlichungsdatum, wenn `show_date` gleich `true` ist. Die Auswahlmöglichkeiten umfassen:
`short` (z. B.: 06/11/06 12:00 Uhr)
`medium` (z. B.: 6. Juni 2006 12:00:00 Uhr)
`long` (z. B.: 6. Juni 2017 12:00:00 Uhr EDT)
`MMMM d, yyyy 'at' h:mm a` (z. B.: 6. Juni 2006 um 12:00 Uhr)
`h:mm a 'on' MMMM d, yyyy` (z. B.: 12:00 Uhr am 6. Juni 2006)
| `short` |
| `publish_date_text` | Text | Der Text, der angibt, wann ein Beitrag veröffentlicht wurde, wenn `show_date` gleich `true` ist. | `"posted at"` |
## Website-Sucheingabe
Wird in Seiten, Blogbeiträgen und Blog-Listings unterstützt.
```hubl theme={null}
{% module "search_input" path="./local-search_input"
placeholder="Search"
include_search_button=true
results={
"use_custom_search_results_template": "true",
"path_id": "77977569400"
}
%}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `field_label` | Text | Text des Labels für die Sucheingabe. | |
| `placeholder` | Text | Platzhaltertext für das Eingabefeld. | `"Search"` |
| `include_search_button` | Boolesch | Fügt eine Suchen-Schaltfläche ein. | `false` |
| `content_types` | Objekt | Welche Inhaltstypen in die Suchergebnisse aufgenommen werden sollen. Objekt enthält die folgenden Schlüssel mit booleschen Werten:
`website_pages`
`landing_pages`
`blog_posts`
`knowledge_articles`
| `{ "website_pages": true, "landing_pages": false, "blog_posts": true, "knowledge_articles": false }` |
| `results` | Objekt | Ein Objekt, das Steuerelemente für die Verwendung einer benutzerdefinierten Seite für Suchergebnisse aktiviert. Umfasst die folgenden Eigenschaften:
`use_custom_search_results_template` **(boolesch):** Bei Festlegung auf `true` können Benutzer eine benutzerdefinierte Suchergebnisseite auswählen. Der Standardwert ist `false`.
`path_id` **(Zeichenfolge):** die ID der Seite, die für Suchergebnisse verwendet wird. Die Seite, auf die verwiesen wird, muss das Suchergebnisse-Modul enthalten.
| |
## Suchergebnisse
Wird in Seiten, Blogbeiträgen und Blog-Listings unterstützt.
```hubl theme={null}
{% module "search_results" path="@hubspot/search_results" %}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `display_featured_images` | Boolesch | Zeigt Feature-Bilder für Artikel an. | `false` |
## Bereichsüberschrift
Wird auf Seiten, in Blog-Listings und in Blogbeiträgen unterstützt.
```hubl theme={null}
{% module "section_header" path="@hubspot/section_header" %}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `header` | Text | Bereichs-Header-Content. | `"A clear and bold header"` |
| `heading_level` | Auswahl | Überschriftenebene für den `header`. Die Auswahlmöglichkeiten umfassen `h1` bis `h6`. | `h1` |
| `subheader` | Text | Text für den Unterüberschriften-Absatz für den Abschnitt. | `"A more subdued subheader"` |
## Einfaches Menü
Wird auf Seiten, in Blog-Listings und in Blogbeiträgen unterstützt.
```hubl theme={null}
{% module "simple_menu" path="@hubspot/simple_menu" %}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `menu_tree` | Einfaches Menü | „Einfaches Menü“-Objekt. | `[]` |
| `orientation` | Auswahl | Ausrichtung des Menüs. Die Auswahlmöglichkeiten umfassen:
`horizontal`
`vertical`
| `horizontal` |
## Folgen in Social Media
Fügen Sie Links zu Ihren Social-Media-Profilen hinzu, indem Sie die Drag-&-Drop-Neuordnung im Content-Editor verwenden. Fügt automatisch Symbole basierend auf der Social-Media-URL ein, Symbole können jedoch überschrieben werden.
Wird auf Seiten, in Blog-Listings und in Blogbeiträgen unterstützt.
```hubl theme={null}
{% module "social_follow" path="@hubspot/social_follow" %}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `link` | Text | Der Ziel-Link für die im Editor hinzugefügte Social-Media-Seite. | |
| `open_in_new_window` | Boolesch | Bei Festlegung auf `false` wird der Link in derselben Browser-Registerkarte geöffnet. | `true` |
| `is_podcast` | Boolesch | Auf `true` festlegen, um ein Podcast-Symbol anstelle des Standard- oder benutzerdefinierten Symbols anzuzeigen. | `false` |
| `customize_alt_text` | Boolesch | Standardmäßig wird der ALT-Text automatisch generiert. Wenn dies auf `true` festgelegt ist, können Sie den standardmäßigen ALT-Text mithilfe des `aria_label`-Feldes mit einem benutzerdefinierten Wert überschreiben. | `false` |
| `aria-label` | Zeichenfolge | Wenn `customize_alt_text` gleich `true` ist, legt dieses Feld das Symbol ALT-Text fest (z. B. `Follow us on Facebook`). Dieser Text wird von Bildschirmleseprogrammen vorgelesen, um das Symbol für sehbehinderte Benutzer zu beschreiben. | `False` |
| `customize_icon` | Boolesch | Standardmäßig werden Symbole automatisch auf der Grundlage der Link-URL ausgefüllt. Wenn dies auf `true` festgelegt ist, können Sie das `custom_icon`-Feld verwenden, um eines der anderen bereitgestellten Symbole auszuwählen (Font Awesome 6.4.2). | `false` |
| `custom_icon` | Symbol | Wenn `customize_icon` auf `true` festgelegt ist und `is_podcast` ist `false`, verwenden Sie dieses Feld, um ein benutzerdefiniertes Symbol aus dem angegebenen Satz anzugeben. Die verfügbaren Symbole stammen von Font Awesome 6.4.2. | |
## Social-Media-Sharing
Wird auf Seiten, in Blog-Listings und in Blogbeiträgen unterstützt.
```hubl theme={null}
{% module "social_sharing" path="@hubspot/social_sharing" %}
```
Hinweis: Die Variable `social_link_url` in der Standardspalte unten hat den gleichen Wert wie der `link`-Parameter.
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `link` | Text | Dies ist der Ziel-Link, der zum leichteren Teilen in Social-Media-Netzwerken gekürzt wird. | |
| `facebook` | Objekt | Objekt, das Folgendes enthält:
`enabled`: boolescher Wert zum Aktivieren von Social-Media-Element
`custom_link_format`: benutzerdefinierte URL für die Social-Media-Sharer-URL
| `{ "enabled": false, "custom_link_format": "http://www.facebook.com/share.php?u={{ social_link_url }}" }` |
| `twitter` | Objekt | Objekt, das Folgendes enthält.
`enabled`: boolescher Wert zum Aktivieren eines Social-Media-Elements
`custom_link_format`: benutzerdefinierte URL für die Social-Media-Sharer-URL
`enabled`: boolescher Wert zum Aktivieren von Social-Media-Element
`custom_link_format`: benutzerdefinierte URL für die Social-Media-Sharer-URL
| `{ "enabled": false, "custom_link_format": "mailto:?subject=Check out {{ social_link_url }} &body=Check out {{ social_link_url }}" }` |
## Karte mit Registerkarten
Wird auf Seiten, in Blog-Listings und in Blogbeiträgen unterstützt.
```hubl theme={null}
{% module
path="@hubspot/tabbed_card",
tabs=[
{
"content" : "
This is the descriptive text contained in tab 1.
",
"tab_label" : "Tab 1 label"
},
{
"content" : "
This is the descriptive text contained in tab 2.
",
"tab_label" : "Tab 2 label"
}
],
fixed_height=false
%}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `tabs` | Feldgruppe | Eine Feldgruppe, die das Registerkarten-Label und den Textinhalt jeder Registerkarte enthält. Enthält die folgenden Felder:
`tab_label`: das Label der Registerkarte.
`content`: der Rich-Text-Inhalt der Registerkarte.
| `"Some additional information in one line"` |
| `fixed_height` | Boolesch | Standardmäßig werden die Registerkarten auf eine feste Höhe festgelegt, damit die Containerhöhe beim Wechsel zwischen Registerkarten gleich bleibt. Sie können dies auf `false` festlegen, wenn die Höhe des Kartencontainers auf Registerkarten auf dem Inhalt der aktiven Registerkarte basieren soll. | `False` |
## Eine Zeile Text
Wird auf Seiten, in Blog-Listings und in Blogbeiträgen unterstützt.
```hubl theme={null}
{% module "text" path="@hubspot/text" %}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `value` | Text | Fügen Sie Ihren Text zu diesem Parameter hinzu. | `"Some additional information in one line"` |
Video##
Wird auf Seiten, in Blog-Listings und in Blogbeiträgen unterstützt.
```hubl theme={null}
{% module "video" path="@hubspot/video" %}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `video_type` | Auswahl | Typ des Videos. Zu den Optionen gehören:
`embed`: Einbettungscode aus einer externen Quellen.
`hubspot_video`: von HubSpot gehostetes Video.
| `embed` |
| `hubspot_video` | Videoplayer | Von HubSpot gehostetes Video. Wird verwendet, wenn `video_type` gleich `hubspot_video`. | |
| `embed_field` | Einbettung | Unterstützt Einbettungstypen:
`oembed`
`video`: URL für Video.
`html`: Einbettungscode für Video.
| |
| `oembed_thumbnail` | Bild | Überschreibt oEmbed-Thumbnail-Bild, wenn `video_type` gleich `embed` und `embed_field` gleich `oembed`. | |
| `style_options` | Objekt | Objekt, das Folgendes enthält `oembed_thumbnail_play_button_color` – Farbfeld. | `{"oembed_thumbnail_play_button_color":"#ffffff"}` |
| `placeholder_fields` | Objekt | Objekt, das Folgendes enthält:
`placeholder_title`: Textfeld.
`placeholder_description`: Textfeld.
| `{"placeholder_title":"No video selected", "placeholder_description":"Select a video type in the sidebar."}` |
## Videoeinbettung (Landingpage)
Auf Seiten unterstützt.
```hubl theme={null}
{% module "video_embed_lp" path="@hubspot/video_embed_lp" %}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `url` | Text | URL für Video. URLs von Vimeo und YouTube werden unterstützt. | `"https://www.youtube.com/watch?v=X1Rr5BFO5rg"` |
| `is_full_width` | Boolesch | Legt das Video auf volle Breite fest (`true`) oder legt Breite und Höhe manuell fest (`false`). | `true` |
| `max_width` | Zahl | Maximale Breite (Pixel) | `800` |
| `max_height` | Zahl | Maximale Höhe (Pixel) | `450` |
## WhatsApp-Link
Wird auf Seiten, in Blogbeiträgen und auf Blog-Listing-Seiten unterstützt. Es ist ein [verknüpfter WhatsApp-Kanal](https://knowledge.hubspot.com/de/inbox/connect-whatsapp-to-the-conversations-inbox) erforderlich.
```hubl theme={null}
{% module "whatsapp_link" path="@hubspot/whatsapp_link", label="whatsapp_link" %}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `whatsapp_number` | URL | Wählen Sie aus den [mit dem Account verknüpften WhatsApp-Kanälen](https://knowledge.hubspot.com/de/inbox/connect-whatsapp-to-the-conversations-inbox) aus. | |
| `optin_text` | Auswahl | Der [Opt-in- und Opt-out-Text](https://knowledge.hubspot.com/de/inbox/collect-consent-for-whatsapp-conversations#subscribe-a-contact-using-opt-in-keywords-in-a-whatsapp-thread). | |
| `whatsapp_display` | Auswahl | Wählen Sie aus, ob die Schaltfläche Text, ein WhatsApp-Symbol oder beides anzeigt. Die Auswahlmöglichkeiten umfassen:
`text_and_icon`
`text`
`icon`
| `text_and_icon` |
| `icon_position` | Auswahl | Die Position des Symbols auf der Schaltfläche. Die Auswahlmöglichkeiten umfassen `left` und `right`. | `left` |
| `button_text` | Zeichenfolge | Der Text der Schaltfläche. | `Chat on WhatsApp` |
| `whatsapp_icon_title` | Zeichenfolge | Der Symboltext für Bildschirmleseprogramme. | `WhatsApp Icon` |
# Parameter „export_to_template_context“
Source: https://developers.hubspot.de/docs/cms/reference/modules/export-to-template-context
„export_to_template_context“ ist ein Parameter, der die Parameter eines Moduls für die Vorlagenumgebung verfügbar macht, ohne dass das Modul tatsächlich gerendert wird. Dieser Parameter kann mit allen HubL-Modul-Tags verwendet werden. Das widget_data-Tag wird verwendet, um diese Parameter abzurufen, sie in Variablen zu speichern und/oder sie in die Logik Ihrer Vorlage einzubinden.
`export_to_template_context` ist ein Parameter, der die Parameter eines HubL-Tags für die Vorlagenumgebung verfügbar macht, ohne dass das HubL-Tag tatsächlich gerendert wird. Dieser Parameter kann mit allen [HubL-Tags](/docs/cms/reference/hubl/tags/standard-tags) verwendet werden. Das `widget_data`-Dictionary wird verwendet, um diese Parameter abzurufen, sie in [Variablen](/docs/cms/reference/hubl/variables-macros-syntax) zu speichern und/oder sie in die Logik Ihrer Vorlage einzubinden.
Indem Sie die Parameter eines HubL-Tags im Vorlagenkontext verfügbar machen, ohne dass das HubL-Tag tatsächlich gerendert wird, können Sie den Benutzern die Möglichkeit geben, im Content-Editor Entscheidungen zu treffen, die sich auf die Darstellung der Vorlage auswirken. Angenommen, Sie möchten einen bestimmten Code-Block nur dann darstellen, wenn der Benutzer einen Wert in ein Feld eingibt. Dies ist mit diesem Parameter möglich.
Zuerst müssen Sie `export_to_template_context=True` zum HubL-Tag hinzufügen. Dann müssen Sie einen `widget_data.module.parameter_you_want_to_retreive` verwenden.
```hubl theme={null}
{% module "job_title" path="@hubspot/text", label="Enter a Job Title", value="Chief Morale Officer", export_to_template_context=True %}
{# Makes the parameters available to be stored and used in template logic #}
{{ widget_data.job_title.body.value }}
{# Prints the value of the HubL tag but can also be used in template logic #}
```
Im Folgenden finden Sie einige Anwendungen dieses Konzepts.
## Verwendung in benutzerdefinierten Modulen
`export_to_template_context=True` wird in benutzerdefinierten Modulen nicht unterstützt, da es für diese keinen wirklichen Zweck erfüllt. Sie müssen `export_to_template_context` nicht verwenden, um den Wert eines Moduls in einer Vorlage abzurufen. [Sie können bereits darauf zugreifen](#retrieving-parameters-from-modules-already-rendered-on-the-template). Wenn Sie die Ausgabe des Moduls optisch ausblenden müssen, können Sie das Modul so erstellen, dass es nichts ausgibt, oder ein boolesches Feld einschließen, über das aktiviert oder deaktiviert wird, ob das Modul etwas ausgibt.
## Vom Benutzer auswählbare Hintergrundbilder
In diesem Beispiel wird ein Bild-HubL-Tag erstellt, dann aber in den Kontext der Vorlage exportiert und nicht gerendert. Der `src`-Parameter wird mit dem `widget_data`-Tag abgerufen und als Quelle eines Hintergrundbildes in einem style-Tag wiedergegeben.
```hubl theme={null}
{% module "background_image" path="@hubspot/image" label='Select a background image',
src='http://cdn2.hubspot.net/hub/428357/file-2117441560-jpg/img/dev-bg-compressed.jpg',
export_to_template_context=True %}
Supercharge your app with HubSpot
Build powerful integrations for a global community of users
```
Dies ist zwar in Code-Vorlagen möglich, aber im Allgemeinen ist es besser, ein benutzerdefiniertes Modul zu erstellen, um den Benutzern im Seiten-Editor das beste Erlebnis zu bieten. HubL-Tags wie diese werden als einzelne Felder angezeigt, während Sie mehrere verwandte Felder haben können. Bei Verwendung eines benutzerdefinierten Moduls werden alle seine Felder im Seiten-Editor gruppiert angezeigt.
## Auswahlfeld zum Rendern von vordefiniertem Markup
Das folgende Beispiel verwendet den Parameter `export_to_template_context` in Verbindung mit einem [Auswahlmodul](/docs/cms/reference/hubl/tags/standard-tags#choice), um eine Bannernachricht auf einer Karriereseite zu ändern. Der Benutzer wählt über die Benutzeroberfläche eine Abteilung aus und die Überschrift ändert sich, ohne dass der Benutzer den Inhalt tatsächlich bearbeiten muss.
```hubl theme={null}
{% module "department" path="@hubspot/choice", label="Choose department", value="Marketing", choices="Marketing, Sales, Dev, Services" export_to_template_context=True %}
{% if widget_data.department.value == "Marketing" %}
Want to join our amazing Marketing team?!
We have exciting career opportunities on the {{ widget_data.department.value }} team.
We have exciting career opportunities on the {{ widget_data.department.value }} team.
{% elif widget_data.department.value == "Dev" %}
Do you love to ship code?
We have exciting career opportunities on the {{ widget_data.department.value }} team.
{% else %}
Want to work with our awesome customers?
We have exciting career opportunities on the {{ widget_data.department.value }} team.
{% endif %}
```
Die gleiche Funktionalität kann mit einem Auswahlfeld innerhalb eines benutzerdefinierten Moduls reproduziert werden. Die Benutzeroberfläche des benutzerdefinierten Moduls macht die Auswahl von Optionen mit einem Wert und einem Label ziemlich einfach.
## Abrufen von Parametern aus bereits in der Vorlage gerenderten Modulen
Wenn Sie einen Parameter von einem Modul oder Tag abrufen möchten, das bereits auf einer Seite gerendert wird, kann das Modul in einem Dictionary mit dem Namen `widgets` aufgerufen werden. Der Parameter `export_to_template_context` ist nicht erforderlich. Die Syntax lautet wie folgt:
```hubl theme={null}
// HubL
{{ content.widgets.name_of_module.body.parameter }}
{{ content.widgets.my_text.body.value }}
```
> [!WARNING]
>
> ### Bitte beachten:
>
> Die obige Methode unterstützt nicht das Abrufen von Werten aus Feldern in globalen Modulen, da `content.widgets` nicht auf globale Module zugreift.
Da verschiedene Felder Daten in unterschiedlichen Formaten speichern, ist es oft praktisch, [Entwicklerinfo](/docs/cms/start-building/introduction/developer-environment/troubleshooting/troubleshooting#developer-info) zu nutzen, um zu sehen, wie Sie auf die spezifischen Daten zugreifen, die Sie anzeigen möchten.
## Drucken von HubL-Modulinformationen im Blog-Listing
Blog-Vorlagen werden in der Regel für Blogs verwendet, können aber auch zum Erstellen verschiedener anderer Typen von Listings wiederverwertet werden. Dazu können Sie die oben beschriebenen Techniken anwenden.
Sie möchten zum Beispiel ein Listing-Layout mit Pressemitteilungen erstellen, die Ihr Unternehmen erhalten hat. Dabei soll über das Listing aber nicht zu Beiträgen verlinkt werden, sondern zu einer anderen Seite.
Sie können dieses Konzept unter [academy.hubspot.com/projects](https://academy.hubspot.com/projects) in Aktion sehen. Die Listing-Seite für Projekte ist eine Blog-Listing-Vorlage, aber jeder Beitrag verlinkt zu einer regulären HubSpot-Seite. Der Content-Autor gibt den Ziel-Link im Editor an.
Im Header des Codes des einzelnen Blog-Beitrags definieren Sie ein Textfeld. Wenn Sie nicht möchten, dass der Text im Beitrag dargestellt wird, verwenden Sie `export_to_template_context`.
```hubl theme={null}
{% module "custom_blog_link" path="@hubspot/text", label="Link to external press item", export_to_template_context=True %}
```
Dieses Textfeld kann in jedem Blog-Beitrag bearbeitet werden. Als Nächstes müssen wir einen Link in unserem Listing definieren. Da die Widget-Daten jedoch nur im Kontext des Beitrags vorhanden sind, müssen wir eine andere Syntax verwenden, um die Widget-Daten abzurufen und den Link auszufüllen. In diesem Fall verwenden wir `content.widgets.custom_blog_link.body.value`. Während die `widget_data` für das Blog-Listing nicht verfügbar sind, wird der Wert dieses Feldes weiterhin im Kontext der Widgets der einzelnen Inhalte gespeichert.
Nachfolgend sehen Sie eine einfache Blog-Listing-Schleife, die diesen benutzerdefinierten Link bei jedem Beitrag darstellt. Wenn Sie dieses Verfahren anwenden, sollten Sie sicherstellen, dass Sie das Unterverzeichnis, das automatisch für jeden Blog-Beitrag erstellt wird, zu Ihrer robots.txt-Datei hinzufügen, um zu verhindern, dass diese leeren Beiträge von Google und anderen Crawlern gecrawlt werden.
```hubl theme={null}
{% for content in contents %}
Click here to see this press feature!
{% endfor %}
```
# Kodieren von benutzerdefinierten Modulen
Source: https://developers.hubspot.de/docs/cms/reference/modules/files
Benutzerdefinierte Module sind wiederverwendbare Komponenten, die Sie auf Ihrer gesamten Website einsetzen können. Erstellen Sie sie nach bewährten Verfahren zur Verbesserung von Geschwindigkeit, Benutzerfreundlichkeit und Barrierefreiheit.
Bei der Erstellung eines Moduls für Seiten, Blogs und [Angebote](/docs/cms/start-building/building-blocks/templates/quotes) enthält das Modul drei Front-End-bezogene Dateien, die den Inhalt, das Styling und die Funktionalität des Moduls steuern:
* module.html
* module.css
* module.js
> [!NOTE]
>
> E-Mail-Module unterstützen nicht module.css und module.js. Das liegt daran, dass E-Mail-Clients kein JavaScript unterstützen und die Unterstützung für verknüpfte CSS-Dateien begrenzt ist.
Diese Dateien werden immer auf der Seite gerendert, wenn sich eine Instanz des Moduls auf der Seite befindet.
Wenn eine Seite mehrere Instanzen desselben Moduls enthält, lädt HubSpot `module.css` und `module.js` von diesem Modul nur einmal. Standardmäßig werden `module.css` und `module.js` nicht asynchron geladen. Sie können dies jedoch ändern, indem Sie [css\_render\_options und js\_render\_options](/docs/cms/reference/modules/configuration) in der meta.json des Moduls aufnehmen.
Module können im Design-Manager oder lokal über [das HubSpot-CLI](https://developers.hubspot.de/docs/guides/cms/tools/local-development-cli) erstellt werden. Im Design-Manager werden die Moduldateien in einem Editor mit mehreren Fenstern angezeigt.
Wenn ein Modul lokal angezeigt wird, befinden sich die Dateien in module-name.module-Ordnern.
Ob Sie zum Erstellen und Verwalten von Modulen den Design-Manager oder das CLI verwenden, hängt von den Präferenzen Ihres Teams ab. Empfehlungen finden Sie unter [Erstellen eines effizienten Entwicklungsworkflows](/docs/cms/start-building/introduction/developer-environment/creating-an-efficient-development-workflow).
## HTML + HubL (module.html)
Die module.html-Datei ist für HTML und HubL gedacht. Im Allgemeinen bestimmt der Ort, an dem ein Modul im Seiten-Editor oder in der Vorlagendatei platziert ist, wo der Inhalt der Datei module.html gerendert wird.
Diese Datei agiert wie ein [HubL-Include](/docs/cms/reference/hubl/overview#including-files-in-files) an der Stelle auf der Seite, an der das Modul platziert ist. Die module.html-Datei [kann über HubL auf die Feldwerte des Moduls zugreifen](https://developers.hubspot.de/docs/guides/cms/content/modules/overview#using-module-field-data-to-render-html).
## CSS (module.css)
Verwenden Sie die `module.css`-Datei, um CSS zu einem Modul hinzuzufügen.
Im Allgemeinen unterstützt `module.css` eine sehr begrenzte Teilmenge von HubL. Sie können jedoch [`module_asset_url("mein_bild.png")`](/docs/cms/reference/hubl/functions#module-asset-url) für Bilder verwenden, die als modulverknüpfte Inhaltselemente hinzugefügt wurden. Dies ermöglicht die Verknüpfung von Elementen wie Bildern, die mit dem Modul selbst verpackt sind. Zum Beispiel:
```css theme={null}
.testimonial-module__wrapper {
background: url('{{ module_asset_url('bg-pattern.png') }}');
background-repeat: repeat;
min-height: 200px;
width: 100%;
display: block;
}
```
Im Folgenden erfahren Sie, wie Sie das CSS eines Moduls so einrichten, dass es sich dynamisch auf der Grundlage der Felder des Moduls ändert.
### Styling basierend auf Modulfeldwerten
Es gibt einige Möglichkeiten, wie Sie das Styling Ihres Moduls auf der Grundlage der Modulfelder beeinflussen können. Wählen Sie die Methode, die für Ihren speziellen Anwendungsfall am besten geeignet ist.
* [CSS-Klassen](#css-classes)
* [require\_css-Block](#require-css-block)
* [Inline-Stile](#inline-styles)
#### CSS-Klassen
Um ein vordefiniertes Styling für das Modul einzurichten, bei dem die Editoren aus diesen Optionen auswählen können, können Sie ein Modulfeld hinzufügen, um in Ihrer `module.html`-Datei Klassen festzulegen, die den CSS-Klassen in Ihrer `module.css`-Datei entsprechen.
Sie können zum Beispiel ein Bild- und ein Textmodul haben. Sie möchten, dass Content-Autoren das Bild auf der Grundlage eines Auswahlfeldes rechts oder links vom Text positionieren können. Dazu könnten Sie Ihre `module.html`- und `module.css`-Dateien wie folgt festlegen:
```hubl theme={null}
{# module.position is a choice field with two values "img-left" or "img-right". This dictates the order they appear on desktop. Controlled by CSS #}
```
```css theme={null}
/* module.css */
/* CSS that makes the image show adjacent to the text,
and positioned based on the positioning field.*/
/* The media query ensures that on mobile the image
will always appear above the text for
visual consistency. */
@media (min-width: 768px) {
.img-text__wrapper {
display: flex;
align-items: row;
}
.img-text__img,
.img-text__text {
flex: 1;
padding: 10px;
}
.img-text--img-right {
flex-direction: row-reverse;
}
}
```
### require\_css-Block
Wenn Sie Content-Autoren direkte Kontrolle über bestimmte Eigenschaften geben müssen und wenn Klassen nicht ideal sind, sollten Sie Stil-Tags mit `require_css`-Blöcken verwenden.
Um Content-Autoren die direkte Kontrolle über bestimmte Eigenschaften zu geben, ohne Klassen zu verwenden, können Sie stattdessen Styling zur `module.html`-Datei innerhalb von `require_css`-Tags hinzufügen. Zum Beispiel:
```hubl theme={null}
{% require_css %}
{% end_require_css %}
```
Da `module.html` HubL rendern kann, können Sie die Werte der Modulfelder als CSS-Variablen verwenden. Wenn ein Content-Autor das Feld im Seiten-Editor aktualisiert, wird das CSS entsprechend angepasst. Diese Blöcke verschieben die `
{% end_require_css %}
```
### Inline-Stile hinzufügen
Wenn Sie Content-Autoren detaillierte Steuerungsmöglichkeiten über bestimmte Eigenschaften geben müssen und Klassen nicht ideal sind, können Sie die Werte direkt in ein Stilattribut im HTML-Code einfügen.
```hubl theme={null}
{# Module.html #}
```
Wenn Sie viele Eigenschaften haben und der Code schwer zu lesen ist, sollten Sie auf die `require_css`-Blockmethode umsteigen.
### Bestimmte CSS-Dateien importieren
`require_css` ist eine HubL-Funktion, die Sie zu module.html hinzufügen können und die HubSpot mitteilt, dass ein bestimmtes Modul oder eine Vorlage eine bestimmte CSS-Datei zum Anzeigen benötigt. Ein Link-Tag, das auf die CSS-Datei verweist, wird der `` der Seite innerhalb des `standard_header_includes` hinzugefügt.
Die `require_css`-Funktion lädt diese CSS-Datei nur einmal, unabhängig davon, wie oft dieselbe Datei von Modulen und Vorlagen auf einer bestimmten Seite benötigt wird. Dies eignet sich hervorragend für Situationen, in denen Stile von mehreren Modulen gemeinsam genutzt werden. Das Hinzufügen von CSS direkt zu den Haupt-Stylesheets, die auf jeder Seite Ihrer Website verwendet werden, ist möglicherweise jedoch nicht sinnvoll.
`require_css` und verlinkte CSS-Dateien erfüllen denselben Zweck, aber `require_css` kann auf der Grundlage von Feldwerten bedingt verwendet werden. Dies verhindert das Laden von unnötigem Code.
```hubl theme={null}
{{ require_css(get_asset_url("/modules/shared_layout_styles.css")) }}
```
## JavaScript (module.js)
Verwenden Sie die `module.js`-Datei, um JavaScript zu einem Modul hinzuzufügen.
Wie die `module.css`-Datei unterstützt auch die `module.js`-Datei kein HubL.
### Skripting auf der Grundlage von Feldwerten
Es gibt einige Möglichkeiten, Module zu erstellen, bei denen das JavaScript je nach Feldwert unterschiedlich reagiert. Wenn Sie wissen, welche Methode wann zu verwenden ist, können Sie auf jeder Seite, auf der das Modul verwendet wird, Performance-Vorteile erzielen.
Wenn Sie zum Beispiel ein benutzerdefiniertes Bildmodul haben, möchten Sie Content-Autoren die Möglichkeit geben, das Bild in einer Lightbox zu öffnen. Content-Autoren möchten dies nur für bestimmte Bilder und nicht für alle Instanzen des Moduls.
### Datenattribute
Datenattribute sind benutzerdefinierte HTML 5-Standardattribute, die Entwickler zu Elementen hinzufügen. So wie alle Elemente `class="IhrKlassename"` unterstützen, unterstützen auch alle Elemente `data-your-attribute="IhrWert"`.
```hubl theme={null}
```
Sie können Datenattribute verwenden, um die Feldwerte Ihrer Modulinstanzen zu übergeben, die von Ihrer module.js-Datei verarbeitet werden sollen.
Um die Werte in Ihrer module.js-Datei zu verwenden, müssen Sie alle Instanzen Ihres Moduls durchlaufen. Durch Hinzufügen eines modulspezifischen Klassennamens zum äußersten Wrapper-Element Ihres Moduls erhalten Sie ein Ziel, das Sie verwenden können, damit Sie alle Instanzen Ihres Moduls durchlaufen können.
```js theme={null}
// module.js
let imgModules = document.getElementsByClassName("img-module");
Array.from(imgModules).forEach(function (element) {
// loop through each of the instances of the module
// set data attributes to variables to make it easy to work with
let isLightboxEnabled = element.dataset.lightbox;
let captionStyle = element.dataset.caption;
if (isLightboxEnabled) {
element.addEventListener("click", function () {
showLightbox(captionStyle); // Execute your code for the action you want to take, you can pass your data attributes into functions from libraries.
});
}
});
```
Die Datenattribute ermöglichen es Ihnen, die Feldwerte für jede Modulinstanz in Ihrer module.js abzurufen.
### require\_js-Block
In anspruchsvollen Situationen, z. B. bei Verwendung einer JavaScript-Templating-Bibliothek oder eines reaktiven Frameworks wie Vue.js oder React.js, möchten Sie möglicherweise nur die Daten ausgeben, während das Framework das Rendering übernimmt.
In diesem Fall verwenden Sie ein Skript-Tag, das von einem [`require_js`](/docs/cms/reference/hubl/functions#require-js)-Block umschlossen ist, um Variablen bereitzustellen, auf die Sie von Ihrem Templating-Skript aus zugreifen können.
```hubl theme={null}
{% require_js %}
{% end_require_js %}
```
Diese Technik kann nützlich sein, um fortgeschrittene Anwendungen mit einem ersten Datensatz zu versorgen, von dem aus dann gerendert werden kann. Dadurch entfällt ein anfänglicher JavaScript-Aufruf zum Abrufen von Daten.
### require\_js
[`require_js`](/docs/cms/reference/hubl/functions#require-js) ist eine HubL-Funktion, die HubSpot mitteilt, dass ein bestimmtes Modul oder eine Vorlage eine bestimmte JavaScript-Datei benötigt, um korrekt geladen zu werden. Die Funktion benötigt zwei Parameter: den Pfad zur Datei und den Ort, an dem die Datei hinzugefügt werden soll ("head" oder "footer").
In einem Modul kann `require_js` nur zur module.html hinzugefügt werden. Die JavaScript-Datei, auf die in der `require_js`-Anweisung verwiesen wird, wird nur einmal pro Seite geladen, unabhängig davon, wie oft sie von Modulen und Vorlagen auf der Seite benötigt wird. Dadurch wird die Anzahl der HTTP-Anfragen reduziert und doppelter Code vermieden.
Es gibt einige Situationen, in denen dies praktisch ist:
* Wenn Sie mehrere Module oder Vorlagen haben, die dasselbe JavaScript benötigen, können Sie `require_js` verwenden, um dieses Skript modulübergreifend zu nutzen.
* Wenn Sie mit einem JavaScript-Bundler wie Webpack arbeiten, ist es möglicherweise einfacher, Ihre js-Dateien an einem bestimmten Ort auszugeben. Mit `require_js` können Sie das JavaScript mit Ihrem Modul verknüpfen.
`require_js` und verknüpfte JavaScript-Dateien erfüllen denselben Zweck, aber `require_js` kann auf der Grundlage von Feldwerten bedingt ausgeführt werden. Dadurch wird verhindert, dass unnötiger Code geladen wird. Außerdem haben Sie die Möglichkeit, JavaScript in die Kopfzeile zu laden, falls Sie dies benötigen.
> [!TIP]
>
> Da JavaScript das Rendern blockiert, ist "footer" der Standardort, an den [`require_js`](/docs/cms/reference/hubl/functions#require-js) JavaScript platziert. [Erfahren Sie mehr über die Optimierung der Leistung.](/docs/cms/best-practices/testing-staging-performance/speed)
## Zugehörige Informationen
* [Die Geschwindigkeit Ihrer CMS Hub-Website optimieren](/docs/cms/best-practices/testing-staging-performance/speed)
* [Module](https://developers.hubspot.de/docs/guides/cms/content/modules/overview)
* [Modulfelder](https://developers.hubspot.de/docs/guides/cms/content/fields/overview)
# Islands
Source: https://developers.hubspot.de/docs/cms/reference/react/islands
# JS Partials
Source: https://developers.hubspot.de/docs/cms/reference/react/js-partials
# Lokale Entwicklung
Source: https://developers.hubspot.de/docs/cms/reference/react/local-development
# CMS React-Stil
Source: https://developers.hubspot.de/docs/cms/reference/react/styling
# Testen für CMS React
Source: https://developers.hubspot.de/docs/cms/reference/react/testing
# Referenz für serverlose Funktionen (Design-Manager)
Source: https://developers.hubspot.de/docs/cms/reference/serverless-functions/serverless-functions
Referenzinformationen für serverlose Funktionen, die mit dem Design-Manager erstellt wurden, einschließlich serverless.json, Funktionsdateien, Endpunkten, CLI-Befehlen und der Verwaltung von Paketen.
> **Unterstützte Produkte**
> [!WARNING]
>
> ### Hinweis:
>
> Diese Seite enthält Referenzinformationen für serverlose Funktionen, die mit dem Design-Manager erstellt wurden. Dies war bisher die Methode, um serverlose Funktionen für Ihre CMS-Seiten zu erstellen, und wird immer noch unterstützt. In Zukunft wird jedoch empfohlen, [serverlose Funktionen mit HubSpot-Entwicklerprojekten zu erstellen und bereitzustellen](/docs/cms/start-building/features/serverless-functions/getting-started-with-serverless-functions). Projektbasierte serverlose Funktionen können Abhängigkeiten von Drittanbietern umfassen und über Zugriffstoken von privaten Apps direkteren Zugriff auf die Authentifizierung haben.
In diesem Artikel erfahren Sie mehr über die Dateien, die sich in einem [serverlosen `.functions`-Ordner](/docs/cms/start-building/features/serverless-functions/overview#serverless-function-folders) befinden, und die CLI-Befehle, die Sie mit serverlosen Funktionen verwenden können.
Einen umfassenden Überblick über serverlose Funktionen finden Sie in der [Übersicht über serverlose Funktionen](/docs/cms/start-building/features/serverless-functions/overview).
Weitere Informationen zum Erstellen serverloser Funktionen mit Projekten für [JavaScript gerenderte Module und Partials finden](https://github.hubspot.com/cms-js-building-block-examples/) Sie in der [Dokumentation zu Entwicklerprojekten](https://developers.hubspot.de/docs/cms/reference/serverless-functions/serverless-functions-in-projects).
## Serverless.json
Im `.functions`-Ordner speichert die `serverless.json`-Datei die Konfiguration der serverlosen Funktion. Dies ist eine erforderliche Datei und sie ordnet Ihre Funktionen ihren [Endpunkten](#endpoints) zu.
```json theme={null}
{
"runtime": "nodejs20.x",
"version": "1.0",
"environment": {
"globalConfigKey": "some-value"
},
"secrets": ["secretName"],
"endpoints": {
"events": {
"file": "function1.js",
"method": "GET"
},
"events/update": {
"method": "POST",
"file": "action2.js",
"environment": {
"CONFIG_KEY": "some-other-value"
},
"secrets": ["googleKeyName", "otherkeyname"]
}
}
}
```
| Schlüssel | Typ | Beschreibung |
| - | - | - |
| `runtime` | String | Die Laufzeitumgebung. Unterstützt [Node.js](https://nodejs.org/en/about/) v20 (`nodejs20.x`). |
| `version` | Zeichenfolge | Schema-Version der serverlosen Funktion von HubSpot. (Aktuelle Version 1.0) |
| `environment` | Objekt | Konfigurationsvariablen, die zur Laufzeit als [Umgebungsvariablen](https://nodejs.org/docs/latest-v10.x/api/process.html#process_process_env) an die ausführende Funktion übergeben werden. Sie könnten dies verwenden, um eine Logik für die Verwendung einer Testversion einer API anstelle der echten Version auf der Grundlage einer Umgebungsvariablen hinzuzufügen. |
| `secrets` | Array | Ein Array mit den Namen der [Geheimnisse](#secrets), die Ihre serverlose Funktion für die Authentifizierung verwendet. Speichern Sie Geheimniswerte nicht direkt in dieser Datei, sondern verweisen Sie nur auf die Geheimnisnamen. |
| `endpoints` | Objekt | Endpunkte definieren die Pfade, die zugänglich gemacht werden, und ihre Zuordnung zu bestimmten JavaScript-Dateien in Ihrem Funktionsordner. Erfahren Sie mehr über [Endpunkt](#endpoints). |
> [!NOTE]
>
> HubSpot wird [Node 18 ab dem 1. Oktober 2025 nicht mehr unterstützen](https://developers.hubspot.com/changelog/deprecation-of-node-v18-in-all-serverless-functions-and-cli). Nach diesem Datum können serverlose Funktionen mit einer Laufzeit unter v20 nicht mehr bereitgestellt werden.
> [!WARNING]
>
> ### Hinweis:
>
> Weisen Sie Ihren Geheimnissen und Umgebungsvariablen nicht denselben Namen zu. Andernfalls kommt es zu Konflikten bei der Rückgabe ihrer Werte in der Funktion.
### Endpunkte
Jeder Endpunkt kann seine eigenen [Umgebungsvariablen](https://nodejs.org/docs/latest-v10.x/api/process.html#process_process_env) und Geheimnisse haben. Außerhalb von Endpunkten angegebene Variablen sollten für Konfigurationseinstellungen verwendet werden, die für alle Funktionen und Endpunkte gelten.
```json theme={null}
"events/update": {
"method": "POST",
"file": "action2.js",
"environment": {
"configKey": "some-other-value"
},
"secrets": ["googleAPIKeyName","otherKeyName"]
}
```
| Schlüssel | Typ | Beschreibung |
| - | - | - |
| `method` | Zeichenfolge oder ein Array von Zeichenfolgen | [HTTP-Methode oder -Methoden](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Methods), die der Endpunkt unterstützt. Die Standardeinstellung ist [GET](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Methods/GET). |
| `file` | Zeichenfolge | Pfad zur JavaScript-Funktionsdatei mit der Implementierung für den Endpunkt. |
Der Endpunkt kann durch den Aufruf einer URL auf einer der mit dem HubSpot-Account verbundenen Domains, einschließlich der standardmäßigen `.hs-sites.com`-Subdomains, mit der folgenden URL-Struktur aufgerufen werden:
`https://{domainName}/_hcms/api/{endpoint-name/path}?portalid={hubId}`.
| Parameter | Beschreibung |
| - | - |
| `domainName` | Eine Domain, die mit dem HubSpot-Account verknüpft ist. |
| `/_hcms/api/` | Der für serverlose Funktionen reservierte Pfad. Alle Endpunkte befinden sich innerhalb dieses Pfades. |
| `endpoint-name/path` | Der Endpunktname oder -pfad, den Sie in der `serverless.json`-Datei angegeben haben. |
| `portalid` | Ein optionaler Abfrageparameter, der Ihre HubSpot-Account-ID enthält. Wenn Sie dies in der Anfrage angeben, können Sie Ihre Funktionen in Modul- und Vorlagenvorschauen testen. |
Wenn z. B. sowohl `website.com` als auch `subdomain.brand.com` mit dem Account verknüpft ist, können Sie die Funktion entweder über `https://website.com/_hcms/api/{endpoint-name/path}` oder `https://subdomain.brand.com/_hcms/api/{endpoint-name/path}` aufrufen.
## Funktionsdatei
Neben der `serverless.json`-Konfigurationsdatei enthält der Ordner `.functions`-Ordner auch eine [Node.js](https://nodejs.org/en/)-JavaScript-Datei, die die Funktion definiert. Sie können die Bibliothek der [Anfragen](https://github.com/request/request#readme) auch verwenden, um HTTP-Anfragen an [HubSpot-APIs](https://developers.hubspot.de/docs/api-reference/overview) und andere APIs durchzuführen.
Zum Beispiel:
```js theme={null}
// Require axios library, to make API requests.
const axios = require("axios");
// Environment variables from your serverless.json
// process.env.globalConfigKey
exports.main = (context, sendResponse) => {
// your code called when the function is executed
// context.params
// context.body
// context.accountId
// context.limits
// secrets created using the CLI are available in the environment variables.
// process.env.secretName
//sendResponse is what you will send back to services hitting your serverless function.
sendResponse({ body: { message: "my response" }, statusCode: 200 });
};
```
### Kontextobjekt
Das Kontextobjekt enthält Kontextinformationen über die Ausführung der Funktion, die in den folgenden Parametern gespeichert sind.
| Parameter | Beschreibung |
| - | - |
| `accountId` | Die HubSpot-Account-ID, die die Funktion enthält. |
| `body` | Wird ausgefüllt, wenn die Anfrage als `POST` mit dem Inhaltstyp `application/json` gesendet wird. |
| `contact` | Wenn die Anfrage von einem Kontakt mit einem gesetzten Cookie stammt, wird das Kontaktobjekt mit einer Reihe von grundlegenden Kontakteigenschaften mit den folgenden Informationen gefüllt:
`vid`: Die Besucher-ID des Kontakts.
`isLoggedIn`: Bei Verwendung von CMS-Zugriffsberechtigungen ist dies `true`, wenn der Kontakt in der Domain angemeldet ist.
`listMemberships`: ein Array von Kontaktlisten-IDs, in denen dieser Kontakt Mitglied ist.
|
| `headers` | Enthält die [Header](#headers), die vom Client gesendet werden, der Ihren Endpunkt erreicht. |
| `params` | Gefüllt mit Abfragezeichenfolgenwerten zusammen mit allen HTML-Formular-POST-Werten. Diese sind als Zuordnung mit Zeichenfolgen als Schlüssel und einem Array von Zeichenfolgen für jeden Wert strukturiert.`context.params.yourvalue` |
| `limits` | Gibt zurück, wie nah Sie dem Limit der [Ratenbeschränkungen für serverlose Funktionen](/docs/cms/start-building/features/serverless-functions/overview#know-your-limits) sind.
`executionsRemaining`: wie viele Ausführungen pro Minute noch übrig sind.
`timeRemaining`: wie viel erlaubte Ausführungszeit noch übrig ist.
|
### Header
Wenn Sie die Header des Clients, der Ihren Endpunkt erreicht, in Erfahrung bringen müssen, können über `context.headers` auf diese zugreifen, ähnlich wie Sie über `context.body` auf Informationen zugreifen würden.
Im Folgenden finden Sie einige der gängigen Header, die HubSpot bereitstellt. Eine vollständige Liste finden Sie in der [HTTP-Header-Dokumentation von MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers).
| Header | Beschreibung |
| - | - |
| `accept` | Teilt mit, welche Inhaltstypen, ausgedrückt als [MIME-Typen](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/MIME_types), der Client versteht. [Siehe MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Accept). |
| `accept-encoding` | Teilt die Inhaltskodierung mit, die der Client versteht. [Siehe MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Accept-Encoding). |
| `accept-language` | Teilt mit, welche menschliche Sprache und welches Gebietsschema bevorzugt wird. [Siehe MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Accept-Language). |
| `cache-control` | Enthält Richtlinien für die Zwischenspeicherung. [Siehe MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Cache-Control). |
| `connection` | Teilt mit, ob die Netzwerkverbindung offen bleibt. [Siehe MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Connection). |
| `cookie` | Enthält Cookies, die der Client gesendet hat. [Siehe MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Cookie). |
| `host` | Übermittelt den Domain-Namen und die TCP-Portnummer eines überwachenden Servers. [Siehe MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Host). |
| `true-client-ip` | IP-Adresse des Endbenutzers. [Siehe Cloudflare true-client-ip](https://developers.cloudflare.com/network/true-client-ip-header/). |
| `upgrade-insecure-requests` | Teilt mit, dass die Clients eine verschlüsselte und authentifizierte Antwort wünschen. [Siehe MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Upgrade-Insecure-Requests). |
| `user-agent` | Vom Hersteller definierte Zeichenfolge zur Identifizierung der Anwendung, des Betriebssystems, des Anwendungsherstellers und der Version. [Siehe MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/User-Agent). |
| `x-forwarded-for` | Identifiziert die ursprüngliche IP-Adresse eines Clients durch einen Proxy oder Load Balancer. [Siehe MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/X-Forwarded-For). |
#### Weiterleitung durch Senden eines Headers
Sie können eine Weiterleitung von Ihrer serverlosen Funktion durchführen, indem Sie eine Antwort mit einem *Standort*-Header und `301`-statusCode senden.
```js theme={null}
sendResponse({
statusCode: 301,
headers: {
Location: "https://www.example.com",
},
});
```
### Cookies von Ihrem Endpunkt aus setzen
Über Ihre serverlose Funktion können Sie dem Client (Webbrowser) mitteilen, dass er ein Cookie setzen soll.
```js theme={null}
exports.main = (context, sendResponse) => {
sendResponse({
body: { ... },
'Set-Cookie': 'myCookie1=12345; expires=...; Max-Age=...',
statusCode: 200
});
}
```
### Mehrere Werte für einen einzigen Header festlegen
Für Header, die mehrere Werte unterstützen, können Sie `multiValueHeaders` verwenden, um die Werte zu übergeben. Zum Beispiel können Sie den Browser anweisen, mehrere Cookies zu setzen.
```js theme={null}
exports.main = (context, sendResponse) => {
sendResponse({
body: { ... },
multiValueHeaders: {
'Set-Cookie': [
'myCookie1=12345; expires=...; Max-Age=...',
'myCookie2=56789; expires=...; Max-Age=...'
]
},
statusCode: 200
});
}
```
## Geheimnisse
Wenn Sie eine Anfrage der serverlosen Funktionen authentifizieren müssen, verwenden Sie Geheimnisse, um Werte wie API-Schlüssel oder private App-Zugriffstoken zu speichern. Mit dem CLI können Sie Ihrem HubSpot-Account Geheimnisse hinzufügen, um diese Werte zu speichern, auf die Sie später über Umgebungsvariablen (`process.env.secretName`) zugreifen können. Geheimnisse werden über die HubSpot-Befehlszeile mit den folgenden Befehlen verwaltet:
* [`hs secrets list`](/docs/developer-tooling/local-development/hubspot-cli/reference#list-secrets)
* [`hs secrets add`](/docs/developer-tooling/local-development/hubspot-cli/reference#add-a-secret)
* [`hs secrets delete`](/docs/developer-tooling/local-development/hubspot-cli/reference#remove-a-secret)
Sobald Geheimnisse über das CLI hinzugefügt wurden, können sie Funktionen zur Verfügung gestellt werden, indem ein `secrets`-Array mit dem Namen des Geheimnisses hinzugefügt wird. Auf diese Weise können Sie Ihren Funktionscode in der [Versionskontrolle speichern](/docs/cms/start-building/introduction/developer-environment/github-integration) und Geheimnisse verwenden, ohne sie preiszugeben. Sie sollten jedoch niemals den Wert Ihres Geheimnisses durch Konsolenprotokollierung oder als Antwort zurückgeben, da dies das Geheimnis in Protokollen oder auf Frontend-Seiten preisgibt, die Ihre serverlose Funktion aufrufen.
> [!WARNING]
>
> ### Hinweis:
>
> Aufgrund der Zwischenspeicherung kann es etwa eine Minute dauern, bis aktualisierte geheime Werte angezeigt werden. Wenn Sie gerade ein Geheimnis aktualisiert haben, aber immer noch den alten Wert sehen, überprüfen Sie es nach etwa einer Minute erneut.
## Verwendung von serverlosen Funktionen mit dem form-Element
Bei der Übermittlung von serverlosen Funktionen verwenden Sie JavaScript, um die Formulareinsendung zu verarbeiten, und verwenden Sie den `"contentType" : "application/json"`-Header in Ihrer Anfrage. Verwenden Sie nicht das `
{% endif %}
{{ content.post_list_content|safe }}
{% endfor %}
```
```html example.html theme={null}
Post with no featured image
Post with no featured image
Post with no featured image
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `attribute_name` | Zeichenfolge | Gibt das auszuwählende Attribut an; Mithilfe der Punktnotation können Sie auf verschachtelte Attribute zugreifen. |
| `exp_test` | Zeichenfolge | Der Name des [Ausdruckstests](/docs/cms/reference/hubl/operators-and-expression-tests#expression-tests), der auf das Objekt angewendet werden soll |
## render
Rendering von Strings, die HubL enthalten, damit die Ausgabe an andere Filter weitergegeben werden kann
```html example.html theme={null}
{{ personalization_token("contact.lastname", "default value")|render|lower }}
```
```html example.html theme={null}
mclaren
```
## replace
Ersetzt alle Instanzen eines Substrings durch eine neue.
```html example.html theme={null}
{% if topic %}
printed as text." %}
{{ escape_string|sanitize_html("IMAGES") }}
```
```html example.html theme={null}
This markup is 
Post with featured image
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `attribute_name` | Zeichenfolge | Das Attribut, auf das getestet werden soll. Mithilfe der Punktnotation können Sie auf verschachtelte Attribute zugreifen. |
| `exp_test` | Zeichenfolge | Der Name des [Ausdruckstests](/docs/cms/reference/hubl/operators-and-expression-tests#expression-tests), der auf das Objekt angewendet werden soll |
| `val` | Zeichenfolge | Wert, auf den getestet werden soll |
## shuffle
Legt die Reihenfolge der Iteration durch eine Sequenz zufällig fest. Im folgenden Beispiel wird eine Standard-Blogschleife gemischt.
> [!WARNING]
>
> ### Bitte beachten:
>
> Bei Verwendung dieses Filters wird die Seite nicht jedes Mal, wenn der Seiteninhalt aktualisiert wird, sondern in regelmäßigen Abständen [vorgerendert](/docs/cms/best-practices/testing-staging-performance/prerendering). Dies bedeutet, dass der gefilterte Inhalt nicht bei jedem erneuten Laden der Seite aktualisiert wird.
>
> Dies ist möglicherweise kein Problem für bestimmte Arten von Inhalten, z. B. die Anzeige einer zufälligen Liste von Blogbeiträgen. Wenn Inhalte jedoch bei jedem Laden der Seite zufällig geändert werden müssen, sollten Sie stattdessen JavaScript verwenden, um den Inhalt client-seitig zu randomisieren.
```html example.html theme={null}
{% for content in contents|shuffle %}
Markup of each post
{% endfor %}
```
```html example.html theme={null}
Markup of each post 5
Markup of each post 3
Markup of each post 1
Markup of each post 2
Markup of each post 4
```
## slice
Zerschneiden eines Iterators und Rückgabe einer Liste von Listen, die diese Elemente enthalten; Der erste Parameter gibt an, wie viele Elemente in Scheiben geschnitten werden sollen, und der zweite Parameter gibt an, mit welchen Zeichen leere Scheiben gefüllt werden sollen.
```html example.html theme={null}
{% set items = ["laptops", "tablets", "smartphones", "smart watches", "TVs"] %}
{% for column in items|slice(3," ") %}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `alt` | Zeichenfolge | Legt den Standard-ALT-Text für das Bild fest. | |
| `src` | Zeichenfolge | Füllt das src-Attribut des img-Tags aus. | |
| `width` | Zahl | Legt das width-Attribut des img-Tags fest. | `The width of the image` |
| `height` | Zahl | Legt eine min-height in einem style-Attribut des img-Tags **nur für E-Mail-Vorlagen** fest. | `The height of the image` |
| `hspace` | Zahl | Legt das hspace-Attribut des img-Tags fest. | |
| `align` | Zeichenfolge | Legt das align-Attribut des img-Tags fest. Mögliche Werte sind: „left“, „right“ & „center“. | |
| `style` | Zeichenfolge | Fügt Inline-CSS-Deklarationen zum img-Tag hinzu. Zum Beispiel style="border:1px solid blue; margin:10px". | |
| `loading` | Zeichenfolge | Steuert das loading-Attribut des img-Elements. [Wird für browserbasiertes Lazy Loading verwendet.](/docs/cms/best-practices/testing-staging-performance/lazy-loading) | |
## Bildquelle
Ein Bild-SRC-Modul erstellt eine Bildauswahl im Content-Editor, aber anstatt ein img-Tag auszugeben, wird die URL des Bildes dargestellt. Dieses Tag wird in der Regel mit dem `no_wrapper=True`-Parameter verwendet, sodass das Bild src zu Inline-CSS oder anderem Markup hinzugefügt werden kann. Eine Alternative zur Verwendung dieses Tags ist die Verwendung des [`export_to_template_context`](/docs/cms/reference/modules/export-to-template-context)-Parameters.
```text eingabe.txt theme={null}
{% image_src "image_src" %}
{% image_src "executve_image_src" src="//cdn2.hubspot.net/hub/53/file-733888614-jpg/assets/hubspot.com/about/management/dharmesh-home.jpg", no_wrapper=True %}
```
```text ausgabe.txt theme={null}
//cdn2.hubspot.net/hub/53/file-733888614-jpg/assets/hubspot.com/about/management/dharmesh-home.jpg
```
| Parameter | Typ | Beschreibung |
| - | - | - |
| `src` | Zeichenfolge | Gibt die Standard-URL-Bildquelle an. |
## Sprachumschaltung
Fügt ein Globus-Symbol mit Links zu den übersetzten Versionen einer bestimmten CMS-Seite hinzu. Erfahren Sie [in diesem Artikel mehr über mehrsprachige Inhalte](https://knowledge.hubspot.com/de/website-and-landing-pages/create-pages-in-multiple-languages).
```text eingabe.txt theme={null}
{% language_switcher "language_switcher" overrideable=false, display_mode="localized", label="Language Switcher" %}
```
```text ausgabe.txt theme={null}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `display_mode` | Aufzählung | Die Sprache des Textes in der Sprachumschaltung. Werte sind:
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `alt` | Zeichenfolge | Legt den Standard-ALT-Text für das Bild fest. | `Value in brand kit settings` |
| `src` | Zeichenfolge | Füllt das src-Attribut des img-Tags aus. | `Value in brand kit settings` |
| `link` | Zeichenfolge | Legt die Ziel-URL des Links fest, der das img-Tag einschließt. | |
| `width` | Zahl | Legt das width-Attribut des img-Tags fest. | `The width of the image` |
| `height` | Zahl | Legt eine min-height in einem style-Attribut des img-Tags **nur für E-Mail-Vorlagen** | `The height of the image` |
| `hspace` | Zahl | Legt das hspace-Attribut des `img`-Tags fest. | |
| `align` | Zeichenfolge | Legt das align-Attribut des `img`-Tags fest. Mögliche Werte sind `left`, `right` und `center`. | |
| `style` | Zeichenfolge | Fügt Inline-CSS-Deklarationen zum img-Tag hinzu. Beispiel:`style="border:1px solid blue; margin:10px"` | |
| `suppress_company_name` | Boolesch | Blendet Unternehmensnamen aus, wenn kein Bild-Logo festgelegt ist. | `False` |
| `use_account_default` | Boolesch | Auf `true` festlegen, um den Unternehmensnamen aus den Standardeinstellungen des Accounts zu verwenden. | `False` |
| `open_in_new_tab` | Boolesch | Legt fest, ob die Ziel-URL in einer anderen Registerkarte geöffnet werden soll oder nicht. | `False` |
| `override_inherited_src` | Boolesch | Wenn auf `true` festgelegt, wird src vom Logo-Widget verwendet und nicht src voden Einstellungen oder der Vorlage geerbt. | `True` |
| `heading_level` | Zeichenfolge | Bei Verwendung nicht verknüpfter textbasierter Logos wird das textbasierte Logo in eine der folgenden verfügbaren Optionen als HTML-Tag eingeschlossen: `h1`, `h2`, `h3`, `h4`. | `h1` |
| `loading` | Zeichenfolge | Steuert das Attribut zum Laden des img-Elements für [browserbasiertes Lazy-Loading](/docs/cms/best-practices/testing-staging-performance/lazy-loading). | |
## Menü
Erzeugt ein erweitertes Menü basierend auf einer Menüstruktur unter **Inhaltseinstellungen > Erweiterte Menüs.** Unter [Menüs und Navigation](/docs/cms/start-building/building-blocks/modules/menus-and-navigation) finden Sie weitere Informationen zur Verwendung von Menüs in [Vorlagen](https://developers.hubspot.de/docs/cms/start-building/building-blocks/templates/overview) und [Modulen](https://developers.hubspot.de/docs/cms/start-building/building-blocks/modules/overview). Wenn `id` auf `null` festgelegt ist, stellt das menu-Tag das Standardmenü für den HubSpot-Account dar.
```text eingabe.txt theme={null}
{% menu "menu" %}
{% menu "my_menu"
id=456,
site_map_name="Default",
overrideable=False,
root_type="site_root",
flyouts="true",
max_levels="2",
flow="horizontal",
label="Advanced Menu"
%}
```
```text ausgabe.txt theme={null}
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `id` | Zahl | ID der Menüstruktur von „Erweiterte Menüs“ in den Inhaltseinstellungen. | |
| `site_map_name` | Zeichenfolge | Name der Menüstruktur von „Erweiterte Menüs“ in den Inhaltseinstellungen. | `"default"` |
| `root_type` | Aufzählung | Gibt den Typ der erweiterten Menüs an. Zu den Optionen gehören „site\_root“, „top\_parent“, „parent“, „page\_name“, „page\_id“ und „breadcrumb“. Diese Werte entsprechen „Statisch“, „Dynamisch nach Bereich“, „Dynamisch nach Seite“ und „Breadcrumb“. | `"site_root"` |
| `flyouts` | Zeichenfolge | Bei true wird der Menüstruktur eine Klasse hinzugefügt, die so gestaltet werden kann, dass untergeordnete Menüpunkte angezeigt werden, wenn Sie den Mauszeiger über den übergeordneten Punkt bewegen. Bei false werden untergeordnete Menüpunkte immer angezeigt. | `"true"` |
| `max_levels` | Zahl | Legt fest, wie viele Ebenen von verschachtelten Menüs im Markup dargestellt werden. Dieser Parameter legt die Anzahl der untergeordneten Menüebenen an, auf die erweitert werden kann. | `2` |
| `flow` | Aufzählung | Legt die Ausrichtung der Menüpunkte fest. Dadurch werden der Menüstruktur Klassen hinzugefügt, sodass sie entsprechend formatiert werden können. Mögliche Werte sind „horizontal", „vertical“ oder „vertical\_flyouts“. Horizontale Menüs zeigen Elemente nebeneinander und vertikale Menüs zeigen Elemente untereinander an. | `"horizontal"` |
| `root_key` | Zeichenfolge | Wird verwendet, um den Stamm des Menüs zu finden. Wenn root\_type auf page\_id oder page\_name festgelegt ist, sollte dieser Parameter die Seiten-ID bzw. das Label der Seite sein. | `"horizontal"` |
| `label` | Zeichenfolge | Etwas Rich-Content, um diese Entität zu beschreiben | `False` |
| `label` | Zeichenfolge | Etwas Rich-Content, um diese Entität zu beschreiben | `False` |
## Require\_css
Ein HubL-Tag, das ein style-Element in die Warteschlange stellt, das im `` gerendert werden soll.
Dieses Tag ähnelt der [require\_css-Funktion](/docs/cms/reference/hubl/functions#require-css), mit der Ausnahme, dass Stile mit diesem Tag inline und nicht aus einem Stylesheet eingefügt werden. Dieses Tag wird auch nicht gegen andere Instanzen des CSS auf derselben Seite dedupliziert. Wenn Sie ein Modul erstellen und ein Stylesheet einfügen möchten, dieses Modul jedoch mehrmals auf einer einzelnen Seite verwenden möchten, sollten Sie stattdessen die `require_css` verwenden.
```text eingabe.txt theme={null}
{{ standard_header_includes }}
{% require_css %}
{% end_require_css %}
{{ standard_footer_includes }}
```
```text ausgabe.txt theme={null}
```
## Require\_head
Ein HubL-Tag, das alles, was in `standard_header_includes` (der `` der Vorlage) platziert ist, in die Warteschlange stellt. Für die meisten JavaScript und CSS siehe `require_js` und `require_css`. Einige Anwendungsfälle für `require_head` sind die Bereitstellung von Meta-Tags und speziellen Link-Tags (wie prefetch und preconnect) von Modulen.
```hubl theme={null}
{% require_head %}
{% end_require_head %}
```
## Require\_js
Ein HubL-Tag, das ein zu renderndes Skriptelement in die Warteschlange stellt. Um ein Skript von einer anderen Datei in die Warteschlange zu stellen, um es im `
```
| Parameter | Typ | Beschreibung | Standard |
| - | - | - | - |
| `use_page_url` | Boolesch | Bei true teilt das Modul standardmäßig die URL der Seite. | `True` |
| `link` | Zeichenfolge | Gibt eine andere URL zum Teilen an, wenn `use_page_url` false ist. | |
| `pinterest` | JSON | Parameter für das Pinterest-Link-Format und die Quelle des Symbolbildes. | `See block syntax example, above` |
| `twitter` | JSON | Parameter für das Twitter-Link-Format und die Quelle des Symbolbildes. | `See block syntax example, above` |
| `linked_in` | JSON | Parameter für das LinkedIn-Link-Format und die Quelle des Symbolbildes. | `See block syntax example, above` |
| `facebook` | JSON | Parameter für das Facebook-Link-Format und die Quelle des Symbolbildes. | `See block syntax example, above` |
| `email` | JSON | Parameter für das E-Mail-Link-Format und die Quelle des Symbolbildes. | `See block syntax example, above` |
## Abstandshalter
Ein spacer-Tag erzeugt ein leeres span-Tag. Dieses Tag kann als Abstandshalter formatiert werden. In Drag-and-Drop-Layouts wird das Abstandshaltermodul in einen Container mit der Klasse „span1-span12“ eingeschlossen, um festzulegen, wie viel Platz das Modul im zwölfspaltigen responsiven Raster einnehmen soll.
```text eingabe.txt theme={null}
{% space "space" %}
{% space "spacer" label="Horizontal Spacer" %}
```
```text ausgabe.txt theme={null}
```
## Systemseiten-Tags
Die folgenden Tags können auf [Systemseiten](https://developers.hubspot.de/docs/cms/start-building/building-blocks/templates/overview#system-pages) verwendet werden, z. B. auf den Seiten zum Zurücksetzen des Passworts oder zum Abonnieren von E-Mails.
### E-Mail-Back-up Abo-Kündigung
Das Abo-Kündigungs-Back-up-Tag wird für E-Mail-Empfänger gerendert, falls HubSpot deren E-Mail-Adresse nicht ermitteln kann, wenn dieser Empfänger versucht, ein Abo zu kündigen. Mit diesem Tag wird ein Formular adargestellt, in das der Kontakt seine E-Mail-Adresse eingeben kann, um sich von der E-Mail-Kommunikation abzumelden. Es sollte auf einer [Abmelde-Backup-Systemvorlage](https://knowledge.hubspot.com/de/design-manager/use-system-templates-to-customize-error-subscription-and-password-prompt-pages) verwendet werden.
```text eingabe.txt theme={null}
{% email_simple_subscription "email_simple_subscription" %}
{% email_simple_subscription "email_simple_subscription"
header="Email Unsubscribe",
input_help_text="Your email address:",
input_placeholder="email@example.com",
button_text="Unsubscribe",
label="Backup Unsubscribe"
%}
```
```text ausgabe.txt theme={null}
