# 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) => {})
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://kelnikug.gitbook.io/anleitung-widget-integration/master.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.