[{"data":1,"prerenderedAt":624},["ShallowReactive",2],{"\u002Fen":3,"next-intro-\u002Fen":108},{"id":4,"title":5,"body":6,"description":99,"extension":100,"icon":101,"meta":102,"navigation":103,"path":104,"seo":105,"stem":106,"__hash__":107},"content\u002Fen\u002Findex.md","Introduction",{"type":7,"value":8,"toc":92},"minimark",[9,14,23,28,56,60,80,84],[10,11,13],"h1",{"id":12},"fitting-widget-virtual-try-on","Fitting Widget — Virtual Try-On",[15,16,17,18,22],"p",{},"The ",[19,20,21],"strong",{},"Fitting Widget"," is a drop-in virtual try-on solution for e-commerce fashion stores. It lets your customers upload a photo and instantly see how any garment looks on them — directly on your product pages.",[24,25,27],"h2",{"id":26},"key-features","Key Features",[29,30,31,38,44,50],"ul",{},[32,33,34,37],"li",{},[19,35,36],{},"Quick Integration"," — Add one script tag and a few lines of code.",[32,39,40,43],{},[19,41,42],{},"Framework-Agnostic"," — Works with Vanilla JS, React, Vue, Next.js, Nuxt, and more.",[32,45,46,49],{},[19,47,48],{},"Customizable"," — Style the widget to match your brand.",[32,51,52,55],{},[19,53,54],{},"Lightweight"," — Optimized loading; won't slow down your store.",[24,57,59],{"id":58},"how-it-works","How It Works",[61,62,63,66,69,77],"ol",{},[32,64,65],{},"Load the widget script on your page.",[32,67,68],{},"Initialize with your API key.",[32,70,71,72,76],{},"Call ",[73,74,75],"code",{},"window.fitting('create', { ... })"," with product image URLs.",[32,78,79],{},"The widget renders inside a container element of your choice.",[24,81,83],{"id":82},"quick-start","Quick Start",[15,85,86,87,91],{},"Head over to the ",[88,89,83],"a",{"href":90},"\u002Fgetting-started\u002Fquick-start"," guide to get up and running in under 5 minutes.",{"title":93,"searchDepth":94,"depth":94,"links":95},"",2,[96,97,98],{"id":26,"depth":94,"text":27},{"id":58,"depth":94,"text":59},{"id":82,"depth":94,"text":83},"What is the Fitting Widget and why use it?","md","i-lucide-sparkles",{},true,"\u002Fen",{"title":5,"description":99},"en\u002Findex","zjI3aBTZ8Y2iRdmkieXP4q0o6PKbIjE5hUkB6Y1ledA",{"id":109,"title":83,"body":110,"description":617,"extension":100,"icon":618,"meta":619,"navigation":103,"path":620,"seo":621,"stem":622,"__hash__":623},"content\u002Fen\u002Fgetting-started\u002Fquick-start.md",{"type":7,"value":111,"toc":608},[112,114,117,121,131,135,146,213,217,397,401,408,437,441,448,577,581,584,588,604],[10,113,83],{"id":82},[15,115,116],{},"Follow these steps to add virtual try-on to your e-commerce site.",[24,118,120],{"id":119},"_1-get-your-api-key","1. Get Your API Key",[15,122,123,124,130],{},"Sign up at ",[88,125,129],{"href":126,"rel":127},"https:\u002F\u002Fwidget.try-on.ru",[128],"nofollow","widget.try-on.ru"," to obtain your free API key.",[24,132,134],{"id":133},"_2-load-the-widget-script","2. Load the Widget Script",[15,136,137,138,141,142,145],{},"Add the following ",[73,139,140],{},"\u003Cscript>"," tag to your page, ideally right before the closing ",[73,143,144],{},"\u003C\u002Fbody>"," tag:",[147,148,152],"pre",{"className":149,"code":150,"language":151,"meta":93,"style":93},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript\n  src=\"https:\u002F\u002Fwidget.try-on.ru\u002Ffitting-widget-bundle.js\"\n  id=\"fitting-widget-bundle\"\n>\u003C\u002Fscript>\n","html",[73,153,154,167,186,201],{"__ignoreMap":93},[155,156,159,163],"span",{"class":157,"line":158},"line",1,[155,160,162],{"class":161},"sMK4o","\u003C",[155,164,166],{"class":165},"swJcz","script\n",[155,168,169,173,176,179,183],{"class":157,"line":94},[155,170,172],{"class":171},"spNyl","  src",[155,174,175],{"class":161},"=",[155,177,178],{"class":161},"\"",[155,180,182],{"class":181},"sfazB","https:\u002F\u002Fwidget.try-on.ru\u002Ffitting-widget-bundle.js",[155,184,185],{"class":161},"\"\n",[155,187,189,192,194,196,199],{"class":157,"line":188},3,[155,190,191],{"class":171},"  id",[155,193,175],{"class":161},[155,195,178],{"class":161},[155,197,198],{"class":181},"fitting-widget-bundle",[155,200,185],{"class":161},[155,202,204,207,210],{"class":157,"line":203},4,[155,205,206],{"class":161},">\u003C\u002F",[155,208,209],{"class":165},"script",[155,211,212],{"class":161},">\n",[24,214,216],{"id":215},"_3-initialize-the-widget","3. Initialize the Widget",[147,218,220],{"className":149,"code":219,"language":151,"meta":93,"style":93},"\u003Cscript id=\"fitting-init\">\n  window.fitting = window.fitting || function() {\n    (window.fitting.q = window.fitting.q || []).push(arguments);\n  };\n  window.fitting('init', {\n    apiKey: 'YOUR_API_KEY'\n  });\n\u003C\u002Fscript>\n",[73,221,222,242,275,330,335,359,377,387],{"__ignoreMap":93},[155,223,224,226,228,231,233,235,238,240],{"class":157,"line":158},[155,225,162],{"class":161},[155,227,209],{"class":165},[155,229,230],{"class":171}," id",[155,232,175],{"class":161},[155,234,178],{"class":161},[155,236,237],{"class":181},"fitting-init",[155,239,178],{"class":161},[155,241,212],{"class":161},[155,243,244,248,251,254,256,259,261,263,266,269,272],{"class":157,"line":94},[155,245,247],{"class":246},"sTEyZ","  window",[155,249,250],{"class":161},".",[155,252,253],{"class":246},"fitting ",[155,255,175],{"class":161},[155,257,258],{"class":246}," window",[155,260,250],{"class":161},[155,262,253],{"class":246},[155,264,265],{"class":161},"||",[155,267,268],{"class":171}," function",[155,270,271],{"class":161},"()",[155,273,274],{"class":161}," {\n",[155,276,277,280,283,285,288,290,293,296,298,300,302,304,306,309,312,314,318,321,324,327],{"class":157,"line":188},[155,278,279],{"class":165},"    (",[155,281,282],{"class":246},"window",[155,284,250],{"class":161},[155,286,287],{"class":246},"fitting",[155,289,250],{"class":161},[155,291,292],{"class":246},"q",[155,294,295],{"class":161}," =",[155,297,258],{"class":246},[155,299,250],{"class":161},[155,301,287],{"class":246},[155,303,250],{"class":161},[155,305,292],{"class":246},[155,307,308],{"class":161}," ||",[155,310,311],{"class":165}," [])",[155,313,250],{"class":161},[155,315,317],{"class":316},"s2Zo4","push",[155,319,320],{"class":165},"(",[155,322,323],{"class":246},"arguments",[155,325,326],{"class":165},")",[155,328,329],{"class":161},";\n",[155,331,332],{"class":157,"line":203},[155,333,334],{"class":161},"  };\n",[155,336,338,340,342,344,346,349,352,354,357],{"class":157,"line":337},5,[155,339,247],{"class":246},[155,341,250],{"class":161},[155,343,287],{"class":316},[155,345,320],{"class":246},[155,347,348],{"class":161},"'",[155,350,351],{"class":181},"init",[155,353,348],{"class":161},[155,355,356],{"class":161},",",[155,358,274],{"class":161},[155,360,362,365,368,371,374],{"class":157,"line":361},6,[155,363,364],{"class":165},"    apiKey",[155,366,367],{"class":161},":",[155,369,370],{"class":161}," '",[155,372,373],{"class":181},"YOUR_API_KEY",[155,375,376],{"class":161},"'\n",[155,378,380,383,385],{"class":157,"line":379},7,[155,381,382],{"class":161},"  }",[155,384,326],{"class":246},[155,386,329],{"class":161},[155,388,390,393,395],{"class":157,"line":389},8,[155,391,392],{"class":161},"\u003C\u002F",[155,394,209],{"class":165},[155,396,212],{"class":161},[24,398,400],{"id":399},"_4-add-a-container","4. Add a Container",[15,402,403,404,407],{},"Place a ",[73,405,406],{},"\u003Cdiv>"," wherever you want the widget to appear:",[147,409,411],{"className":149,"code":410,"language":151,"meta":93,"style":93},"\u003Cdiv id=\"widget-container\">\u003C\u002Fdiv>\n",[73,412,413],{"__ignoreMap":93},[155,414,415,417,420,422,424,426,429,431,433,435],{"class":157,"line":158},[155,416,162],{"class":161},[155,418,419],{"class":165},"div",[155,421,230],{"class":171},[155,423,175],{"class":161},[155,425,178],{"class":161},[155,427,428],{"class":181},"widget-container",[155,430,178],{"class":161},[155,432,206],{"class":161},[155,434,419],{"class":165},[155,436,212],{"class":161},[24,438,440],{"id":439},"_5-launch-the-widget","5. Launch the Widget",[15,442,443,444,447],{},"Call the ",[73,445,446],{},"create"," method when the user clicks a button:",[147,449,453],{"className":450,"code":451,"language":452,"meta":93,"style":93},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","window.fitting('create', {\n  targetElementId: 'widget-container',\n  model: 'balanced',\n  tryonItems: [\n    {\n      productName: 'Classic Denim Jacket',\n      url: 'https:\u002F\u002Fyour-store.com\u002Fimages\u002Fjacket.jpg',\n    },\n  ],\n});\n","js",[73,454,455,475,491,507,517,522,538,554,559,567],{"__ignoreMap":93},[155,456,457,459,461,463,465,467,469,471,473],{"class":157,"line":158},[155,458,282],{"class":246},[155,460,250],{"class":161},[155,462,287],{"class":316},[155,464,320],{"class":246},[155,466,348],{"class":161},[155,468,446],{"class":181},[155,470,348],{"class":161},[155,472,356],{"class":161},[155,474,274],{"class":161},[155,476,477,480,482,484,486,488],{"class":157,"line":94},[155,478,479],{"class":165},"  targetElementId",[155,481,367],{"class":161},[155,483,370],{"class":161},[155,485,428],{"class":181},[155,487,348],{"class":161},[155,489,490],{"class":161},",\n",[155,492,493,496,498,500,503,505],{"class":157,"line":188},[155,494,495],{"class":165},"  model",[155,497,367],{"class":161},[155,499,370],{"class":161},[155,501,502],{"class":181},"balanced",[155,504,348],{"class":161},[155,506,490],{"class":161},[155,508,509,512,514],{"class":157,"line":203},[155,510,511],{"class":165},"  tryonItems",[155,513,367],{"class":161},[155,515,516],{"class":246}," [\n",[155,518,519],{"class":157,"line":337},[155,520,521],{"class":161},"    {\n",[155,523,524,527,529,531,534,536],{"class":157,"line":361},[155,525,526],{"class":165},"      productName",[155,528,367],{"class":161},[155,530,370],{"class":161},[155,532,533],{"class":181},"Classic Denim Jacket",[155,535,348],{"class":161},[155,537,490],{"class":161},[155,539,540,543,545,547,550,552],{"class":157,"line":379},[155,541,542],{"class":165},"      url",[155,544,367],{"class":161},[155,546,370],{"class":161},[155,548,549],{"class":181},"https:\u002F\u002Fyour-store.com\u002Fimages\u002Fjacket.jpg",[155,551,348],{"class":161},[155,553,490],{"class":161},[155,555,556],{"class":157,"line":389},[155,557,558],{"class":161},"    },\n",[155,560,562,565],{"class":157,"line":561},9,[155,563,564],{"class":246},"  ]",[155,566,490],{"class":161},[155,568,570,573,575],{"class":157,"line":569},10,[155,571,572],{"class":161},"}",[155,574,326],{"class":246},[155,576,329],{"class":161},[24,578,580],{"id":579},"result","Result",[15,582,583],{},"Your customers can now upload a photo and see the garment on them instantly.",[24,585,587],{"id":586},"next-steps","Next Steps",[29,589,590,597],{},[32,591,592,593,250],{},"See framework-specific guides under ",[88,594,596],{"href":595},"\u002Fintegrations\u002Fvanilla-js","Integrations",[32,598,599,600,250],{},"Explore the full ",[88,601,603],{"href":602},"\u002Fapi","API Reference",[605,606,607],"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 .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}",{"title":93,"searchDepth":94,"depth":94,"links":609},[610,611,612,613,614,615,616],{"id":119,"depth":94,"text":120},{"id":133,"depth":94,"text":134},{"id":215,"depth":94,"text":216},{"id":399,"depth":94,"text":400},{"id":439,"depth":94,"text":440},{"id":579,"depth":94,"text":580},{"id":586,"depth":94,"text":587},"Get the Fitting Widget running in minutes","i-lucide-rocket",{},"\u002Fen\u002Fgetting-started\u002Fquick-start",{"title":83,"description":617},"en\u002Fgetting-started\u002Fquick-start","Cy6rzr6z6R2nhbEqOeB18fbbe2pOjXOk0inGXqhKfHg",1779283220738]