wix, hubspot, waitlist, team page

.vitepress/config.ts

@@ -88,12 +88,14 @@ export default {
             items: [
               { text: 'Allgemein', link: '/de/integration/general' },
               { text: 'Angular', link: '/de/integration/angular' },
-              { text: 'React', link: '/de/integration/react' },
+              { text: 'Astro', link: '/de/integration/astro' },
+              { text: 'HubSpot', link: '/de/integration/hubspot' },
               { text: 'Next.js', link: '/de/integration/nextjs' },
-              { text: 'Vue 3', link: '/de/integration/vue' },
               { text: 'Nuxt 3', link: '/de/integration/nuxt' },
+              { text: 'React', link: '/de/integration/react' },
               { text: 'Svelte', link: '/de/integration/svelte' },
-              { text: 'Astro', link: '/de/integration/astro' },
+              { text: 'Vue 3', link: '/de/integration/vue' },
+              { text: 'Wix.com', link: '/de/integration/wix' },
               { text: 'WordPress', link: '/de/integration/wordpress' }
             ]
           },
@@ -222,12 +224,14 @@ export default {
         items: [
           { text: 'General', link: '/integration/general' },
           { text: 'Angular', link: '/integration/angular' },
-          { text: 'React', link: '/integration/react' },
+          { text: 'Astro', link: '/integration/astro' },
+          { text: 'HubSpot', link: '/integration/hubspot' },
           { text: 'Next.js', link: '/integration/nextjs' },
-          { text: 'Vue 3', link: '/integration/vue' },
           { text: 'Nuxt 3', link: '/integration/nuxt' },
+          { text: 'React', link: '/integration/react' },
           { text: 'Svelte', link: '/integration/svelte' },
-          { text: 'Astro', link: '/integration/astro' },
+          { text: 'Vue 3', link: '/integration/vue' },
+          { text: 'Wix.com', link: '/integration/wix' },
           { text: 'WordPress', link: '/integration/wordpress' }
         ]
       },

package.json

@@ -14,7 +14,7 @@
   "license": "Apache-2.0",
   "homepage": "https://docs.add-to-calendar-pro.com/",
   "devDependencies": {
-    "vitepress": "^1.0.0-rc.41"
+    "vitepress": "^1.0.0-rc.44"
   },
   "scripts": {
     "docs:dev": "vitepress dev",

src/application-manual/team.md

@@ -1,6 +1,49 @@
 
 # Managing your Team
 
-::: warning This site is currently still under heavy construction!
-Have a second look in a few weeks. :)
-:::
+You can invite as many people to your team as you want!
+
+**This comes at no additional cost!** Our competitors must hate us for this...
+
+## Roles & Rights
+
+Team members work within the same organization and can access all elements, like events, styles or templates.
+
+There are 2 roles:
+
+* Admin
+* Member (default)
+
+The only difference between: Members cannot manage the team, the plan, the organization, and API keys.
+
+## The Overview
+
+At the Team page, you get an overview of the people having access to your organization.
+
+Next to the name (and email address or invited status), you find their role, whether they are using 2-Factor-Authentication (TFA) and when they logged in the last time.
+
+Those information help you to manage your team in terms of usage and security.
+
+On the very right side of each user, you find action buttons to change their role or delete them.
+
+## Inviting Team Members
+
+The invitation form is below the overview table and simply requires a valid email address.
+
+On invitation, the respective user receives an email that needs to be confirmed. **This email expires after 7 days!**
+
+You can re-send the invite via the respective button next to the user in the overview table
+
+## Changing Roles
+
+You can easily upgrade or downgrade a user from the Team overview page via the respective button next to the targeted user.
+
+You can even downgrade yourself, but only if there is at least 1 other admin.
+
+**Be aware that other admins can downgrade you as well!**
+
+## Removing Team Members
+
+To remove a person from the team, you simply need to click the trash can icon next to the user and confirm the notification.
+
+As there are no elements linked to a specific person, but only the organization, there is no big risk in that process. You can re-invite people anytime.

src/de/application-manual/team.md

@@ -1,6 +1,49 @@
 
 # Team verwalten
 
