[{"data":1,"prerenderedAt":613},["ShallowReactive",2],{"blog-search-your-videos-from-your-own-website":3,"blog-surround-search-your-videos-from-your-own-website":602},{"id":4,"title":5,"body":6,"date":591,"description":592,"extension":593,"meta":594,"navigation":595,"path":596,"published":595,"seo":597,"seoTitle":598,"sitemap":599,"stem":600,"__hash__":601},"blog\u002Fblog\u002Fsearch-your-videos-from-your-own-website.md","Search your videos from your own website",{"type":7,"value":8,"toc":584},"minimark",[9,13,16,19,24,27,89,92,99,114,199,202,208,211,215,218,255,258,505,537,541,544,547,554,557,561,564,567,571,574,577,580],[10,11,12],"p",{},"A while back we shipped library-wide search... type a few words, land on the exact ten seconds where someone said them. It quickly became the way our own team finds things.",[10,14,15],{},"But that search lived inside Pixelmatic, behind a sign-in. If you'd published a set of videos for your customers, a product walkthrough series, a help library, a course... your visitors couldn't search them. They could only scroll.",[10,17,18],{},"That's what we've opened up. Your published videos are now searchable from your own website.",[20,21,23],"h2",{"id":22},"one-tag-and-it-works","One tag, and it works",[10,25,26],{},"The quickest way in is the embed. One script tag, pasted into your site:",[28,29,34],"pre",{"className":30,"code":31,"language":32,"meta":33,"style":33},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript src=\"https:\u002F\u002Fpixelmatic.co\u002Fsearch-widget.js\" data-pixelmatic-key=\"YOUR_API_KEY\" async>\u003C\u002Fscript>\n","html","",[35,36,37],"code",{"__ignoreMap":33},[38,39,42,46,50,54,57,60,64,66,69,71,73,76,78,81,84,86],"span",{"class":40,"line":41},"line",1,[38,43,45],{"class":44},"sMK4o","\u003C",[38,47,49],{"class":48},"swJcz","script",[38,51,53],{"class":52},"spNyl"," src",[38,55,56],{"class":44},"=",[38,58,59],{"class":44},"\"",[38,61,63],{"class":62},"sfazB","https:\u002F\u002Fpixelmatic.co\u002Fsearch-widget.js",[38,65,59],{"class":44},[38,67,68],{"class":52}," data-pixelmatic-key",[38,70,56],{"class":44},[38,72,59],{"class":44},[38,74,75],{"class":62},"YOUR_API_KEY",[38,77,59],{"class":44},[38,79,80],{"class":52}," async",[38,82,83],{"class":44},">\u003C\u002F",[38,85,49],{"class":48},[38,87,88],{"class":44},">\n",[10,90,91],{},"That gives your visitors a floating search button in the corner of the page:",[10,93,94],{},[95,96],"img",{"alt":97,"src":98},"The floating search button, open on a documentation site, with a transcript match","public-search-floating.png",[10,100,101,102,105,106,109,110,113],{},"If you'd rather have a search box sitting inside your layout, drop a ",[35,103,104],{},"\u003Cdiv id=\"pixelmatic-search\">\u003C\u002Fdiv>"," where you want it and the box renders there instead. There's also a ",[35,107,108],{},"data-pixelmatic-target"," attribute if you want to point the script at any element by CSS selector, and ",[35,111,112],{},"data-pixelmatic-placeholder"," to change the prompt text.",[28,115,117],{"className":30,"code":116,"language":32,"meta":33,"style":33},"\u003Cdiv id=\"pixelmatic-search\">\u003C\u002Fdiv>\n\u003Cscript src=\"https:\u002F\u002Fpixelmatic.co\u002Fsearch-widget.js\"\n        data-pixelmatic-key=\"YOUR_API_KEY\"\n        data-pixelmatic-placeholder=\"Search video tutorials…\" async>\u003C\u002Fscript>\n",[35,118,119,144,162,176],{"__ignoreMap":33},[38,120,121,123,126,129,131,133,136,138,140,142],{"class":40,"line":41},[38,122,45],{"class":44},[38,124,125],{"class":48},"div",[38,127,128],{"class":52}," id",[38,130,56],{"class":44},[38,132,59],{"class":44},[38,134,135],{"class":62},"pixelmatic-search",[38,137,59],{"class":44},[38,139,83],{"class":44},[38,141,125],{"class":48},[38,143,88],{"class":44},[38,145,147,149,151,153,155,157,159],{"class":40,"line":146},2,[38,148,45],{"class":44},[38,150,49],{"class":48},[38,152,53],{"class":52},[38,154,56],{"class":44},[38,156,59],{"class":44},[38,158,63],{"class":62},[38,160,161],{"class":44},"\"\n",[38,163,165,168,170,172,174],{"class":40,"line":164},3,[38,166,167],{"class":52},"        data-pixelmatic-key",[38,169,56],{"class":44},[38,171,59],{"class":44},[38,173,75],{"class":62},[38,175,161],{"class":44},[38,177,179,182,184,186,189,191,193,195,197],{"class":40,"line":178},4,[38,180,181],{"class":52},"        data-pixelmatic-placeholder",[38,183,56],{"class":44},[38,185,59],{"class":44},[38,187,188],{"class":62},"Search video tutorials…",[38,190,59],{"class":44},[38,192,80],{"class":52},[38,194,83],{"class":44},[38,196,49],{"class":48},[38,198,88],{"class":44},[10,200,201],{},"Visitors type, results appear as they go. Each result shows the video title, the matching line from the transcript with the matched words highlighted, and a timestamp. Clicking takes them to the video's public page.",[10,203,204],{},[95,205],{"alt":206,"src":207},"An inline search box on a help centre page, showing three transcript matches with highlighted terms and timestamps","public-search-inline.png",[10,209,210],{},"It's the same engine as the library search, so the same forgiveness applies... typos are tolerated, and a half-remembered phrase is usually enough.",[20,212,214],{"id":213},"or-build-it-yourself","Or build it yourself",[10,216,217],{},"If you'd rather wire search into your own interface, the widget is optional. There's a plain API underneath:",[28,219,223],{"className":220,"code":221,"language":222,"meta":33,"style":33},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","curl \"https:\u002F\u002Fpixelmatic.co\u002Fapi\u002Fpublic\u002Fsearch\u002Fvideos?q=onboarding\" \\\n  -H \"x-api-key: YOUR_API_KEY\"\n","bash",[35,224,225,243],{"__ignoreMap":33},[38,226,227,231,234,237,239],{"class":40,"line":41},[38,228,230],{"class":229},"sBMFI","curl",[38,232,233],{"class":44}," \"",[38,235,236],{"class":62},"https:\u002F\u002Fpixelmatic.co\u002Fapi\u002Fpublic\u002Fsearch\u002Fvideos?q=onboarding",[38,238,59],{"class":44},[38,240,242],{"class":241},"sTEyZ"," \\\n",[38,244,245,248,250,253],{"class":40,"line":146},[38,246,247],{"class":62},"  -H",[38,249,233],{"class":44},[38,251,252],{"class":62},"x-api-key: YOUR_API_KEY",[38,254,161],{"class":44},[10,256,257],{},"You get back JSON: titles, highlighted transcript snippets, timestamps, thumbnails, and a link to each video's watch page.",[28,259,263],{"className":260,"code":261,"language":262,"meta":33,"style":33},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{\n  \"data\": [\n    {\n      \"kind\": \"moment\",\n      \"videoId\": \"68f2a41b9c1d2e3f45a6b7c8\",\n      \"title\": \"Onboarding walkthrough\",\n      \"url\": \"https:\u002F\u002Fpixelmatic.co\u002Fvideos\u002F68f2a41b9c1d2e3f45a6b7c8\",\n      \"thumbnailUrl\": \"https:\u002F\u002F…\u002Fthumbnail.jpg\",\n      \"snippet\": \"start with the \u003Cmark>onboarding\u003C\u002Fmark> checklist on the left\",\n      \"text\": \"start with the onboarding checklist on the left\",\n      \"start\": 95.1,\n      \"end\": 98.5\n    }\n  ],\n  \"total\": 3\n}\n","json",[35,264,265,270,286,291,313,334,355,376,397,418,439,457,472,478,484,499],{"__ignoreMap":33},[38,266,267],{"class":40,"line":41},[38,268,269],{"class":44},"{\n",[38,271,272,275,278,280,283],{"class":40,"line":146},[38,273,274],{"class":44},"  \"",[38,276,277],{"class":52},"data",[38,279,59],{"class":44},[38,281,282],{"class":44},":",[38,284,285],{"class":44}," [\n",[38,287,288],{"class":40,"line":164},[38,289,290],{"class":44},"    {\n",[38,292,293,296,299,301,303,305,308,310],{"class":40,"line":178},[38,294,295],{"class":44},"      \"",[38,297,298],{"class":229},"kind",[38,300,59],{"class":44},[38,302,282],{"class":44},[38,304,233],{"class":44},[38,306,307],{"class":62},"moment",[38,309,59],{"class":44},[38,311,312],{"class":44},",\n",[38,314,316,318,321,323,325,327,330,332],{"class":40,"line":315},5,[38,317,295],{"class":44},[38,319,320],{"class":229},"videoId",[38,322,59],{"class":44},[38,324,282],{"class":44},[38,326,233],{"class":44},[38,328,329],{"class":62},"68f2a41b9c1d2e3f45a6b7c8",[38,331,59],{"class":44},[38,333,312],{"class":44},[38,335,337,339,342,344,346,348,351,353],{"class":40,"line":336},6,[38,338,295],{"class":44},[38,340,341],{"class":229},"title",[38,343,59],{"class":44},[38,345,282],{"class":44},[38,347,233],{"class":44},[38,349,350],{"class":62},"Onboarding walkthrough",[38,352,59],{"class":44},[38,354,312],{"class":44},[38,356,358,360,363,365,367,369,372,374],{"class":40,"line":357},7,[38,359,295],{"class":44},[38,361,362],{"class":229},"url",[38,364,59],{"class":44},[38,366,282],{"class":44},[38,368,233],{"class":44},[38,370,371],{"class":62},"https:\u002F\u002Fpixelmatic.co\u002Fvideos\u002F68f2a41b9c1d2e3f45a6b7c8",[38,373,59],{"class":44},[38,375,312],{"class":44},[38,377,379,381,384,386,388,390,393,395],{"class":40,"line":378},8,[38,380,295],{"class":44},[38,382,383],{"class":229},"thumbnailUrl",[38,385,59],{"class":44},[38,387,282],{"class":44},[38,389,233],{"class":44},[38,391,392],{"class":62},"https:\u002F\u002F…\u002Fthumbnail.jpg",[38,394,59],{"class":44},[38,396,312],{"class":44},[38,398,400,402,405,407,409,411,414,416],{"class":40,"line":399},9,[38,401,295],{"class":44},[38,403,404],{"class":229},"snippet",[38,406,59],{"class":44},[38,408,282],{"class":44},[38,410,233],{"class":44},[38,412,413],{"class":62},"start with the \u003Cmark>onboarding\u003C\u002Fmark> checklist on the left",[38,415,59],{"class":44},[38,417,312],{"class":44},[38,419,421,423,426,428,430,432,435,437],{"class":40,"line":420},10,[38,422,295],{"class":44},[38,424,425],{"class":229},"text",[38,427,59],{"class":44},[38,429,282],{"class":44},[38,431,233],{"class":44},[38,433,434],{"class":62},"start with the onboarding checklist on the left",[38,436,59],{"class":44},[38,438,312],{"class":44},[38,440,442,444,447,449,451,455],{"class":40,"line":441},11,[38,443,295],{"class":44},[38,445,446],{"class":229},"start",[38,448,59],{"class":44},[38,450,282],{"class":44},[38,452,454],{"class":453},"sbssI"," 95.1",[38,456,312],{"class":44},[38,458,460,462,465,467,469],{"class":40,"line":459},12,[38,461,295],{"class":44},[38,463,464],{"class":229},"end",[38,466,59],{"class":44},[38,468,282],{"class":44},[38,470,471],{"class":453}," 98.5\n",[38,473,475],{"class":40,"line":474},13,[38,476,477],{"class":44},"    }\n",[38,479,481],{"class":40,"line":480},14,[38,482,483],{"class":44},"  ],\n",[38,485,487,489,492,494,496],{"class":40,"line":486},15,[38,488,274],{"class":44},[38,490,491],{"class":52},"total",[38,493,59],{"class":44},[38,495,282],{"class":44},[38,497,498],{"class":453}," 3\n",[38,500,502],{"class":40,"line":501},16,[38,503,504],{"class":44},"}\n",[10,506,507,508,510,511,514,515,517,518,520,521,510,523,526,527,517,530,533,534,536],{},"A ",[35,509,298],{}," of ",[35,512,513],{},"\"moment\""," is a match inside the transcript, with ",[35,516,446],{}," and ",[35,519,464],{}," in seconds. A ",[35,522,298],{},[35,524,525],{},"\"video\""," means the title itself matched. Pass ",[35,528,529],{},"limit",[35,531,532],{},"offset"," for paging, or ",[35,535,320],{}," to search within a single video. Build whatever you like on top of it.",[20,538,540],{"id":539},"keys-and-who-gets-to-search","Keys, and who gets to search",[10,542,543],{},"Access runs on API keys, managed from Settings → Integrations in your organisation.",[10,545,546],{},"Each key carries permissions, ticked when you create it. For search, give it the Search permission. Keys created before permissions existed keep working for search, nothing to redo.",[10,548,549,550,553],{},"Each key also carries a list of allowed domains. A key locked to ",[35,551,552],{},"https:\u002F\u002Fyourcompany.com"," only works from pages on that domain, so shipping it in your public HTML is fine... that's what it's for. A key with no domains works server-to-server instead, for when you're calling the API from your own backend.",[10,555,556],{},"Keys can be renamed, disabled, cycled (a fresh secret, same settings, the old one stops working immediately), or deleted. The secret is shown once, at creation, and never again. Requests are rate limited per key.",[20,558,560],{"id":559},"whats-searchable-and-what-isnt","What's searchable, and what isn't",[10,562,563],{},"Only published videos. That line is worth being clear about.",[10,565,566],{},"Anything unpublished, private, or password-protected stays out of public results entirely... titles, transcripts, all of it. Publishing a video is what makes it searchable from outside, and unpublishing removes it from results again. The search index follows your library the same way it always has.",[20,568,570],{"id":569},"where-this-fits","Where this fits",[10,572,573],{},"If you're using Pixelmatic for internal recordings only, nothing changes for you. No key, no public search.",[10,575,576],{},"But if you've built something meant to be watched... a support library, product tutorials, a course, a video changelog... your visitors can now find the moment they need instead of scrubbing through videos hoping to spot it. That gap between \"the answer exists in a video\" and \"the person found it\" is the same one we closed for teams internally. This closes it for your audience too.",[10,578,579],{},"If you try it and something doesn't behave the way you'd expect, tell us. This is a first release, and the rough edges get found by people using it, not by us staring at it.",[581,582,583],"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 .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);}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":33,"searchDepth":146,"depth":146,"links":585},[586,587,588,589,590],{"id":22,"depth":146,"text":23},{"id":213,"depth":146,"text":214},{"id":539,"depth":146,"text":540},{"id":559,"depth":146,"text":560},{"id":569,"depth":146,"text":570},"2026-08-18","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.","md",{},true,"\u002Fblog\u002Fsearch-your-videos-from-your-own-website",{"title":5,"description":592},null,{"loc":596},"blog\u002Fsearch-your-videos-from-your-own-website","BK66iAotXcRJFQ3k0xUNvgIHGEzZ3gBTQZuCtUu4iJo",[603,608],{"title":604,"path":605,"stem":606,"description":607,"published":595,"children":-1},"Let your users show you, right from your app","\u002Fblog\u002Fembeddable-recorder","blog\u002Fembeddable-recorder","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.",{"title":609,"path":610,"stem":611,"description":612,"published":595,"children":-1},"Magic links, now for any recording","\u002Fblog\u002Fmagic-links-for-any-video","blog\u002Fmagic-links-for-any-video","Magic links used to be a private-recording feature. Now any recording in your library can have one, so you can share a video with someone outside your team without publishing it first.",1787068686086]