[{"data":1,"prerenderedAt":287},["ShallowReactive",2],{"blog-embeddable-recorder":3,"blog-surround-embeddable-recorder":276},{"id":4,"title":5,"body":6,"date":265,"description":266,"extension":267,"meta":268,"navigation":269,"path":270,"published":269,"seo":271,"seoTitle":272,"sitemap":273,"stem":274,"__hash__":275},"blog\u002Fblog\u002Fembeddable-recorder.md","Let your users show you, right from your app",{"type":7,"value":8,"toc":257},"minimark",[9,13,16,21,102,113,117,120,127,130,136,139,143,146,150,153,224,227,231,234,238,241,244,253],[10,11,12],"p",{},"Most feedback arrives as text describing a video that was never made. A customer hits a bug, sees exactly what went wrong, and then... types. \"I clicked the thing and it broke.\" Three replies later you're still asking which thing.",[10,14,15],{},"The person who saw it happen is the best possible narrator of the problem, and the moment to record it is the moment it's on their screen. So we've made our recorder embeddable. You can now put it behind any button on your own site or web app.",[17,18,20],"h2",{"id":19},"one-tag","One tag",[22,23,28],"pre",{"className":24,"code":25,"language":26,"meta":27,"style":27},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript src=\"https:\u002F\u002Fpixelmatic.co\u002Fembed.js\">\u003C\u002Fscript>\n\u003Cbutton data-pixelmatic-embed=\"YOUR_API_KEY\">Send feedback\u003C\u002Fbutton>\n","html","",[29,30,31,68],"code",{"__ignoreMap":27},[32,33,36,40,44,48,51,54,58,60,63,65],"span",{"class":34,"line":35},"line",1,[32,37,39],{"class":38},"sMK4o","\u003C",[32,41,43],{"class":42},"swJcz","script",[32,45,47],{"class":46},"spNyl"," src",[32,49,50],{"class":38},"=",[32,52,53],{"class":38},"\"",[32,55,57],{"class":56},"sfazB","https:\u002F\u002Fpixelmatic.co\u002Fembed.js",[32,59,53],{"class":38},[32,61,62],{"class":38},">\u003C\u002F",[32,64,43],{"class":42},[32,66,67],{"class":38},">\n",[32,69,71,73,76,79,81,83,86,88,91,95,98,100],{"class":34,"line":70},2,[32,72,39],{"class":38},[32,74,75],{"class":42},"button",[32,77,78],{"class":46}," data-pixelmatic-embed",[32,80,50],{"class":38},[32,82,53],{"class":38},[32,84,85],{"class":56},"YOUR_API_KEY",[32,87,53],{"class":38},[32,89,90],{"class":38},">",[32,92,94],{"class":93},"sTEyZ","Send feedback",[32,96,97],{"class":38},"\u003C\u002F",[32,99,75],{"class":42},[32,101,67],{"class":38},[10,103,104,105,108,109,112],{},"That's the integration. Any element with the ",[29,106,107],{},"data-pixelmatic-embed"," attribute becomes a trigger, or you can call ",[29,110,111],{},"Pixelmatic.open()"," from your own code when you want control over the moment.",[17,114,116],{"id":115},"small-on-purpose","Small on purpose",[10,118,119],{},"When your user clicks, there's no takeover, no new tab, no modal filling the screen. A small widget appears in the corner of the page: pick screen, or screen plus camera, and record.",[10,121,122],{},[123,124],"img",{"alt":125,"src":126},"The recorder widget open in the bottom corner of a customer dashboard, offering Screen and Screen + camera","embeddable-recorder.png",[10,128,129],{},"While recording, all they see is a round self-view bubble, a timer, and a stop button... with a faint sound wave moving behind the controls so they know their voice is being picked up. The page underneath keeps working the whole time.",[10,131,132],{},[123,133],{"alt":134,"src":135},"Recording in progress: a circular camera self-view above a small pill with the elapsed time and a stop button, floating over the page","embeddable-recorder-recording.png",[10,137,138],{},"Nothing to install, no account for the person recording. It's the browser's own screen sharing, running from your page.",[17,140,142],{"id":141},"private-by-default","Private by default",[10,144,145],{},"The recording uploads into your Pixelmatic library, unpublished. Your team watches it, searches it, shares it internally... same as any recording you make yourselves. It only gets a public page if the API key carries the publish permission, and that's a box you tick deliberately, not a default. Feedback recorded on your site is usually for your eyes, so that's how it behaves.",[17,147,149],{"id":148},"you-know-who-recorded","You know who recorded",[10,151,152],{},"Pass the user's identity and any context from your app, and it's stored with the recording:",[22,154,156],{"className":24,"code":155,"language":26,"meta":27,"style":27},"\u003Cbutton\n  data-pixelmatic-embed=\"YOUR_API_KEY\"\n  data-pixelmatic-user='{\"id\":\"u_123\",\"email\":\"alice@example.com\",\"name\":\"Alice\"}'\n  data-pixelmatic-metadata='{\"plan\":\"pro\",\"view\":\"\u002Fbilling\"}'\n>Send feedback\u003C\u002Fbutton>\n",[29,157,158,165,179,196,211],{"__ignoreMap":27},[32,159,160,162],{"class":34,"line":35},[32,161,39],{"class":38},[32,163,164],{"class":42},"button\n",[32,166,167,170,172,174,176],{"class":34,"line":70},[32,168,169],{"class":46},"  data-pixelmatic-embed",[32,171,50],{"class":38},[32,173,53],{"class":38},[32,175,85],{"class":56},[32,177,178],{"class":38},"\"\n",[32,180,182,185,187,190,193],{"class":34,"line":181},3,[32,183,184],{"class":46},"  data-pixelmatic-user",[32,186,50],{"class":38},[32,188,189],{"class":38},"'",[32,191,192],{"class":56},"{\"id\":\"u_123\",\"email\":\"alice@example.com\",\"name\":\"Alice\"}",[32,194,195],{"class":38},"'\n",[32,197,199,202,204,206,209],{"class":34,"line":198},4,[32,200,201],{"class":46},"  data-pixelmatic-metadata",[32,203,50],{"class":38},[32,205,189],{"class":38},[32,207,208],{"class":56},"{\"plan\":\"pro\",\"view\":\"\u002Fbilling\"}",[32,210,195],{"class":38},[32,212,214,216,218,220,222],{"class":34,"line":213},5,[32,215,90],{"class":38},[32,217,94],{"class":93},[32,219,97],{"class":38},[32,221,75],{"class":42},[32,223,67],{"class":38},[10,225,226],{},"The page URL comes along automatically. So a recording arrives as \"Alice, on the billing page, on the pro plan, showing you the problem\", not as an anonymous file.",[17,228,230],{"id":229},"same-keys-new-permission","Same keys, new permission",[10,232,233],{},"If you've set up the public search embed, you already know the keys. This uses the same ones, managed in Settings → Integrations. Each key carries permissions... search, recorder, auto-publish... plus the list of domains it's allowed to run on. A key locked to your domain and ticked for recording only can't do anything else, so it's safe to ship in your HTML. Cycle or revoke it any time.",[17,235,237],{"id":236},"what-this-opens-up","What this opens up",[10,239,240],{},"A \"Report a problem\" button inside your app, and bug reports that show the bug. A support portal where customers show you what they're seeing instead of describing it. Client feedback on staging sites. UAT rounds where testers narrate what broke as it breaks. Testimonials collected from a page you control.",[10,242,243],{},"Anywhere \"just show me\" beats \"please describe\", really.",[10,245,246,247,252],{},"There's a full write-up on the ",[248,249,251],"a",{"href":250},"\u002Fembeddable-recorder","embeddable recorder page",", and the snippet is waiting in Settings → Integrations. If you wire it into something interesting, or something doesn't behave the way you'd expect, tell us. First release, rough edges get found by people using it.",[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 .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 pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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":27,"searchDepth":70,"depth":70,"links":258},[259,260,261,262,263,264],{"id":19,"depth":70,"text":20},{"id":115,"depth":70,"text":116},{"id":141,"depth":70,"text":142},{"id":148,"depth":70,"text":149},{"id":229,"depth":70,"text":230},{"id":236,"depth":70,"text":237},"2026-08-18","A screen recorder you can embed in your own site or web app. One script tag, a small corner widget for your visitors, and recordings that land privately in your library with their name attached.","md",{},true,"\u002Fblog\u002Fembeddable-recorder",{"title":5,"description":266},null,{"loc":270},"blog\u002Fembeddable-recorder","TycNC89HZEd-FptiS2DeIs5YCcJMIA4OrsxyilzVekc",[277,282],{"title":278,"path":279,"stem":280,"description":281,"published":269,"children":-1},"Search and Replace for Captions","\u002Fblog\u002Fcaption-search-and-replace","blog\u002Fcaption-search-and-replace","The caption editor now does search and replace. See every match before you commit, step through them one at a time, or replace the lot in one go.",{"title":283,"path":284,"stem":285,"description":286,"published":269,"children":-1},"Search your videos from your own website","\u002Fblog\u002Fsearch-your-videos-from-your-own-website","blog\u002Fsearch-your-videos-from-your-own-website","The same search that powers your Pixelmatic library, now available on your own site. A one-tag embed for visitors, an API for builders, and keys you control. Published videos only.",1787068686046]