Skip to content

Commit

Permalink
hubspot
Browse files Browse the repository at this point in the history
  • Loading branch information
jekuer committed Mar 4, 2024
1 parent cc2fda5 commit 3abd43d
Show file tree
Hide file tree
Showing 2 changed files with 28 additions and 8 deletions.
18 changes: 14 additions & 4 deletions src/de/integration/hubspot.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,11 @@ Beim Erstellen von Webseiten und Landingpages mit HubSpot gelten einige Limitati

**Good News: Es ist trotzdem sehr einfach möglich einen Add to Calendar Button oder RSVP-Formular zu integrieren!**

Einzige Voraussetzung: Du musst in der Lage sein den Quellcode eines Rich-Text-Felds zu bearbeiten. Beim Arbeiten mit Landingpages kann dies zusätzlich limitiert sein - abhängig von der gewählten Vorlage.

## Schritt 1: Integriere unsere Skripte

Zunächst musst du unser Haupt-Skript sowie eine HubSpot-spezifische Erweiterung irgendwo auf der Seite unterbringen.

Dies kann der erwähnte Rich-Text-Quellcode sein - oder (im Webseiten-Fall) der Header-HTML-Bereich in den Einstellungen.
Dies kann ein Rich-Text-Quellcode, der Einbettungscode eines Video-Elements oder (im Webseiten-Fall) der Header-HTML-Bereich in den Einstellungen sein.

Wichtig: Du musst diesen Block nur 1x je Seite integrieren - unabhängig davon wie viele Add to Calendar Buttons und/oder RSVP-Formulare du auf einer Seite nutzt.

Expand All @@ -26,10 +24,22 @@ Kopiere den folgenden Code-Block und füge ihn dort ein:

## Schritt 2: Loslegen

Nun kannst du damit beginnen, deine Buttons und Formulare zu integrieren, indem du <div></div> Tags im Quellcode eines Rich-Text-Elements anlegst. Gib dem Tag die Klasse (class) "add-to-calendar-pro-frame" und kopiere deinen proKey.
Nun kannst du damit beginnen, deine Buttons und Formulare zu integrieren, indem du <div></div> Tags im Quellcode eines Rich-Text-Elements oder als "Einbettungscode" eines Video-Elements anlegst. Gib dem Tag die Klasse (class) "add-to-calendar-pro-frame" und kopiere deinen proKey.

Folge einfach folgendem Schema:

```html
<div class="add-to-calendar-pro-frame">prokey-of-your-event</div>
```

<br /><br />

::: tip Sonderall Landingpage
Auf Landingpages kannst du leider kein globales Header-HTML definieren und in einigen Fällen auch nicht den Quellcode eines Rich-Text-Elements bearbeiten.

Nutze das Video-Element und füge beide Code-Blöcke von oben als Einbettungscode zu.
:::

::: warning Vorschau im Editor
Solltest du den Rich-Text-Quellcode anstelle des Video-Elements nutzen, siehst du das Add to Calendar Element nur im Vorschau-Modus oder der Live-Ansicht; nicht aber im Editor!
:::
18 changes: 14 additions & 4 deletions src/integration/hubspot.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,11 @@ When building a website or landingpage at HubSpot, there are a lot of limitation

**Good news: It is still possible and not difficult to integrate an Add to Calendar Button or RSVP form!**

The only requirement: You need to be able to change the source code of a rich text field. When working with landingpages, this can be limited too, when using specific templates.

## Step 1: Integrate our base scripts

You would need to add our script as well as a HubSpot specific extension somewhere on the page.

This can be the mentioned source code or (in the website case) the header HTML area within the website settings.
This can be the source code of a rich text element, the embed code of a video element, or (in the website case) the header HTML area within the website settings.

The important part is, that you only need to do this once per page - not matter the amount of Add to Calendar Buttons and/or RSVP forms on a page.

Expand All @@ -26,10 +24,22 @@ Copy and paste the following code block:

## Step 2: Use it

You can now add your buttons and forms by creating <div></div> elements in the source code of a rich text input, where you add the class name "add-to-calendar-pro-frame" and the proKey as innerHTML.
You can now add your buttons and forms by creating <div></div> elements in the source code of a rich text input or video embed code, where you add the class name "add-to-calendar-pro-frame" and the proKey as innerHTML.

Like this:

```html
<div class="add-to-calendar-pro-frame">prokey-of-your-event</div>
```

<br /><br />

::: tip Special Case: Landingpage
At landingpages, you usually cannot add global header HTML and in some cases cannot edit the rich text source code too.

Use the video element and add the above code blocks to the embed code input.
:::

::: warning Preview in the editor
When using the rich text input instead of the video element, you would only see the Add to Calendar Element rendered in the preview or at the live site, but not in the editor itself!
:::

0 comments on commit 3abd43d

Please sign in to comment.