# Flowdust Dokumentation

Hier findest du alles, um sofort mit Flowdust loslegen zu können.

## Was ist Flowdust?

Flowdust ist ein Online Service, der dir dabei hilft, Feedback schnell und einfach von deinen Nutzern zu sammeln - und das ganz ohne Programmierkenntnisse.


# Kurzanleitung

### **Übersicht**

1. Flowdust installieren
2. Website hinzufügen
3. Ein Widget erstellen: 3.1 Flowter erstellen, 3.2 Statusmeldung erstellen
4. Widget mit Website verknüpfen

## **Flowdust installieren**

* [Logge dich ein](https://flowdust.com/signup) und klicke links in der Navgiationsleiste auf "Installation".

![](/files/-M4U1jL30uunB7xCQGyq)

* Wähle deine Plattform und folge anschließend der Anleitung, um das Skript in deine Website zu implementieren.

## **Eine Website hinzufügen**

* Klicke links in der Navigationsleiste auf "Website hinzufügen".

![](/files/-M6_35Jo4Lsbn7wkJ0gE)

* Vergib einen Namen
* Gib die URL an, auf der dein Widget erscheinen soll
* (optional) Füge Parameter hinzu
* Klicke auf "Website hinzufügen"

## **Ein Widget erstellen**

* Klicke links in der Navigationsleiste auf "Erstelle ein Widget"
* Wähle das Widget aus, das du auf deiner Website haben möchtest.

![](/files/-M6_3zxeoec6VAbHoEXN)

### **Einen** [**Flowter** ](https://flowdust.com/widget/flowter)**erstellen**

Wähle eine Vorlage aus oder beginne einen neuen Flowter

Neuer Flowter:&#x20;

* Gib deinen Flowter einen Namen
* Erstelle eine Frage - Du kannst weitere hinzufügen, indem du auf den Button "+" klickst
* Gib deine Antwortmöglichkeiten an - Du kannst bis zu 5 hinzufügen

![Flowter Creator](/files/-M6_8N1vLZ6bVfP41CdK)

* Wähle einen Text, der am Ende deines Flowters stehen wird
* Bestimme die Position und Art, wie dein Flowter angezeigt werden soll

![](/files/-M6_7vIithqWyF_w78NZ)

* Wähle die Farbe für deinen Flowter
* Wenn dein Flowter nicht sofort angezeigt werden soll, kannst du nun festlegen, wann genau er erscheinen soll

![](/files/-M6_7b6Gi4d5cD8SFso2)

* Klicke auf Speichern

### **Eine** [**Statusmeldung** ](https://flowdust.com/widget/statusmessage)**erstellen**

* Gib deiner Statusmeldung einen Namen
* Gib eine Überschrift an
* Füge den Text ein, den du auf deiner Website angezeigt haben möchtest

![Statusmeldung Creator](/files/-M6_9g5DkuhP5M2ra55I)

&#x20;***(**&#x6F;ptional) Erstelle einen Button*&#x20;

* Gib den Text deines Buttons ein
* Gib die URL an, zu der man nach dem Buttonklick weitergeleitet wird

![Button](/files/-M6_BcQoRgHLPXOpooeh)

*(optional) Füge ein Icon hinzu*

* Gib die URL deines Icons an

![Icon](/files/-M6_D_Rw0A-icEb7-JfY)

* Bestimme die Position deines Flowters
* Gib an, wann deine Statusmeldung auf der Website angezeigt werden soll

![](/files/-M6_F1s1cUq3jmweyoP0)

* Klicke auf Speichern

## Widget mit Website verknüpfen

* Gehe zurück zu deinem Dashboard
* Klicke unter Webseiten auf "Wähle ein Widget"
* Wähle dein Widget aus

![](/files/-M6_H83dtS5fcbbBKIJ5)

**Das Widget sollte nun auf deiner Website platziert sein.**

&#x20;*Falls du Probleme oder Fragen hast, wende dich bitte an unseren Support: <hello@flowdust.com>*


# Eine Website hinzufügen

Um eine Webseite hinzuzufügen, musst du dich zuerst in deinem Flowdust Account einloggen.

Gehe auf dein Dashboard und klicke links in der Navigationsleiste oder in der Webseiten-Übersichtsbox auf „Webseite hinzufügen“.

![](/files/-M6_35Jo4Lsbn7wkJ0gE)

Gib deiner Website nun einen Namen. Dies dient später zur besseren Übersicht, da du mehrere Webseiten hinzufügen kannst.

Füge im nächsten Schritt die URL deiner Website ein, auf der das Widget erscheinen soll. Es ist wichtig, dass du die genaue URL der Webseite angibst.

{% hint style="warning" %}
Beispiel: Wenn das Widget auf deiner Hauptseite platziert werden soll, sieht die URL etwa so aus: <https://www.deineseite.de>.&#x20;

Wenn du das Widget aber auf einer bestimmten Seite (z.B. Kontakt-Seite) haben möchtest, sieht das Ganze dann so aus: <https://www.deineseite.de/kontakt>
{% endhint %}

(Optional) Du hast die Möglichkeit bis zu 5 Parameter hinzuzufügen, um die Anzeigemöglichkeiten des Widgets zu erweitern. So kannst du dein Widget auch unter verschiedenen Kategorien anzeigen lassen. Gib dazu einfach die Stichwörter deiner Kategorien an, die sich in deiner URL befinden.

Klicke nun auf Website hinzufügen.

Sobald du sie hinzugefügt hast, erscheint sie auf deinem Dashboard und du kannst sie einem Widget zuweisen.


# Ein Widget erstellen

Auf deinem Dashboard siehst du links auf der Navigationsleiste „Erstelle ein Widget“.&#x20;

Du  kannst zwischen einem Flowter und einer Statusmeldung wählen.

![](/files/-M6_3zxeoec6VAbHoEXN)

Ein Flowter ist eine kurze Umfrage, die maximal 4 Fragen mit jeweils bis zu 5 Antwortmöglichkeiten erlaubt. So kannst du deine Nutzer genau das fragen, was du schon immer von ihnen wissen wolltest.

Eine Statusmeldung ist ein kurzer von dir gewählter Text. Du kannst dadurch Neuigkeiten, Aktionen oder Informationen auf deiner Website anzeigen lassen. Zudem hast du die Möglichkeit ein Icon, sowie einen Button hinzuzufügen, der deine Nutzer auf eine andere Website weiterleitet (Beispielsweise Social Media Links).

####


# Flowter

## Flowter erstellen

Du hast die Auswahl selbst einen Flowter zu erstellen, oder auf eine Vorlage zuzugreifen. Die von dir gewählt Vorlage kann nach dem Auswählen noch bearbeitet werden.&#x20;

#### Neuer Flowter

Jetzt ist deine Zeit, um kreativ zu werden. Du kannst hier deine Fragen und Antwortmöglichkeiten hinzufügen, die deine Nutzer beantworten sollen.&#x20;

Gib deinem Flowter zuerst einen Namen. Dies dient im Dashboard zur besseren Übersicht.

Erstelle nun deine Frage und gib Auswahlmöglichkeiten an.&#x20;

Du kannst bis zu 4 Fragen hinzufügen, klicke für eine weitere auf den Button "+". Willst du eine löschen, klicke auf "Frage entfernen".

Unsere Flowter erlauben dir jeweils bis zu 5 Antwortmöglichkeiten. Um eine weitere hinzuzufügen, klicke auf den Button "Antwortmöglichkeit hinzufügen". Möchtest du eine löschen, klicke auf das rote "x" rechts neben der Antwortmöglichkeit.

![](/files/-M6_8N1vLZ6bVfP41CdK)


# Statusmeldung

## Statusmeldung erstellen

Nachdem du das Widget "Statusmeldung" gewählt hast, gelangst du auf die Erstellungs-Seite.

Gib deiner Statusmeldung zuerst einen Namen. Dies dient im Dashboard zur besseren Übersicht.

Gib nun eine Überschrift an. Diese wird fett angezeigt und steht über deinem Haupttext.

Füge nun den Text ein, den du in deinem Widget anzeigen möchtest. Dieser steht unter deiner Überschrift. Du kannst bis zu 140 Zeichen angeben.

Auf der rechten Seite siehst du eine Vorschau deiner Statusmeldung.

![](/files/-M6_9g5DkuhP5M2ra55I)


# Ein Widget mit einer Website verknüpfen

Dieser Schritt ist ziemlich einfach. Nachdem du ein Widget erstellt hast, kannst du es auf deinem Dashboard in der Übersicht-Box sehen.&#x20;

Gleich darüber findest du deine hinzugefügten Webseiten. Klicke hier auf „Wähle ein Widget“ und suche dir das aus, das auf deiner Webseite angezeigt werden soll.

#### Voilá! Nun hast du das Widget auf deiner Webseite und deine Nutzer können es sehen.


# Ergebnisse und Statistiken der Flowter einsehen

Um zu sehen, wie deine Nutzer abgestimmt haben, musst du nur auf dein Dashboard gehen und auf den Flowter klicken, dessen Ergebnisse du einsehen möchtest.&#x20;

Hier kannst du die Anzahl aller Votes, sowie die der einzelnen Antwortmöglichkeiten sehen. Diese werden zur besseren Übersicht in verschiedenen Graphen und Farben dargestellt.


# Javascript API

Momentan ist unsere API noch in der Beta Phase!

## User Objekt setzen

Soll sich geräteübergreifend gemerkt werden, wer bei einem Widget abgestimmt hat, ist es möglich den User anzugeben.

### 1. Laden und Initialisierung

Bevor der User gesetzt werden kann, ist es nötig zu warten, bis Flowdust geladen und initialisiert ist. Hierzu wird die Flowdust.ready()-Funktion aufgerufen, sobald das Widget bereit ist.&#x20;

```javascript
window.onload = () => {
   Flowdust.ready = (Flowdust) => {
   
     // dein code hier
      
     const user = {
       id: "USER_ID",
     }
     
     Flowdust.setUser(user);
   }
 }
```

{% hint style="info" %}
&#x20;Das Flowdust \<script> muss vorher geladen werden, bevor Flowdust.ready deklariert werden kann.
{% endhint %}

### 2. Manuelle Steuerung

Kann der User nicht gleich gesetzt werden wenn Flowdust bereit ist, ist es möglich das Laden des Widgets komplett manuell zu steuern. Hierzu ruft man folgende Funktion auf:

```javascript
Flowdust.setManual(true); 
```

Nun kann der User unabhängig vom Widget gesetzt werden.

Anschließend ruft man

```javascript
Flowdust.load();
```

auf, und das Widget wird geladen.

#### Single Page Apps

Hat man die manuelle Widget Steuerung mit

```javascript
Flowdust.setManual(true);
```

aktiviert, ist es bei Single Page Apps (z.B. React) nötig, den folgenden Code aufzurufen, nachdem die User ID gesetzt wurde:

```javascript
Flowdust.setManual(false);
Flowdust.load();
```

### 3. User auslesen

Will man den momentan gesetzten User auslesen, kann man folgende Funktion aufrufen:

```javascript
const user = Flowdust.getUser();
```


# Abonnement- und Zahlungsinformationen

Auf der Zahlungsseite, die du ebenfalls auf der Navigationsleiste findest, kannst du deine Abonnement- und Zahlungsinformationen verwalten.&#x20;

Hier kannst du die von dir gewählte Zahlungsart ändern, indem du auf „Zahlungsart ändern“ klickst.

Sobald du einen Tarif gewählt hast, ist dein Abo aktiv. Du kann es jederzeit kündigen, indem du auf den „Abonnement kündigen“ – Button klickst. Danach kannst du es so lange nutzen, wie du noch zur Verfügung hast.

Dein Abo wird jeden Monat automatisch verlängert, beginnend an dem Tag, an dem du es gestartet hast. Wenn du mehr oder wenige Flowters zur Verfügung haben möchtest, hast du die Möglichkeit deinen Tarif hoch- oder herunterzustufen. Diesen Button findest du direkt unter den Planinformationen.


