> For the complete documentation index, see [llms.txt](https://kelnikug.gitbook.io/anleitung-widget-integration/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://kelnikug.gitbook.io/anleitung-widget-integration/master.md).

# Planoplan - Widget Integration

Es gibt zwei Optionen ein Widget in die Webseite zu integrieren: durch iframe oder durch den Code.

### Integration über iframe:

Für die Darstellung im Vollbildmodus muss im iframe unbedingt das Attribut allowfullscreen angegeben sein.

```bash
<iframe width="620" height="620"src="https://widget.planoplan.com/c5c7f3ebc36b1c9505f62defd963fb0b423cd8a8e092b5bfd83a3ad7de5d9879"frameborder="0" scrolling="no" allowfullscreen></iframe>
```

### Integration mit einem Code:

Fügen Sie den unten stehenden Widget-Script auf der Seite ei&#x6E;**\***

```bash
<script src="https://widget.planoplan.com/etc/multiwidget/release/v4/static/js/main.js"></script>
```

**\***&#x42;eachten Sie, dass diese Option ein Browser-Caching der Datei zur Folge haben kann. Um dies zu vermeiden, kann bei der Integration der aktuelle timestamp zum Dateinamen eingefügt werden. Im Beispiel mit einem php-Template kann dies wie folgt umgesetzt werden: <br>

```bash
<script src="https://widget.planoplan.com/etc/multiwidget/release/v4/static/js/main.js?<?=time()?>"></script>
```

Danach wird es initialisiert :

```bash
<div id="pop-widget"></div>
<script>    
Planoplan.init({
  uid: '__________',
  el: 'pop-widget'
 });
</script>
```

{% hint style="warning" %}
**uid** und **el** sind Pflichtparameter.
{% endhint %}

Es ist möglich mehrere Widgets zu initialisieren.

### **Parameter der Widget-Einfügung**

| <p><br>Parameter</p><p></p> | **Beschreibung**        | **Details**                                                                                                                                                                                                                                                                                                                         |
| --------------------------- | ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| width                       | <p><br>Breite</p>       | Falls keine Maßeinheiten angegeben sind, wird <=100 als % angegeben, >100 als px                                                                                                                                                                                                                                                    |
| height                      | Höhe                    | Falls keine Maßeinheiten angegeben sind, wird <=100 als % angegeben, >100 als px                                                                                                                                                                                                                                                    |
| primaryColor                | Hauptfarbe              | Der Rahmen von Widget-Symbol, Zeiger, Beschriftung der Schaltflächen, aktiven oder ausgewählten Schaltflächen                                                                                                                                                                                                                       |
| secondaryColor              | Sekundärfarbe           | Hintergrundfarbe für Symbol und Schaltflächen                                                                                                                                                                                                                                                                                       |
| textColor                   | Textfarbe               | Textfarbe für 360°, virtuelle Tour und VR-Widgets                                                                                                                                                                                                                                                                                   |
| backgroundColor             | Hintergrundfarbe        | Hintergrundfarbe des Widgets. Beachten Sie, dass Renderings nicht immer transparent sind.                                                                                                                                                                                                                                           |
| fontFamily                  | Schrift                 | Soll wie in css angegeben werden und funktioniert nur dann, wenn es für die Seite freigeschaltet ist. Damit das Widget die Schrift vom Admin-Dashboard nicht übernimmt (falls es für die Seite freigeschaltet ist), sollte es hier angegeben werden. Aktuell sind es **Open Sans** und **Roboto**                                   |
| activeTab                   | StartTab                | Verfügbare Werte sind **plan, top, three\_quarter, rotate\_360, virtual\_tour, vr**. Falls es keinen Tab gibt, dann wird er aus den Admin-Einstellungen übernommen, ansonsten wird der erste verfügbare Tab genommen.                                                                                                               |
| activeFloor                 | Startgeschoss           | 0 (Null) für das ganze Haus. Falls es kein Geschoss gibt, dann wird es aus den Admin-Einstellungen übernommen, ansonsten wird das erste verfügbare Geschoss genommen.                                                                                                                                                               |
| activeDesign                | Startprojekt            | Projekt-ID. Falls es kein Projekt gibt, dann wird es aus den Admin-Einstellungen übernommen, ansonsten wird das erste verfügbare Projekt genommen.                                                                                                                                                                                  |
| uid                         | Kennzeichnungs-nummer   |                                                                                                                                                                                                                                                                                                                                     |
| el                          | Element zum Einfügen    | Übernimmt die ID des Elements oder ein DOMElement                                                                                                                                                                                                                                                                                   |
| lang                        | Sprache                 | Im Moment sind **ru/en/de** verfügbar                                                                                                                                                                                                                                                                                               |
| initialCamera               | Startkamera für VR-Tour | <p>Übernimmt die Kameranummer für ein einstöckiges Widget oder ein Array für ein mehrstöckiges bzw. Multi-Widget, das aus Ansichtsobjekten besteht.</p><p> <img src="/files/-M4JoG19qnOnHBaHFw2t" alt="" data-size="original"> </p><p>Falls design oder floor nicht angegeben sind, werden die ersten aktiven Werte übernommen.</p> |

#### **Beispiel eines Widgetcodes  mit allen Parametern**

```bash
<script src="https://widget.planoplan.com/etc/multiwidget/release/static/js/main.js"></script>

<div id="pop-widget"></div>
<script>    
Planoplan.init({
  width: '620px',
  height: '620px', 
  primaryColor: '#81AEE3',
  secondaryColor: '#F4F7F7',
  textColor: '#4A4A4A',
  backgroundColor: '#FFFFFF',
  fontFamily: 'Open Sans, sans-serif',
  activeTab: 'top',
  activeFloor: '0',
  activeDesign: '873032',
  uid: '94b725e8807b98d8bf38afa43e8b5eea726a9ffc06a3d06754530d658a010372',
  el: 'pop-widget',
  lang: 'ru'
  initialCamera: [
    {
      design: 873032,
      floor: 1,
      camera: 6
    }]
 });
</script>
```

### **Wiederdefinition von Parametern**

Planoplan ist ein globales Objekt.\
Um die Widget-Parameter erneut zu definieren, kehrt die **init()**-Methode das Exemplar der PopWidget-Klasse, das die Methode **reinit ()** benutzt, um. Sie stimmt mit der **init ()** -Methode überein und alle Einstellungen müssen neu angegeben werden, ansonsten werden sie, mit Ausnahme der Parameter **uid** und **el**, zurückgesetzt.

{% hint style="info" %}
Parameter **el** wird ignoriert\
Wenn Sie ein anderes **uid** angeben, wird ein anderes Projekt geladen.
{% endhint %}

#### **Beispiel von Wiederdefinition von Parametern**

```bash
var popWidget = Planoplan.init({
  width: '620px',
  height: '620px',
  uid: '94b725e8807b98d8bf38afa43e8b5eea726a9ffc06a3d06754530d658a010372',
  el: 'pop-widget',
  lang: 'de'
 });
 
 popWidget.reinit({width: '100%', height: '100%', lang: 'de'});
```

{% hint style="danger" %}
Wenn in diesem Beispiel die Sprache fehlt, dann wird sie aus den Admin-Einstellungen übernommen, sonst wird die erste verfügbare genommen.
{% endhint %}

### **Download–Ereignisse**

PopWidget Objekt hat 2 Callbacks:

**onload** – wenn api-Daten erfolgreich geladen sind

**onerror** – beim Upload-FehlerSie übermitteln **uid** und api-Version (3 oder 4)

#### ***Beispiel***

```bash
var popWidget = Planoplan.init({
  uid: '94b725e8807b98d8bf38afa43e8b5eea726a9ffc06a3d06754530d658a010372',
  el: 'pop-widget',
});
popWidget.on('load', (e) => {})
popWidget.on('error', (e) => {})

popWidget.onload((e) => {})
popWidget.onerror((e) => {})
```