[{"data":1,"prerenderedAt":687},["ShallowReactive",2],{"docs-/docs/widget/customization":3},{"id":4,"title":5,"body":6,"description":680,"extension":681,"meta":682,"navigation":335,"path":683,"seo":684,"stem":685,"__hash__":686},"content/docs/widget/customization.md","Widget Customization",{"type":7,"value":8,"toc":666},"minimark",[9,13,18,21,43,48,118,122,125,224,228,293,297,300,412,419,423,426,515,519,522,574,577,606,610,613,633,639,643,646,662],[10,11,12],"p",{},"Customize the Grounded widget to match your brand and user experience requirements.",[14,15,17],"h2",{"id":16},"dashboard-settings","Dashboard Settings",[10,19,20],{},"Most customization options are available in your chatbot settings:",[22,23,24,33,36],"ol",{},[25,26,27,28],"li",{},"Go to your ",[29,30,32],"a",{"href":31},"/dashboard","Dashboard",[25,34,35],{},"Select your chatbot",[25,37,38,39],{},"Click ",[40,41,42],"strong",{},"Settings",[44,45,47],"h3",{"id":46},"appearance-options","Appearance Options",[49,50,51,64],"table",{},[52,53,54],"thead",{},[55,56,57,61],"tr",{},[58,59,60],"th",{},"Setting",[58,62,63],{},"Description",[65,66,67,78,88,98,108],"tbody",{},[55,68,69,75],{},[70,71,72],"td",{},[40,73,74],{},"Widget Name",[70,76,77],{},"Displayed in the chat header",[55,79,80,85],{},[70,81,82],{},[40,83,84],{},"Welcome Message",[70,86,87],{},"First message shown to visitors",[55,89,90,95],{},[70,91,92],{},[40,93,94],{},"Primary Color",[70,96,97],{},"Button and accent color",[55,99,100,105],{},[70,101,102],{},[40,103,104],{},"Position",[70,106,107],{},"Bottom-right or bottom-left",[55,109,110,115],{},[70,111,112],{},[40,113,114],{},"Avatar",[70,116,117],{},"Upload a custom avatar image",[14,119,121],{"id":120},"data-attributes","Data Attributes",[10,123,124],{},"Override settings with HTML data attributes:",[126,127,132],"pre",{"className":128,"code":129,"language":130,"meta":131,"style":131},"language-html shiki shiki-themes github-dark","\u003Cscript\n  src=\"https://grounded.sh/widget/grounded-widget.js\"\n  data-chatbot-id=\"YOUR_CHATBOT_ID\"\n  data-position=\"bottom-left\"\n  data-primary-color=\"#4f46e5\"\n  data-welcome-message=\"Hi! How can I help you today?\"\n  async\n>\u003C/script>\n","html","",[133,134,135,148,162,173,184,195,206,212],"code",{"__ignoreMap":131},[136,137,140,144],"span",{"class":138,"line":139},"line",1,[136,141,143],{"class":142},"s95oV","\u003C",[136,145,147],{"class":146},"s4JwU","script\n",[136,149,151,155,158],{"class":138,"line":150},2,[136,152,154],{"class":153},"svObZ","  src",[136,156,157],{"class":142},"=",[136,159,161],{"class":160},"sU2Wk","\"https://grounded.sh/widget/grounded-widget.js\"\n",[136,163,165,168,170],{"class":138,"line":164},3,[136,166,167],{"class":153},"  data-chatbot-id",[136,169,157],{"class":142},[136,171,172],{"class":160},"\"YOUR_CHATBOT_ID\"\n",[136,174,176,179,181],{"class":138,"line":175},4,[136,177,178],{"class":153},"  data-position",[136,180,157],{"class":142},[136,182,183],{"class":160},"\"bottom-left\"\n",[136,185,187,190,192],{"class":138,"line":186},5,[136,188,189],{"class":153},"  data-primary-color",[136,191,157],{"class":142},[136,193,194],{"class":160},"\"#4f46e5\"\n",[136,196,198,201,203],{"class":138,"line":197},6,[136,199,200],{"class":153},"  data-welcome-message",[136,202,157],{"class":142},[136,204,205],{"class":160},"\"Hi! How can I help you today?\"\n",[136,207,209],{"class":138,"line":208},7,[136,210,211],{"class":153},"  async\n",[136,213,215,218,221],{"class":138,"line":214},8,[136,216,217],{"class":142},">\u003C/",[136,219,220],{"class":146},"script",[136,222,223],{"class":142},">\n",[44,225,227],{"id":226},"available-attributes","Available Attributes",[49,229,230,242],{},[52,231,232],{},[55,233,234,237,240],{},[58,235,236],{},"Attribute",[58,238,239],{},"Values",[58,241,63],{},[65,243,244,263,280],{},[55,245,246,251,260],{},[70,247,248],{},[133,249,250],{},"data-position",[70,252,253,256,257],{},[133,254,255],{},"bottom-right",", ",[133,258,259],{},"bottom-left",[70,261,262],{},"Widget position",[55,264,265,270,277],{},[70,266,267],{},[133,268,269],{},"data-primary-color",[70,271,272,273,276],{},"Hex color (e.g., ",[133,274,275],{},"#4f46e5",")",[70,278,279],{},"Primary color",[55,281,282,287,290],{},[70,283,284],{},[133,285,286],{},"data-welcome-message",[70,288,289],{},"String",[70,291,292],{},"Override welcome message",[14,294,296],{"id":295},"css-customization","CSS Customization",[10,298,299],{},"For advanced styling, target the widget's CSS classes:",[126,301,305],{"className":302,"code":303,"language":304,"meta":131,"style":131},"language-css shiki shiki-themes github-dark","/* Custom widget button */\n#grounded-widget-button {\n  /* Your styles */\n}\n\n/* Chat container */\n#grounded-widget-container {\n  /* Your styles */\n}\n\n/* Message bubbles */\n.grounded-message-bot {\n  /* Bot message styles */\n}\n\n.grounded-message-user {\n  /* User message styles */\n}\n","css",[133,306,307,313,321,326,331,337,342,349,353,358,363,369,377,383,388,393,401,407],{"__ignoreMap":131},[136,308,309],{"class":138,"line":139},[136,310,312],{"class":311},"sAwPA","/* Custom widget button */\n",[136,314,315,318],{"class":138,"line":150},[136,316,317],{"class":153},"#grounded-widget-button",[136,319,320],{"class":142}," {\n",[136,322,323],{"class":138,"line":164},[136,324,325],{"class":311},"  /* Your styles */\n",[136,327,328],{"class":138,"line":175},[136,329,330],{"class":142},"}\n",[136,332,333],{"class":138,"line":186},[136,334,336],{"emptyLinePlaceholder":335},true,"\n",[136,338,339],{"class":138,"line":197},[136,340,341],{"class":311},"/* Chat container */\n",[136,343,344,347],{"class":138,"line":208},[136,345,346],{"class":153},"#grounded-widget-container",[136,348,320],{"class":142},[136,350,351],{"class":138,"line":214},[136,352,325],{"class":311},[136,354,356],{"class":138,"line":355},9,[136,357,330],{"class":142},[136,359,361],{"class":138,"line":360},10,[136,362,336],{"emptyLinePlaceholder":335},[136,364,366],{"class":138,"line":365},11,[136,367,368],{"class":311},"/* Message bubbles */\n",[136,370,372,375],{"class":138,"line":371},12,[136,373,374],{"class":153},".grounded-message-bot",[136,376,320],{"class":142},[136,378,380],{"class":138,"line":379},13,[136,381,382],{"class":311},"  /* Bot message styles */\n",[136,384,386],{"class":138,"line":385},14,[136,387,330],{"class":142},[136,389,391],{"class":138,"line":390},15,[136,392,336],{"emptyLinePlaceholder":335},[136,394,396,399],{"class":138,"line":395},16,[136,397,398],{"class":153},".grounded-message-user",[136,400,320],{"class":142},[136,402,404],{"class":138,"line":403},17,[136,405,406],{"class":311},"  /* User message styles */\n",[136,408,410],{"class":138,"line":409},18,[136,411,330],{"class":142},[413,414,416],"docs-callout",{"type":415},"warning",[10,417,418],{},"CSS class names may change between versions. Use these sparingly and test after updates.",[14,420,422],{"id":421},"programmatic-control","Programmatic Control",[10,424,425],{},"Control the widget with JavaScript:",[126,427,431],{"className":428,"code":429,"language":430,"meta":131,"style":131},"language-javascript shiki shiki-themes github-dark","// Open the widget\nwindow.GroundedWidget.open();\n\n// Close the widget\nwindow.GroundedWidget.close();\n\n// Toggle the widget\nwindow.GroundedWidget.toggle();\n\n// Check if widget is open\nconst isOpen = window.GroundedWidget.isOpen();\n","javascript",[133,432,433,438,449,453,458,467,471,476,485,489,494],{"__ignoreMap":131},[136,434,435],{"class":138,"line":139},[136,436,437],{"class":311},"// Open the widget\n",[136,439,440,443,446],{"class":138,"line":150},[136,441,442],{"class":142},"window.GroundedWidget.",[136,444,445],{"class":153},"open",[136,447,448],{"class":142},"();\n",[136,450,451],{"class":138,"line":164},[136,452,336],{"emptyLinePlaceholder":335},[136,454,455],{"class":138,"line":175},[136,456,457],{"class":311},"// Close the widget\n",[136,459,460,462,465],{"class":138,"line":186},[136,461,442],{"class":142},[136,463,464],{"class":153},"close",[136,466,448],{"class":142},[136,468,469],{"class":138,"line":197},[136,470,336],{"emptyLinePlaceholder":335},[136,472,473],{"class":138,"line":208},[136,474,475],{"class":311},"// Toggle the widget\n",[136,477,478,480,483],{"class":138,"line":214},[136,479,442],{"class":142},[136,481,482],{"class":153},"toggle",[136,484,448],{"class":142},[136,486,487],{"class":138,"line":355},[136,488,336],{"emptyLinePlaceholder":335},[136,490,491],{"class":138,"line":360},[136,492,493],{"class":311},"// Check if widget is open\n",[136,495,496,500,504,507,510,513],{"class":138,"line":365},[136,497,499],{"class":498},"snl16","const",[136,501,503],{"class":502},"sDLfK"," isOpen",[136,505,506],{"class":498}," =",[136,508,509],{"class":142}," window.GroundedWidget.",[136,511,512],{"class":153},"isOpen",[136,514,448],{"class":142},[44,516,518],{"id":517},"custom-trigger-buttons","Custom Trigger Buttons",[10,520,521],{},"Create your own chat button:",[126,523,525],{"className":128,"code":524,"language":130,"meta":131,"style":131},"\u003Cbutton onclick=\"window.GroundedWidget.open()\">\n  Chat with us\n\u003C/button>\n",[133,526,527,560,565],{"__ignoreMap":131},[136,528,529,531,534,537,539,542,545,548,551,553,555,558],{"class":138,"line":139},[136,530,143],{"class":142},[136,532,533],{"class":146},"button",[136,535,536],{"class":153}," onclick",[136,538,157],{"class":142},[136,540,541],{"class":160},"\"",[136,543,544],{"class":142},"window",[136,546,547],{"class":160},".",[136,549,550],{"class":142},"GroundedWidget",[136,552,547],{"class":160},[136,554,445],{"class":153},[136,556,557],{"class":160},"()\"",[136,559,223],{"class":142},[136,561,562],{"class":138,"line":150},[136,563,564],{"class":142},"  Chat with us\n",[136,566,567,570,572],{"class":138,"line":164},[136,568,569],{"class":142},"\u003C/",[136,571,533],{"class":146},[136,573,223],{"class":142},[10,575,576],{},"To hide the default button, add CSS:",[126,578,580],{"className":302,"code":579,"language":304,"meta":131,"style":131},"#grounded-widget-button {\n  display: none;\n}\n",[133,581,582,588,602],{"__ignoreMap":131},[136,583,584,586],{"class":138,"line":139},[136,585,317],{"class":153},[136,587,320],{"class":142},[136,589,590,593,596,599],{"class":138,"line":150},[136,591,592],{"class":502},"  display",[136,594,595],{"class":142},": ",[136,597,598],{"class":502},"none",[136,600,601],{"class":142},";\n",[136,603,604],{"class":138,"line":164},[136,605,330],{"class":142},[14,607,609],{"id":608},"domain-restrictions","Domain Restrictions",[10,611,612],{},"Restrict where your widget can be embedded:",[22,614,615,624,630],{},[25,616,617,618,620,621],{},"Go to ",[40,619,42],{}," > ",[40,622,623],{},"Security",[25,625,626,627],{},"Add allowed domains under ",[40,628,629],{},"Allowed Domains",[25,631,632],{},"Only listed domains can use your widget",[413,634,636],{"type":635},"info",[10,637,638],{},"Leave the allowed domains empty to allow embedding on any domain (useful for development).",[14,640,642],{"id":641},"mobile-optimization","Mobile Optimization",[10,644,645],{},"The widget is mobile-responsive by default. For best results:",[647,648,649,652,659],"ul",{},[25,650,651],{},"Test on actual mobile devices",[25,653,654,655,658],{},"Ensure your site doesn't have ",[133,656,657],{},"overflow: hidden"," on body",[25,660,661],{},"The widget adapts to screen size automatically",[663,664,665],"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 .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 .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}",{"title":131,"searchDepth":150,"depth":150,"links":667},[668,671,674,675,678,679],{"id":16,"depth":150,"text":17,"children":669},[670],{"id":46,"depth":164,"text":47},{"id":120,"depth":150,"text":121,"children":672},[673],{"id":226,"depth":164,"text":227},{"id":295,"depth":150,"text":296},{"id":421,"depth":150,"text":422,"children":676},[677],{"id":517,"depth":164,"text":518},{"id":608,"depth":150,"text":609},{"id":641,"depth":150,"text":642},"Customize the appearance and behavior of your chat widget.","md",{},"/docs/widget/customization",{"title":5,"description":680},"docs/widget/customization","ntDfi-Efs9EmUAndrAQ9Kl5PMw2HTDPCVz31KftRhCo",1778619021398]