-::: warning Diese Seite befindet sich aktuell noch im Aufbau!
-Schau in wenigen Wochen nochmal vorbei. :)
-:::
+Du kannst so viele Personen zu dein Team einladen, wie du möchtest!
+
+**Dies kostet dich keinen einzigen Euro mehr!** Unserer Wettbewerber müssen uns dafür hassen...
+
+## Rollen & Rechte
+
+Teammitglieder arbeiten innerhalb derselben Organisation und können auf alle Elemente zugreifen - wie Events, Styles oder Templates.
+
+Es gibt 2 Rollen:
+
+* Admin
+* Mitglied (Standard)
+
+Der einzige Unterschied: Mitglieder können das Team, die LIzenz, die Organisation und API-Schlüssel nicht verwalten.
+
+## Die Übersicht
+
+Auf der Teamseite erhältst du einen Überblick über die Personen, die Zugang zu deiner Organisation haben.
+
+Neben dem Namen (und der E-Mail-Adresse oder dem Einladungs-Status) findest du ihre Rolle, ob sie die Zwei-Faktor-Authentifizierung (TFA) nutzen und wann sie das letzte Mal eingeloggt waren.
+
+Diese Informationen helfen dir, dein Team in Bezug auf Nutzung und Sicherheit zu verwalten.
+
+Ganz rechts neben jedem Benutzer findest du Aktionsbuttons, um deren Rolle zu ändern oder sie zu löschen.
+
+## Teammitglieder einladen
+
+Das Einladungsformular befindet sich unterhalb der Übersichtstabelle und erfordert lediglich eine gültige E-Mail-Adresse.
+
+Bei der Einladung erhält der jeweilige Benutzer eine E-Mail, die bestätigt werden muss. **Der Einladungslink ist 7 Tage gültig!**
+
+Du kannst die Einladung über den entsprechenden Button neben dem Benutzer in der Übersichtstabelle erneut senden, sofern dies nötig ist.
+
+## Rollen ändern
+
+Du kannst einen Benutzer ganz einfach über die Teamübersichtsseite über den entsprechenden Button herauf- oder herabstufen.
+
+Du kannst dich sogar selbst herabstufen - aber nur, wenn es mindestens einen weiteren Admin gibt.
+
+**Sei dir bewusst, dass andere Admins dich ebenfalls herabstufen können!**
+
+## Teammitglieder entfernen
+
+Um eine Person aus dem Team zu entfernen, musst du einfach auf das Mülleimer-Symbol neben dem Benutzer klicken und die Benachrichtigung bestätigen.
+
+Da keine Elemente an eine bestimmte Person, sondern nur an die Organisation gebunden sind, besteht in diesem Prozess kein großes Risiko. Du kannst Personen jederzeit erneut einladen.

src/de/integration/hubspot.md

