[{"data":1,"prerenderedAt":805},["ShallowReactive",2],{"docs-/docs/widget/html":3},{"id":4,"title":5,"body":6,"description":798,"extension":799,"meta":800,"navigation":123,"path":801,"seo":802,"stem":803,"__hash__":804},"content/docs/widget/html.md","HTML Installation",{"type":7,"value":8,"toc":785},"minimark",[9,13,18,26,198,202,207,214,282,286,297,336,340,343,439,443,449,600,604,607,611,755,759,762,781],[10,11,12],"p",{},"The Grounded widget works on any website that supports custom HTML and JavaScript.",[14,15,17],"h2",{"id":16},"basic-installation","Basic Installation",[10,19,20,21,25],{},"Add this code before the closing ",[22,23,24],"code",{},"\u003C/body>"," tag:",[27,28,33],"pre",{"className":29,"code":30,"language":31,"meta":32,"style":32},"language-html shiki shiki-themes github-dark","\u003C!DOCTYPE html>\n\u003Chtml>\n\u003Chead>\n  \u003Ctitle>Your Website\u003C/title>\n\u003C/head>\n\u003Cbody>\n  \u003C!-- Your website content -->\n\n  \u003C!-- Grounded Chat Widget -->\n  \u003Cscript\n    src=\"https://grounded.sh/widget/grounded-widget.js\"\n    data-chatbot-id=\"YOUR_CHATBOT_ID\"\n    async\n  >\u003C/script>\n\u003C/body>\n\u003C/html>\n","html","",[22,34,35,55,65,75,91,101,111,118,125,131,139,152,163,169,180,189],{"__ignoreMap":32},[36,37,40,44,48,52],"span",{"class":38,"line":39},"line",1,[36,41,43],{"class":42},"s95oV","\u003C!",[36,45,47],{"class":46},"s4JwU","DOCTYPE",[36,49,51],{"class":50},"svObZ"," html",[36,53,54],{"class":42},">\n",[36,56,58,61,63],{"class":38,"line":57},2,[36,59,60],{"class":42},"\u003C",[36,62,31],{"class":46},[36,64,54],{"class":42},[36,66,68,70,73],{"class":38,"line":67},3,[36,69,60],{"class":42},[36,71,72],{"class":46},"head",[36,74,54],{"class":42},[36,76,78,81,84,87,89],{"class":38,"line":77},4,[36,79,80],{"class":42},"  \u003C",[36,82,83],{"class":46},"title",[36,85,86],{"class":42},">Your Website\u003C/",[36,88,83],{"class":46},[36,90,54],{"class":42},[36,92,94,97,99],{"class":38,"line":93},5,[36,95,96],{"class":42},"\u003C/",[36,98,72],{"class":46},[36,100,54],{"class":42},[36,102,104,106,109],{"class":38,"line":103},6,[36,105,60],{"class":42},[36,107,108],{"class":46},"body",[36,110,54],{"class":42},[36,112,114],{"class":38,"line":113},7,[36,115,117],{"class":116},"sAwPA","  \u003C!-- Your website content -->\n",[36,119,121],{"class":38,"line":120},8,[36,122,124],{"emptyLinePlaceholder":123},true,"\n",[36,126,128],{"class":38,"line":127},9,[36,129,130],{"class":116},"  \u003C!-- Grounded Chat Widget -->\n",[36,132,134,136],{"class":38,"line":133},10,[36,135,80],{"class":42},[36,137,138],{"class":46},"script\n",[36,140,142,145,148],{"class":38,"line":141},11,[36,143,144],{"class":50},"    src",[36,146,147],{"class":42},"=",[36,149,151],{"class":150},"sU2Wk","\"https://grounded.sh/widget/grounded-widget.js\"\n",[36,153,155,158,160],{"class":38,"line":154},12,[36,156,157],{"class":50},"    data-chatbot-id",[36,159,147],{"class":42},[36,161,162],{"class":150},"\"YOUR_CHATBOT_ID\"\n",[36,164,166],{"class":38,"line":165},13,[36,167,168],{"class":50},"    async\n",[36,170,172,175,178],{"class":38,"line":171},14,[36,173,174],{"class":42},"  >\u003C/",[36,176,177],{"class":46},"script",[36,179,54],{"class":42},[36,181,183,185,187],{"class":38,"line":182},15,[36,184,96],{"class":42},[36,186,108],{"class":46},[36,188,54],{"class":42},[36,190,192,194,196],{"class":38,"line":191},16,[36,193,96],{"class":42},[36,195,31],{"class":46},[36,197,54],{"class":42},[14,199,201],{"id":200},"static-site-generators","Static Site Generators",[203,204,206],"h3",{"id":205},"hugo","Hugo",[10,208,209,210,213],{},"Add to your base template (",[22,211,212],{},"layouts/_default/baseof.html","):",[27,215,217],{"className":29,"code":216,"language":31,"meta":32,"style":32},"{{ partial \"footer.html\" . }}\n\n\u003Cscript\n  src=\"https://grounded.sh/widget/grounded-widget.js\"\n  data-chatbot-id=\"YOUR_CHATBOT_ID\"\n  async\n>\u003C/script>\n\u003C/body>\n\u003C/html>\n",[22,218,219,224,228,234,243,252,257,266,274],{"__ignoreMap":32},[36,220,221],{"class":38,"line":39},[36,222,223],{"class":42},"{{ partial \"footer.html\" . }}\n",[36,225,226],{"class":38,"line":57},[36,227,124],{"emptyLinePlaceholder":123},[36,229,230,232],{"class":38,"line":67},[36,231,60],{"class":42},[36,233,138],{"class":46},[36,235,236,239,241],{"class":38,"line":77},[36,237,238],{"class":50},"  src",[36,240,147],{"class":42},[36,242,151],{"class":150},[36,244,245,248,250],{"class":38,"line":93},[36,246,247],{"class":50},"  data-chatbot-id",[36,249,147],{"class":42},[36,251,162],{"class":150},[36,253,254],{"class":38,"line":103},[36,255,256],{"class":50},"  async\n",[36,258,259,262,264],{"class":38,"line":113},[36,260,261],{"class":42},">\u003C/",[36,263,177],{"class":46},[36,265,54],{"class":42},[36,267,268,270,272],{"class":38,"line":120},[36,269,96],{"class":42},[36,271,108],{"class":46},[36,273,54],{"class":42},[36,275,276,278,280],{"class":38,"line":127},[36,277,96],{"class":42},[36,279,31],{"class":46},[36,281,54],{"class":42},[203,283,285],{"id":284},"jekyll","Jekyll",[10,287,288,289,292,293,296],{},"Add to ",[22,290,291],{},"_includes/footer.html"," or ",[22,294,295],{},"_layouts/default.html",":",[27,298,300],{"className":29,"code":299,"language":31,"meta":32,"style":32},"\u003Cscript\n  src=\"https://grounded.sh/widget/grounded-widget.js\"\n  data-chatbot-id=\"YOUR_CHATBOT_ID\"\n  async\n>\u003C/script>\n",[22,301,302,308,316,324,328],{"__ignoreMap":32},[36,303,304,306],{"class":38,"line":39},[36,305,60],{"class":42},[36,307,138],{"class":46},[36,309,310,312,314],{"class":38,"line":57},[36,311,238],{"class":50},[36,313,147],{"class":42},[36,315,151],{"class":150},[36,317,318,320,322],{"class":38,"line":67},[36,319,247],{"class":50},[36,321,147],{"class":42},[36,323,162],{"class":150},[36,325,326],{"class":38,"line":77},[36,327,256],{"class":50},[36,329,330,332,334],{"class":38,"line":93},[36,331,261],{"class":42},[36,333,177],{"class":46},[36,335,54],{"class":42},[203,337,339],{"id":338},"astro","Astro",[10,341,342],{},"Add to your layout component:",[27,344,347],{"className":345,"code":346,"language":338,"meta":32,"style":32},"language-astro shiki shiki-themes github-dark","---\n// src/layouts/Layout.astro\n---\n\u003Chtml>\n\u003Cbody>\n  \u003Cslot />\n  \u003Cscript\n    src=\"https://grounded.sh/widget/grounded-widget.js\"\n    data-chatbot-id=\"YOUR_CHATBOT_ID\"\n    async\n  >\u003C/script>\n\u003C/body>\n\u003C/html>\n",[22,348,349,354,359,363,371,379,389,395,403,411,415,423,431],{"__ignoreMap":32},[36,350,351],{"class":38,"line":39},[36,352,353],{"class":116},"---\n",[36,355,356],{"class":38,"line":57},[36,357,358],{"class":116},"// src/layouts/Layout.astro\n",[36,360,361],{"class":38,"line":67},[36,362,353],{"class":116},[36,364,365,367,369],{"class":38,"line":77},[36,366,60],{"class":42},[36,368,31],{"class":46},[36,370,54],{"class":42},[36,372,373,375,377],{"class":38,"line":93},[36,374,60],{"class":42},[36,376,108],{"class":46},[36,378,54],{"class":42},[36,380,381,383,386],{"class":38,"line":103},[36,382,80],{"class":42},[36,384,385],{"class":46},"slot",[36,387,388],{"class":42}," />\n",[36,390,391,393],{"class":38,"line":113},[36,392,80],{"class":42},[36,394,138],{"class":46},[36,396,397,399,401],{"class":38,"line":120},[36,398,144],{"class":50},[36,400,147],{"class":42},[36,402,151],{"class":150},[36,404,405,407,409],{"class":38,"line":127},[36,406,157],{"class":50},[36,408,147],{"class":42},[36,410,162],{"class":150},[36,412,413],{"class":38,"line":133},[36,414,168],{"class":50},[36,416,417,419,421],{"class":38,"line":141},[36,418,174],{"class":42},[36,420,177],{"class":46},[36,422,54],{"class":42},[36,424,425,427,429],{"class":38,"line":154},[36,426,96],{"class":42},[36,428,108],{"class":46},[36,430,54],{"class":42},[36,432,433,435,437],{"class":38,"line":165},[36,434,96],{"class":42},[36,436,31],{"class":46},[36,438,54],{"class":42},[203,440,442],{"id":441},"nextjs","Next.js",[10,444,288,445,448],{},[22,446,447],{},"pages/_document.tsx"," or use the Script component:",[27,450,454],{"className":451,"code":452,"language":453,"meta":32,"style":32},"language-tsx shiki shiki-themes github-dark","import Script from 'next/script'\n\nexport default function RootLayout({ children }) {\n  return (\n    \u003Chtml>\n      \u003Cbody>\n        {children}\n        \u003CScript\n          src=\"https://grounded.sh/widget/grounded-widget.js\"\n          data-chatbot-id=\"YOUR_CHATBOT_ID\"\n          strategy=\"lazyOnload\"\n        />\n      \u003C/body>\n    \u003C/html>\n  )\n}\n","tsx",[22,455,456,471,475,499,507,516,525,530,539,548,557,567,572,581,590,595],{"__ignoreMap":32},[36,457,458,462,465,468],{"class":38,"line":39},[36,459,461],{"class":460},"snl16","import",[36,463,464],{"class":42}," Script ",[36,466,467],{"class":460},"from",[36,469,470],{"class":150}," 'next/script'\n",[36,472,473],{"class":38,"line":57},[36,474,124],{"emptyLinePlaceholder":123},[36,476,477,480,483,486,489,492,496],{"class":38,"line":67},[36,478,479],{"class":460},"export",[36,481,482],{"class":460}," default",[36,484,485],{"class":460}," function",[36,487,488],{"class":50}," RootLayout",[36,490,491],{"class":42},"({ ",[36,493,495],{"class":494},"s9osk","children",[36,497,498],{"class":42}," }) {\n",[36,500,501,504],{"class":38,"line":77},[36,502,503],{"class":460},"  return",[36,505,506],{"class":42}," (\n",[36,508,509,512,514],{"class":38,"line":93},[36,510,511],{"class":42},"    \u003C",[36,513,31],{"class":46},[36,515,54],{"class":42},[36,517,518,521,523],{"class":38,"line":103},[36,519,520],{"class":42},"      \u003C",[36,522,108],{"class":46},[36,524,54],{"class":42},[36,526,527],{"class":38,"line":113},[36,528,529],{"class":42},"        {children}\n",[36,531,532,535],{"class":38,"line":120},[36,533,534],{"class":42},"        \u003C",[36,536,538],{"class":537},"sDLfK","Script\n",[36,540,541,544,546],{"class":38,"line":127},[36,542,543],{"class":50},"          src",[36,545,147],{"class":460},[36,547,151],{"class":150},[36,549,550,553,555],{"class":38,"line":133},[36,551,552],{"class":50},"          data-chatbot-id",[36,554,147],{"class":460},[36,556,162],{"class":150},[36,558,559,562,564],{"class":38,"line":141},[36,560,561],{"class":50},"          strategy",[36,563,147],{"class":460},[36,565,566],{"class":150},"\"lazyOnload\"\n",[36,568,569],{"class":38,"line":154},[36,570,571],{"class":42},"        />\n",[36,573,574,577,579],{"class":38,"line":165},[36,575,576],{"class":42},"      \u003C/",[36,578,108],{"class":46},[36,580,54],{"class":42},[36,582,583,586,588],{"class":38,"line":171},[36,584,585],{"class":42},"    \u003C/",[36,587,31],{"class":46},[36,589,54],{"class":42},[36,591,592],{"class":38,"line":182},[36,593,594],{"class":42},"  )\n",[36,596,597],{"class":38,"line":191},[36,598,599],{"class":42},"}\n",[14,601,603],{"id":602},"single-page-applications-spa","Single Page Applications (SPA)",[10,605,606],{},"For React, Vue, or Angular apps, load the widget once in your root component or index.html.",[203,608,610],{"id":609},"react-example","React Example",[27,612,616],{"className":613,"code":614,"language":615,"meta":32,"style":32},"language-jsx shiki shiki-themes github-dark","// In App.jsx or index.js\nuseEffect(() => {\n  const script = document.createElement('script');\n  script.src = 'https://grounded.sh/widget/grounded-widget.js';\n  script.setAttribute('data-chatbot-id', 'YOUR_CHATBOT_ID');\n  script.async = true;\n  document.body.appendChild(script);\n\n  return () => {\n    document.body.removeChild(script);\n  };\n}, []);\n","jsx",[22,617,618,623,637,663,676,697,709,720,724,735,745,750],{"__ignoreMap":32},[36,619,620],{"class":38,"line":39},[36,621,622],{"class":116},"// In App.jsx or index.js\n",[36,624,625,628,631,634],{"class":38,"line":57},[36,626,627],{"class":50},"useEffect",[36,629,630],{"class":42},"(() ",[36,632,633],{"class":460},"=>",[36,635,636],{"class":42}," {\n",[36,638,639,642,645,648,651,654,657,660],{"class":38,"line":67},[36,640,641],{"class":460},"  const",[36,643,644],{"class":537}," script",[36,646,647],{"class":460}," =",[36,649,650],{"class":42}," document.",[36,652,653],{"class":50},"createElement",[36,655,656],{"class":42},"(",[36,658,659],{"class":150},"'script'",[36,661,662],{"class":42},");\n",[36,664,665,668,670,673],{"class":38,"line":77},[36,666,667],{"class":42},"  script.src ",[36,669,147],{"class":460},[36,671,672],{"class":150}," 'https://grounded.sh/widget/grounded-widget.js'",[36,674,675],{"class":42},";\n",[36,677,678,681,684,686,689,692,695],{"class":38,"line":93},[36,679,680],{"class":42},"  script.",[36,682,683],{"class":50},"setAttribute",[36,685,656],{"class":42},[36,687,688],{"class":150},"'data-chatbot-id'",[36,690,691],{"class":42},", ",[36,693,694],{"class":150},"'YOUR_CHATBOT_ID'",[36,696,662],{"class":42},[36,698,699,702,704,707],{"class":38,"line":103},[36,700,701],{"class":42},"  script.async ",[36,703,147],{"class":460},[36,705,706],{"class":537}," true",[36,708,675],{"class":42},[36,710,711,714,717],{"class":38,"line":113},[36,712,713],{"class":42},"  document.body.",[36,715,716],{"class":50},"appendChild",[36,718,719],{"class":42},"(script);\n",[36,721,722],{"class":38,"line":120},[36,723,124],{"emptyLinePlaceholder":123},[36,725,726,728,731,733],{"class":38,"line":127},[36,727,503],{"class":460},[36,729,730],{"class":42}," () ",[36,732,633],{"class":460},[36,734,636],{"class":42},[36,736,737,740,743],{"class":38,"line":133},[36,738,739],{"class":42},"    document.body.",[36,741,742],{"class":50},"removeChild",[36,744,719],{"class":42},[36,746,747],{"class":38,"line":141},[36,748,749],{"class":42},"  };\n",[36,751,752],{"class":38,"line":154},[36,753,754],{"class":42},"}, []);\n",[14,756,758],{"id":757},"verification","Verification",[10,760,761],{},"After installation:",[763,764,765,769,772,775,778],"ol",{},[766,767,768],"li",{},"Open your website in a browser",[766,770,771],{},"Open Developer Tools (F12)",[766,773,774],{},"Check the Console for any errors",[766,776,777],{},"Look for the chat bubble in the bottom corner",[766,779,780],{},"Click to test a conversation",[782,783,784],"style",{},"html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}",{"title":32,"searchDepth":57,"depth":57,"links":786},[787,788,794,797],{"id":16,"depth":57,"text":17},{"id":200,"depth":57,"text":201,"children":789},[790,791,792,793],{"id":205,"depth":67,"text":206},{"id":284,"depth":67,"text":285},{"id":338,"depth":67,"text":339},{"id":441,"depth":67,"text":442},{"id":602,"depth":57,"text":603,"children":795},[796],{"id":609,"depth":67,"text":610},{"id":757,"depth":57,"text":758},"Add Grounded chat widget to any HTML website.","md",{},"/docs/widget/html",{"title":5,"description":798},"docs/widget/html","TbO6Z-Kub-PDNS5Dn_0FItDw1O5nJIbbMwFmZL-XhcM",1778619021360]