Instalace do jednostránkové aplikace (React, Vue, Next.js)
Vložte chat jednou do hlavního HTML nebo společného layoutu aplikace v Reactu, Vue, Next.js či Nuxtu. Návod vysvětluje, kam kód patří a jak ověřit přechody mezi stránkami.
Zkopírujte kód widgetu
V aplikaci otevřete Chatbot → Instalace a v kartě Instalační kód klikněte na Kopírovat. Kód obsahuje vaše unikátní ID v parametru
orgId; nic v něm neupravujte.Otevřít Instalaci v aplikaci<script src="https://cdn.odpovio.cz/widget.js?orgId=VASE-ID"></script>Vložte kód jednou do kořene aplikace
Kód vložte jednou do hlavního HTML souboru (
index.html) nebo do kořenového layoutu aplikace, ne do jednotlivých komponent či stránek. Skript vložený do komponenty, která se vykresluje opakovaně, by se pokoušel načíst znovu a znovu.- React (Vite, Create React App) –
index.htmlpřed</body>. - Vue / Nuxt –
index.html, u Nuxtu konfiguraceapp.headnebo kořenový layout. - Next.js – kořenový layout (
app/layout) nebopages/_document.
<!-- index.html nebo kořenový layout --> <div id="root"></div> <script src="https://cdn.odpovio.cz/widget.js?orgId=VASE-ID"></script> </body> </html>- React (Vite, Create React App) –
Jak se widget chová při přechodech
Widget se při načtení připojí k
<body>a při přechodech mezi stránkami bez znovunačtení (client-side routing) zůstává na místě. Rozepsaná konverzace se návštěvníkovi drží 24 hodin i přes obnovení stránky, takže přechod mezi částmi aplikace ji nepřeruší.Widget běží ve vlastním stínovém DOM a do stylů ani stavu aplikace nezasahuje. Používáte přísnou hlavičku Content-Security-Policy? Seznam povolených zdrojů je v návodu Instalace na vlastní web.
Ověřte, že se widget načítá
Otevřete web v anonymním okně. Widget se má zobrazit v rohu na všech stránkách. Projděte několik stránek aplikace bez obnovení – widget má zůstat.
V aplikaci klikněte v kartě Ověření instalace na Ověřit instalaci a zkontrolujte, že pole Povolená doména odpovídá adrese, na které web běží (včetně případného
www). Postup a nejčastější příčiny potíží popisuje návod Ověření instalace.Hotovo!
Widget běží. Vzhled a chování měníte v aplikaci Odpovio, změny se projeví během několika minut bez nového nasazení aplikace.
Ověřit instalaci