SimplyAI

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

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

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