Support

Einbindungs-Dokumentation

Alles, was Sie brauchen, um den KI-Concierge / JustAsk in Ihre Website einzubinden.

Option 1: Iframe-Einbettung

Der einfachste Weg, den KI-Concierge / JustAsk in jede Website einzubinden — unabhängig vom Tech-Stack. Fügen Sie die folgenden Code-Snippets in Ihre Seite ein.

Ersetzen Sie die URL im Iframe durch den Link zu Ihrem KI-Concierge / JustAsk. Verwenden Sie dabei die volle URL mit https://, damit das Widget korrekt geladen wird. Um dem KI-Concierge / JustAsk mitzuteilen, dass er auf Ihrer Seite eingebunden ist, können Sie in der URL einen Query-Parameter ?is-in-website=true hinzufügen. Beispiel: https://simplyai.simplyai.at?is-in-website=true.

CSS

/* KI-Concierge / JustAsk Chatbot CSS */
#ki-concierge-justask-chatbot-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
}
#ki-concierge-justask-chatbot-button {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
#ki-concierge-justask-chatbot-iframe-container {
    position: absolute;
    bottom: 80px;
    right: 0;
    display: none;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    overflow: hidden;
    max-height: calc(100vh - 120px);
}
#ki-concierge-justask-chatbot-iframe-container.show {
    display: block;
}

@media (max-width: 768px) {
    #ki-concierge-justask-chatbot-iframe-container {
        width: calc(100vw - 40px) !important;
        left: 20px;
        right: 20px;
        bottom: 100px;
    }
    #ki-concierge-justask-chatbot-iframe-container.show {
        position: fixed;
    }
}

HTML

<!-- KI-Concierge / JustAsk Chatbot Embed Snippet -->
<div id="ki-concierge-justask-chatbot-container">
    <div id="ki-concierge-justask-chatbot-button"
         style="background-color: #007bff;"
         onclick="document.getElementById('ki-concierge-justask-chatbot-iframe-container').classList.toggle('show')">
        <svg xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 24 24" fill="#ffffff"
             width="40px" height="40px">
            <path d="M21 6h-2v9H6v2c0 .55.45 1 1 1h11l4 4V7c0-.55-.45-1-1-1zm-4 6V3c0-.55-.45-1-1-1H3c-.55 0-1 .45-1 1v14l4-4h10c.55 0 1-.45 1-1z"/>
        </svg>
    </div>
    <div id="ki-concierge-justask-chatbot-iframe-container"
         style="width: 400px; height: 750px;">
        <iframe
            src="<Link zu Ihrem KI-Concierge / JustAsk>"
            style="width: 100%; height: 100%; border: none;">
        </iframe>
    </div>
</div>
<!-- End KI-Concierge / JustAsk Chatbot Embed Snippet -->

Anpassung

Eigenschaft	Standard	Beschreibung
`width`	`400px`	Breite des Chat-Fensters
`height`	`750px`	Höhe des Chat-Fensters
`max-height`	`calc(100vh - 120px)`	Verhindert Abschneiden auf gezoomten Bildschirmen
`max-width`	`95vw`	Maximale Breite auf kleinen Bildschirmen
`background-color (Button)`	`#007bff`	Hintergrundfarbe des Chat-Buttons
`fill (SVG-Icon)`	`#ffffff`	Farbe des Icons im Button
`border-radius`	`10px`	Eckenrundung des Chat-Fensters

Tipp: Das Snippet enthält bereits responsive Anpassungen für mobile Geräte (Bildschirme unter 768px Breite).

Brauchen Sie Hilfe?

Probleme bei der Integration oder Bedarf an einer individuellen Lösung? Wir helfen gerne.

Kontakt aufnehmen

Zurück zur Startseite