@@ -0,0 +1,35 @@
+
+# Wie man die Buttons und RSVP-Formulare mit HubSpot nutzt
+
+## Intro
+
+Beim Erstellen von Webseiten und Landingpages mit HubSpot gelten einige Limitationen.
+
+**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.
+
+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.
+
+Kopiere den folgenden Code-Block und füge ihn dort ein:
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/add-to-calendar-button@2" async defer></script>
+<script type="text/javascript" async defer>document.addEventListener("DOMContentLoaded",function(){let e=document.querySelectorAll(".add-to-calendar-pro-frame");e.forEach(e=>{let t=e.innerHTML.trim(),a=t.match(/^[a-z0-9\-]+$/);if(a){let r=document.createElement("add-to-calendar-button");r.setAttribute("proKey",a[0]),e.parentNode.replaceChild(r,e)}})});</script>
+```
+
+## 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.
+
+Folge einfach folgendem Schema:
+
+```html
+<div class="add-to-calendar-pro-frame">prokey-of-your-event</div>
+```

src/de/integration/wix.md

@@ -0,0 +1,74 @@
+
+# Wie man die Buttons und RSVP-Formulare auf Wix.com nutzt
+
+::: warning App vs. PRO
+Die folgende Anleitung beschreibt die Einbindung der PRO-Buttons und -Formulare in Wix!
+
+Für Anwendungsfälle, bei denen nur ein einfacher Button genutzt wird, bieten wir im [Wix App Market]() auch eine offizielle App an, die mit unserem PRO-Angebot allerdings nicht verbunden ist!
+:::
+
+## Schritt 0: Voraussetzungen
+
+Für die Integration des Add to Calendar Buttons oder RSVP Formulars muss das "Benutzerdefinierte Element" von Wix ([Wix-Hilfe-Artikel](https://support.wix.com/de/article/wix-editor-ein-benutzerdefiniertes-element-zu-deiner-website-hinzuf%C3%BCgen)) genutzt werden.
+
+**Dieses unterliegt einigen Voraussetzungen!**
+
+* Du benötigst ein Wix Premium Abo.
+* Du musst eine Domain mit deiner Webseite verbunden haben.
+* Stelle zudem sicher, dass Wix-Werbung entfernt wurde.
+
+## Schritt 1: Erstelle ein Custom Element
+
+* Füge ein neues Element aus dem Menü hinzu und wähle das benutzerdefinierte Element als Typ aus.
+* Du solltest einen schicken Rahmen mit einem Bild und etwas Text darin sehen. Klicke darauf!
+* Jetzt klicke auf den Button "Quelle aussuchen".
+* Du solltest die Option erhalten, dein Skript von einer Server-URL oder einer Velo-Datei zu laden.
+* Du wählst "Server-URL" aus und nutzt die jsDelivr-URL wie im allgemeinen Teil der Doku beschrieben:
+```
+https://cdn.jsdelivr.net/npm/add-to-calendar-button@2
+```
+* Scrolle anschließend im Panel nach unten und ändere das Feld "Tag-Name" zu `add-to-calendar-button`.
+
+<br />
+
+::: info
+Obwohl es möglich ist, unser npm-Paket zu deiner Seite hinzuzufügen; eine Velo-Datei zu erstellen, in der du "add-to-calendar-button" importierst; und diese Datei hier als Velo-Datei auszuwählen, empfehlen wir lieber mit der CDN-Version zu arbeiten!
+:::
+
+## Schritt 2: Setze das ProKey-Attribut
+
+* Schließe das Panel aus Schritt 1 und klicke auf "Attribute einrichten".
+* Erstelle ein neues Attribut, indem du im Panel auf den Button klickst, der ebenfalls mit "Attribute einrichten" beschriftet ist.
+* Als Namen verwendest du `proKey`.
+* Als Wert benutzt du den **ProKey deines Events**.
+* Das war's.
+
+
+## Schritt 3: Teste das Ergebnis
+
+* Dein Button sollte bereits angezeigt werden.
+* Verschiebe ihn und positioniere ihn so wie du möchtest.
+* **Last but not least:** Veröffentliche deine Seite und teste den Button auf der Live-Webseite. _Du solltest ihn nicht in der Vorschau testen (siehe unten)._
+
+<br /><br />
+
+## Glitch in der Vorschau
+
+Beim Integrieren des Elements in Wix wirst du einige merkwürdige Verhaltensweisen in der Editor-Vorschau beobachten.
+
+Innerhalb des Editors selbst sieht das Element genau so aus, wie es soll.
+
+![Editor](/screenshots/wix-editor.png)
+
+Wenn du die offizielle Vorschau startest und mit dem Button/Formular interagierst, wirst du aber sehen, dass Dinge abgeschnitten werden.
+
+Das liegt daran, dass Wix das Element sowohl im Editor als auch in der Vorschau aus Sicherheitsgründen in ein eher eingeschränktes iframe setzt.
+
+![Vorschau](/screenshots/wix-preview.png)
+
+**Keine Sorge!**
+
+Sobald du deine Seite veröffentlichst, sieht auf der Live-Website alles wieder gut aus! 😊
+
+![Live](/screenshots/wix-public.png)
+

src/de/recipes/rsvp.md

@@ -5,3 +5,6 @@
 Schau in wenigen Wochen nochmal vorbei. :)
 :::
 
+::: tip
+Du kannst den Teilnehmer für den RSVP auf Quellcode-Ebene vorbefüllen, indem du das "attendee"-Attribut dem HTML-Element hinzufügst. Beachte das Format "name|email".
+:::

src/integration/hubspot.md

@@ -0,0 +1,35 @@
+
+# How to use Buttons and RSVP Forms with HubSpot
+
+## Intro
+
+When building a website or landingpage at HubSpot, there are a lot of limitations in place.
+
+**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.
+
+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.
+
+Copy and paste the following code block:
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/add-to-calendar-button@2" async defer></script>
+<script type="text/javascript" async defer>document.addEventListener("DOMContentLoaded",function(){let e=document.querySelectorAll(".add-to-calendar-pro-frame");e.forEach(e=>{let t=e.innerHTML.trim(),a=t.match(/^[a-z0-9\-]+$/);if(a){let r=document.createElement("add-to-calendar-button");r.setAttribute("proKey",a[0]),e.parentNode.replaceChild(r,e)}})});</script>
+```
+
+## 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.
+
+Like this:
+
+```html
+<div class="add-to-calendar-pro-frame">prokey-of-your-event</div>
+```

