[{"data":1,"prerenderedAt":272},["ShallowReactive",2],{"\u002Fintegrations\u002Fastro":3},{"id":4,"title":5,"body":6,"description":264,"extension":265,"icon":266,"meta":267,"navigation":179,"path":268,"seo":269,"stem":270,"__hash__":271},"integrations\u002Fintegrations\u002Fastro.md","Add comments to an Astro site",{"type":7,"value":8,"toc":257},"minimark",[9,17,218,221,226,253],[10,11,12,16],"p",{},[13,14,15],"code",{},"\u003Ccrow-comments>"," is a standard web component. Astro renders it as plain HTML, and the script turns it into a comment section in the browser.",[18,19,21,26,39,43,54,135,139,142,207,211],"steps",{"level":20},"3",[22,23,25],"h3",{"id":24},"create-a-widget","Create a widget",[10,27,28,33,34,38],{},[29,30,32],"a",{"href":31},"\u002Flogin","Sign in to Crowment",", create a comment widget for your site's domain and copy its app key from ",[35,36,37],"strong",{},"Install & Embed",".",[22,40,42],{"id":41},"load-the-script-once-in-your-layout","Load the script once in your layout",[10,44,45,46,49,50,53],{},"Add the script to the ",[13,47,48],{},"\u003Chead>"," of your base layout. ",[13,51,52],{},"is:inline"," tells Astro to leave the external script as it is.",[55,56,62],"pre",{"className":57,"code":58,"filename":59,"language":60,"meta":61,"style":61},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Chead>\n  \u003C!-- your existing head tags -->\n  \u003Cscript is:inline defer src=\"https:\u002F\u002Fembeds.crowment.com\u002Fcomments.js\">\u003C\u002Fscript>\n\u003C\u002Fhead>\n","src\u002Flayouts\u002FBaseLayout.astro","html","",[13,63,64,80,87,125],{"__ignoreMap":61},[65,66,69,73,77],"span",{"class":67,"line":68},"line",1,[65,70,72],{"class":71},"sMK4o","\u003C",[65,74,76],{"class":75},"swJcz","head",[65,78,79],{"class":71},">\n",[65,81,83],{"class":67,"line":82},2,[65,84,86],{"class":85},"sHwdD","  \u003C!-- your existing head tags -->\n",[65,88,90,93,96,100,103,106,109,112,116,118,121,123],{"class":67,"line":89},3,[65,91,92],{"class":71},"  \u003C",[65,94,95],{"class":75},"script",[65,97,99],{"class":98},"spNyl"," is:inline",[65,101,102],{"class":98}," defer",[65,104,105],{"class":98}," src",[65,107,108],{"class":71},"=",[65,110,111],{"class":71},"\"",[65,113,115],{"class":114},"sfazB","https:\u002F\u002Fembeds.crowment.com\u002Fcomments.js",[65,117,111],{"class":71},[65,119,120],{"class":71},">\u003C\u002F",[65,122,95],{"class":75},[65,124,79],{"class":71},[65,126,128,131,133],{"class":67,"line":127},4,[65,129,130],{"class":71},"\u003C\u002F",[65,132,76],{"class":75},[65,134,79],{"class":71},[22,136,138],{"id":137},"add-the-comment-section-to-your-posts","Add the comment section to your posts",[10,140,141],{},"Put the element where the comments should appear, usually after the post content:",[55,143,146],{"className":57,"code":144,"filename":145,"language":60,"meta":61,"style":61},"\u003Carticle>\n  \u003Cslot \u002F>\n\u003C\u002Farticle>\n\n\u003Ccrow-comments app-key=\"YOUR_APP_KEY\">\u003C\u002Fcrow-comments>\n","src\u002Flayouts\u002FBlogPost.astro",[13,147,148,157,167,175,181],{"__ignoreMap":61},[65,149,150,152,155],{"class":67,"line":68},[65,151,72],{"class":71},[65,153,154],{"class":75},"article",[65,156,79],{"class":71},[65,158,159,161,164],{"class":67,"line":82},[65,160,92],{"class":71},[65,162,163],{"class":75},"slot",[65,165,166],{"class":71}," \u002F>\n",[65,168,169,171,173],{"class":67,"line":89},[65,170,130],{"class":71},[65,172,154],{"class":75},[65,174,79],{"class":71},[65,176,177],{"class":67,"line":127},[65,178,180],{"emptyLinePlaceholder":179},true,"\n",[65,182,184,186,189,192,194,196,199,201,203,205],{"class":67,"line":183},5,[65,185,72],{"class":71},[65,187,188],{"class":75},"crow-comments",[65,190,191],{"class":98}," app-key",[65,193,108],{"class":71},[65,195,111],{"class":71},[65,197,198],{"class":114},"YOUR_APP_KEY",[65,200,111],{"class":71},[65,202,120],{"class":71},[65,204,188],{"class":75},[65,206,79],{"class":71},[22,208,210],{"id":209},"check-a-post","Check a post",[10,212,213,214,217],{},"Run ",[13,215,216],{},"npm run dev"," and open a post. Each post gets its own thread, identified by its URL path.",[10,219,220],{},"The widget follows client-side navigation by itself, so it keeps working with Astro's view transitions.",[222,223,225],"h2",{"id":224},"next-steps","Next steps",[227,228,229,241],"ul",{},[230,231,232,233,236,237,38],"li",{},"Keep threads attached when URLs change: pass ",[13,234,235],{},"page-id={post.id}"," and see ",[29,238,240],{"href":239},"\u002Fdocs\u002Fen\u002Fsite-owners\u002Fgetting-started\u002Finstallation","Which thread a page shows",[230,242,243,244,248,249,38],{},"Switch on ",[29,245,247],{"href":246},"\u002Fdocs\u002Fen\u002Fsite-owners\u002Fmoderation\u002Frules-and-lifecycle","AI moderation"," and pick a ",[29,250,252],{"href":251},"\u002Fdocs\u002Fen\u002Fsite-owners\u002Fgetting-started\u002Fappearance","theme",[254,255,256],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":61,"searchDepth":82,"depth":89,"links":258},[259,260,261,262,263],{"id":24,"depth":89,"text":25},{"id":41,"depth":89,"text":42},{"id":137,"depth":89,"text":138},{"id":209,"depth":89,"text":210},{"id":224,"depth":82,"text":225},"Add a comment section with AI moderation to an Astro blog. A web component, so no framework integration or client directive is needed.","md","i-simple-icons-astro",{},"\u002Fintegrations\u002Fastro",{"title":5,"description":264},"integrations\u002Fastro","EJFAZ40wNNOtBBH9geWHcXCVbt8_9fXnuZjYtafNXLM",1792581803580]