src/integration/wix.md

@@ -0,0 +1,73 @@
+
+# How to use Buttons and RSVP Forms with Wix.com
+
+::: warning App vs. PRO
+The following instructions describe the integration of the PRO buttons and forms into Wix!
+
+For use cases where only a simple button is used, we also offer an official app in the [Wix App Market](), which, however, is not connected to our PRO offering!
+:::
+
+
+## Step 0: Prerequisites
+
+When integration Add to Calendar Buttons or RSPV forms, you need to use the "Custom Element" of Wix ([Wix Help Article](https://support.wix.com/en/article/wix-editor-adding-a-custom-element-to-your-site)).
+
+**This comes with some additional requirements!**
+
+* You need to have a Wix Premium Plan.
+* You need to connect a domain with your website.
+* YOu need to make sure there are no ads on your website.
+
+## Step 1: Create a Custom Element
+
+* Add a new element from the menu and select the custom element one.
+* You should see a fance frame with an image and some text in it. Click it!
+* Now click the "Choose Source" button.
+* You should be given the option to load your script from a server url or a velo file.
+* You would select "Server URL" and use the file from jsDelivr as described in the general part of this documentation:
+```
+https://cdn.jsdelivr.net/npm/add-to-calendar-button@2
+```
+* Next, scroll down in the panel and change the "Tag name" field to `add-to-calendar-button`.
+
+<br />
+
+::: info
+While it is possible to add our npm package to your site, create a velo file, where you import "add-to-calendar-button", and select this file as velo file here, we recommend to rather go with the CDN version here!
+:::
+
+## Step 2: Specify the ProKey Attribute
+
+* Close the panel from step 1 and click "Set Attributes".
+* Create a new attribute by clicking the button in the panel, which is also labeled "Set Attributes".
+* As name, you would use `proKey`.
+* As value, you use the **proKey of your event**.
+* That's it.
+
+## Step 3: Test it
+
+* Your button should already show up.
+* Move it around and position it the way you want.
+* **Next:** Publish your page and test the button on your live website. _You should not test it in the preview (see below)._
+
+<br /><br />
+
+## Mind the Glitch!
+
+When integrating the element in Wix, you might observe some strange behavior in the editor preview.
+
+Within the editor itself, the element looks exactly as it should.
+
+![Editor](/screenshots/wix-editor.png)
+
+When starting the official preview and interacting with the button/form, you will see things being cut off.
+
+This happens because within the editor and preview, due to security reasons, Wix puts the element into a rather restricted iframe.
+
+![Preview](/screenshots/wix-preview.png)
+
+**Don't worry!**
+
+As soon as you publish your site, on the live website, it all looks fine again! 😊
+
+![Live](/screenshots/wix-public.png)

src/recipes/rsvp.md

@@ -4,3 +4,7 @@
 ::: warning This site is currently still under heavy construction!
 Have a second look in a few weeks. :)
 :::
+
+::: tip
+You can prefill the attendee for the RSVP on the source code level by adding the "attendee" attribute to the HTML element. Mind the format "name|email".
+:::