[{"data":1,"prerenderedAt":11032},["ShallowReactive",2],{"\u002Fen\u002Fintegrations\u002Fnuxt":3,"all-pages-\u002Fen\u002Fintegrations\u002Fnuxt":1017},{"id":4,"title":5,"body":6,"description":1009,"extension":1010,"icon":1011,"meta":1012,"navigation":170,"path":1013,"seo":1014,"stem":1015,"__hash__":1016},"content\u002Fen\u002Fintegrations\u002Fnuxt.md","Nuxt",{"type":7,"value":8,"toc":999},"minimark",[9,14,18,23,35,42,433,439,638,642,969,973,979,995],[10,11,13],"h1",{"id":12},"nuxt-integration","Nuxt Integration",[15,16,17],"p",{},"The Fitting Widget integrates seamlessly with Nuxt 3 and Nuxt 4.",[19,20,22],"h2",{"id":21},"_1-load-the-script","1. Load the Script",[15,24,25,26,30,31,34],{},"Use the ",[27,28,29],"code",{},"useHead"," composable, or add scripts to your ",[27,32,33],{},"nuxt.config.ts",".",[36,37,39,40],"h3",{"id":38},"option-a-per-page-with-usehead","Option A — Per Page with ",[27,41,29],{},[43,44,49],"pre",{"className":45,"code":46,"language":47,"meta":48,"style":48},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!-- pages\u002Fproduct\u002F[slug].vue -->\n\u003Ctemplate>\n \u003Cdiv>\n \u003Ch1>{{ product.name }}\u003C\u002Fh1>\n \u003CTryOnWidget :product-name=\"product.name\" :image-url=\"product.image\" \u002F>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nimport { useHead } from '#app'\n\nuseHead({\n script: [\n {\n src: 'https:\u002F\u002Fwidget.try-on.ru\u002Ffitting-widget-bundle.js',\n id: 'fitting-widget-bundle',\n },\n {\n id: 'fitting-init',\n innerHTML: `\n window.fitting = window.fitting || function() {\n (window.fitting.q = window.fitting.q || []).push(arguments);\n };\n window.fitting('init', {\n apiKey: '${import.meta.env.VITE_TRY_ON_API_KEY}'\n });\n `,\n },\n ],\n})\n\u003C\u002Fscript>\n","vue","",[27,50,51,60,74,85,107,146,156,165,172,197,225,230,242,254,260,279,296,302,307,323,334,340,346,352,358,389,395,403,408,416,424],{"__ignoreMap":48},[52,53,56],"span",{"class":54,"line":55},"line",1,[52,57,59],{"class":58},"sHwdD","\u003C!-- pages\u002Fproduct\u002F[slug].vue -->\n",[52,61,63,67,71],{"class":54,"line":62},2,[52,64,66],{"class":65},"sMK4o","\u003C",[52,68,70],{"class":69},"swJcz","template",[52,72,73],{"class":65},">\n",[52,75,77,80,83],{"class":54,"line":76},3,[52,78,79],{"class":65}," \u003C",[52,81,82],{"class":69},"div",[52,84,73],{"class":65},[52,86,88,91,93,96,100,103,105],{"class":54,"line":87},4,[52,89,90],{"class":65}," \u003C",[52,92,10],{"class":69},[52,94,95],{"class":65},">",[52,97,99],{"class":98},"sTEyZ","{{ product.name }}",[52,101,102],{"class":65},"\u003C\u002F",[52,104,10],{"class":69},[52,106,73],{"class":65},[52,108,110,112,115,119,122,125,129,131,134,136,138,141,143],{"class":54,"line":109},5,[52,111,90],{"class":65},[52,113,114],{"class":69},"TryOnWidget",[52,116,118],{"class":117},"spNyl"," :product-name",[52,120,121],{"class":65},"=",[52,123,124],{"class":65},"\"",[52,126,128],{"class":127},"sfazB","product.name",[52,130,124],{"class":65},[52,132,133],{"class":117}," :image-url",[52,135,121],{"class":65},[52,137,124],{"class":65},[52,139,140],{"class":127},"product.image",[52,142,124],{"class":65},[52,144,145],{"class":65}," \u002F>\n",[52,147,149,152,154],{"class":54,"line":148},6,[52,150,151],{"class":65}," \u003C\u002F",[52,153,82],{"class":69},[52,155,73],{"class":65},[52,157,159,161,163],{"class":54,"line":158},7,[52,160,102],{"class":65},[52,162,70],{"class":69},[52,164,73],{"class":65},[52,166,168],{"class":54,"line":167},8,[52,169,171],{"emptyLinePlaceholder":170},true,"\n",[52,173,175,177,180,183,186,188,190,193,195],{"class":54,"line":174},9,[52,176,66],{"class":65},[52,178,179],{"class":69},"script",[52,181,182],{"class":117}," setup",[52,184,185],{"class":117}," lang",[52,187,121],{"class":65},[52,189,124],{"class":65},[52,191,192],{"class":127},"ts",[52,194,124],{"class":65},[52,196,73],{"class":65},[52,198,200,204,207,210,213,216,219,222],{"class":54,"line":199},10,[52,201,203],{"class":202},"s7zQu","import",[52,205,206],{"class":65}," {",[52,208,209],{"class":98}," useHead",[52,211,212],{"class":65}," }",[52,214,215],{"class":202}," from",[52,217,218],{"class":65}," '",[52,220,221],{"class":127},"#app",[52,223,224],{"class":65},"'\n",[52,226,228],{"class":54,"line":227},11,[52,229,171],{"emptyLinePlaceholder":170},[52,231,233,236,239],{"class":54,"line":232},12,[52,234,29],{"class":235},"s2Zo4",[52,237,238],{"class":98},"(",[52,240,241],{"class":65},"{\n",[52,243,245,248,251],{"class":54,"line":244},13,[52,246,247],{"class":69}," script",[52,249,250],{"class":65},":",[52,252,253],{"class":98}," [\n",[52,255,257],{"class":54,"line":256},14,[52,258,259],{"class":65}," {\n",[52,261,263,266,268,270,273,276],{"class":54,"line":262},15,[52,264,265],{"class":69}," src",[52,267,250],{"class":65},[52,269,218],{"class":65},[52,271,272],{"class":127},"https:\u002F\u002Fwidget.try-on.ru\u002Ffitting-widget-bundle.js",[52,274,275],{"class":65},"'",[52,277,278],{"class":65},",\n",[52,280,282,285,287,289,292,294],{"class":54,"line":281},16,[52,283,284],{"class":69}," id",[52,286,250],{"class":65},[52,288,218],{"class":65},[52,290,291],{"class":127},"fitting-widget-bundle",[52,293,275],{"class":65},[52,295,278],{"class":65},[52,297,299],{"class":54,"line":298},17,[52,300,301],{"class":65}," },\n",[52,303,305],{"class":54,"line":304},18,[52,306,259],{"class":65},[52,308,310,312,314,316,319,321],{"class":54,"line":309},19,[52,311,284],{"class":69},[52,313,250],{"class":65},[52,315,218],{"class":65},[52,317,318],{"class":127},"fitting-init",[52,320,275],{"class":65},[52,322,278],{"class":65},[52,324,326,329,331],{"class":54,"line":325},20,[52,327,328],{"class":69}," innerHTML",[52,330,250],{"class":65},[52,332,333],{"class":65}," `\n",[52,335,337],{"class":54,"line":336},21,[52,338,339],{"class":127}," window.fitting = window.fitting || function() {\n",[52,341,343],{"class":54,"line":342},22,[52,344,345],{"class":127}," (window.fitting.q = window.fitting.q || []).push(arguments);\n",[52,347,349],{"class":54,"line":348},23,[52,350,351],{"class":127}," };\n",[52,353,355],{"class":54,"line":354},24,[52,356,357],{"class":127}," window.fitting('init', {\n",[52,359,361,364,367,369,371,374,376,379,381,384,387],{"class":54,"line":360},25,[52,362,363],{"class":127}," apiKey: '",[52,365,366],{"class":65},"${",[52,368,203],{"class":202},[52,370,34],{"class":65},[52,372,373],{"class":98},"meta",[52,375,34],{"class":65},[52,377,378],{"class":98},"env",[52,380,34],{"class":65},[52,382,383],{"class":98},"VITE_TRY_ON_API_KEY",[52,385,386],{"class":65},"}",[52,388,224],{"class":127},[52,390,392],{"class":54,"line":391},26,[52,393,394],{"class":127}," });\n",[52,396,398,401],{"class":54,"line":397},27,[52,399,400],{"class":65}," `",[52,402,278],{"class":65},[52,404,406],{"class":54,"line":405},28,[52,407,301],{"class":65},[52,409,411,414],{"class":54,"line":410},29,[52,412,413],{"class":98}," ]",[52,415,278],{"class":65},[52,417,419,421],{"class":54,"line":418},30,[52,420,386],{"class":65},[52,422,423],{"class":98},")\n",[52,425,427,429,431],{"class":54,"line":426},31,[52,428,102],{"class":65},[52,430,179],{"class":69},[52,432,73],{"class":65},[36,434,436,437],{"id":435},"option-b-global-in-nuxtconfigts","Option B — Global in ",[27,438,33],{},[43,440,443],{"className":441,"code":442,"language":192,"meta":48,"style":48},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineNuxtConfig({\n app: {\n head: {\n script: [\n {\n src: 'https:\u002F\u002Fwidget.try-on.ru\u002Ffitting-widget-bundle.js',\n id: 'fitting-widget-bundle',\n },\n {\n id: 'fitting-init',\n innerHTML: `\n window.fitting = window.fitting || function() {\n (window.fitting.q = window.fitting.q || []).push(arguments);\n };\n window.fitting('init', {\n apiKey: '${import.meta.env.VITE_TRY_ON_API_KEY}'\n });\n `,\n },\n ],\n },\n },\n})\n",[27,444,445,460,470,479,488,493,508,523,528,532,546,555,560,565,570,575,600,605,612,616,623,627,632],{"__ignoreMap":48},[52,446,447,450,453,456,458],{"class":54,"line":55},[52,448,449],{"class":202},"export",[52,451,452],{"class":202}," default",[52,454,455],{"class":235}," defineNuxtConfig",[52,457,238],{"class":98},[52,459,241],{"class":65},[52,461,462,465,467],{"class":54,"line":62},[52,463,464],{"class":69}," app",[52,466,250],{"class":65},[52,468,469],{"class":65}," {\n",[52,471,472,475,477],{"class":54,"line":76},[52,473,474],{"class":69}," head",[52,476,250],{"class":65},[52,478,469],{"class":65},[52,480,481,484,486],{"class":54,"line":87},[52,482,483],{"class":69}," script",[52,485,250],{"class":65},[52,487,253],{"class":98},[52,489,490],{"class":54,"line":109},[52,491,492],{"class":65}," {\n",[52,494,495,498,500,502,504,506],{"class":54,"line":148},[52,496,497],{"class":69}," src",[52,499,250],{"class":65},[52,501,218],{"class":65},[52,503,272],{"class":127},[52,505,275],{"class":65},[52,507,278],{"class":65},[52,509,510,513,515,517,519,521],{"class":54,"line":158},[52,511,512],{"class":69}," id",[52,514,250],{"class":65},[52,516,218],{"class":65},[52,518,291],{"class":127},[52,520,275],{"class":65},[52,522,278],{"class":65},[52,524,525],{"class":54,"line":167},[52,526,527],{"class":65}," },\n",[52,529,530],{"class":54,"line":174},[52,531,492],{"class":65},[52,533,534,536,538,540,542,544],{"class":54,"line":199},[52,535,512],{"class":69},[52,537,250],{"class":65},[52,539,218],{"class":65},[52,541,318],{"class":127},[52,543,275],{"class":65},[52,545,278],{"class":65},[52,547,548,551,553],{"class":54,"line":227},[52,549,550],{"class":69}," innerHTML",[52,552,250],{"class":65},[52,554,333],{"class":65},[52,556,557],{"class":54,"line":232},[52,558,559],{"class":127}," window.fitting = window.fitting || function() {\n",[52,561,562],{"class":54,"line":244},[52,563,564],{"class":127}," (window.fitting.q = window.fitting.q || []).push(arguments);\n",[52,566,567],{"class":54,"line":256},[52,568,569],{"class":127}," };\n",[52,571,572],{"class":54,"line":262},[52,573,574],{"class":127}," window.fitting('init', {\n",[52,576,577,580,582,584,586,588,590,592,594,596,598],{"class":54,"line":281},[52,578,579],{"class":127}," apiKey: '",[52,581,366],{"class":65},[52,583,203],{"class":202},[52,585,34],{"class":65},[52,587,373],{"class":98},[52,589,34],{"class":65},[52,591,378],{"class":98},[52,593,34],{"class":65},[52,595,383],{"class":98},[52,597,386],{"class":65},[52,599,224],{"class":127},[52,601,602],{"class":54,"line":298},[52,603,604],{"class":127}," });\n",[52,606,607,610],{"class":54,"line":304},[52,608,609],{"class":65}," `",[52,611,278],{"class":65},[52,613,614],{"class":54,"line":309},[52,615,527],{"class":65},[52,617,618,621],{"class":54,"line":325},[52,619,620],{"class":98}," ]",[52,622,278],{"class":65},[52,624,625],{"class":54,"line":336},[52,626,301],{"class":65},[52,628,629],{"class":54,"line":342},[52,630,631],{"class":65}," },\n",[52,633,634,636],{"class":54,"line":348},[52,635,386],{"class":65},[52,637,423],{"class":98},[19,639,641],{"id":640},"_2-create-the-wrapper-component","2. Create the Wrapper Component",[43,643,645],{"className":45,"code":644,"language":47,"meta":48,"style":48},"\u003C!-- components\u002FTryOnWidget.vue -->\n\u003Ctemplate>\n \u003Cdiv>\n \u003Cdiv id=\"widget-container\" class=\"aspect-[3\u002F4] w-full max-w-[600px]\" \u002F>\n \u003Cbutton @click=\"handleTryOn\">Try On\u003C\u002Fbutton>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nconst props = defineProps\u003C{\n productName: string\n imageUrl: string\n}>()\n\nconst handleTryOn = () => {\n window.fitting('create', {\n targetElementId: 'widget-container',\n model: 'balanced',\n tryonItems: [\n {\n productName: props.productName,\n url: props.imageUrl,\n },\n ],\n })\n}\n\u003C\u002Fscript>\n",[27,646,647,652,660,668,700,730,738,746,750,770,786,797,806,814,818,835,859,874,890,899,904,921,937,942,949,956,961],{"__ignoreMap":48},[52,648,649],{"class":54,"line":55},[52,650,651],{"class":58},"\u003C!-- components\u002FTryOnWidget.vue -->\n",[52,653,654,656,658],{"class":54,"line":62},[52,655,66],{"class":65},[52,657,70],{"class":69},[52,659,73],{"class":65},[52,661,662,664,666],{"class":54,"line":76},[52,663,79],{"class":65},[52,665,82],{"class":69},[52,667,73],{"class":65},[52,669,670,672,674,677,679,681,684,686,689,691,693,696,698],{"class":54,"line":87},[52,671,90],{"class":65},[52,673,82],{"class":69},[52,675,676],{"class":117}," id",[52,678,121],{"class":65},[52,680,124],{"class":65},[52,682,683],{"class":127},"widget-container",[52,685,124],{"class":65},[52,687,688],{"class":117}," class",[52,690,121],{"class":65},[52,692,124],{"class":65},[52,694,695],{"class":127},"aspect-[3\u002F4] w-full max-w-[600px]",[52,697,124],{"class":65},[52,699,145],{"class":65},[52,701,702,704,707,710,712,714,717,719,721,724,726,728],{"class":54,"line":109},[52,703,90],{"class":65},[52,705,706],{"class":69},"button",[52,708,709],{"class":117}," @click",[52,711,121],{"class":65},[52,713,124],{"class":65},[52,715,716],{"class":127},"handleTryOn",[52,718,124],{"class":65},[52,720,95],{"class":65},[52,722,723],{"class":98},"Try On",[52,725,102],{"class":65},[52,727,706],{"class":69},[52,729,73],{"class":65},[52,731,732,734,736],{"class":54,"line":148},[52,733,151],{"class":65},[52,735,82],{"class":69},[52,737,73],{"class":65},[52,739,740,742,744],{"class":54,"line":158},[52,741,102],{"class":65},[52,743,70],{"class":69},[52,745,73],{"class":65},[52,747,748],{"class":54,"line":167},[52,749,171],{"emptyLinePlaceholder":170},[52,751,752,754,756,758,760,762,764,766,768],{"class":54,"line":174},[52,753,66],{"class":65},[52,755,179],{"class":69},[52,757,182],{"class":117},[52,759,185],{"class":117},[52,761,121],{"class":65},[52,763,124],{"class":65},[52,765,192],{"class":127},[52,767,124],{"class":65},[52,769,73],{"class":65},[52,771,772,775,778,780,783],{"class":54,"line":199},[52,773,774],{"class":117},"const",[52,776,777],{"class":98}," props ",[52,779,121],{"class":65},[52,781,782],{"class":235}," defineProps",[52,784,785],{"class":65},"\u003C{\n",[52,787,788,791,793],{"class":54,"line":227},[52,789,790],{"class":69}," productName",[52,792,250],{"class":65},[52,794,796],{"class":795},"sBMFI"," string\n",[52,798,799,802,804],{"class":54,"line":232},[52,800,801],{"class":69}," imageUrl",[52,803,250],{"class":65},[52,805,796],{"class":795},[52,807,808,811],{"class":54,"line":244},[52,809,810],{"class":65},"}>",[52,812,813],{"class":98},"()\n",[52,815,816],{"class":54,"line":256},[52,817,171],{"emptyLinePlaceholder":170},[52,819,820,822,825,827,830,833],{"class":54,"line":262},[52,821,774],{"class":117},[52,823,824],{"class":98}," handleTryOn ",[52,826,121],{"class":65},[52,828,829],{"class":65}," ()",[52,831,832],{"class":117}," =>",[52,834,469],{"class":65},[52,836,837,840,842,845,847,849,852,854,857],{"class":54,"line":281},[52,838,839],{"class":98}," window",[52,841,34],{"class":65},[52,843,844],{"class":235},"fitting",[52,846,238],{"class":69},[52,848,275],{"class":65},[52,850,851],{"class":127},"create",[52,853,275],{"class":65},[52,855,856],{"class":65},",",[52,858,469],{"class":65},[52,860,861,864,866,868,870,872],{"class":54,"line":298},[52,862,863],{"class":69}," targetElementId",[52,865,250],{"class":65},[52,867,218],{"class":65},[52,869,683],{"class":127},[52,871,275],{"class":65},[52,873,278],{"class":65},[52,875,876,879,881,883,886,888],{"class":54,"line":304},[52,877,878],{"class":69}," model",[52,880,250],{"class":65},[52,882,218],{"class":65},[52,884,885],{"class":127},"balanced",[52,887,275],{"class":65},[52,889,278],{"class":65},[52,891,892,895,897],{"class":54,"line":309},[52,893,894],{"class":69}," tryonItems",[52,896,250],{"class":65},[52,898,253],{"class":69},[52,900,901],{"class":54,"line":325},[52,902,903],{"class":65}," {\n",[52,905,906,909,911,914,916,919],{"class":54,"line":336},[52,907,908],{"class":69}," productName",[52,910,250],{"class":65},[52,912,913],{"class":98}," props",[52,915,34],{"class":65},[52,917,918],{"class":98},"productName",[52,920,278],{"class":65},[52,922,923,926,928,930,932,935],{"class":54,"line":342},[52,924,925],{"class":69}," url",[52,927,250],{"class":65},[52,929,913],{"class":98},[52,931,34],{"class":65},[52,933,934],{"class":98},"imageUrl",[52,936,278],{"class":65},[52,938,939],{"class":54,"line":348},[52,940,941],{"class":65}," },\n",[52,943,944,947],{"class":54,"line":354},[52,945,946],{"class":69}," ]",[52,948,278],{"class":65},[52,950,951,954],{"class":54,"line":360},[52,952,953],{"class":65}," }",[52,955,423],{"class":69},[52,957,958],{"class":54,"line":391},[52,959,960],{"class":65},"}\n",[52,962,963,965,967],{"class":54,"line":397},[52,964,102],{"class":65},[52,966,179],{"class":69},[52,968,73],{"class":65},[19,970,972],{"id":971},"environment-variable","Environment Variable",[15,974,975,976,250],{},"Add to ",[27,977,978],{},".env",[43,980,984],{"className":981,"code":982,"language":983,"meta":48,"style":48},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","VITE_TRY_ON_API_KEY=pk_live_xxx\n","bash",[27,985,986],{"__ignoreMap":48},[52,987,988,990,992],{"class":54,"line":55},[52,989,383],{"class":98},[52,991,121],{"class":65},[52,993,994],{"class":127},"pk_live_xxx\n",[996,997,998],"style",{},"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 .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 .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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 .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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}",{"title":48,"searchDepth":62,"depth":62,"links":1000},[1001,1007,1008],{"id":21,"depth":62,"text":22,"children":1002},[1003,1005],{"id":38,"depth":76,"text":1004},"Option A — Per Page with useHead",{"id":435,"depth":76,"text":1006},"Option B — Global in nuxt.config.ts",{"id":640,"depth":62,"text":641},{"id":971,"depth":62,"text":972},"Integrate with a Nuxt 3 \u002F Nuxt 4 app","md","i-lucide-nut",{},"\u002Fen\u002Fintegrations\u002Fnuxt",{"title":5,"description":1009},"en\u002Fintegrations\u002Fnuxt","3xlJgokLPj3qTkGk4XWJ2RH_Ar2hK0jHeC6j3_o9shE",[1018,1393,1729,2187,2278,3281,4080,4974,5654,6509,6926,7013,7896,8717,9566,10194],{"id":1019,"title":1020,"body":1021,"description":1386,"extension":1010,"icon":1387,"meta":1388,"navigation":170,"path":1389,"seo":1390,"stem":1391,"__hash__":1392},"content\u002Fapi\u002Findex.md","Справочник API",{"type":7,"value":1022,"toc":1380},[1023,1026,1030,1033,1078,1133,1136,1140,1143,1213,1217,1259,1377],[10,1024,1020],{"id":1025},"справочник-api",[19,1027,1029],{"id":1028},"windowfittinginit-options","window.fitting('init', options)",[15,1031,1032],{},"Инициализирует виджет. Вызывается один раз, до всех остальных методов.",[1034,1035,1036,1056],"table",{},[1037,1038,1039],"thead",{},[1040,1041,1042,1046,1049,1053],"tr",{},[1043,1044,1045],"th",{},"Параметр",[1043,1047,1048],{},"Тип",[1043,1050,1052],{"align":1051},"center","Обязателен",[1043,1054,1055],{},"Описание",[1057,1058,1059],"tbody",{},[1040,1060,1061,1067,1072,1075],{},[1062,1063,1064],"td",{},[27,1065,1066],{},"apiKey",[1062,1068,1069],{},[27,1070,1071],{},"string",[1062,1073,1074],{"align":1051},"Да",[1062,1076,1077],{},"Ваш API-ключ виджета",[43,1079,1083],{"className":1080,"code":1081,"language":1082,"meta":48,"style":48},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","window.fitting('init', {\n apiKey: 'pk_live_xxx',\n});\n","js",[27,1084,1085,1107,1123],{"__ignoreMap":48},[52,1086,1087,1090,1092,1094,1096,1098,1101,1103,1105],{"class":54,"line":55},[52,1088,1089],{"class":98},"window",[52,1091,34],{"class":65},[52,1093,844],{"class":235},[52,1095,238],{"class":98},[52,1097,275],{"class":65},[52,1099,1100],{"class":127},"init",[52,1102,275],{"class":65},[52,1104,856],{"class":65},[52,1106,469],{"class":65},[52,1108,1109,1112,1114,1116,1119,1121],{"class":54,"line":62},[52,1110,1111],{"class":69}," apiKey",[52,1113,250],{"class":65},[52,1115,218],{"class":65},[52,1117,1118],{"class":127},"pk_live_xxx",[52,1120,275],{"class":65},[52,1122,278],{"class":65},[52,1124,1125,1127,1130],{"class":54,"line":76},[52,1126,386],{"class":65},[52,1128,1129],{"class":98},")",[52,1131,1132],{"class":65},";\n",[1134,1135],"hr",{},[19,1137,1139],{"id":1138},"windowfittingcreate-options","window.fitting('create', options)",[15,1141,1142],{},"Запускает виртуальную примерку.",[1034,1144,1145,1157],{},[1037,1146,1147],{},[1040,1148,1149,1151,1153,1155],{},[1043,1150,1045],{},[1043,1152,1048],{},[1043,1154,1052],{"align":1051},[1043,1156,1055],{},[1057,1158,1159,1175,1192],{},[1040,1160,1161,1166,1170,1172],{},[1062,1162,1163],{},[27,1164,1165],{},"targetElementId",[1062,1167,1168],{},[27,1169,1071],{},[1062,1171,1074],{"align":1051},[1062,1173,1174],{},"ID контейнера, в котором отображается виджет",[1040,1176,1177,1182,1187,1189],{},[1062,1178,1179],{},[27,1180,1181],{},"tryonItems",[1062,1183,1184],{},[27,1185,1186],{},"TryonItem[]",[1062,1188,1074],{"align":1051},[1062,1190,1191],{},"Массив товаров, доступных для примерки",[1040,1193,1194,1199,1204,1207],{},[1062,1195,1196],{},[27,1197,1198],{},"model",[1062,1200,1201],{},[27,1202,1203],{},"'balanced' | 'quality' | 'performance'",[1062,1205,1206],{"align":1051},"Нет",[1062,1208,1209,1210,1129],{},"Режим отрисовки (по умолчанию: ",[27,1211,1212],{},"'balanced'",[36,1214,1216],{"id":1215},"tryonitem","TryonItem",[1034,1218,1219,1230],{},[1037,1220,1221],{},[1040,1222,1223,1226,1228],{},[1043,1224,1225],{},"Поле",[1043,1227,1048],{},[1043,1229,1055],{},[1057,1231,1232,1245],{},[1040,1233,1234,1238,1242],{},[1062,1235,1236],{},[27,1237,918],{},[1062,1239,1240],{},[27,1241,1071],{},[1062,1243,1244],{},"Отображаемое название товара",[1040,1246,1247,1252,1256],{},[1062,1248,1249],{},[27,1250,1251],{},"url",[1062,1253,1254],{},[27,1255,1071],{},[1062,1257,1258],{},"Полный URL изображения товара",[43,1260,1262],{"className":1080,"code":1261,"language":1082,"meta":48,"style":48},"window.fitting('create', {\n targetElementId: 'widget-container',\n model: 'balanced',\n tryonItems: [\n {\n productName: 'Джинсовая куртка',\n url: 'https:\u002F\u002Fexample.com\u002Fjacket.png',\n },\n ],\n});\n",[27,1263,1264,1284,1299,1314,1323,1327,1343,1359,1363,1369],{"__ignoreMap":48},[52,1265,1266,1268,1270,1272,1274,1276,1278,1280,1282],{"class":54,"line":55},[52,1267,1089],{"class":98},[52,1269,34],{"class":65},[52,1271,844],{"class":235},[52,1273,238],{"class":98},[52,1275,275],{"class":65},[52,1277,851],{"class":127},[52,1279,275],{"class":65},[52,1281,856],{"class":65},[52,1283,469],{"class":65},[52,1285,1286,1289,1291,1293,1295,1297],{"class":54,"line":62},[52,1287,1288],{"class":69}," targetElementId",[52,1290,250],{"class":65},[52,1292,218],{"class":65},[52,1294,683],{"class":127},[52,1296,275],{"class":65},[52,1298,278],{"class":65},[52,1300,1301,1304,1306,1308,1310,1312],{"class":54,"line":76},[52,1302,1303],{"class":69}," model",[52,1305,250],{"class":65},[52,1307,218],{"class":65},[52,1309,885],{"class":127},[52,1311,275],{"class":65},[52,1313,278],{"class":65},[52,1315,1316,1319,1321],{"class":54,"line":87},[52,1317,1318],{"class":69}," tryonItems",[52,1320,250],{"class":65},[52,1322,253],{"class":98},[52,1324,1325],{"class":54,"line":109},[52,1326,259],{"class":65},[52,1328,1329,1332,1334,1336,1339,1341],{"class":54,"line":148},[52,1330,1331],{"class":69}," productName",[52,1333,250],{"class":65},[52,1335,218],{"class":65},[52,1337,1338],{"class":127},"Джинсовая куртка",[52,1340,275],{"class":65},[52,1342,278],{"class":65},[52,1344,1345,1348,1350,1352,1355,1357],{"class":54,"line":158},[52,1346,1347],{"class":69}," url",[52,1349,250],{"class":65},[52,1351,218],{"class":65},[52,1353,1354],{"class":127},"https:\u002F\u002Fexample.com\u002Fjacket.png",[52,1356,275],{"class":65},[52,1358,278],{"class":65},[52,1360,1361],{"class":54,"line":167},[52,1362,301],{"class":65},[52,1364,1365,1367],{"class":54,"line":174},[52,1366,413],{"class":98},[52,1368,278],{"class":65},[52,1370,1371,1373,1375],{"class":54,"line":199},[52,1372,386],{"class":65},[52,1374,1129],{"class":98},[52,1376,1132],{"class":65},[996,1378,1379],{},"html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}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":48,"searchDepth":62,"depth":62,"links":1381},[1382,1383],{"id":1028,"depth":62,"text":1029},{"id":1138,"depth":62,"text":1139,"children":1384},[1385],{"id":1215,"depth":76,"text":1216},"Полный справочник по API Fitting Widget","i-lucide-code",{},"\u002Fapi",{"title":1020,"description":1386},"api\u002Findex","nBz9Z0BX1B-BPJzD-HVF5oHrejoQd0__hLi-_PGCmvk",{"id":1394,"title":1395,"body":1396,"description":1723,"extension":1010,"icon":1387,"meta":1724,"navigation":170,"path":1725,"seo":1726,"stem":1727,"__hash__":1728},"content\u002Fen\u002Fapi\u002Findex.md","API Reference",{"type":7,"value":1397,"toc":1717},[1398,1401,1403,1406,1442,1488,1490,1492,1495,1560,1562,1603,1715],[10,1399,1395],{"id":1400},"api-reference",[19,1402,1029],{"id":1028},[15,1404,1405],{},"Initializes the widget. Call this once, before any other methods.",[1034,1407,1408,1424],{},[1037,1409,1410],{},[1040,1411,1412,1415,1418,1421],{},[1043,1413,1414],{},"Parameter",[1043,1416,1417],{},"Type",[1043,1419,1420],{"align":1051},"Required",[1043,1422,1423],{},"Description",[1057,1425,1426],{},[1040,1427,1428,1432,1436,1439],{},[1062,1429,1430],{},[27,1431,1066],{},[1062,1433,1434],{},[27,1435,1071],{},[1062,1437,1438],{"align":1051},"Yes",[1062,1440,1441],{},"Your widget API key",[43,1443,1444],{"className":1080,"code":1081,"language":1082,"meta":48,"style":48},[27,1445,1446,1466,1480],{"__ignoreMap":48},[52,1447,1448,1450,1452,1454,1456,1458,1460,1462,1464],{"class":54,"line":55},[52,1449,1089],{"class":98},[52,1451,34],{"class":65},[52,1453,844],{"class":235},[52,1455,238],{"class":98},[52,1457,275],{"class":65},[52,1459,1100],{"class":127},[52,1461,275],{"class":65},[52,1463,856],{"class":65},[52,1465,469],{"class":65},[52,1467,1468,1470,1472,1474,1476,1478],{"class":54,"line":62},[52,1469,1111],{"class":69},[52,1471,250],{"class":65},[52,1473,218],{"class":65},[52,1475,1118],{"class":127},[52,1477,275],{"class":65},[52,1479,278],{"class":65},[52,1481,1482,1484,1486],{"class":54,"line":76},[52,1483,386],{"class":65},[52,1485,1129],{"class":98},[52,1487,1132],{"class":65},[1134,1489],{},[19,1491,1139],{"id":1138},[15,1493,1494],{},"Opens the virtual try-on experience.",[1034,1496,1497,1509],{},[1037,1498,1499],{},[1040,1500,1501,1503,1505,1507],{},[1043,1502,1414],{},[1043,1504,1417],{},[1043,1506,1420],{"align":1051},[1043,1508,1423],{},[1057,1510,1511,1526,1541],{},[1040,1512,1513,1517,1521,1523],{},[1062,1514,1515],{},[27,1516,1165],{},[1062,1518,1519],{},[27,1520,1071],{},[1062,1522,1438],{"align":1051},[1062,1524,1525],{},"ID of the container element where the widget renders",[1040,1527,1528,1532,1536,1538],{},[1062,1529,1530],{},[27,1531,1181],{},[1062,1533,1534],{},[27,1535,1186],{},[1062,1537,1438],{"align":1051},[1062,1539,1540],{},"Array of items available for try-on",[1040,1542,1543,1547,1552,1555],{},[1062,1544,1545],{},[27,1546,1198],{},[1062,1548,1549],{},[27,1550,1551],{},"'balanced' | 'quality' | 'speed'",[1062,1553,1554],{"align":1051},"No",[1062,1556,1557,1558,1129],{},"Rendering model (default: ",[27,1559,1212],{},[36,1561,1216],{"id":1215},[1034,1563,1564,1575],{},[1037,1565,1566],{},[1040,1567,1568,1571,1573],{},[1043,1569,1570],{},"Field",[1043,1572,1417],{},[1043,1574,1423],{},[1057,1576,1577,1590],{},[1040,1578,1579,1583,1587],{},[1062,1580,1581],{},[27,1582,918],{},[1062,1584,1585],{},[27,1586,1071],{},[1062,1588,1589],{},"Display name of the garment",[1040,1591,1592,1596,1600],{},[1062,1593,1594],{},[27,1595,1251],{},[1062,1597,1598],{},[27,1599,1071],{},[1062,1601,1602],{},"Full URL to the garment image",[43,1604,1606],{"className":1080,"code":1605,"language":1082,"meta":48,"style":48},"window.fitting('create', {\n targetElementId: 'widget-container',\n model: 'balanced',\n tryonItems: [\n {\n productName: 'Denim Jacket',\n url: 'https:\u002F\u002Fexample.com\u002Fjacket.png',\n },\n ],\n});\n",[27,1607,1608,1628,1642,1656,1664,1668,1683,1697,1701,1707],{"__ignoreMap":48},[52,1609,1610,1612,1614,1616,1618,1620,1622,1624,1626],{"class":54,"line":55},[52,1611,1089],{"class":98},[52,1613,34],{"class":65},[52,1615,844],{"class":235},[52,1617,238],{"class":98},[52,1619,275],{"class":65},[52,1621,851],{"class":127},[52,1623,275],{"class":65},[52,1625,856],{"class":65},[52,1627,469],{"class":65},[52,1629,1630,1632,1634,1636,1638,1640],{"class":54,"line":62},[52,1631,1288],{"class":69},[52,1633,250],{"class":65},[52,1635,218],{"class":65},[52,1637,683],{"class":127},[52,1639,275],{"class":65},[52,1641,278],{"class":65},[52,1643,1644,1646,1648,1650,1652,1654],{"class":54,"line":76},[52,1645,1303],{"class":69},[52,1647,250],{"class":65},[52,1649,218],{"class":65},[52,1651,885],{"class":127},[52,1653,275],{"class":65},[52,1655,278],{"class":65},[52,1657,1658,1660,1662],{"class":54,"line":87},[52,1659,1318],{"class":69},[52,1661,250],{"class":65},[52,1663,253],{"class":98},[52,1665,1666],{"class":54,"line":109},[52,1667,259],{"class":65},[52,1669,1670,1672,1674,1676,1679,1681],{"class":54,"line":148},[52,1671,1331],{"class":69},[52,1673,250],{"class":65},[52,1675,218],{"class":65},[52,1677,1678],{"class":127},"Denim Jacket",[52,1680,275],{"class":65},[52,1682,278],{"class":65},[52,1684,1685,1687,1689,1691,1693,1695],{"class":54,"line":158},[52,1686,1347],{"class":69},[52,1688,250],{"class":65},[52,1690,218],{"class":65},[52,1692,1354],{"class":127},[52,1694,275],{"class":65},[52,1696,278],{"class":65},[52,1698,1699],{"class":54,"line":167},[52,1700,301],{"class":65},[52,1702,1703,1705],{"class":54,"line":174},[52,1704,413],{"class":98},[52,1706,278],{"class":65},[52,1708,1709,1711,1713],{"class":54,"line":199},[52,1710,386],{"class":65},[52,1712,1129],{"class":98},[52,1714,1132],{"class":65},[996,1716,1379],{},{"title":48,"searchDepth":62,"depth":62,"links":1718},[1719,1720],{"id":1028,"depth":62,"text":1029},{"id":1138,"depth":62,"text":1139,"children":1721},[1722],{"id":1215,"depth":76,"text":1216},"Complete reference for the Fitting Widget API",{},"\u002Fen\u002Fapi",{"title":1395,"description":1723},"en\u002Fapi\u002Findex","5vrf4TtfB7Sr4MpfgLzStW-oF0xDBiShwkqA4UFzgA0",{"id":1730,"title":1731,"body":1732,"description":2180,"extension":1010,"icon":2181,"meta":2182,"navigation":170,"path":2183,"seo":2184,"stem":2185,"__hash__":2186},"content\u002Fen\u002Fgetting-started\u002Fquick-start.md","Quick Start",{"type":7,"value":1733,"toc":2171},[1734,1737,1740,1744,1755,1759,1770,1820,1824,1980,1984,1991,2018,2022,2028,2141,2145,2148,2152,2168],[10,1735,1731],{"id":1736},"quick-start",[15,1738,1739],{},"Follow these steps to add virtual try-on to your e-commerce site.",[19,1741,1743],{"id":1742},"_1-get-your-api-key","1. Get Your API Key",[15,1745,1746,1747,1754],{},"Sign up at ",[1748,1749,1753],"a",{"href":1750,"rel":1751},"https:\u002F\u002Fwidget.try-on.ru",[1752],"nofollow","widget.try-on.ru"," to obtain your free API key.",[19,1756,1758],{"id":1757},"_2-load-the-widget-script","2. Load the Widget Script",[15,1760,1761,1762,1765,1766,1769],{},"Add the following ",[27,1763,1764],{},"\u003Cscript>"," tag to your page, ideally right before the closing ",[27,1767,1768],{},"\u003C\u002Fbody>"," tag:",[43,1771,1775],{"className":1772,"code":1773,"language":1774,"meta":48,"style":48},"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",[27,1776,1777,1784,1798,1811],{"__ignoreMap":48},[52,1778,1779,1781],{"class":54,"line":55},[52,1780,66],{"class":65},[52,1782,1783],{"class":69},"script\n",[52,1785,1786,1789,1791,1793,1795],{"class":54,"line":62},[52,1787,1788],{"class":117}," src",[52,1790,121],{"class":65},[52,1792,124],{"class":65},[52,1794,272],{"class":127},[52,1796,1797],{"class":65},"\"\n",[52,1799,1800,1803,1805,1807,1809],{"class":54,"line":76},[52,1801,1802],{"class":117}," id",[52,1804,121],{"class":65},[52,1806,124],{"class":65},[52,1808,291],{"class":127},[52,1810,1797],{"class":65},[52,1812,1813,1816,1818],{"class":54,"line":87},[52,1814,1815],{"class":65},">\u003C\u002F",[52,1817,179],{"class":69},[52,1819,73],{"class":65},[19,1821,1823],{"id":1822},"_3-initialize-the-widget","3. Initialize the Widget",[43,1825,1827],{"className":1772,"code":1826,"language":1774,"meta":48,"style":48},"\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",[27,1828,1829,1847,1876,1925,1930,1950,1964,1972],{"__ignoreMap":48},[52,1830,1831,1833,1835,1837,1839,1841,1843,1845],{"class":54,"line":55},[52,1832,66],{"class":65},[52,1834,179],{"class":69},[52,1836,676],{"class":117},[52,1838,121],{"class":65},[52,1840,124],{"class":65},[52,1842,318],{"class":127},[52,1844,124],{"class":65},[52,1846,73],{"class":65},[52,1848,1849,1851,1853,1856,1858,1861,1863,1865,1868,1871,1874],{"class":54,"line":62},[52,1850,839],{"class":98},[52,1852,34],{"class":65},[52,1854,1855],{"class":98},"fitting ",[52,1857,121],{"class":65},[52,1859,1860],{"class":98}," window",[52,1862,34],{"class":65},[52,1864,1855],{"class":98},[52,1866,1867],{"class":65},"||",[52,1869,1870],{"class":117}," function",[52,1872,1873],{"class":65},"()",[52,1875,469],{"class":65},[52,1877,1878,1881,1883,1885,1887,1889,1892,1895,1897,1899,1901,1903,1905,1908,1911,1913,1916,1918,1921,1923],{"class":54,"line":76},[52,1879,1880],{"class":69}," (",[52,1882,1089],{"class":98},[52,1884,34],{"class":65},[52,1886,844],{"class":98},[52,1888,34],{"class":65},[52,1890,1891],{"class":98},"q",[52,1893,1894],{"class":65}," =",[52,1896,1860],{"class":98},[52,1898,34],{"class":65},[52,1900,844],{"class":98},[52,1902,34],{"class":65},[52,1904,1891],{"class":98},[52,1906,1907],{"class":65}," ||",[52,1909,1910],{"class":69}," [])",[52,1912,34],{"class":65},[52,1914,1915],{"class":235},"push",[52,1917,238],{"class":69},[52,1919,1920],{"class":98},"arguments",[52,1922,1129],{"class":69},[52,1924,1132],{"class":65},[52,1926,1927],{"class":54,"line":87},[52,1928,1929],{"class":65}," };\n",[52,1931,1932,1934,1936,1938,1940,1942,1944,1946,1948],{"class":54,"line":109},[52,1933,839],{"class":98},[52,1935,34],{"class":65},[52,1937,844],{"class":235},[52,1939,238],{"class":98},[52,1941,275],{"class":65},[52,1943,1100],{"class":127},[52,1945,275],{"class":65},[52,1947,856],{"class":65},[52,1949,469],{"class":65},[52,1951,1952,1955,1957,1959,1962],{"class":54,"line":148},[52,1953,1954],{"class":69}," apiKey",[52,1956,250],{"class":65},[52,1958,218],{"class":65},[52,1960,1961],{"class":127},"YOUR_API_KEY",[52,1963,224],{"class":65},[52,1965,1966,1968,1970],{"class":54,"line":158},[52,1967,953],{"class":65},[52,1969,1129],{"class":98},[52,1971,1132],{"class":65},[52,1973,1974,1976,1978],{"class":54,"line":167},[52,1975,102],{"class":65},[52,1977,179],{"class":69},[52,1979,73],{"class":65},[19,1981,1983],{"id":1982},"_4-add-a-container","4. Add a Container",[15,1985,1986,1987,1990],{},"Place a ",[27,1988,1989],{},"\u003Cdiv>"," wherever you want the widget to appear:",[43,1992,1994],{"className":1772,"code":1993,"language":1774,"meta":48,"style":48},"\u003Cdiv id=\"widget-container\">\u003C\u002Fdiv>\n",[27,1995,1996],{"__ignoreMap":48},[52,1997,1998,2000,2002,2004,2006,2008,2010,2012,2014,2016],{"class":54,"line":55},[52,1999,66],{"class":65},[52,2001,82],{"class":69},[52,2003,676],{"class":117},[52,2005,121],{"class":65},[52,2007,124],{"class":65},[52,2009,683],{"class":127},[52,2011,124],{"class":65},[52,2013,1815],{"class":65},[52,2015,82],{"class":69},[52,2017,73],{"class":65},[19,2019,2021],{"id":2020},"_5-launch-the-widget","5. Launch the Widget",[15,2023,2024,2025,2027],{},"Call the ",[27,2026,851],{}," method when the user clicks a button:",[43,2029,2031],{"className":1080,"code":2030,"language":1082,"meta":48,"style":48},"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",[27,2032,2033,2053,2067,2081,2089,2093,2108,2123,2127,2133],{"__ignoreMap":48},[52,2034,2035,2037,2039,2041,2043,2045,2047,2049,2051],{"class":54,"line":55},[52,2036,1089],{"class":98},[52,2038,34],{"class":65},[52,2040,844],{"class":235},[52,2042,238],{"class":98},[52,2044,275],{"class":65},[52,2046,851],{"class":127},[52,2048,275],{"class":65},[52,2050,856],{"class":65},[52,2052,469],{"class":65},[52,2054,2055,2057,2059,2061,2063,2065],{"class":54,"line":62},[52,2056,1288],{"class":69},[52,2058,250],{"class":65},[52,2060,218],{"class":65},[52,2062,683],{"class":127},[52,2064,275],{"class":65},[52,2066,278],{"class":65},[52,2068,2069,2071,2073,2075,2077,2079],{"class":54,"line":76},[52,2070,1303],{"class":69},[52,2072,250],{"class":65},[52,2074,218],{"class":65},[52,2076,885],{"class":127},[52,2078,275],{"class":65},[52,2080,278],{"class":65},[52,2082,2083,2085,2087],{"class":54,"line":87},[52,2084,1318],{"class":69},[52,2086,250],{"class":65},[52,2088,253],{"class":98},[52,2090,2091],{"class":54,"line":109},[52,2092,259],{"class":65},[52,2094,2095,2097,2099,2101,2104,2106],{"class":54,"line":148},[52,2096,1331],{"class":69},[52,2098,250],{"class":65},[52,2100,218],{"class":65},[52,2102,2103],{"class":127},"Classic Denim Jacket",[52,2105,275],{"class":65},[52,2107,278],{"class":65},[52,2109,2110,2112,2114,2116,2119,2121],{"class":54,"line":158},[52,2111,1347],{"class":69},[52,2113,250],{"class":65},[52,2115,218],{"class":65},[52,2117,2118],{"class":127},"https:\u002F\u002Fyour-store.com\u002Fimages\u002Fjacket.jpg",[52,2120,275],{"class":65},[52,2122,278],{"class":65},[52,2124,2125],{"class":54,"line":167},[52,2126,301],{"class":65},[52,2128,2129,2131],{"class":54,"line":174},[52,2130,413],{"class":98},[52,2132,278],{"class":65},[52,2134,2135,2137,2139],{"class":54,"line":199},[52,2136,386],{"class":65},[52,2138,1129],{"class":98},[52,2140,1132],{"class":65},[19,2142,2144],{"id":2143},"result","Result",[15,2146,2147],{},"Your customers can now upload a photo and see the garment on them instantly.",[19,2149,2151],{"id":2150},"next-steps","Next Steps",[2153,2154,2155,2163],"ul",{},[2156,2157,2158,2159,34],"li",{},"See framework-specific guides under ",[1748,2160,2162],{"href":2161},"\u002Fintegrations\u002Fvanilla-js","Integrations",[2156,2164,2165,2166,34],{},"Explore the full ",[1748,2167,1395],{"href":1389},[996,2169,2170],{},"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":48,"searchDepth":62,"depth":62,"links":2172},[2173,2174,2175,2176,2177,2178,2179],{"id":1742,"depth":62,"text":1743},{"id":1757,"depth":62,"text":1758},{"id":1822,"depth":62,"text":1823},{"id":1982,"depth":62,"text":1983},{"id":2020,"depth":62,"text":2021},{"id":2143,"depth":62,"text":2144},{"id":2150,"depth":62,"text":2151},"Get the Fitting Widget running in minutes","i-lucide-rocket",{},"\u002Fen\u002Fgetting-started\u002Fquick-start",{"title":1731,"description":2180},"en\u002Fgetting-started\u002Fquick-start","Cy6rzr6z6R2nhbEqOeB18fbbe2pOjXOk0inGXqhKfHg",{"id":2188,"title":2189,"body":2190,"description":2271,"extension":1010,"icon":2272,"meta":2273,"navigation":170,"path":2274,"seo":2275,"stem":2276,"__hash__":2277},"content\u002Fen\u002Findex.md","Introduction",{"type":7,"value":2191,"toc":2266},[2192,2196,2204,2208,2234,2238,2257,2259],[10,2193,2195],{"id":2194},"fitting-widget-virtual-try-on","Fitting Widget — Virtual Try-On",[15,2197,2198,2199,2203],{},"The ",[2200,2201,2202],"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.",[19,2205,2207],{"id":2206},"key-features","Key Features",[2153,2209,2210,2216,2222,2228],{},[2156,2211,2212,2215],{},[2200,2213,2214],{},"Quick Integration"," — Add one script tag and a few lines of code.",[2156,2217,2218,2221],{},[2200,2219,2220],{},"Framework-Agnostic"," — Works with Vanilla JS, React, Vue, Next.js, Nuxt, and more.",[2156,2223,2224,2227],{},[2200,2225,2226],{},"Customizable"," — Style the widget to match your brand.",[2156,2229,2230,2233],{},[2200,2231,2232],{},"Lightweight"," — Optimized loading; won't slow down your store.",[19,2235,2237],{"id":2236},"how-it-works","How It Works",[2239,2240,2241,2244,2247,2254],"ol",{},[2156,2242,2243],{},"Load the widget script on your page.",[2156,2245,2246],{},"Initialize with your API key.",[2156,2248,2249,2250,2253],{},"Call ",[27,2251,2252],{},"window.fitting('create', { ... })"," with product image URLs.",[2156,2255,2256],{},"The widget renders inside a container element of your choice.",[19,2258,1731],{"id":1736},[15,2260,2261,2262,2265],{},"Head over to the ",[1748,2263,1731],{"href":2264},"\u002Fgetting-started\u002Fquick-start"," guide to get up and running in under 5 minutes.",{"title":48,"searchDepth":62,"depth":62,"links":2267},[2268,2269,2270],{"id":2206,"depth":62,"text":2207},{"id":2236,"depth":62,"text":2237},{"id":1736,"depth":62,"text":1731},"What is the Fitting Widget and why use it?","i-lucide-sparkles",{},"\u002Fen",{"title":2189,"description":2271},"en\u002Findex","zjI3aBTZ8Y2iRdmkieXP4q0o6PKbIjE5hUkB6Y1ledA",{"id":2279,"title":2280,"body":2281,"description":3274,"extension":1010,"icon":3275,"meta":3276,"navigation":170,"path":3277,"seo":3278,"stem":3279,"__hash__":3280},"content\u002Fen\u002Fintegrations\u002Fnextjs.md","Next.js",{"type":7,"value":2282,"toc":3265},[2283,2287,2297,2301,2311,2322,2599,2603,2971,2975,3241,3243,3249,3262],[10,2284,2286],{"id":2285},"nextjs-integration","Next.js Integration",[15,2288,2289,2290,2293,2294,34],{},"The Fitting Widget works with both the ",[2200,2291,2292],{},"Pages Router"," and ",[2200,2295,2296],{},"App Router",[19,2298,2300],{"id":2299},"app-router-recommended","App Router (Recommended)",[15,2302,2303,2304,2307,2308,34],{},"Use the Next.js ",[27,2305,2306],{},"Script"," component with ",[27,2309,2310],{},"strategy=\"afterInteractive\"",[36,2312,2314,2315,2318,2319],{"id":2313},"step-1-load-scripts-in-layouttsx-or-pagetsx","Step 1 — Load Scripts in ",[27,2316,2317],{},"layout.tsx"," or ",[27,2320,2321],{},"page.tsx",[43,2323,2327],{"className":2324,"code":2325,"language":2326,"meta":48,"style":48},"language-tsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import Script from 'next\u002Fscript';\n\nexport default function ProductLayout({ children }: { children: React.ReactNode }) {\n return (\n \u003C>\n {children}\n\n \u003CScript\n src=\"https:\u002F\u002Fwidget.try-on.ru\u002Ffitting-widget-bundle.js\"\n strategy=\"afterInteractive\"\n id=\"fitting-widget-bundle\"\n \u002F>\n\n \u003CScript\n strategy=\"afterInteractive\"\n id=\"fitting-init\"\n >\n {`\n window.fitting = window.fitting || function() {\n (window.fitting.q = window.fitting.q || []).push(arguments);\n };\n window.fitting('init', {\n apiKey: '${process.env.NEXT_PUBLIC_TRY_ON_API_KEY}'\n });\n `}\n \u003C\u002FScript>\n \u003C\u002F>\n );\n}\n","tsx",[27,2328,2329,2348,2352,2392,2400,2405,2415,2419,2427,2440,2454,2467,2472,2476,2482,2494,2506,2511,2519,2524,2529,2534,2539,2562,2567,2574,2583,2588,2595],{"__ignoreMap":48},[52,2330,2331,2333,2336,2339,2341,2344,2346],{"class":54,"line":55},[52,2332,203],{"class":202},[52,2334,2335],{"class":98}," Script ",[52,2337,2338],{"class":202},"from",[52,2340,218],{"class":65},[52,2342,2343],{"class":127},"next\u002Fscript",[52,2345,275],{"class":65},[52,2347,1132],{"class":65},[52,2349,2350],{"class":54,"line":62},[52,2351,171],{"emptyLinePlaceholder":170},[52,2353,2354,2356,2358,2360,2363,2366,2370,2373,2375,2377,2379,2382,2384,2387,2390],{"class":54,"line":76},[52,2355,449],{"class":202},[52,2357,452],{"class":202},[52,2359,1870],{"class":117},[52,2361,2362],{"class":235}," ProductLayout",[52,2364,2365],{"class":65},"({",[52,2367,2369],{"class":2368},"sHdIc"," children",[52,2371,2372],{"class":65}," }:",[52,2374,206],{"class":65},[52,2376,2369],{"class":69},[52,2378,250],{"class":65},[52,2380,2381],{"class":795}," React",[52,2383,34],{"class":65},[52,2385,2386],{"class":795},"ReactNode",[52,2388,2389],{"class":65}," })",[52,2391,469],{"class":65},[52,2393,2394,2397],{"class":54,"line":87},[52,2395,2396],{"class":202}," return",[52,2398,2399],{"class":69}," (\n",[52,2401,2402],{"class":54,"line":109},[52,2403,2404],{"class":65}," \u003C>\n",[52,2406,2407,2410,2413],{"class":54,"line":148},[52,2408,2409],{"class":65}," {",[52,2411,2412],{"class":98},"children",[52,2414,960],{"class":65},[52,2416,2417],{"class":54,"line":158},[52,2418,171],{"emptyLinePlaceholder":170},[52,2420,2421,2424],{"class":54,"line":167},[52,2422,2423],{"class":65}," \u003C",[52,2425,2426],{"class":795},"Script\n",[52,2428,2429,2432,2434,2436,2438],{"class":54,"line":174},[52,2430,2431],{"class":117}," src",[52,2433,121],{"class":65},[52,2435,124],{"class":65},[52,2437,272],{"class":127},[52,2439,1797],{"class":65},[52,2441,2442,2445,2447,2449,2452],{"class":54,"line":199},[52,2443,2444],{"class":117}," strategy",[52,2446,121],{"class":65},[52,2448,124],{"class":65},[52,2450,2451],{"class":127},"afterInteractive",[52,2453,1797],{"class":65},[52,2455,2456,2459,2461,2463,2465],{"class":54,"line":227},[52,2457,2458],{"class":117}," id",[52,2460,121],{"class":65},[52,2462,124],{"class":65},[52,2464,291],{"class":127},[52,2466,1797],{"class":65},[52,2468,2469],{"class":54,"line":232},[52,2470,2471],{"class":65}," \u002F>\n",[52,2473,2474],{"class":54,"line":244},[52,2475,171],{"emptyLinePlaceholder":170},[52,2477,2478,2480],{"class":54,"line":256},[52,2479,2423],{"class":65},[52,2481,2426],{"class":795},[52,2483,2484,2486,2488,2490,2492],{"class":54,"line":262},[52,2485,2444],{"class":117},[52,2487,121],{"class":65},[52,2489,124],{"class":65},[52,2491,2451],{"class":127},[52,2493,1797],{"class":65},[52,2495,2496,2498,2500,2502,2504],{"class":54,"line":281},[52,2497,2458],{"class":117},[52,2499,121],{"class":65},[52,2501,124],{"class":65},[52,2503,318],{"class":127},[52,2505,1797],{"class":65},[52,2507,2508],{"class":54,"line":298},[52,2509,2510],{"class":65}," >\n",[52,2512,2513,2516],{"class":54,"line":304},[52,2514,2515],{"class":65}," {",[52,2517,2518],{"class":65},"`\n",[52,2520,2521],{"class":54,"line":309},[52,2522,2523],{"class":127}," window.fitting = window.fitting || function() {\n",[52,2525,2526],{"class":54,"line":325},[52,2527,2528],{"class":127}," (window.fitting.q = window.fitting.q || []).push(arguments);\n",[52,2530,2531],{"class":54,"line":336},[52,2532,2533],{"class":127}," };\n",[52,2535,2536],{"class":54,"line":342},[52,2537,2538],{"class":127}," window.fitting('init', {\n",[52,2540,2541,2544,2546,2549,2551,2553,2555,2558,2560],{"class":54,"line":348},[52,2542,2543],{"class":127}," apiKey: '",[52,2545,366],{"class":65},[52,2547,2548],{"class":98},"process",[52,2550,34],{"class":65},[52,2552,378],{"class":98},[52,2554,34],{"class":65},[52,2556,2557],{"class":98},"NEXT_PUBLIC_TRY_ON_API_KEY",[52,2559,386],{"class":65},[52,2561,224],{"class":127},[52,2563,2564],{"class":54,"line":354},[52,2565,2566],{"class":127}," });\n",[52,2568,2569,2572],{"class":54,"line":360},[52,2570,2571],{"class":65}," `",[52,2573,960],{"class":65},[52,2575,2576,2579,2581],{"class":54,"line":391},[52,2577,2578],{"class":65}," \u003C\u002F",[52,2580,2306],{"class":795},[52,2582,73],{"class":65},[52,2584,2585],{"class":54,"line":397},[52,2586,2587],{"class":65}," \u003C\u002F>\n",[52,2589,2590,2593],{"class":54,"line":405},[52,2591,2592],{"class":69}," )",[52,2594,1132],{"class":65},[52,2596,2597],{"class":54,"line":410},[52,2598,960],{"class":65},[36,2600,2602],{"id":2601},"step-2-create-the-widget-button","Step 2 — Create the Widget Button",[43,2604,2606],{"className":2324,"code":2605,"language":2326,"meta":48,"style":48},"'use client';\n\ninterface TryonItem {\n productName: string;\n url: string;\n}\n\ndeclare global {\n interface Window {\n fitting: (command: string, options?: unknown) => void;\n }\n}\n\nexport function TryOnButton({ items }: { items: TryonItem[] }) {\n const handleClick = () => {\n window.fitting('create', {\n targetElementId: 'widget-container',\n model: 'balanced',\n tryonItems: items,\n });\n };\n\n return (\n \u003C>\n \u003Cdiv id=\"widget-container\" style={{ width: '100%', maxWidth: 600, aspectRatio: '3\u002F4' }} \u002F>\n \u003Cbutton onClick={handleClick}>Try On\u003C\u002Fbutton>\n \u003C\u002F>\n );\n}\n",[27,2607,2608,2619,2623,2633,2644,2655,2659,2663,2673,2683,2720,2725,2729,2733,2765,2781,2802,2817,2832,2843,2852,2856,2860,2866,2870,2932,2957,2961,2967],{"__ignoreMap":48},[52,2609,2610,2612,2615,2617],{"class":54,"line":55},[52,2611,275],{"class":65},[52,2613,2614],{"class":127},"use client",[52,2616,275],{"class":65},[52,2618,1132],{"class":65},[52,2620,2621],{"class":54,"line":62},[52,2622,171],{"emptyLinePlaceholder":170},[52,2624,2625,2628,2631],{"class":54,"line":76},[52,2626,2627],{"class":117},"interface",[52,2629,2630],{"class":795}," TryonItem",[52,2632,469],{"class":65},[52,2634,2635,2637,2639,2642],{"class":54,"line":87},[52,2636,790],{"class":69},[52,2638,250],{"class":65},[52,2640,2641],{"class":795}," string",[52,2643,1132],{"class":65},[52,2645,2646,2649,2651,2653],{"class":54,"line":109},[52,2647,2648],{"class":69}," url",[52,2650,250],{"class":65},[52,2652,2641],{"class":795},[52,2654,1132],{"class":65},[52,2656,2657],{"class":54,"line":148},[52,2658,960],{"class":65},[52,2660,2661],{"class":54,"line":158},[52,2662,171],{"emptyLinePlaceholder":170},[52,2664,2665,2668,2671],{"class":54,"line":167},[52,2666,2667],{"class":117},"declare",[52,2669,2670],{"class":98}," global ",[52,2672,241],{"class":65},[52,2674,2675,2678,2681],{"class":54,"line":174},[52,2676,2677],{"class":117}," interface",[52,2679,2680],{"class":795}," Window",[52,2682,469],{"class":65},[52,2684,2685,2688,2690,2693,2696,2698,2700,2702,2705,2708,2711,2713,2715,2718],{"class":54,"line":199},[52,2686,2687],{"class":69}," fitting",[52,2689,250],{"class":65},[52,2691,2692],{"class":65}," (",[52,2694,2695],{"class":2368},"command",[52,2697,250],{"class":65},[52,2699,2641],{"class":795},[52,2701,856],{"class":65},[52,2703,2704],{"class":2368}," options",[52,2706,2707],{"class":65},"?:",[52,2709,2710],{"class":795}," unknown",[52,2712,1129],{"class":65},[52,2714,832],{"class":117},[52,2716,2717],{"class":795}," void",[52,2719,1132],{"class":65},[52,2721,2722],{"class":54,"line":227},[52,2723,2724],{"class":65}," }\n",[52,2726,2727],{"class":54,"line":232},[52,2728,960],{"class":65},[52,2730,2731],{"class":54,"line":244},[52,2732,171],{"emptyLinePlaceholder":170},[52,2734,2735,2737,2739,2742,2744,2747,2749,2751,2753,2755,2757,2760,2763],{"class":54,"line":256},[52,2736,449],{"class":202},[52,2738,1870],{"class":117},[52,2740,2741],{"class":235}," TryOnButton",[52,2743,2365],{"class":65},[52,2745,2746],{"class":2368}," items",[52,2748,2372],{"class":65},[52,2750,206],{"class":65},[52,2752,2746],{"class":69},[52,2754,250],{"class":65},[52,2756,2630],{"class":795},[52,2758,2759],{"class":98},"[] ",[52,2761,2762],{"class":65},"})",[52,2764,469],{"class":65},[52,2766,2767,2770,2773,2775,2777,2779],{"class":54,"line":262},[52,2768,2769],{"class":117}," const",[52,2771,2772],{"class":98}," handleClick",[52,2774,1894],{"class":65},[52,2776,829],{"class":65},[52,2778,832],{"class":117},[52,2780,469],{"class":65},[52,2782,2783,2786,2788,2790,2792,2794,2796,2798,2800],{"class":54,"line":281},[52,2784,2785],{"class":98}," window",[52,2787,34],{"class":65},[52,2789,844],{"class":235},[52,2791,238],{"class":69},[52,2793,275],{"class":65},[52,2795,851],{"class":127},[52,2797,275],{"class":65},[52,2799,856],{"class":65},[52,2801,469],{"class":65},[52,2803,2804,2807,2809,2811,2813,2815],{"class":54,"line":298},[52,2805,2806],{"class":69}," targetElementId",[52,2808,250],{"class":65},[52,2810,218],{"class":65},[52,2812,683],{"class":127},[52,2814,275],{"class":65},[52,2816,278],{"class":65},[52,2818,2819,2822,2824,2826,2828,2830],{"class":54,"line":304},[52,2820,2821],{"class":69}," model",[52,2823,250],{"class":65},[52,2825,218],{"class":65},[52,2827,885],{"class":127},[52,2829,275],{"class":65},[52,2831,278],{"class":65},[52,2833,2834,2837,2839,2841],{"class":54,"line":309},[52,2835,2836],{"class":69}," tryonItems",[52,2838,250],{"class":65},[52,2840,2746],{"class":98},[52,2842,278],{"class":65},[52,2844,2845,2848,2850],{"class":54,"line":325},[52,2846,2847],{"class":65}," }",[52,2849,1129],{"class":69},[52,2851,1132],{"class":65},[52,2853,2854],{"class":54,"line":336},[52,2855,1929],{"class":65},[52,2857,2858],{"class":54,"line":342},[52,2859,171],{"emptyLinePlaceholder":170},[52,2861,2862,2864],{"class":54,"line":348},[52,2863,2396],{"class":202},[52,2865,2399],{"class":69},[52,2867,2868],{"class":54,"line":354},[52,2869,2404],{"class":65},[52,2871,2872,2874,2876,2878,2880,2882,2884,2886,2889,2892,2895,2897,2899,2902,2904,2906,2909,2911,2915,2917,2920,2922,2924,2927,2929],{"class":54,"line":360},[52,2873,2423],{"class":65},[52,2875,82],{"class":69},[52,2877,676],{"class":117},[52,2879,121],{"class":65},[52,2881,124],{"class":65},[52,2883,683],{"class":127},[52,2885,124],{"class":65},[52,2887,2888],{"class":117}," style",[52,2890,2891],{"class":65},"={{",[52,2893,2894],{"class":69}," width",[52,2896,250],{"class":65},[52,2898,218],{"class":65},[52,2900,2901],{"class":127},"100%",[52,2903,275],{"class":65},[52,2905,856],{"class":65},[52,2907,2908],{"class":69}," maxWidth",[52,2910,250],{"class":65},[52,2912,2914],{"class":2913},"sbssI"," 600",[52,2916,856],{"class":65},[52,2918,2919],{"class":69}," aspectRatio",[52,2921,250],{"class":65},[52,2923,218],{"class":65},[52,2925,2926],{"class":127},"3\u002F4",[52,2928,275],{"class":65},[52,2930,2931],{"class":65}," }} \u002F>\n",[52,2933,2934,2936,2938,2941,2944,2947,2949,2951,2953,2955],{"class":54,"line":391},[52,2935,2423],{"class":65},[52,2937,706],{"class":69},[52,2939,2940],{"class":117}," onClick",[52,2942,2943],{"class":65},"={",[52,2945,2946],{"class":98},"handleClick",[52,2948,810],{"class":65},[52,2950,723],{"class":98},[52,2952,102],{"class":65},[52,2954,706],{"class":69},[52,2956,73],{"class":65},[52,2958,2959],{"class":54,"line":397},[52,2960,2587],{"class":65},[52,2962,2963,2965],{"class":54,"line":405},[52,2964,2592],{"class":69},[52,2966,1132],{"class":65},[52,2968,2969],{"class":54,"line":410},[52,2970,960],{"class":65},[36,2972,2974],{"id":2973},"step-3-use-in-a-product-page","Step 3 — Use in a Product Page",[43,2976,2978],{"className":2324,"code":2977,"language":2326,"meta":48,"style":48},"import { TryOnButton } from '@\u002Fcomponents\u002FTryOnButton';\n\nexport default async function ProductPage({ params }: { params: { slug: string } }) {\n const product = await getProduct(params.slug);\n\n return (\n \u003Cdiv>\n \u003Ch1>{product.name}\u003C\u002Fh1>\n \u003Cimg src={product.image} alt={product.name} \u002F>\n \u003CTryOnButton\n items={[\n {\n productName: product.name,\n url: product.image,\n },\n ]}\n \u002F>\n \u003C\u002Fdiv>\n );\n}\n",[27,2979,2980,3001,3005,3047,3076,3080,3086,3094,3118,3154,3161,3171,3176,3191,3206,3211,3218,3222,3231,3237],{"__ignoreMap":48},[52,2981,2982,2984,2986,2988,2990,2992,2994,2997,2999],{"class":54,"line":55},[52,2983,203],{"class":202},[52,2985,206],{"class":65},[52,2987,2741],{"class":98},[52,2989,212],{"class":65},[52,2991,215],{"class":202},[52,2993,218],{"class":65},[52,2995,2996],{"class":127},"@\u002Fcomponents\u002FTryOnButton",[52,2998,275],{"class":65},[52,3000,1132],{"class":65},[52,3002,3003],{"class":54,"line":62},[52,3004,171],{"emptyLinePlaceholder":170},[52,3006,3007,3009,3011,3014,3016,3019,3021,3024,3026,3028,3030,3032,3034,3037,3039,3041,3043,3045],{"class":54,"line":76},[52,3008,449],{"class":202},[52,3010,452],{"class":202},[52,3012,3013],{"class":117}," async",[52,3015,1870],{"class":117},[52,3017,3018],{"class":235}," ProductPage",[52,3020,2365],{"class":65},[52,3022,3023],{"class":2368}," params",[52,3025,2372],{"class":65},[52,3027,206],{"class":65},[52,3029,3023],{"class":69},[52,3031,250],{"class":65},[52,3033,206],{"class":65},[52,3035,3036],{"class":69}," slug",[52,3038,250],{"class":65},[52,3040,2641],{"class":795},[52,3042,212],{"class":65},[52,3044,2389],{"class":65},[52,3046,469],{"class":65},[52,3048,3049,3051,3054,3056,3059,3062,3064,3067,3069,3072,3074],{"class":54,"line":87},[52,3050,2769],{"class":117},[52,3052,3053],{"class":98}," product",[52,3055,1894],{"class":65},[52,3057,3058],{"class":202}," await",[52,3060,3061],{"class":235}," getProduct",[52,3063,238],{"class":69},[52,3065,3066],{"class":98},"params",[52,3068,34],{"class":65},[52,3070,3071],{"class":98},"slug",[52,3073,1129],{"class":69},[52,3075,1132],{"class":65},[52,3077,3078],{"class":54,"line":109},[52,3079,171],{"emptyLinePlaceholder":170},[52,3081,3082,3084],{"class":54,"line":148},[52,3083,2396],{"class":202},[52,3085,2399],{"class":69},[52,3087,3088,3090,3092],{"class":54,"line":158},[52,3089,90],{"class":65},[52,3091,82],{"class":69},[52,3093,73],{"class":65},[52,3095,3096,3098,3100,3103,3106,3108,3111,3114,3116],{"class":54,"line":167},[52,3097,2423],{"class":65},[52,3099,10],{"class":69},[52,3101,3102],{"class":65},">{",[52,3104,3105],{"class":98},"product",[52,3107,34],{"class":65},[52,3109,3110],{"class":98},"name",[52,3112,3113],{"class":65},"}\u003C\u002F",[52,3115,10],{"class":69},[52,3117,73],{"class":65},[52,3119,3120,3122,3125,3128,3130,3132,3134,3137,3140,3143,3145,3147,3149,3151],{"class":54,"line":174},[52,3121,2423],{"class":65},[52,3123,3124],{"class":69},"img",[52,3126,3127],{"class":117}," src",[52,3129,2943],{"class":65},[52,3131,3105],{"class":98},[52,3133,34],{"class":65},[52,3135,3136],{"class":98},"image",[52,3138,3139],{"class":65},"} ",[52,3141,3142],{"class":117},"alt",[52,3144,2943],{"class":65},[52,3146,3105],{"class":98},[52,3148,34],{"class":65},[52,3150,3110],{"class":98},[52,3152,3153],{"class":65},"} \u002F>\n",[52,3155,3156,3158],{"class":54,"line":199},[52,3157,2423],{"class":65},[52,3159,3160],{"class":795},"TryOnButton\n",[52,3162,3163,3166,3168],{"class":54,"line":227},[52,3164,3165],{"class":117}," items",[52,3167,2943],{"class":65},[52,3169,3170],{"class":98},"[\n",[52,3172,3173],{"class":54,"line":232},[52,3174,3175],{"class":65}," {\n",[52,3177,3178,3181,3183,3185,3187,3189],{"class":54,"line":244},[52,3179,3180],{"class":69}," productName",[52,3182,250],{"class":65},[52,3184,3053],{"class":98},[52,3186,34],{"class":65},[52,3188,3110],{"class":98},[52,3190,278],{"class":65},[52,3192,3193,3196,3198,3200,3202,3204],{"class":54,"line":256},[52,3194,3195],{"class":69}," url",[52,3197,250],{"class":65},[52,3199,3053],{"class":98},[52,3201,34],{"class":65},[52,3203,3136],{"class":98},[52,3205,278],{"class":65},[52,3207,3208],{"class":54,"line":262},[52,3209,3210],{"class":65}," },\n",[52,3212,3213,3216],{"class":54,"line":281},[52,3214,3215],{"class":98}," ]",[52,3217,960],{"class":65},[52,3219,3220],{"class":54,"line":298},[52,3221,2471],{"class":65},[52,3223,3224,3227,3229],{"class":54,"line":304},[52,3225,3226],{"class":65}," \u003C\u002F",[52,3228,82],{"class":69},[52,3230,73],{"class":65},[52,3232,3233,3235],{"class":54,"line":309},[52,3234,2592],{"class":69},[52,3236,1132],{"class":65},[52,3238,3239],{"class":54,"line":325},[52,3240,960],{"class":65},[19,3242,972],{"id":971},[15,3244,3245,3246,250],{},"Add your API key to ",[27,3247,3248],{},".env.local",[43,3250,3252],{"className":981,"code":3251,"language":983,"meta":48,"style":48},"NEXT_PUBLIC_TRY_ON_API_KEY=pk_live_xxx\n",[27,3253,3254],{"__ignoreMap":48},[52,3255,3256,3258,3260],{"class":54,"line":55},[52,3257,2557],{"class":98},[52,3259,121],{"class":65},[52,3261,994],{"class":127},[996,3263,3264],{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":48,"searchDepth":62,"depth":62,"links":3266},[3267,3273],{"id":2299,"depth":62,"text":2300,"children":3268},[3269,3271,3272],{"id":2313,"depth":76,"text":3270},"Step 1 — Load Scripts in layout.tsx or page.tsx",{"id":2601,"depth":76,"text":2602},{"id":2973,"depth":76,"text":2974},{"id":971,"depth":62,"text":972},"Integrate with Next.js (Pages Router & App Router)","i-lucide-triangle",{},"\u002Fen\u002Fintegrations\u002Fnextjs",{"title":2280,"description":3274},"en\u002Fintegrations\u002Fnextjs","JdA3Sttp8qaffNRKpcg9b3i_J2nMxDOCfnya8RjA3yU",{"id":4,"title":5,"body":3282,"description":1009,"extension":1010,"icon":1011,"meta":4078,"navigation":170,"path":1013,"seo":4079,"stem":1015,"__hash__":1016},{"type":7,"value":3283,"toc":4070},[3284,3286,3288,3290,3296,3300,3582,3586,3762,3764,4050,4052,4056,4068],[10,3285,13],{"id":12},[15,3287,17],{},[19,3289,22],{"id":21},[15,3291,25,3292,30,3294,34],{},[27,3293,29],{},[27,3295,33],{},[36,3297,39,3298],{"id":38},[27,3299,29],{},[43,3301,3302],{"className":45,"code":46,"language":47,"meta":48,"style":48},[27,3303,3304,3308,3316,3324,3340,3368,3376,3384,3388,3408,3426,3430,3438,3446,3450,3464,3478,3482,3486,3500,3508,3512,3516,3520,3524,3548,3552,3558,3562,3568,3574],{"__ignoreMap":48},[52,3305,3306],{"class":54,"line":55},[52,3307,59],{"class":58},[52,3309,3310,3312,3314],{"class":54,"line":62},[52,3311,66],{"class":65},[52,3313,70],{"class":69},[52,3315,73],{"class":65},[52,3317,3318,3320,3322],{"class":54,"line":76},[52,3319,79],{"class":65},[52,3321,82],{"class":69},[52,3323,73],{"class":65},[52,3325,3326,3328,3330,3332,3334,3336,3338],{"class":54,"line":87},[52,3327,90],{"class":65},[52,3329,10],{"class":69},[52,3331,95],{"class":65},[52,3333,99],{"class":98},[52,3335,102],{"class":65},[52,3337,10],{"class":69},[52,3339,73],{"class":65},[52,3341,3342,3344,3346,3348,3350,3352,3354,3356,3358,3360,3362,3364,3366],{"class":54,"line":109},[52,3343,90],{"class":65},[52,3345,114],{"class":69},[52,3347,118],{"class":117},[52,3349,121],{"class":65},[52,3351,124],{"class":65},[52,3353,128],{"class":127},[52,3355,124],{"class":65},[52,3357,133],{"class":117},[52,3359,121],{"class":65},[52,3361,124],{"class":65},[52,3363,140],{"class":127},[52,3365,124],{"class":65},[52,3367,145],{"class":65},[52,3369,3370,3372,3374],{"class":54,"line":148},[52,3371,151],{"class":65},[52,3373,82],{"class":69},[52,3375,73],{"class":65},[52,3377,3378,3380,3382],{"class":54,"line":158},[52,3379,102],{"class":65},[52,3381,70],{"class":69},[52,3383,73],{"class":65},[52,3385,3386],{"class":54,"line":167},[52,3387,171],{"emptyLinePlaceholder":170},[52,3389,3390,3392,3394,3396,3398,3400,3402,3404,3406],{"class":54,"line":174},[52,3391,66],{"class":65},[52,3393,179],{"class":69},[52,3395,182],{"class":117},[52,3397,185],{"class":117},[52,3399,121],{"class":65},[52,3401,124],{"class":65},[52,3403,192],{"class":127},[52,3405,124],{"class":65},[52,3407,73],{"class":65},[52,3409,3410,3412,3414,3416,3418,3420,3422,3424],{"class":54,"line":199},[52,3411,203],{"class":202},[52,3413,206],{"class":65},[52,3415,209],{"class":98},[52,3417,212],{"class":65},[52,3419,215],{"class":202},[52,3421,218],{"class":65},[52,3423,221],{"class":127},[52,3425,224],{"class":65},[52,3427,3428],{"class":54,"line":227},[52,3429,171],{"emptyLinePlaceholder":170},[52,3431,3432,3434,3436],{"class":54,"line":232},[52,3433,29],{"class":235},[52,3435,238],{"class":98},[52,3437,241],{"class":65},[52,3439,3440,3442,3444],{"class":54,"line":244},[52,3441,247],{"class":69},[52,3443,250],{"class":65},[52,3445,253],{"class":98},[52,3447,3448],{"class":54,"line":256},[52,3449,259],{"class":65},[52,3451,3452,3454,3456,3458,3460,3462],{"class":54,"line":262},[52,3453,265],{"class":69},[52,3455,250],{"class":65},[52,3457,218],{"class":65},[52,3459,272],{"class":127},[52,3461,275],{"class":65},[52,3463,278],{"class":65},[52,3465,3466,3468,3470,3472,3474,3476],{"class":54,"line":281},[52,3467,284],{"class":69},[52,3469,250],{"class":65},[52,3471,218],{"class":65},[52,3473,291],{"class":127},[52,3475,275],{"class":65},[52,3477,278],{"class":65},[52,3479,3480],{"class":54,"line":298},[52,3481,301],{"class":65},[52,3483,3484],{"class":54,"line":304},[52,3485,259],{"class":65},[52,3487,3488,3490,3492,3494,3496,3498],{"class":54,"line":309},[52,3489,284],{"class":69},[52,3491,250],{"class":65},[52,3493,218],{"class":65},[52,3495,318],{"class":127},[52,3497,275],{"class":65},[52,3499,278],{"class":65},[52,3501,3502,3504,3506],{"class":54,"line":325},[52,3503,328],{"class":69},[52,3505,250],{"class":65},[52,3507,333],{"class":65},[52,3509,3510],{"class":54,"line":336},[52,3511,339],{"class":127},[52,3513,3514],{"class":54,"line":342},[52,3515,345],{"class":127},[52,3517,3518],{"class":54,"line":348},[52,3519,351],{"class":127},[52,3521,3522],{"class":54,"line":354},[52,3523,357],{"class":127},[52,3525,3526,3528,3530,3532,3534,3536,3538,3540,3542,3544,3546],{"class":54,"line":360},[52,3527,363],{"class":127},[52,3529,366],{"class":65},[52,3531,203],{"class":202},[52,3533,34],{"class":65},[52,3535,373],{"class":98},[52,3537,34],{"class":65},[52,3539,378],{"class":98},[52,3541,34],{"class":65},[52,3543,383],{"class":98},[52,3545,386],{"class":65},[52,3547,224],{"class":127},[52,3549,3550],{"class":54,"line":391},[52,3551,394],{"class":127},[52,3553,3554,3556],{"class":54,"line":397},[52,3555,400],{"class":65},[52,3557,278],{"class":65},[52,3559,3560],{"class":54,"line":405},[52,3561,301],{"class":65},[52,3563,3564,3566],{"class":54,"line":410},[52,3565,413],{"class":98},[52,3567,278],{"class":65},[52,3569,3570,3572],{"class":54,"line":418},[52,3571,386],{"class":65},[52,3573,423],{"class":98},[52,3575,3576,3578,3580],{"class":54,"line":426},[52,3577,102],{"class":65},[52,3579,179],{"class":69},[52,3581,73],{"class":65},[36,3583,436,3584],{"id":435},[27,3585,33],{},[43,3587,3588],{"className":441,"code":442,"language":192,"meta":48,"style":48},[27,3589,3590,3602,3610,3618,3626,3630,3644,3658,3662,3666,3680,3688,3692,3696,3700,3704,3728,3732,3738,3742,3748,3752,3756],{"__ignoreMap":48},[52,3591,3592,3594,3596,3598,3600],{"class":54,"line":55},[52,3593,449],{"class":202},[52,3595,452],{"class":202},[52,3597,455],{"class":235},[52,3599,238],{"class":98},[52,3601,241],{"class":65},[52,3603,3604,3606,3608],{"class":54,"line":62},[52,3605,464],{"class":69},[52,3607,250],{"class":65},[52,3609,469],{"class":65},[52,3611,3612,3614,3616],{"class":54,"line":76},[52,3613,474],{"class":69},[52,3615,250],{"class":65},[52,3617,469],{"class":65},[52,3619,3620,3622,3624],{"class":54,"line":87},[52,3621,483],{"class":69},[52,3623,250],{"class":65},[52,3625,253],{"class":98},[52,3627,3628],{"class":54,"line":109},[52,3629,492],{"class":65},[52,3631,3632,3634,3636,3638,3640,3642],{"class":54,"line":148},[52,3633,497],{"class":69},[52,3635,250],{"class":65},[52,3637,218],{"class":65},[52,3639,272],{"class":127},[52,3641,275],{"class":65},[52,3643,278],{"class":65},[52,3645,3646,3648,3650,3652,3654,3656],{"class":54,"line":158},[52,3647,512],{"class":69},[52,3649,250],{"class":65},[52,3651,218],{"class":65},[52,3653,291],{"class":127},[52,3655,275],{"class":65},[52,3657,278],{"class":65},[52,3659,3660],{"class":54,"line":167},[52,3661,527],{"class":65},[52,3663,3664],{"class":54,"line":174},[52,3665,492],{"class":65},[52,3667,3668,3670,3672,3674,3676,3678],{"class":54,"line":199},[52,3669,512],{"class":69},[52,3671,250],{"class":65},[52,3673,218],{"class":65},[52,3675,318],{"class":127},[52,3677,275],{"class":65},[52,3679,278],{"class":65},[52,3681,3682,3684,3686],{"class":54,"line":227},[52,3683,550],{"class":69},[52,3685,250],{"class":65},[52,3687,333],{"class":65},[52,3689,3690],{"class":54,"line":232},[52,3691,559],{"class":127},[52,3693,3694],{"class":54,"line":244},[52,3695,564],{"class":127},[52,3697,3698],{"class":54,"line":256},[52,3699,569],{"class":127},[52,3701,3702],{"class":54,"line":262},[52,3703,574],{"class":127},[52,3705,3706,3708,3710,3712,3714,3716,3718,3720,3722,3724,3726],{"class":54,"line":281},[52,3707,579],{"class":127},[52,3709,366],{"class":65},[52,3711,203],{"class":202},[52,3713,34],{"class":65},[52,3715,373],{"class":98},[52,3717,34],{"class":65},[52,3719,378],{"class":98},[52,3721,34],{"class":65},[52,3723,383],{"class":98},[52,3725,386],{"class":65},[52,3727,224],{"class":127},[52,3729,3730],{"class":54,"line":298},[52,3731,604],{"class":127},[52,3733,3734,3736],{"class":54,"line":304},[52,3735,609],{"class":65},[52,3737,278],{"class":65},[52,3739,3740],{"class":54,"line":309},[52,3741,527],{"class":65},[52,3743,3744,3746],{"class":54,"line":325},[52,3745,620],{"class":98},[52,3747,278],{"class":65},[52,3749,3750],{"class":54,"line":336},[52,3751,301],{"class":65},[52,3753,3754],{"class":54,"line":342},[52,3755,631],{"class":65},[52,3757,3758,3760],{"class":54,"line":348},[52,3759,386],{"class":65},[52,3761,423],{"class":98},[19,3763,641],{"id":640},[43,3765,3766],{"className":45,"code":644,"language":47,"meta":48,"style":48},[27,3767,3768,3772,3780,3788,3816,3842,3850,3858,3862,3882,3894,3902,3910,3916,3920,3934,3954,3968,3982,3990,3994,4008,4022,4026,4032,4038,4042],{"__ignoreMap":48},[52,3769,3770],{"class":54,"line":55},[52,3771,651],{"class":58},[52,3773,3774,3776,3778],{"class":54,"line":62},[52,3775,66],{"class":65},[52,3777,70],{"class":69},[52,3779,73],{"class":65},[52,3781,3782,3784,3786],{"class":54,"line":76},[52,3783,79],{"class":65},[52,3785,82],{"class":69},[52,3787,73],{"class":65},[52,3789,3790,3792,3794,3796,3798,3800,3802,3804,3806,3808,3810,3812,3814],{"class":54,"line":87},[52,3791,90],{"class":65},[52,3793,82],{"class":69},[52,3795,676],{"class":117},[52,3797,121],{"class":65},[52,3799,124],{"class":65},[52,3801,683],{"class":127},[52,3803,124],{"class":65},[52,3805,688],{"class":117},[52,3807,121],{"class":65},[52,3809,124],{"class":65},[52,3811,695],{"class":127},[52,3813,124],{"class":65},[52,3815,145],{"class":65},[52,3817,3818,3820,3822,3824,3826,3828,3830,3832,3834,3836,3838,3840],{"class":54,"line":109},[52,3819,90],{"class":65},[52,3821,706],{"class":69},[52,3823,709],{"class":117},[52,3825,121],{"class":65},[52,3827,124],{"class":65},[52,3829,716],{"class":127},[52,3831,124],{"class":65},[52,3833,95],{"class":65},[52,3835,723],{"class":98},[52,3837,102],{"class":65},[52,3839,706],{"class":69},[52,3841,73],{"class":65},[52,3843,3844,3846,3848],{"class":54,"line":148},[52,3845,151],{"class":65},[52,3847,82],{"class":69},[52,3849,73],{"class":65},[52,3851,3852,3854,3856],{"class":54,"line":158},[52,3853,102],{"class":65},[52,3855,70],{"class":69},[52,3857,73],{"class":65},[52,3859,3860],{"class":54,"line":167},[52,3861,171],{"emptyLinePlaceholder":170},[52,3863,3864,3866,3868,3870,3872,3874,3876,3878,3880],{"class":54,"line":174},[52,3865,66],{"class":65},[52,3867,179],{"class":69},[52,3869,182],{"class":117},[52,3871,185],{"class":117},[52,3873,121],{"class":65},[52,3875,124],{"class":65},[52,3877,192],{"class":127},[52,3879,124],{"class":65},[52,3881,73],{"class":65},[52,3883,3884,3886,3888,3890,3892],{"class":54,"line":199},[52,3885,774],{"class":117},[52,3887,777],{"class":98},[52,3889,121],{"class":65},[52,3891,782],{"class":235},[52,3893,785],{"class":65},[52,3895,3896,3898,3900],{"class":54,"line":227},[52,3897,790],{"class":69},[52,3899,250],{"class":65},[52,3901,796],{"class":795},[52,3903,3904,3906,3908],{"class":54,"line":232},[52,3905,801],{"class":69},[52,3907,250],{"class":65},[52,3909,796],{"class":795},[52,3911,3912,3914],{"class":54,"line":244},[52,3913,810],{"class":65},[52,3915,813],{"class":98},[52,3917,3918],{"class":54,"line":256},[52,3919,171],{"emptyLinePlaceholder":170},[52,3921,3922,3924,3926,3928,3930,3932],{"class":54,"line":262},[52,3923,774],{"class":117},[52,3925,824],{"class":98},[52,3927,121],{"class":65},[52,3929,829],{"class":65},[52,3931,832],{"class":117},[52,3933,469],{"class":65},[52,3935,3936,3938,3940,3942,3944,3946,3948,3950,3952],{"class":54,"line":281},[52,3937,839],{"class":98},[52,3939,34],{"class":65},[52,3941,844],{"class":235},[52,3943,238],{"class":69},[52,3945,275],{"class":65},[52,3947,851],{"class":127},[52,3949,275],{"class":65},[52,3951,856],{"class":65},[52,3953,469],{"class":65},[52,3955,3956,3958,3960,3962,3964,3966],{"class":54,"line":298},[52,3957,863],{"class":69},[52,3959,250],{"class":65},[52,3961,218],{"class":65},[52,3963,683],{"class":127},[52,3965,275],{"class":65},[52,3967,278],{"class":65},[52,3969,3970,3972,3974,3976,3978,3980],{"class":54,"line":304},[52,3971,878],{"class":69},[52,3973,250],{"class":65},[52,3975,218],{"class":65},[52,3977,885],{"class":127},[52,3979,275],{"class":65},[52,3981,278],{"class":65},[52,3983,3984,3986,3988],{"class":54,"line":309},[52,3985,894],{"class":69},[52,3987,250],{"class":65},[52,3989,253],{"class":69},[52,3991,3992],{"class":54,"line":325},[52,3993,903],{"class":65},[52,3995,3996,3998,4000,4002,4004,4006],{"class":54,"line":336},[52,3997,908],{"class":69},[52,3999,250],{"class":65},[52,4001,913],{"class":98},[52,4003,34],{"class":65},[52,4005,918],{"class":98},[52,4007,278],{"class":65},[52,4009,4010,4012,4014,4016,4018,4020],{"class":54,"line":342},[52,4011,925],{"class":69},[52,4013,250],{"class":65},[52,4015,913],{"class":98},[52,4017,34],{"class":65},[52,4019,934],{"class":98},[52,4021,278],{"class":65},[52,4023,4024],{"class":54,"line":348},[52,4025,941],{"class":65},[52,4027,4028,4030],{"class":54,"line":354},[52,4029,946],{"class":69},[52,4031,278],{"class":65},[52,4033,4034,4036],{"class":54,"line":360},[52,4035,953],{"class":65},[52,4037,423],{"class":69},[52,4039,4040],{"class":54,"line":391},[52,4041,960],{"class":65},[52,4043,4044,4046,4048],{"class":54,"line":397},[52,4045,102],{"class":65},[52,4047,179],{"class":69},[52,4049,73],{"class":65},[19,4051,972],{"id":971},[15,4053,975,4054,250],{},[27,4055,978],{},[43,4057,4058],{"className":981,"code":982,"language":983,"meta":48,"style":48},[27,4059,4060],{"__ignoreMap":48},[52,4061,4062,4064,4066],{"class":54,"line":55},[52,4063,383],{"class":98},[52,4065,121],{"class":65},[52,4067,994],{"class":127},[996,4069,998],{},{"title":48,"searchDepth":62,"depth":62,"links":4071},[4072,4076,4077],{"id":21,"depth":62,"text":22,"children":4073},[4074,4075],{"id":38,"depth":76,"text":1004},{"id":435,"depth":76,"text":1006},{"id":640,"depth":62,"text":641},{"id":971,"depth":62,"text":972},{},{"title":5,"description":1009},{"id":4081,"title":4082,"body":4083,"description":4967,"extension":1010,"icon":4968,"meta":4969,"navigation":170,"path":4970,"seo":4971,"stem":4972,"__hash__":4973},"content\u002Fen\u002Fintegrations\u002Freact.md","React",{"type":7,"value":4084,"toc":4962},[4085,4089,4092,4096,4102,4287,4297,4301,4621,4625,4959],[10,4086,4088],{"id":4087},"react-integration","React Integration",[15,4090,4091],{},"Works with any React setup — Vite, Create React App, or custom.",[19,4093,4095],{"id":4094},"_1-load-the-widget-script","1. Load the Widget Script",[15,4097,4098,4099,250],{},"Add the script to your ",[27,4100,4101],{},"index.html",[43,4103,4105],{"className":1772,"code":4104,"language":1774,"meta":48,"style":48},"\u003C!-- In public\u002Findex.html or index.html (Vite) -->\n\u003Cscript\n src=\"https:\u002F\u002Fwidget.try-on.ru\u002Ffitting-widget-bundle.js\"\n id=\"fitting-widget-bundle\"\n>\u003C\u002Fscript>\n\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: '%VITE_TRY_ON_API_KEY%'\n });\n\u003C\u002Fscript>\n",[27,4106,4107,4112,4118,4130,4142,4150,4168,4192,4234,4238,4258,4271,4279],{"__ignoreMap":48},[52,4108,4109],{"class":54,"line":55},[52,4110,4111],{"class":58},"\u003C!-- In public\u002Findex.html or index.html (Vite) -->\n",[52,4113,4114,4116],{"class":54,"line":62},[52,4115,66],{"class":65},[52,4117,1783],{"class":69},[52,4119,4120,4122,4124,4126,4128],{"class":54,"line":76},[52,4121,1788],{"class":117},[52,4123,121],{"class":65},[52,4125,124],{"class":65},[52,4127,272],{"class":127},[52,4129,1797],{"class":65},[52,4131,4132,4134,4136,4138,4140],{"class":54,"line":87},[52,4133,1802],{"class":117},[52,4135,121],{"class":65},[52,4137,124],{"class":65},[52,4139,291],{"class":127},[52,4141,1797],{"class":65},[52,4143,4144,4146,4148],{"class":54,"line":109},[52,4145,1815],{"class":65},[52,4147,179],{"class":69},[52,4149,73],{"class":65},[52,4151,4152,4154,4156,4158,4160,4162,4164,4166],{"class":54,"line":148},[52,4153,66],{"class":65},[52,4155,179],{"class":69},[52,4157,676],{"class":117},[52,4159,121],{"class":65},[52,4161,124],{"class":65},[52,4163,318],{"class":127},[52,4165,124],{"class":65},[52,4167,73],{"class":65},[52,4169,4170,4172,4174,4176,4178,4180,4182,4184,4186,4188,4190],{"class":54,"line":158},[52,4171,839],{"class":98},[52,4173,34],{"class":65},[52,4175,1855],{"class":98},[52,4177,121],{"class":65},[52,4179,1860],{"class":98},[52,4181,34],{"class":65},[52,4183,1855],{"class":98},[52,4185,1867],{"class":65},[52,4187,1870],{"class":117},[52,4189,1873],{"class":65},[52,4191,469],{"class":65},[52,4193,4194,4196,4198,4200,4202,4204,4206,4208,4210,4212,4214,4216,4218,4220,4222,4224,4226,4228,4230,4232],{"class":54,"line":167},[52,4195,1880],{"class":69},[52,4197,1089],{"class":98},[52,4199,34],{"class":65},[52,4201,844],{"class":98},[52,4203,34],{"class":65},[52,4205,1891],{"class":98},[52,4207,1894],{"class":65},[52,4209,1860],{"class":98},[52,4211,34],{"class":65},[52,4213,844],{"class":98},[52,4215,34],{"class":65},[52,4217,1891],{"class":98},[52,4219,1907],{"class":65},[52,4221,1910],{"class":69},[52,4223,34],{"class":65},[52,4225,1915],{"class":235},[52,4227,238],{"class":69},[52,4229,1920],{"class":98},[52,4231,1129],{"class":69},[52,4233,1132],{"class":65},[52,4235,4236],{"class":54,"line":174},[52,4237,1929],{"class":65},[52,4239,4240,4242,4244,4246,4248,4250,4252,4254,4256],{"class":54,"line":199},[52,4241,839],{"class":98},[52,4243,34],{"class":65},[52,4245,844],{"class":235},[52,4247,238],{"class":98},[52,4249,275],{"class":65},[52,4251,1100],{"class":127},[52,4253,275],{"class":65},[52,4255,856],{"class":65},[52,4257,469],{"class":65},[52,4259,4260,4262,4264,4266,4269],{"class":54,"line":227},[52,4261,1954],{"class":69},[52,4263,250],{"class":65},[52,4265,218],{"class":65},[52,4267,4268],{"class":127},"%VITE_TRY_ON_API_KEY%",[52,4270,224],{"class":65},[52,4272,4273,4275,4277],{"class":54,"line":232},[52,4274,953],{"class":65},[52,4276,1129],{"class":98},[52,4278,1132],{"class":65},[52,4280,4281,4283,4285],{"class":54,"line":244},[52,4282,102],{"class":65},[52,4284,179],{"class":69},[52,4286,73],{"class":65},[4288,4289,4291],"callout",{"icon":4290},"i-lucide-lightbulb",[15,4292,4293,4294,4296],{},"Replace ",[27,4295,4268],{}," at build time with your actual key, or use a runtime injection approach.",[19,4298,4300],{"id":4299},"_2-create-a-custom-hook","2. Create a Custom Hook",[43,4302,4304],{"className":2324,"code":4303,"language":2326,"meta":48,"style":48},"\u002F\u002F hooks\u002FuseFittingWidget.ts\ninterface TryonItem {\n productName: string;\n url: string;\n productId?: string;\n}\n\ninterface CreateOptions {\n targetElementId: string;\n model?: 'balanced' | 'quality' | 'speed';\n tryonItems: TryonItem[];\n}\n\ndeclare global {\n interface Window {\n fitting: (command: string, options?: unknown) => void;\n }\n}\n\nexport function useFittingWidget() {\n const open = (options: CreateOptions) => {\n window.fitting('create', options);\n };\n\n const close = () => {\n window.fitting('close');\n };\n\n return { open, close };\n}\n",[27,4305,4306,4311,4319,4329,4339,4350,4354,4358,4367,4377,4410,4423,4427,4431,4439,4447,4477,4481,4485,4489,4502,4526,4550,4554,4558,4573,4594,4598,4602,4617],{"__ignoreMap":48},[52,4307,4308],{"class":54,"line":55},[52,4309,4310],{"class":58},"\u002F\u002F hooks\u002FuseFittingWidget.ts\n",[52,4312,4313,4315,4317],{"class":54,"line":62},[52,4314,2627],{"class":117},[52,4316,2630],{"class":795},[52,4318,469],{"class":65},[52,4320,4321,4323,4325,4327],{"class":54,"line":76},[52,4322,790],{"class":69},[52,4324,250],{"class":65},[52,4326,2641],{"class":795},[52,4328,1132],{"class":65},[52,4330,4331,4333,4335,4337],{"class":54,"line":87},[52,4332,2648],{"class":69},[52,4334,250],{"class":65},[52,4336,2641],{"class":795},[52,4338,1132],{"class":65},[52,4340,4341,4344,4346,4348],{"class":54,"line":109},[52,4342,4343],{"class":69}," productId",[52,4345,2707],{"class":65},[52,4347,2641],{"class":795},[52,4349,1132],{"class":65},[52,4351,4352],{"class":54,"line":148},[52,4353,960],{"class":65},[52,4355,4356],{"class":54,"line":158},[52,4357,171],{"emptyLinePlaceholder":170},[52,4359,4360,4362,4365],{"class":54,"line":167},[52,4361,2627],{"class":117},[52,4363,4364],{"class":795}," CreateOptions",[52,4366,469],{"class":65},[52,4368,4369,4371,4373,4375],{"class":54,"line":174},[52,4370,1288],{"class":69},[52,4372,250],{"class":65},[52,4374,2641],{"class":795},[52,4376,1132],{"class":65},[52,4378,4379,4381,4383,4385,4387,4389,4392,4394,4397,4399,4401,4403,4406,4408],{"class":54,"line":199},[52,4380,1303],{"class":69},[52,4382,2707],{"class":65},[52,4384,218],{"class":65},[52,4386,885],{"class":127},[52,4388,275],{"class":65},[52,4390,4391],{"class":65}," |",[52,4393,218],{"class":65},[52,4395,4396],{"class":127},"quality",[52,4398,275],{"class":65},[52,4400,4391],{"class":65},[52,4402,218],{"class":65},[52,4404,4405],{"class":127},"speed",[52,4407,275],{"class":65},[52,4409,1132],{"class":65},[52,4411,4412,4414,4416,4418,4421],{"class":54,"line":227},[52,4413,1318],{"class":69},[52,4415,250],{"class":65},[52,4417,2630],{"class":795},[52,4419,4420],{"class":98},"[]",[52,4422,1132],{"class":65},[52,4424,4425],{"class":54,"line":232},[52,4426,960],{"class":65},[52,4428,4429],{"class":54,"line":244},[52,4430,171],{"emptyLinePlaceholder":170},[52,4432,4433,4435,4437],{"class":54,"line":256},[52,4434,2667],{"class":117},[52,4436,2670],{"class":98},[52,4438,241],{"class":65},[52,4440,4441,4443,4445],{"class":54,"line":262},[52,4442,2677],{"class":117},[52,4444,2680],{"class":795},[52,4446,469],{"class":65},[52,4448,4449,4451,4453,4455,4457,4459,4461,4463,4465,4467,4469,4471,4473,4475],{"class":54,"line":281},[52,4450,2687],{"class":69},[52,4452,250],{"class":65},[52,4454,2692],{"class":65},[52,4456,2695],{"class":2368},[52,4458,250],{"class":65},[52,4460,2641],{"class":795},[52,4462,856],{"class":65},[52,4464,2704],{"class":2368},[52,4466,2707],{"class":65},[52,4468,2710],{"class":795},[52,4470,1129],{"class":65},[52,4472,832],{"class":117},[52,4474,2717],{"class":795},[52,4476,1132],{"class":65},[52,4478,4479],{"class":54,"line":298},[52,4480,2724],{"class":65},[52,4482,4483],{"class":54,"line":304},[52,4484,960],{"class":65},[52,4486,4487],{"class":54,"line":309},[52,4488,171],{"emptyLinePlaceholder":170},[52,4490,4491,4493,4495,4498,4500],{"class":54,"line":325},[52,4492,449],{"class":202},[52,4494,1870],{"class":117},[52,4496,4497],{"class":235}," useFittingWidget",[52,4499,1873],{"class":65},[52,4501,469],{"class":65},[52,4503,4504,4506,4509,4511,4513,4516,4518,4520,4522,4524],{"class":54,"line":336},[52,4505,2769],{"class":117},[52,4507,4508],{"class":98}," open",[52,4510,1894],{"class":65},[52,4512,2692],{"class":65},[52,4514,4515],{"class":2368},"options",[52,4517,250],{"class":65},[52,4519,4364],{"class":795},[52,4521,1129],{"class":65},[52,4523,832],{"class":117},[52,4525,469],{"class":65},[52,4527,4528,4530,4532,4534,4536,4538,4540,4542,4544,4546,4548],{"class":54,"line":342},[52,4529,2785],{"class":98},[52,4531,34],{"class":65},[52,4533,844],{"class":235},[52,4535,238],{"class":69},[52,4537,275],{"class":65},[52,4539,851],{"class":127},[52,4541,275],{"class":65},[52,4543,856],{"class":65},[52,4545,2704],{"class":98},[52,4547,1129],{"class":69},[52,4549,1132],{"class":65},[52,4551,4552],{"class":54,"line":348},[52,4553,1929],{"class":65},[52,4555,4556],{"class":54,"line":354},[52,4557,171],{"emptyLinePlaceholder":170},[52,4559,4560,4562,4565,4567,4569,4571],{"class":54,"line":360},[52,4561,2769],{"class":117},[52,4563,4564],{"class":98}," close",[52,4566,1894],{"class":65},[52,4568,829],{"class":65},[52,4570,832],{"class":117},[52,4572,469],{"class":65},[52,4574,4575,4577,4579,4581,4583,4585,4588,4590,4592],{"class":54,"line":391},[52,4576,2785],{"class":98},[52,4578,34],{"class":65},[52,4580,844],{"class":235},[52,4582,238],{"class":69},[52,4584,275],{"class":65},[52,4586,4587],{"class":127},"close",[52,4589,275],{"class":65},[52,4591,1129],{"class":69},[52,4593,1132],{"class":65},[52,4595,4596],{"class":54,"line":397},[52,4597,1929],{"class":65},[52,4599,4600],{"class":54,"line":405},[52,4601,171],{"emptyLinePlaceholder":170},[52,4603,4604,4606,4608,4610,4612,4614],{"class":54,"line":410},[52,4605,2396],{"class":202},[52,4607,206],{"class":65},[52,4609,4508],{"class":98},[52,4611,856],{"class":65},[52,4613,4564],{"class":98},[52,4615,4616],{"class":65}," };\n",[52,4618,4619],{"class":54,"line":418},[52,4620,960],{"class":65},[19,4622,4624],{"id":4623},"_3-use-in-a-component","3. Use in a Component",[43,4626,4628],{"className":2324,"code":4627,"language":2326,"meta":48,"style":48},"\u002F\u002F components\u002FTryOnWidget.tsx\nimport { useFittingWidget } from '..\u002Fhooks\u002FuseFittingWidget';\n\ninterface Props {\n productName: string;\n imageUrl: string;\n}\n\nexport function TryOnWidget({ productName, imageUrl }: Props) {\n const { open } = useFittingWidget();\n\n return (\n \u003Cdiv>\n \u003Cdiv\n id=\"widget-container\"\n style={{ width: '100%', maxWidth: 600, aspectRatio: '3\u002F4' }}\n \u002F>\n \u003Cbutton\n onClick={() =>\n open({\n targetElementId: 'widget-container',\n model: 'balanced',\n tryonItems: [{ productName, url: imageUrl }],\n })\n }\n >\n Try On\n \u003C\u002Fbutton>\n \u003C\u002Fdiv>\n );\n}\n",[27,4629,4630,4635,4656,4660,4669,4679,4689,4693,4697,4724,4742,4746,4752,4760,4767,4779,4819,4823,4830,4841,4850,4865,4880,4912,4919,4924,4928,4933,4941,4949,4955],{"__ignoreMap":48},[52,4631,4632],{"class":54,"line":55},[52,4633,4634],{"class":58},"\u002F\u002F components\u002FTryOnWidget.tsx\n",[52,4636,4637,4639,4641,4643,4645,4647,4649,4652,4654],{"class":54,"line":62},[52,4638,203],{"class":202},[52,4640,206],{"class":65},[52,4642,4497],{"class":98},[52,4644,212],{"class":65},[52,4646,215],{"class":202},[52,4648,218],{"class":65},[52,4650,4651],{"class":127},"..\u002Fhooks\u002FuseFittingWidget",[52,4653,275],{"class":65},[52,4655,1132],{"class":65},[52,4657,4658],{"class":54,"line":76},[52,4659,171],{"emptyLinePlaceholder":170},[52,4661,4662,4664,4667],{"class":54,"line":87},[52,4663,2627],{"class":117},[52,4665,4666],{"class":795}," Props",[52,4668,469],{"class":65},[52,4670,4671,4673,4675,4677],{"class":54,"line":109},[52,4672,790],{"class":69},[52,4674,250],{"class":65},[52,4676,2641],{"class":795},[52,4678,1132],{"class":65},[52,4680,4681,4683,4685,4687],{"class":54,"line":148},[52,4682,801],{"class":69},[52,4684,250],{"class":65},[52,4686,2641],{"class":795},[52,4688,1132],{"class":65},[52,4690,4691],{"class":54,"line":158},[52,4692,960],{"class":65},[52,4694,4695],{"class":54,"line":167},[52,4696,171],{"emptyLinePlaceholder":170},[52,4698,4699,4701,4703,4706,4708,4711,4713,4716,4718,4720,4722],{"class":54,"line":174},[52,4700,449],{"class":202},[52,4702,1870],{"class":117},[52,4704,4705],{"class":235}," TryOnWidget",[52,4707,2365],{"class":65},[52,4709,4710],{"class":2368}," productName",[52,4712,856],{"class":65},[52,4714,4715],{"class":2368}," imageUrl",[52,4717,2372],{"class":65},[52,4719,4666],{"class":795},[52,4721,1129],{"class":65},[52,4723,469],{"class":65},[52,4725,4726,4728,4730,4732,4734,4736,4738,4740],{"class":54,"line":199},[52,4727,2769],{"class":117},[52,4729,206],{"class":65},[52,4731,4508],{"class":98},[52,4733,212],{"class":65},[52,4735,1894],{"class":65},[52,4737,4497],{"class":235},[52,4739,1873],{"class":69},[52,4741,1132],{"class":65},[52,4743,4744],{"class":54,"line":227},[52,4745,171],{"emptyLinePlaceholder":170},[52,4747,4748,4750],{"class":54,"line":232},[52,4749,2396],{"class":202},[52,4751,2399],{"class":69},[52,4753,4754,4756,4758],{"class":54,"line":244},[52,4755,90],{"class":65},[52,4757,82],{"class":69},[52,4759,73],{"class":65},[52,4761,4762,4764],{"class":54,"line":256},[52,4763,2423],{"class":65},[52,4765,4766],{"class":69},"div\n",[52,4768,4769,4771,4773,4775,4777],{"class":54,"line":262},[52,4770,2458],{"class":117},[52,4772,121],{"class":65},[52,4774,124],{"class":65},[52,4776,683],{"class":127},[52,4778,1797],{"class":65},[52,4780,4781,4784,4786,4788,4790,4792,4794,4796,4798,4800,4802,4804,4806,4808,4810,4812,4814,4816],{"class":54,"line":281},[52,4782,4783],{"class":117}," style",[52,4785,2891],{"class":65},[52,4787,2894],{"class":69},[52,4789,250],{"class":65},[52,4791,218],{"class":65},[52,4793,2901],{"class":127},[52,4795,275],{"class":65},[52,4797,856],{"class":65},[52,4799,2908],{"class":69},[52,4801,250],{"class":65},[52,4803,2914],{"class":2913},[52,4805,856],{"class":65},[52,4807,2919],{"class":69},[52,4809,250],{"class":65},[52,4811,218],{"class":65},[52,4813,2926],{"class":127},[52,4815,275],{"class":65},[52,4817,4818],{"class":65}," }}\n",[52,4820,4821],{"class":54,"line":298},[52,4822,2471],{"class":65},[52,4824,4825,4827],{"class":54,"line":304},[52,4826,2423],{"class":65},[52,4828,4829],{"class":69},"button\n",[52,4831,4832,4835,4838],{"class":54,"line":309},[52,4833,4834],{"class":117}," onClick",[52,4836,4837],{"class":65},"={()",[52,4839,4840],{"class":117}," =>\n",[52,4842,4843,4846,4848],{"class":54,"line":325},[52,4844,4845],{"class":235}," open",[52,4847,238],{"class":98},[52,4849,241],{"class":65},[52,4851,4852,4855,4857,4859,4861,4863],{"class":54,"line":336},[52,4853,4854],{"class":69}," targetElementId",[52,4856,250],{"class":65},[52,4858,218],{"class":65},[52,4860,683],{"class":127},[52,4862,275],{"class":65},[52,4864,278],{"class":65},[52,4866,4867,4870,4872,4874,4876,4878],{"class":54,"line":342},[52,4868,4869],{"class":69}," model",[52,4871,250],{"class":65},[52,4873,218],{"class":65},[52,4875,885],{"class":127},[52,4877,275],{"class":65},[52,4879,278],{"class":65},[52,4881,4882,4885,4887,4890,4893,4895,4897,4900,4902,4905,4907,4910],{"class":54,"line":348},[52,4883,4884],{"class":69}," tryonItems",[52,4886,250],{"class":65},[52,4888,4889],{"class":98}," [",[52,4891,4892],{"class":65},"{",[52,4894,4710],{"class":98},[52,4896,856],{"class":65},[52,4898,4899],{"class":69}," url",[52,4901,250],{"class":65},[52,4903,4904],{"class":98}," imageUrl ",[52,4906,386],{"class":65},[52,4908,4909],{"class":98},"]",[52,4911,278],{"class":65},[52,4913,4914,4917],{"class":54,"line":354},[52,4915,4916],{"class":65}," }",[52,4918,423],{"class":98},[52,4920,4921],{"class":54,"line":360},[52,4922,4923],{"class":65}," }\n",[52,4925,4926],{"class":54,"line":391},[52,4927,2510],{"class":65},[52,4929,4930],{"class":54,"line":397},[52,4931,4932],{"class":98}," Try On\n",[52,4934,4935,4937,4939],{"class":54,"line":405},[52,4936,2578],{"class":65},[52,4938,706],{"class":69},[52,4940,73],{"class":65},[52,4942,4943,4945,4947],{"class":54,"line":410},[52,4944,3226],{"class":65},[52,4946,82],{"class":69},[52,4948,73],{"class":65},[52,4950,4951,4953],{"class":54,"line":418},[52,4952,2592],{"class":69},[52,4954,1132],{"class":65},[52,4956,4957],{"class":54,"line":426},[52,4958,960],{"class":65},[996,4960,4961],{},"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 .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 pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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 .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":48,"searchDepth":62,"depth":62,"links":4963},[4964,4965,4966],{"id":4094,"depth":62,"text":4095},{"id":4299,"depth":62,"text":4300},{"id":4623,"depth":62,"text":4624},"Integrate with a React (Vite \u002F CRA) app","i-lucide-react",{},"\u002Fen\u002Fintegrations\u002Freact",{"title":4082,"description":4967},"en\u002Fintegrations\u002Freact","pb3AGE_nU_OjJFKOaRsB1vUMbyzjRuGZlTgplr5i71Q",{"id":4975,"title":4976,"body":4977,"description":5647,"extension":1010,"icon":5648,"meta":5649,"navigation":170,"path":5650,"seo":5651,"stem":5652,"__hash__":5653},"content\u002Fen\u002Fintegrations\u002Fvanilla-js.md","Vanilla JS",{"type":7,"value":4978,"toc":5643},[4979,4983,4986,4990,5617,5621,5640],[10,4980,4982],{"id":4981},"vanilla-js-integration","Vanilla JS Integration",[15,4984,4985],{},"No framework needed — just HTML and JavaScript.",[19,4987,4989],{"id":4988},"full-example","Full Example",[43,4991,4993],{"className":1772,"code":4992,"language":1774,"meta":48,"style":48},"\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n \u003Cmeta charset=\"UTF-8\" \u002F>\n \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \u002F>\n \u003Ctitle>Product Page — Virtual Try-On\u003C\u002Ftitle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n \u003Ch1>Classic Denim Jacket\u003C\u002Fh1>\n \u003Cp>$89.00\u003C\u002Fp>\n\n \u003C!-- Widget container -->\n \u003Cdiv id=\"widget-container\" style=\"width: 100%; max-width: 600px; aspect-ratio: 3 \u002F 4;\">\u003C\u002Fdiv>\n\n \u003Cbutton onclick=\"openWidget()\">Try On\u003C\u002Fbutton>\n\n \u003C!-- 1. Load the widget bundle -->\n \u003Cscript\n src=\"https:\u002F\u002Fwidget.try-on.ru\u002Ffitting-widget-bundle.js\"\n id=\"fitting-widget-bundle\"\n >\u003C\u002Fscript>\n\n \u003C!-- 2. Initialize -->\n \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\n \u003Cscript>\n function openWidget() {\n window.fitting('create', {\n targetElementId: 'widget-container',\n model: 'balanced',\n tryonItems: [\n {\n productName: 'Classic Denim Jacket',\n url: 'https:\u002F\u002Fexample.com\u002Fimages\u002Fjacket.jpg',\n },\n ],\n });\n }\n \u003C\u002Fscript>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[27,4994,4995,5008,5027,5036,5056,5088,5106,5114,5123,5127,5143,5160,5164,5169,5202,5206,5236,5240,5245,5251,5264,5277,5286,5290,5295,5313,5337,5380,5385,5405,5418,5426,5435,5440,5449,5462,5484,5500,5516,5526,5531,5546,5562,5567,5574,5584,5590,5599,5608],{"__ignoreMap":48},[52,4996,4997,5000,5003,5006],{"class":54,"line":55},[52,4998,4999],{"class":65},"\u003C!",[52,5001,5002],{"class":69},"DOCTYPE",[52,5004,5005],{"class":117}," html",[52,5007,73],{"class":65},[52,5009,5010,5012,5014,5016,5018,5020,5023,5025],{"class":54,"line":62},[52,5011,66],{"class":65},[52,5013,1774],{"class":69},[52,5015,185],{"class":117},[52,5017,121],{"class":65},[52,5019,124],{"class":65},[52,5021,5022],{"class":127},"en",[52,5024,124],{"class":65},[52,5026,73],{"class":65},[52,5028,5029,5031,5034],{"class":54,"line":76},[52,5030,66],{"class":65},[52,5032,5033],{"class":69},"head",[52,5035,73],{"class":65},[52,5037,5038,5040,5042,5045,5047,5049,5052,5054],{"class":54,"line":87},[52,5039,79],{"class":65},[52,5041,373],{"class":69},[52,5043,5044],{"class":117}," charset",[52,5046,121],{"class":65},[52,5048,124],{"class":65},[52,5050,5051],{"class":127},"UTF-8",[52,5053,124],{"class":65},[52,5055,145],{"class":65},[52,5057,5058,5060,5062,5065,5067,5069,5072,5074,5077,5079,5081,5084,5086],{"class":54,"line":109},[52,5059,79],{"class":65},[52,5061,373],{"class":69},[52,5063,5064],{"class":117}," name",[52,5066,121],{"class":65},[52,5068,124],{"class":65},[52,5070,5071],{"class":127},"viewport",[52,5073,124],{"class":65},[52,5075,5076],{"class":117}," content",[52,5078,121],{"class":65},[52,5080,124],{"class":65},[52,5082,5083],{"class":127},"width=device-width, initial-scale=1.0",[52,5085,124],{"class":65},[52,5087,145],{"class":65},[52,5089,5090,5092,5095,5097,5100,5102,5104],{"class":54,"line":148},[52,5091,79],{"class":65},[52,5093,5094],{"class":69},"title",[52,5096,95],{"class":65},[52,5098,5099],{"class":98},"Product Page — Virtual Try-On",[52,5101,102],{"class":65},[52,5103,5094],{"class":69},[52,5105,73],{"class":65},[52,5107,5108,5110,5112],{"class":54,"line":158},[52,5109,102],{"class":65},[52,5111,5033],{"class":69},[52,5113,73],{"class":65},[52,5115,5116,5118,5121],{"class":54,"line":167},[52,5117,66],{"class":65},[52,5119,5120],{"class":69},"body",[52,5122,73],{"class":65},[52,5124,5125],{"class":54,"line":174},[52,5126,171],{"emptyLinePlaceholder":170},[52,5128,5129,5131,5133,5135,5137,5139,5141],{"class":54,"line":199},[52,5130,79],{"class":65},[52,5132,10],{"class":69},[52,5134,95],{"class":65},[52,5136,2103],{"class":98},[52,5138,102],{"class":65},[52,5140,10],{"class":69},[52,5142,73],{"class":65},[52,5144,5145,5147,5149,5151,5154,5156,5158],{"class":54,"line":227},[52,5146,79],{"class":65},[52,5148,15],{"class":69},[52,5150,95],{"class":65},[52,5152,5153],{"class":98},"$89.00",[52,5155,102],{"class":65},[52,5157,15],{"class":69},[52,5159,73],{"class":65},[52,5161,5162],{"class":54,"line":232},[52,5163,171],{"emptyLinePlaceholder":170},[52,5165,5166],{"class":54,"line":244},[52,5167,5168],{"class":58}," \u003C!-- Widget container -->\n",[52,5170,5171,5173,5175,5177,5179,5181,5183,5185,5187,5189,5191,5194,5196,5198,5200],{"class":54,"line":256},[52,5172,79],{"class":65},[52,5174,82],{"class":69},[52,5176,676],{"class":117},[52,5178,121],{"class":65},[52,5180,124],{"class":65},[52,5182,683],{"class":127},[52,5184,124],{"class":65},[52,5186,2888],{"class":117},[52,5188,121],{"class":65},[52,5190,124],{"class":65},[52,5192,5193],{"class":127},"width: 100%; max-width: 600px; aspect-ratio: 3 \u002F 4;",[52,5195,124],{"class":65},[52,5197,1815],{"class":65},[52,5199,82],{"class":69},[52,5201,73],{"class":65},[52,5203,5204],{"class":54,"line":262},[52,5205,171],{"emptyLinePlaceholder":170},[52,5207,5208,5210,5212,5215,5217,5219,5222,5224,5226,5228,5230,5232,5234],{"class":54,"line":281},[52,5209,79],{"class":65},[52,5211,706],{"class":69},[52,5213,5214],{"class":117}," onclick",[52,5216,121],{"class":65},[52,5218,124],{"class":65},[52,5220,5221],{"class":235},"openWidget",[52,5223,1873],{"class":127},[52,5225,124],{"class":65},[52,5227,95],{"class":65},[52,5229,723],{"class":98},[52,5231,102],{"class":65},[52,5233,706],{"class":69},[52,5235,73],{"class":65},[52,5237,5238],{"class":54,"line":298},[52,5239,171],{"emptyLinePlaceholder":170},[52,5241,5242],{"class":54,"line":304},[52,5243,5244],{"class":58}," \u003C!-- 1. Load the widget bundle -->\n",[52,5246,5247,5249],{"class":54,"line":309},[52,5248,79],{"class":65},[52,5250,1783],{"class":69},[52,5252,5253,5256,5258,5260,5262],{"class":54,"line":325},[52,5254,5255],{"class":117}," src",[52,5257,121],{"class":65},[52,5259,124],{"class":65},[52,5261,272],{"class":127},[52,5263,1797],{"class":65},[52,5265,5266,5269,5271,5273,5275],{"class":54,"line":336},[52,5267,5268],{"class":117}," id",[52,5270,121],{"class":65},[52,5272,124],{"class":65},[52,5274,291],{"class":127},[52,5276,1797],{"class":65},[52,5278,5279,5282,5284],{"class":54,"line":342},[52,5280,5281],{"class":65}," >\u003C\u002F",[52,5283,179],{"class":69},[52,5285,73],{"class":65},[52,5287,5288],{"class":54,"line":348},[52,5289,171],{"emptyLinePlaceholder":170},[52,5291,5292],{"class":54,"line":354},[52,5293,5294],{"class":58}," \u003C!-- 2. Initialize -->\n",[52,5296,5297,5299,5301,5303,5305,5307,5309,5311],{"class":54,"line":360},[52,5298,79],{"class":65},[52,5300,179],{"class":69},[52,5302,676],{"class":117},[52,5304,121],{"class":65},[52,5306,124],{"class":65},[52,5308,318],{"class":127},[52,5310,124],{"class":65},[52,5312,73],{"class":65},[52,5314,5315,5317,5319,5321,5323,5325,5327,5329,5331,5333,5335],{"class":54,"line":391},[52,5316,2785],{"class":98},[52,5318,34],{"class":65},[52,5320,1855],{"class":98},[52,5322,121],{"class":65},[52,5324,1860],{"class":98},[52,5326,34],{"class":65},[52,5328,1855],{"class":98},[52,5330,1867],{"class":65},[52,5332,1870],{"class":117},[52,5334,1873],{"class":65},[52,5336,469],{"class":65},[52,5338,5339,5342,5344,5346,5348,5350,5352,5354,5356,5358,5360,5362,5364,5366,5368,5370,5372,5374,5376,5378],{"class":54,"line":397},[52,5340,5341],{"class":69}," (",[52,5343,1089],{"class":98},[52,5345,34],{"class":65},[52,5347,844],{"class":98},[52,5349,34],{"class":65},[52,5351,1891],{"class":98},[52,5353,1894],{"class":65},[52,5355,1860],{"class":98},[52,5357,34],{"class":65},[52,5359,844],{"class":98},[52,5361,34],{"class":65},[52,5363,1891],{"class":98},[52,5365,1907],{"class":65},[52,5367,1910],{"class":69},[52,5369,34],{"class":65},[52,5371,1915],{"class":235},[52,5373,238],{"class":69},[52,5375,1920],{"class":98},[52,5377,1129],{"class":69},[52,5379,1132],{"class":65},[52,5381,5382],{"class":54,"line":405},[52,5383,5384],{"class":65}," };\n",[52,5386,5387,5389,5391,5393,5395,5397,5399,5401,5403],{"class":54,"line":410},[52,5388,2785],{"class":98},[52,5390,34],{"class":65},[52,5392,844],{"class":235},[52,5394,238],{"class":98},[52,5396,275],{"class":65},[52,5398,1100],{"class":127},[52,5400,275],{"class":65},[52,5402,856],{"class":65},[52,5404,469],{"class":65},[52,5406,5407,5410,5412,5414,5416],{"class":54,"line":418},[52,5408,5409],{"class":69}," apiKey",[52,5411,250],{"class":65},[52,5413,218],{"class":65},[52,5415,1961],{"class":127},[52,5417,224],{"class":65},[52,5419,5420,5422,5424],{"class":54,"line":426},[52,5421,2847],{"class":65},[52,5423,1129],{"class":98},[52,5425,1132],{"class":65},[52,5427,5429,5431,5433],{"class":54,"line":5428},32,[52,5430,151],{"class":65},[52,5432,179],{"class":69},[52,5434,73],{"class":65},[52,5436,5438],{"class":54,"line":5437},33,[52,5439,171],{"emptyLinePlaceholder":170},[52,5441,5443,5445,5447],{"class":54,"line":5442},34,[52,5444,79],{"class":65},[52,5446,179],{"class":69},[52,5448,73],{"class":65},[52,5450,5452,5455,5458,5460],{"class":54,"line":5451},35,[52,5453,5454],{"class":117}," function",[52,5456,5457],{"class":235}," openWidget",[52,5459,1873],{"class":65},[52,5461,469],{"class":65},[52,5463,5465,5468,5470,5472,5474,5476,5478,5480,5482],{"class":54,"line":5464},36,[52,5466,5467],{"class":98}," window",[52,5469,34],{"class":65},[52,5471,844],{"class":235},[52,5473,238],{"class":69},[52,5475,275],{"class":65},[52,5477,851],{"class":127},[52,5479,275],{"class":65},[52,5481,856],{"class":65},[52,5483,469],{"class":65},[52,5485,5487,5490,5492,5494,5496,5498],{"class":54,"line":5486},37,[52,5488,5489],{"class":69}," targetElementId",[52,5491,250],{"class":65},[52,5493,218],{"class":65},[52,5495,683],{"class":127},[52,5497,275],{"class":65},[52,5499,278],{"class":65},[52,5501,5503,5506,5508,5510,5512,5514],{"class":54,"line":5502},38,[52,5504,5505],{"class":69}," model",[52,5507,250],{"class":65},[52,5509,218],{"class":65},[52,5511,885],{"class":127},[52,5513,275],{"class":65},[52,5515,278],{"class":65},[52,5517,5519,5522,5524],{"class":54,"line":5518},39,[52,5520,5521],{"class":69}," tryonItems",[52,5523,250],{"class":65},[52,5525,253],{"class":69},[52,5527,5529],{"class":54,"line":5528},40,[52,5530,3175],{"class":65},[52,5532,5534,5536,5538,5540,5542,5544],{"class":54,"line":5533},41,[52,5535,3180],{"class":69},[52,5537,250],{"class":65},[52,5539,218],{"class":65},[52,5541,2103],{"class":127},[52,5543,275],{"class":65},[52,5545,278],{"class":65},[52,5547,5549,5551,5553,5555,5558,5560],{"class":54,"line":5548},42,[52,5550,3195],{"class":69},[52,5552,250],{"class":65},[52,5554,218],{"class":65},[52,5556,5557],{"class":127},"https:\u002F\u002Fexample.com\u002Fimages\u002Fjacket.jpg",[52,5559,275],{"class":65},[52,5561,278],{"class":65},[52,5563,5565],{"class":54,"line":5564},43,[52,5566,3210],{"class":65},[52,5568,5570,5572],{"class":54,"line":5569},44,[52,5571,3215],{"class":69},[52,5573,278],{"class":65},[52,5575,5577,5580,5582],{"class":54,"line":5576},45,[52,5578,5579],{"class":65}," }",[52,5581,1129],{"class":69},[52,5583,1132],{"class":65},[52,5585,5587],{"class":54,"line":5586},46,[52,5588,5589],{"class":65}," }\n",[52,5591,5593,5595,5597],{"class":54,"line":5592},47,[52,5594,151],{"class":65},[52,5596,179],{"class":69},[52,5598,73],{"class":65},[52,5600,5602,5604,5606],{"class":54,"line":5601},48,[52,5603,102],{"class":65},[52,5605,5120],{"class":69},[52,5607,73],{"class":65},[52,5609,5611,5613,5615],{"class":54,"line":5610},49,[52,5612,102],{"class":65},[52,5614,1774],{"class":69},[52,5616,73],{"class":65},[19,5618,5620],{"id":5619},"key-points","Key Points",[2153,5622,5623,5626,5635],{},[2156,5624,5625],{},"Load the bundle script first.",[2156,5627,5628,5629,5632,5633,34],{},"Initialize with ",[27,5630,5631],{},"window.fitting('init', { apiKey })"," before calling ",[27,5634,851],{},[2156,5636,2198,5637,5639],{},[27,5638,1165],{}," must match an existing element on the page.",[996,5641,5642],{},"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 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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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":48,"searchDepth":62,"depth":62,"links":5644},[5645,5646],{"id":4988,"depth":62,"text":4989},{"id":5619,"depth":62,"text":5620},"Integrate with plain HTML\u002FJavaScript","i-lucide-file-code",{},"\u002Fen\u002Fintegrations\u002Fvanilla-js",{"title":4976,"description":5647},"en\u002Fintegrations\u002Fvanilla-js","Ts8msIFer-tIlPDRwRbkNZSpWu0JrTJP8uMKqB57tJQ",{"id":5655,"title":5656,"body":5657,"description":6502,"extension":1010,"icon":6503,"meta":6504,"navigation":170,"path":6505,"seo":6506,"stem":6507,"__hash__":6508},"content\u002Fen\u002Fintegrations\u002Fvue.md","Vue 3",{"type":7,"value":5658,"toc":6497},[5659,5663,5666,5668,5673,5852,5856,6154,6158,6494],[10,5660,5662],{"id":5661},"vue-3-integration","Vue 3 Integration",[15,5664,5665],{},"Works with Vue 3 + Vite or any Vue 3 setup.",[19,5667,4095],{"id":4094},[15,5669,5670,5671,250],{},"In ",[27,5672,4101],{},[43,5674,5676],{"className":1772,"code":5675,"language":1774,"meta":48,"style":48},"\u003Cscript\n src=\"https:\u002F\u002Fwidget.try-on.ru\u002Ffitting-widget-bundle.js\"\n id=\"fitting-widget-bundle\"\n>\u003C\u002Fscript>\n\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",[27,5677,5678,5684,5696,5708,5716,5734,5758,5800,5804,5824,5836,5844],{"__ignoreMap":48},[52,5679,5680,5682],{"class":54,"line":55},[52,5681,66],{"class":65},[52,5683,1783],{"class":69},[52,5685,5686,5688,5690,5692,5694],{"class":54,"line":62},[52,5687,1788],{"class":117},[52,5689,121],{"class":65},[52,5691,124],{"class":65},[52,5693,272],{"class":127},[52,5695,1797],{"class":65},[52,5697,5698,5700,5702,5704,5706],{"class":54,"line":76},[52,5699,1802],{"class":117},[52,5701,121],{"class":65},[52,5703,124],{"class":65},[52,5705,291],{"class":127},[52,5707,1797],{"class":65},[52,5709,5710,5712,5714],{"class":54,"line":87},[52,5711,1815],{"class":65},[52,5713,179],{"class":69},[52,5715,73],{"class":65},[52,5717,5718,5720,5722,5724,5726,5728,5730,5732],{"class":54,"line":109},[52,5719,66],{"class":65},[52,5721,179],{"class":69},[52,5723,676],{"class":117},[52,5725,121],{"class":65},[52,5727,124],{"class":65},[52,5729,318],{"class":127},[52,5731,124],{"class":65},[52,5733,73],{"class":65},[52,5735,5736,5738,5740,5742,5744,5746,5748,5750,5752,5754,5756],{"class":54,"line":148},[52,5737,839],{"class":98},[52,5739,34],{"class":65},[52,5741,1855],{"class":98},[52,5743,121],{"class":65},[52,5745,1860],{"class":98},[52,5747,34],{"class":65},[52,5749,1855],{"class":98},[52,5751,1867],{"class":65},[52,5753,1870],{"class":117},[52,5755,1873],{"class":65},[52,5757,469],{"class":65},[52,5759,5760,5762,5764,5766,5768,5770,5772,5774,5776,5778,5780,5782,5784,5786,5788,5790,5792,5794,5796,5798],{"class":54,"line":158},[52,5761,1880],{"class":69},[52,5763,1089],{"class":98},[52,5765,34],{"class":65},[52,5767,844],{"class":98},[52,5769,34],{"class":65},[52,5771,1891],{"class":98},[52,5773,1894],{"class":65},[52,5775,1860],{"class":98},[52,5777,34],{"class":65},[52,5779,844],{"class":98},[52,5781,34],{"class":65},[52,5783,1891],{"class":98},[52,5785,1907],{"class":65},[52,5787,1910],{"class":69},[52,5789,34],{"class":65},[52,5791,1915],{"class":235},[52,5793,238],{"class":69},[52,5795,1920],{"class":98},[52,5797,1129],{"class":69},[52,5799,1132],{"class":65},[52,5801,5802],{"class":54,"line":167},[52,5803,1929],{"class":65},[52,5805,5806,5808,5810,5812,5814,5816,5818,5820,5822],{"class":54,"line":174},[52,5807,839],{"class":98},[52,5809,34],{"class":65},[52,5811,844],{"class":235},[52,5813,238],{"class":98},[52,5815,275],{"class":65},[52,5817,1100],{"class":127},[52,5819,275],{"class":65},[52,5821,856],{"class":65},[52,5823,469],{"class":65},[52,5825,5826,5828,5830,5832,5834],{"class":54,"line":199},[52,5827,1954],{"class":69},[52,5829,250],{"class":65},[52,5831,218],{"class":65},[52,5833,1961],{"class":127},[52,5835,224],{"class":65},[52,5837,5838,5840,5842],{"class":54,"line":227},[52,5839,953],{"class":65},[52,5841,1129],{"class":98},[52,5843,1132],{"class":65},[52,5845,5846,5848,5850],{"class":54,"line":232},[52,5847,102],{"class":65},[52,5849,179],{"class":69},[52,5851,73],{"class":65},[19,5853,5855],{"id":5854},"_2-create-a-composable","2. Create a Composable",[43,5857,5859],{"className":441,"code":5858,"language":192,"meta":48,"style":48},"\u002F\u002F composables\u002FuseFittingWidget.ts\nexport interface TryonItem {\n productName: string\n url: string\n productId?: string\n}\n\nexport interface CreateOptions {\n targetElementId: string\n model?: 'balanced' | 'quality' | 'speed'\n tryonItems: TryonItem[]\n}\n\ndeclare global {\n interface Window {\n fitting: (command: string, options?: unknown) => void\n }\n}\n\nexport function useFittingWidget() {\n const open = (options: CreateOptions) => {\n window.fitting('create', options)\n }\n\n const close = () => {\n window.fitting('close')\n }\n\n return { open, close }\n}\n",[27,5860,5861,5866,5877,5885,5893,5901,5905,5909,5919,5927,5955,5966,5970,5974,5982,5990,6019,6023,6027,6031,6043,6065,6087,6091,6095,6109,6127,6131,6135,6150],{"__ignoreMap":48},[52,5862,5863],{"class":54,"line":55},[52,5864,5865],{"class":58},"\u002F\u002F composables\u002FuseFittingWidget.ts\n",[52,5867,5868,5870,5873,5875],{"class":54,"line":62},[52,5869,449],{"class":202},[52,5871,5872],{"class":117}," interface",[52,5874,2630],{"class":795},[52,5876,469],{"class":65},[52,5878,5879,5881,5883],{"class":54,"line":76},[52,5880,790],{"class":69},[52,5882,250],{"class":65},[52,5884,796],{"class":795},[52,5886,5887,5889,5891],{"class":54,"line":87},[52,5888,2648],{"class":69},[52,5890,250],{"class":65},[52,5892,796],{"class":795},[52,5894,5895,5897,5899],{"class":54,"line":109},[52,5896,4343],{"class":69},[52,5898,2707],{"class":65},[52,5900,796],{"class":795},[52,5902,5903],{"class":54,"line":148},[52,5904,960],{"class":65},[52,5906,5907],{"class":54,"line":158},[52,5908,171],{"emptyLinePlaceholder":170},[52,5910,5911,5913,5915,5917],{"class":54,"line":167},[52,5912,449],{"class":202},[52,5914,5872],{"class":117},[52,5916,4364],{"class":795},[52,5918,469],{"class":65},[52,5920,5921,5923,5925],{"class":54,"line":174},[52,5922,1288],{"class":69},[52,5924,250],{"class":65},[52,5926,796],{"class":795},[52,5928,5929,5931,5933,5935,5937,5939,5941,5943,5945,5947,5949,5951,5953],{"class":54,"line":199},[52,5930,1303],{"class":69},[52,5932,2707],{"class":65},[52,5934,218],{"class":65},[52,5936,885],{"class":127},[52,5938,275],{"class":65},[52,5940,4391],{"class":65},[52,5942,218],{"class":65},[52,5944,4396],{"class":127},[52,5946,275],{"class":65},[52,5948,4391],{"class":65},[52,5950,218],{"class":65},[52,5952,4405],{"class":127},[52,5954,224],{"class":65},[52,5956,5957,5959,5961,5963],{"class":54,"line":227},[52,5958,1318],{"class":69},[52,5960,250],{"class":65},[52,5962,2630],{"class":795},[52,5964,5965],{"class":98},"[]\n",[52,5967,5968],{"class":54,"line":232},[52,5969,960],{"class":65},[52,5971,5972],{"class":54,"line":244},[52,5973,171],{"emptyLinePlaceholder":170},[52,5975,5976,5978,5980],{"class":54,"line":256},[52,5977,2667],{"class":117},[52,5979,2670],{"class":98},[52,5981,241],{"class":65},[52,5983,5984,5986,5988],{"class":54,"line":262},[52,5985,2677],{"class":117},[52,5987,2680],{"class":795},[52,5989,469],{"class":65},[52,5991,5992,5994,5996,5998,6000,6002,6004,6006,6008,6010,6012,6014,6016],{"class":54,"line":281},[52,5993,2687],{"class":69},[52,5995,250],{"class":65},[52,5997,2692],{"class":65},[52,5999,2695],{"class":2368},[52,6001,250],{"class":65},[52,6003,2641],{"class":795},[52,6005,856],{"class":65},[52,6007,2704],{"class":2368},[52,6009,2707],{"class":65},[52,6011,2710],{"class":795},[52,6013,1129],{"class":65},[52,6015,832],{"class":117},[52,6017,6018],{"class":795}," void\n",[52,6020,6021],{"class":54,"line":298},[52,6022,2724],{"class":65},[52,6024,6025],{"class":54,"line":304},[52,6026,960],{"class":65},[52,6028,6029],{"class":54,"line":309},[52,6030,171],{"emptyLinePlaceholder":170},[52,6032,6033,6035,6037,6039,6041],{"class":54,"line":325},[52,6034,449],{"class":202},[52,6036,1870],{"class":117},[52,6038,4497],{"class":235},[52,6040,1873],{"class":65},[52,6042,469],{"class":65},[52,6044,6045,6047,6049,6051,6053,6055,6057,6059,6061,6063],{"class":54,"line":336},[52,6046,2769],{"class":117},[52,6048,4508],{"class":98},[52,6050,1894],{"class":65},[52,6052,2692],{"class":65},[52,6054,4515],{"class":2368},[52,6056,250],{"class":65},[52,6058,4364],{"class":795},[52,6060,1129],{"class":65},[52,6062,832],{"class":117},[52,6064,469],{"class":65},[52,6066,6067,6069,6071,6073,6075,6077,6079,6081,6083,6085],{"class":54,"line":342},[52,6068,2785],{"class":98},[52,6070,34],{"class":65},[52,6072,844],{"class":235},[52,6074,238],{"class":69},[52,6076,275],{"class":65},[52,6078,851],{"class":127},[52,6080,275],{"class":65},[52,6082,856],{"class":65},[52,6084,2704],{"class":98},[52,6086,423],{"class":69},[52,6088,6089],{"class":54,"line":348},[52,6090,2724],{"class":65},[52,6092,6093],{"class":54,"line":354},[52,6094,171],{"emptyLinePlaceholder":170},[52,6096,6097,6099,6101,6103,6105,6107],{"class":54,"line":360},[52,6098,2769],{"class":117},[52,6100,4564],{"class":98},[52,6102,1894],{"class":65},[52,6104,829],{"class":65},[52,6106,832],{"class":117},[52,6108,469],{"class":65},[52,6110,6111,6113,6115,6117,6119,6121,6123,6125],{"class":54,"line":391},[52,6112,2785],{"class":98},[52,6114,34],{"class":65},[52,6116,844],{"class":235},[52,6118,238],{"class":69},[52,6120,275],{"class":65},[52,6122,4587],{"class":127},[52,6124,275],{"class":65},[52,6126,423],{"class":69},[52,6128,6129],{"class":54,"line":397},[52,6130,2724],{"class":65},[52,6132,6133],{"class":54,"line":405},[52,6134,171],{"emptyLinePlaceholder":170},[52,6136,6137,6139,6141,6143,6145,6147],{"class":54,"line":410},[52,6138,2396],{"class":202},[52,6140,206],{"class":65},[52,6142,4508],{"class":98},[52,6144,856],{"class":65},[52,6146,4564],{"class":98},[52,6148,6149],{"class":65}," }\n",[52,6151,6152],{"class":54,"line":418},[52,6153,960],{"class":65},[19,6155,6157],{"id":6156},"_3-create-the-widget-component","3. Create the Widget Component",[43,6159,6161],{"className":45,"code":6160,"language":47,"meta":48,"style":48},"\u003C!-- components\u002FTryOnWidget.vue -->\n\u003Ctemplate>\n \u003Cdiv>\n \u003Cdiv\n id=\"widget-container\"\n style=\"width: 100%; max-width: 600px; aspect-ratio: 3\u002F4\"\n \u002F>\n \u003Cbutton @click=\"handleTryOn\">Try On\u003C\u002Fbutton>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nimport { useFittingWidget, type TryonItem } from '~\u002Fcomposables\u002FuseFittingWidget'\n\nconst props = defineProps\u003C{\n productName: string\n imageUrl: string\n}>()\n\nconst { open } = useFittingWidget()\n\nconst handleTryOn = () => {\n open({\n targetElementId: 'widget-container',\n model: 'balanced',\n tryonItems: [\n {\n productName: props.productName,\n url: props.imageUrl,\n },\n ],\n })\n}\n\u003C\u002Fscript>\n",[27,6162,6163,6167,6175,6183,6189,6201,6215,6220,6246,6254,6262,6266,6286,6312,6316,6328,6336,6344,6350,6354,6371,6375,6389,6398,6412,6426,6434,6438,6452,6466,6470,6476,6482,6486],{"__ignoreMap":48},[52,6164,6165],{"class":54,"line":55},[52,6166,651],{"class":58},[52,6168,6169,6171,6173],{"class":54,"line":62},[52,6170,66],{"class":65},[52,6172,70],{"class":69},[52,6174,73],{"class":65},[52,6176,6177,6179,6181],{"class":54,"line":76},[52,6178,79],{"class":65},[52,6180,82],{"class":69},[52,6182,73],{"class":65},[52,6184,6185,6187],{"class":54,"line":87},[52,6186,90],{"class":65},[52,6188,4766],{"class":69},[52,6190,6191,6193,6195,6197,6199],{"class":54,"line":109},[52,6192,284],{"class":117},[52,6194,121],{"class":65},[52,6196,124],{"class":65},[52,6198,683],{"class":127},[52,6200,1797],{"class":65},[52,6202,6203,6206,6208,6210,6213],{"class":54,"line":148},[52,6204,6205],{"class":117}," style",[52,6207,121],{"class":65},[52,6209,124],{"class":65},[52,6211,6212],{"class":127},"width: 100%; max-width: 600px; aspect-ratio: 3\u002F4",[52,6214,1797],{"class":65},[52,6216,6217],{"class":54,"line":158},[52,6218,6219],{"class":65}," \u002F>\n",[52,6221,6222,6224,6226,6228,6230,6232,6234,6236,6238,6240,6242,6244],{"class":54,"line":167},[52,6223,90],{"class":65},[52,6225,706],{"class":69},[52,6227,709],{"class":117},[52,6229,121],{"class":65},[52,6231,124],{"class":65},[52,6233,716],{"class":127},[52,6235,124],{"class":65},[52,6237,95],{"class":65},[52,6239,723],{"class":98},[52,6241,102],{"class":65},[52,6243,706],{"class":69},[52,6245,73],{"class":65},[52,6247,6248,6250,6252],{"class":54,"line":174},[52,6249,151],{"class":65},[52,6251,82],{"class":69},[52,6253,73],{"class":65},[52,6255,6256,6258,6260],{"class":54,"line":199},[52,6257,102],{"class":65},[52,6259,70],{"class":69},[52,6261,73],{"class":65},[52,6263,6264],{"class":54,"line":227},[52,6265,171],{"emptyLinePlaceholder":170},[52,6267,6268,6270,6272,6274,6276,6278,6280,6282,6284],{"class":54,"line":232},[52,6269,66],{"class":65},[52,6271,179],{"class":69},[52,6273,182],{"class":117},[52,6275,185],{"class":117},[52,6277,121],{"class":65},[52,6279,124],{"class":65},[52,6281,192],{"class":127},[52,6283,124],{"class":65},[52,6285,73],{"class":65},[52,6287,6288,6290,6292,6294,6296,6299,6301,6303,6305,6307,6310],{"class":54,"line":244},[52,6289,203],{"class":202},[52,6291,206],{"class":65},[52,6293,4497],{"class":98},[52,6295,856],{"class":65},[52,6297,6298],{"class":202}," type",[52,6300,2630],{"class":98},[52,6302,212],{"class":65},[52,6304,215],{"class":202},[52,6306,218],{"class":65},[52,6308,6309],{"class":127},"~\u002Fcomposables\u002FuseFittingWidget",[52,6311,224],{"class":65},[52,6313,6314],{"class":54,"line":256},[52,6315,171],{"emptyLinePlaceholder":170},[52,6317,6318,6320,6322,6324,6326],{"class":54,"line":262},[52,6319,774],{"class":117},[52,6321,777],{"class":98},[52,6323,121],{"class":65},[52,6325,782],{"class":235},[52,6327,785],{"class":65},[52,6329,6330,6332,6334],{"class":54,"line":281},[52,6331,790],{"class":69},[52,6333,250],{"class":65},[52,6335,796],{"class":795},[52,6337,6338,6340,6342],{"class":54,"line":298},[52,6339,801],{"class":69},[52,6341,250],{"class":65},[52,6343,796],{"class":795},[52,6345,6346,6348],{"class":54,"line":304},[52,6347,810],{"class":65},[52,6349,813],{"class":98},[52,6351,6352],{"class":54,"line":309},[52,6353,171],{"emptyLinePlaceholder":170},[52,6355,6356,6358,6360,6363,6365,6367,6369],{"class":54,"line":325},[52,6357,774],{"class":117},[52,6359,206],{"class":65},[52,6361,6362],{"class":98}," open ",[52,6364,386],{"class":65},[52,6366,1894],{"class":65},[52,6368,4497],{"class":235},[52,6370,813],{"class":98},[52,6372,6373],{"class":54,"line":336},[52,6374,171],{"emptyLinePlaceholder":170},[52,6376,6377,6379,6381,6383,6385,6387],{"class":54,"line":342},[52,6378,774],{"class":117},[52,6380,824],{"class":98},[52,6382,121],{"class":65},[52,6384,829],{"class":65},[52,6386,832],{"class":117},[52,6388,469],{"class":65},[52,6390,6391,6394,6396],{"class":54,"line":348},[52,6392,6393],{"class":235}," open",[52,6395,238],{"class":69},[52,6397,241],{"class":65},[52,6399,6400,6402,6404,6406,6408,6410],{"class":54,"line":354},[52,6401,863],{"class":69},[52,6403,250],{"class":65},[52,6405,218],{"class":65},[52,6407,683],{"class":127},[52,6409,275],{"class":65},[52,6411,278],{"class":65},[52,6413,6414,6416,6418,6420,6422,6424],{"class":54,"line":360},[52,6415,878],{"class":69},[52,6417,250],{"class":65},[52,6419,218],{"class":65},[52,6421,885],{"class":127},[52,6423,275],{"class":65},[52,6425,278],{"class":65},[52,6427,6428,6430,6432],{"class":54,"line":391},[52,6429,894],{"class":69},[52,6431,250],{"class":65},[52,6433,253],{"class":69},[52,6435,6436],{"class":54,"line":397},[52,6437,903],{"class":65},[52,6439,6440,6442,6444,6446,6448,6450],{"class":54,"line":405},[52,6441,908],{"class":69},[52,6443,250],{"class":65},[52,6445,913],{"class":98},[52,6447,34],{"class":65},[52,6449,918],{"class":98},[52,6451,278],{"class":65},[52,6453,6454,6456,6458,6460,6462,6464],{"class":54,"line":410},[52,6455,925],{"class":69},[52,6457,250],{"class":65},[52,6459,913],{"class":98},[52,6461,34],{"class":65},[52,6463,934],{"class":98},[52,6465,278],{"class":65},[52,6467,6468],{"class":54,"line":418},[52,6469,941],{"class":65},[52,6471,6472,6474],{"class":54,"line":426},[52,6473,946],{"class":69},[52,6475,278],{"class":65},[52,6477,6478,6480],{"class":54,"line":5428},[52,6479,953],{"class":65},[52,6481,423],{"class":69},[52,6483,6484],{"class":54,"line":5437},[52,6485,960],{"class":65},[52,6487,6488,6490,6492],{"class":54,"line":5442},[52,6489,102],{"class":65},[52,6491,179],{"class":69},[52,6493,73],{"class":65},[996,6495,6496],{},"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 pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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 .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 .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":48,"searchDepth":62,"depth":62,"links":6498},[6499,6500,6501],{"id":4094,"depth":62,"text":4095},{"id":5854,"depth":62,"text":5855},{"id":6156,"depth":62,"text":6157},"Integrate with a Vue 3 application","i-lucide-venetian-mask",{},"\u002Fen\u002Fintegrations\u002Fvue",{"title":5656,"description":6502},"en\u002Fintegrations\u002Fvue","GShiJEM5AAOgyg7U0MXXp-Lqn_Y-1BooZA_uvPnVwT0",{"id":6510,"title":6511,"body":6512,"description":6921,"extension":1010,"icon":2181,"meta":6922,"navigation":170,"path":2264,"seo":6923,"stem":6924,"__hash__":6925},"content\u002Fgetting-started\u002Fquick-start.md","Быстрый старт",{"type":7,"value":6513,"toc":6912},[6514,6517,6520,6524,6531,6535,6543,6585,6589,6729,6733,6739,6765,6769,6775,6885,6889,6892,6896,6909],[10,6515,6511],{"id":6516},"быстрый-старт",[15,6518,6519],{},"Следуйте этим шагам, чтобы добавить виртуальную примерку на ваш сайт.",[19,6521,6523],{"id":6522},"_1-получите-api-ключ","1. Получите API-ключ",[15,6525,6526,6527,6530],{},"Зарегистрируйтесь на ",[1748,6528,1753],{"href":1750,"rel":6529},[1752],", чтобы получить бесплатный API-ключ.",[19,6532,6534],{"id":6533},"_2-загрузите-скрипт-виджета","2. Загрузите скрипт виджета",[15,6536,6537,6538,6540,6541,250],{},"Добавьте следующий тег ",[27,6539,1764],{}," на страницу, желательно перед закрывающим тегом ",[27,6542,1768],{},[43,6544,6545],{"className":1772,"code":1773,"language":1774,"meta":48,"style":48},[27,6546,6547,6553,6565,6577],{"__ignoreMap":48},[52,6548,6549,6551],{"class":54,"line":55},[52,6550,66],{"class":65},[52,6552,1783],{"class":69},[52,6554,6555,6557,6559,6561,6563],{"class":54,"line":62},[52,6556,1788],{"class":117},[52,6558,121],{"class":65},[52,6560,124],{"class":65},[52,6562,272],{"class":127},[52,6564,1797],{"class":65},[52,6566,6567,6569,6571,6573,6575],{"class":54,"line":76},[52,6568,1802],{"class":117},[52,6570,121],{"class":65},[52,6572,124],{"class":65},[52,6574,291],{"class":127},[52,6576,1797],{"class":65},[52,6578,6579,6581,6583],{"class":54,"line":87},[52,6580,1815],{"class":65},[52,6582,179],{"class":69},[52,6584,73],{"class":65},[19,6586,6588],{"id":6587},"_3-инициализируйте-виджет","3. Инициализируйте виджет",[43,6590,6591],{"className":1772,"code":1826,"language":1774,"meta":48,"style":48},[27,6592,6593,6611,6635,6677,6681,6701,6713,6721],{"__ignoreMap":48},[52,6594,6595,6597,6599,6601,6603,6605,6607,6609],{"class":54,"line":55},[52,6596,66],{"class":65},[52,6598,179],{"class":69},[52,6600,676],{"class":117},[52,6602,121],{"class":65},[52,6604,124],{"class":65},[52,6606,318],{"class":127},[52,6608,124],{"class":65},[52,6610,73],{"class":65},[52,6612,6613,6615,6617,6619,6621,6623,6625,6627,6629,6631,6633],{"class":54,"line":62},[52,6614,839],{"class":98},[52,6616,34],{"class":65},[52,6618,1855],{"class":98},[52,6620,121],{"class":65},[52,6622,1860],{"class":98},[52,6624,34],{"class":65},[52,6626,1855],{"class":98},[52,6628,1867],{"class":65},[52,6630,1870],{"class":117},[52,6632,1873],{"class":65},[52,6634,469],{"class":65},[52,6636,6637,6639,6641,6643,6645,6647,6649,6651,6653,6655,6657,6659,6661,6663,6665,6667,6669,6671,6673,6675],{"class":54,"line":76},[52,6638,1880],{"class":69},[52,6640,1089],{"class":98},[52,6642,34],{"class":65},[52,6644,844],{"class":98},[52,6646,34],{"class":65},[52,6648,1891],{"class":98},[52,6650,1894],{"class":65},[52,6652,1860],{"class":98},[52,6654,34],{"class":65},[52,6656,844],{"class":98},[52,6658,34],{"class":65},[52,6660,1891],{"class":98},[52,6662,1907],{"class":65},[52,6664,1910],{"class":69},[52,6666,34],{"class":65},[52,6668,1915],{"class":235},[52,6670,238],{"class":69},[52,6672,1920],{"class":98},[52,6674,1129],{"class":69},[52,6676,1132],{"class":65},[52,6678,6679],{"class":54,"line":87},[52,6680,1929],{"class":65},[52,6682,6683,6685,6687,6689,6691,6693,6695,6697,6699],{"class":54,"line":109},[52,6684,839],{"class":98},[52,6686,34],{"class":65},[52,6688,844],{"class":235},[52,6690,238],{"class":98},[52,6692,275],{"class":65},[52,6694,1100],{"class":127},[52,6696,275],{"class":65},[52,6698,856],{"class":65},[52,6700,469],{"class":65},[52,6702,6703,6705,6707,6709,6711],{"class":54,"line":148},[52,6704,1954],{"class":69},[52,6706,250],{"class":65},[52,6708,218],{"class":65},[52,6710,1961],{"class":127},[52,6712,224],{"class":65},[52,6714,6715,6717,6719],{"class":54,"line":158},[52,6716,953],{"class":65},[52,6718,1129],{"class":98},[52,6720,1132],{"class":65},[52,6722,6723,6725,6727],{"class":54,"line":167},[52,6724,102],{"class":65},[52,6726,179],{"class":69},[52,6728,73],{"class":65},[19,6730,6732],{"id":6731},"_4-добавьте-контейнер","4. Добавьте контейнер",[15,6734,6735,6736,6738],{},"Разместите ",[27,6737,1989],{}," там, где должен отображаться виджет:",[43,6740,6741],{"className":1772,"code":1993,"language":1774,"meta":48,"style":48},[27,6742,6743],{"__ignoreMap":48},[52,6744,6745,6747,6749,6751,6753,6755,6757,6759,6761,6763],{"class":54,"line":55},[52,6746,66],{"class":65},[52,6748,82],{"class":69},[52,6750,676],{"class":117},[52,6752,121],{"class":65},[52,6754,124],{"class":65},[52,6756,683],{"class":127},[52,6758,124],{"class":65},[52,6760,1815],{"class":65},[52,6762,82],{"class":69},[52,6764,73],{"class":65},[19,6766,6768],{"id":6767},"_5-запустите-виджет","5. Запустите виджет",[15,6770,6771,6772,6774],{},"Вызовите метод ",[27,6773,851],{}," при нажатии пользователем кнопки:",[43,6776,6777],{"className":1080,"code":2030,"language":1082,"meta":48,"style":48},[27,6778,6779,6799,6813,6827,6835,6839,6853,6867,6871,6877],{"__ignoreMap":48},[52,6780,6781,6783,6785,6787,6789,6791,6793,6795,6797],{"class":54,"line":55},[52,6782,1089],{"class":98},[52,6784,34],{"class":65},[52,6786,844],{"class":235},[52,6788,238],{"class":98},[52,6790,275],{"class":65},[52,6792,851],{"class":127},[52,6794,275],{"class":65},[52,6796,856],{"class":65},[52,6798,469],{"class":65},[52,6800,6801,6803,6805,6807,6809,6811],{"class":54,"line":62},[52,6802,1288],{"class":69},[52,6804,250],{"class":65},[52,6806,218],{"class":65},[52,6808,683],{"class":127},[52,6810,275],{"class":65},[52,6812,278],{"class":65},[52,6814,6815,6817,6819,6821,6823,6825],{"class":54,"line":76},[52,6816,1303],{"class":69},[52,6818,250],{"class":65},[52,6820,218],{"class":65},[52,6822,885],{"class":127},[52,6824,275],{"class":65},[52,6826,278],{"class":65},[52,6828,6829,6831,6833],{"class":54,"line":87},[52,6830,1318],{"class":69},[52,6832,250],{"class":65},[52,6834,253],{"class":98},[52,6836,6837],{"class":54,"line":109},[52,6838,259],{"class":65},[52,6840,6841,6843,6845,6847,6849,6851],{"class":54,"line":148},[52,6842,1331],{"class":69},[52,6844,250],{"class":65},[52,6846,218],{"class":65},[52,6848,2103],{"class":127},[52,6850,275],{"class":65},[52,6852,278],{"class":65},[52,6854,6855,6857,6859,6861,6863,6865],{"class":54,"line":158},[52,6856,1347],{"class":69},[52,6858,250],{"class":65},[52,6860,218],{"class":65},[52,6862,2118],{"class":127},[52,6864,275],{"class":65},[52,6866,278],{"class":65},[52,6868,6869],{"class":54,"line":167},[52,6870,301],{"class":65},[52,6872,6873,6875],{"class":54,"line":174},[52,6874,413],{"class":98},[52,6876,278],{"class":65},[52,6878,6879,6881,6883],{"class":54,"line":199},[52,6880,386],{"class":65},[52,6882,1129],{"class":98},[52,6884,1132],{"class":65},[19,6886,6888],{"id":6887},"результат","Результат",[15,6890,6891],{},"Теперь ваши покупатели могут загрузить фотографию и мгновенно увидеть, как на них сидит одежда.",[19,6893,6895],{"id":6894},"дальнейшие-шаги","Дальнейшие шаги",[2153,6897,6898,6904],{},[2156,6899,6900,6901,34],{},"Ознакомьтесь с руководствами для конкретных фреймворков в разделе ",[1748,6902,6903],{"href":2161},"Интеграции",[2156,6905,6906,6907,34],{},"Изучите полный ",[1748,6908,1020],{"href":1389},[996,6910,6911],{},"html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}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 .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}",{"title":48,"searchDepth":62,"depth":62,"links":6913},[6914,6915,6916,6917,6918,6919,6920],{"id":6522,"depth":62,"text":6523},{"id":6533,"depth":62,"text":6534},{"id":6587,"depth":62,"text":6588},{"id":6731,"depth":62,"text":6732},{"id":6767,"depth":62,"text":6768},{"id":6887,"depth":62,"text":6888},{"id":6894,"depth":62,"text":6895},"Запустите Fitting Widget за считанные минуты",{},{"title":6511,"description":6921},"getting-started\u002Fquick-start","4USnYxFPZA1hrOvVApcSHMt9oQc0aZ6Ct8ohgcj8WJ8",{"id":6927,"title":6928,"body":6929,"description":7007,"extension":1010,"icon":2272,"meta":7008,"navigation":170,"path":7009,"seo":7010,"stem":7011,"__hash__":7012},"content\u002Findex.md","Введение",{"type":7,"value":6930,"toc":7002},[6931,6935,6940,6944,6973,6977,6994,6996],[10,6932,6934],{"id":6933},"fitting-widget-виртуальная-примерка","Fitting Widget — Виртуальная примерка",[15,6936,6937,6939],{},[2200,6938,2202],{}," — это готовое решение для виртуальной примерки одежды в интернет-магазинах. Он позволяет вашим покупателям загрузить фотографию и мгновенно увидеть, как на них выглядит любой предмет одежды — прямо на странице товара.",[19,6941,6943],{"id":6942},"ключевые-возможности","Ключевые возможности",[2153,6945,6946,6955,6961,6967],{},[2156,6947,6948,6951,6952,6954],{},[2200,6949,6950],{},"Быстрая интеграция"," — Один тег ",[27,6953,1764],{}," и несколько строк кода.",[2156,6956,6957,6960],{},[2200,6958,6959],{},"Не зависит от фреймворков"," — Работает с Vanilla JS, React, Vue, Next.js, Nuxt и другими.",[2156,6962,6963,6966],{},[2200,6964,6965],{},"Настраиваемый"," — Стилизуйте виджет под ваш бренд.",[2156,6968,6969,6972],{},[2200,6970,6971],{},"Лёгкий"," — Оптимизированная загрузка, которая не замедляет магазин.",[19,6974,6976],{"id":6975},"как-это-работает","Как это работает",[2239,6978,6979,6982,6985,6991],{},[2156,6980,6981],{},"Загрузите скрипт виджета на страницу.",[2156,6983,6984],{},"Инициализируйте его с вашим API-ключом.",[2156,6986,6987,6988,6990],{},"Вызовите ",[27,6989,2252],{}," с URL-адресами изображений товаров.",[2156,6992,6993],{},"Виджет отображается внутри выбранного вами контейнера.",[19,6995,6511],{"id":6516},[15,6997,6998,6999,7001],{},"Перейдите к руководству ",[1748,7000,6511],{"href":2264},", чтобы начать работу менее чем за 5 минут.",{"title":48,"searchDepth":62,"depth":62,"links":7003},[7004,7005,7006],{"id":6942,"depth":62,"text":6943},{"id":6975,"depth":62,"text":6976},{"id":6516,"depth":62,"text":6511},"Что такое Fitting Widget и зачем его использовать?",{},"\u002F",{"title":6928,"description":7007},"index","kGT91Bb-Wx88tMoHoRu65KMhDKtcehaBgnLzJYfeCWE",{"id":7014,"title":2280,"body":7015,"description":7890,"extension":1010,"icon":3275,"meta":7891,"navigation":170,"path":7892,"seo":7893,"stem":7894,"__hash__":7895},"content\u002Fintegrations\u002Fnextjs.md",{"type":7,"value":7016,"toc":7881},[7017,7021,7029,7033,7041,7050,7286,7290,7618,7622,7858,7862,7867,7879],[10,7018,7020],{"id":7019},"интеграция-с-nextjs","Интеграция с Next.js",[15,7022,7023,7024,7026,7027,34],{},"Fitting Widget работает как с ",[2200,7025,2292],{},", так и с ",[2200,7028,2296],{},[19,7030,7032],{"id":7031},"app-router-рекомендуется","App Router (рекомендуется)",[15,7034,7035,7036,7038,7039,34],{},"Используйте компонент Next.js ",[27,7037,2306],{}," с ",[27,7040,2310],{},[36,7042,7044,7045,7047,7048],{"id":7043},"шаг-1-загрузка-скриптов-в-layouttsx-или-pagetsx","Шаг 1 — Загрузка скриптов в ",[27,7046,2317],{}," или ",[27,7049,2321],{},[43,7051,7052],{"className":2324,"code":2325,"language":2326,"meta":48,"style":48},[27,7053,7054,7070,7074,7106,7112,7116,7124,7128,7134,7146,7158,7170,7174,7178,7184,7196,7208,7212,7218,7222,7226,7230,7234,7254,7258,7264,7272,7276,7282],{"__ignoreMap":48},[52,7055,7056,7058,7060,7062,7064,7066,7068],{"class":54,"line":55},[52,7057,203],{"class":202},[52,7059,2335],{"class":98},[52,7061,2338],{"class":202},[52,7063,218],{"class":65},[52,7065,2343],{"class":127},[52,7067,275],{"class":65},[52,7069,1132],{"class":65},[52,7071,7072],{"class":54,"line":62},[52,7073,171],{"emptyLinePlaceholder":170},[52,7075,7076,7078,7080,7082,7084,7086,7088,7090,7092,7094,7096,7098,7100,7102,7104],{"class":54,"line":76},[52,7077,449],{"class":202},[52,7079,452],{"class":202},[52,7081,1870],{"class":117},[52,7083,2362],{"class":235},[52,7085,2365],{"class":65},[52,7087,2369],{"class":2368},[52,7089,2372],{"class":65},[52,7091,206],{"class":65},[52,7093,2369],{"class":69},[52,7095,250],{"class":65},[52,7097,2381],{"class":795},[52,7099,34],{"class":65},[52,7101,2386],{"class":795},[52,7103,2389],{"class":65},[52,7105,469],{"class":65},[52,7107,7108,7110],{"class":54,"line":87},[52,7109,2396],{"class":202},[52,7111,2399],{"class":69},[52,7113,7114],{"class":54,"line":109},[52,7115,2404],{"class":65},[52,7117,7118,7120,7122],{"class":54,"line":148},[52,7119,2409],{"class":65},[52,7121,2412],{"class":98},[52,7123,960],{"class":65},[52,7125,7126],{"class":54,"line":158},[52,7127,171],{"emptyLinePlaceholder":170},[52,7129,7130,7132],{"class":54,"line":167},[52,7131,2423],{"class":65},[52,7133,2426],{"class":795},[52,7135,7136,7138,7140,7142,7144],{"class":54,"line":174},[52,7137,2431],{"class":117},[52,7139,121],{"class":65},[52,7141,124],{"class":65},[52,7143,272],{"class":127},[52,7145,1797],{"class":65},[52,7147,7148,7150,7152,7154,7156],{"class":54,"line":199},[52,7149,2444],{"class":117},[52,7151,121],{"class":65},[52,7153,124],{"class":65},[52,7155,2451],{"class":127},[52,7157,1797],{"class":65},[52,7159,7160,7162,7164,7166,7168],{"class":54,"line":227},[52,7161,2458],{"class":117},[52,7163,121],{"class":65},[52,7165,124],{"class":65},[52,7167,291],{"class":127},[52,7169,1797],{"class":65},[52,7171,7172],{"class":54,"line":232},[52,7173,2471],{"class":65},[52,7175,7176],{"class":54,"line":244},[52,7177,171],{"emptyLinePlaceholder":170},[52,7179,7180,7182],{"class":54,"line":256},[52,7181,2423],{"class":65},[52,7183,2426],{"class":795},[52,7185,7186,7188,7190,7192,7194],{"class":54,"line":262},[52,7187,2444],{"class":117},[52,7189,121],{"class":65},[52,7191,124],{"class":65},[52,7193,2451],{"class":127},[52,7195,1797],{"class":65},[52,7197,7198,7200,7202,7204,7206],{"class":54,"line":281},[52,7199,2458],{"class":117},[52,7201,121],{"class":65},[52,7203,124],{"class":65},[52,7205,318],{"class":127},[52,7207,1797],{"class":65},[52,7209,7210],{"class":54,"line":298},[52,7211,2510],{"class":65},[52,7213,7214,7216],{"class":54,"line":304},[52,7215,2515],{"class":65},[52,7217,2518],{"class":65},[52,7219,7220],{"class":54,"line":309},[52,7221,2523],{"class":127},[52,7223,7224],{"class":54,"line":325},[52,7225,2528],{"class":127},[52,7227,7228],{"class":54,"line":336},[52,7229,2533],{"class":127},[52,7231,7232],{"class":54,"line":342},[52,7233,2538],{"class":127},[52,7235,7236,7238,7240,7242,7244,7246,7248,7250,7252],{"class":54,"line":348},[52,7237,2543],{"class":127},[52,7239,366],{"class":65},[52,7241,2548],{"class":98},[52,7243,34],{"class":65},[52,7245,378],{"class":98},[52,7247,34],{"class":65},[52,7249,2557],{"class":98},[52,7251,386],{"class":65},[52,7253,224],{"class":127},[52,7255,7256],{"class":54,"line":354},[52,7257,2566],{"class":127},[52,7259,7260,7262],{"class":54,"line":360},[52,7261,2571],{"class":65},[52,7263,960],{"class":65},[52,7265,7266,7268,7270],{"class":54,"line":391},[52,7267,2578],{"class":65},[52,7269,2306],{"class":795},[52,7271,73],{"class":65},[52,7273,7274],{"class":54,"line":397},[52,7275,2587],{"class":65},[52,7277,7278,7280],{"class":54,"line":405},[52,7279,2592],{"class":69},[52,7281,1132],{"class":65},[52,7283,7284],{"class":54,"line":410},[52,7285,960],{"class":65},[36,7287,7289],{"id":7288},"шаг-2-создание-кнопки-виджета","Шаг 2 — Создание кнопки виджета",[43,7291,7293],{"className":2324,"code":7292,"language":2326,"meta":48,"style":48},"'use client';\n\ninterface TryonItem {\n productName: string;\n url: string;\n}\n\ndeclare global {\n interface Window {\n fitting: (command: string, options?: unknown) => void;\n }\n}\n\nexport function TryOnButton({ items }: { items: TryonItem[] }) {\n const handleClick = () => {\n window.fitting('create', {\n targetElementId: 'widget-container',\n model: 'balanced',\n tryonItems: items,\n });\n };\n\n return (\n \u003C>\n \u003Cdiv id=\"widget-container\" style={{ width: '100%', maxWidth: 600, aspectRatio: '3\u002F4' }} \u002F>\n \u003Cbutton onClick={handleClick}>Примерка\u003C\u002Fbutton>\n \u003C\u002F>\n );\n}\n",[27,7294,7295,7305,7309,7317,7327,7337,7341,7345,7353,7361,7391,7395,7399,7403,7431,7445,7465,7479,7493,7503,7511,7515,7519,7525,7529,7581,7604,7608,7614],{"__ignoreMap":48},[52,7296,7297,7299,7301,7303],{"class":54,"line":55},[52,7298,275],{"class":65},[52,7300,2614],{"class":127},[52,7302,275],{"class":65},[52,7304,1132],{"class":65},[52,7306,7307],{"class":54,"line":62},[52,7308,171],{"emptyLinePlaceholder":170},[52,7310,7311,7313,7315],{"class":54,"line":76},[52,7312,2627],{"class":117},[52,7314,2630],{"class":795},[52,7316,469],{"class":65},[52,7318,7319,7321,7323,7325],{"class":54,"line":87},[52,7320,790],{"class":69},[52,7322,250],{"class":65},[52,7324,2641],{"class":795},[52,7326,1132],{"class":65},[52,7328,7329,7331,7333,7335],{"class":54,"line":109},[52,7330,2648],{"class":69},[52,7332,250],{"class":65},[52,7334,2641],{"class":795},[52,7336,1132],{"class":65},[52,7338,7339],{"class":54,"line":148},[52,7340,960],{"class":65},[52,7342,7343],{"class":54,"line":158},[52,7344,171],{"emptyLinePlaceholder":170},[52,7346,7347,7349,7351],{"class":54,"line":167},[52,7348,2667],{"class":117},[52,7350,2670],{"class":98},[52,7352,241],{"class":65},[52,7354,7355,7357,7359],{"class":54,"line":174},[52,7356,2677],{"class":117},[52,7358,2680],{"class":795},[52,7360,469],{"class":65},[52,7362,7363,7365,7367,7369,7371,7373,7375,7377,7379,7381,7383,7385,7387,7389],{"class":54,"line":199},[52,7364,2687],{"class":69},[52,7366,250],{"class":65},[52,7368,2692],{"class":65},[52,7370,2695],{"class":2368},[52,7372,250],{"class":65},[52,7374,2641],{"class":795},[52,7376,856],{"class":65},[52,7378,2704],{"class":2368},[52,7380,2707],{"class":65},[52,7382,2710],{"class":795},[52,7384,1129],{"class":65},[52,7386,832],{"class":117},[52,7388,2717],{"class":795},[52,7390,1132],{"class":65},[52,7392,7393],{"class":54,"line":227},[52,7394,2724],{"class":65},[52,7396,7397],{"class":54,"line":232},[52,7398,960],{"class":65},[52,7400,7401],{"class":54,"line":244},[52,7402,171],{"emptyLinePlaceholder":170},[52,7404,7405,7407,7409,7411,7413,7415,7417,7419,7421,7423,7425,7427,7429],{"class":54,"line":256},[52,7406,449],{"class":202},[52,7408,1870],{"class":117},[52,7410,2741],{"class":235},[52,7412,2365],{"class":65},[52,7414,2746],{"class":2368},[52,7416,2372],{"class":65},[52,7418,206],{"class":65},[52,7420,2746],{"class":69},[52,7422,250],{"class":65},[52,7424,2630],{"class":795},[52,7426,2759],{"class":98},[52,7428,2762],{"class":65},[52,7430,469],{"class":65},[52,7432,7433,7435,7437,7439,7441,7443],{"class":54,"line":262},[52,7434,2769],{"class":117},[52,7436,2772],{"class":98},[52,7438,1894],{"class":65},[52,7440,829],{"class":65},[52,7442,832],{"class":117},[52,7444,469],{"class":65},[52,7446,7447,7449,7451,7453,7455,7457,7459,7461,7463],{"class":54,"line":281},[52,7448,2785],{"class":98},[52,7450,34],{"class":65},[52,7452,844],{"class":235},[52,7454,238],{"class":69},[52,7456,275],{"class":65},[52,7458,851],{"class":127},[52,7460,275],{"class":65},[52,7462,856],{"class":65},[52,7464,469],{"class":65},[52,7466,7467,7469,7471,7473,7475,7477],{"class":54,"line":298},[52,7468,2806],{"class":69},[52,7470,250],{"class":65},[52,7472,218],{"class":65},[52,7474,683],{"class":127},[52,7476,275],{"class":65},[52,7478,278],{"class":65},[52,7480,7481,7483,7485,7487,7489,7491],{"class":54,"line":304},[52,7482,2821],{"class":69},[52,7484,250],{"class":65},[52,7486,218],{"class":65},[52,7488,885],{"class":127},[52,7490,275],{"class":65},[52,7492,278],{"class":65},[52,7494,7495,7497,7499,7501],{"class":54,"line":309},[52,7496,2836],{"class":69},[52,7498,250],{"class":65},[52,7500,2746],{"class":98},[52,7502,278],{"class":65},[52,7504,7505,7507,7509],{"class":54,"line":325},[52,7506,2847],{"class":65},[52,7508,1129],{"class":69},[52,7510,1132],{"class":65},[52,7512,7513],{"class":54,"line":336},[52,7514,1929],{"class":65},[52,7516,7517],{"class":54,"line":342},[52,7518,171],{"emptyLinePlaceholder":170},[52,7520,7521,7523],{"class":54,"line":348},[52,7522,2396],{"class":202},[52,7524,2399],{"class":69},[52,7526,7527],{"class":54,"line":354},[52,7528,2404],{"class":65},[52,7530,7531,7533,7535,7537,7539,7541,7543,7545,7547,7549,7551,7553,7555,7557,7559,7561,7563,7565,7567,7569,7571,7573,7575,7577,7579],{"class":54,"line":360},[52,7532,2423],{"class":65},[52,7534,82],{"class":69},[52,7536,676],{"class":117},[52,7538,121],{"class":65},[52,7540,124],{"class":65},[52,7542,683],{"class":127},[52,7544,124],{"class":65},[52,7546,2888],{"class":117},[52,7548,2891],{"class":65},[52,7550,2894],{"class":69},[52,7552,250],{"class":65},[52,7554,218],{"class":65},[52,7556,2901],{"class":127},[52,7558,275],{"class":65},[52,7560,856],{"class":65},[52,7562,2908],{"class":69},[52,7564,250],{"class":65},[52,7566,2914],{"class":2913},[52,7568,856],{"class":65},[52,7570,2919],{"class":69},[52,7572,250],{"class":65},[52,7574,218],{"class":65},[52,7576,2926],{"class":127},[52,7578,275],{"class":65},[52,7580,2931],{"class":65},[52,7582,7583,7585,7587,7589,7591,7593,7595,7598,7600,7602],{"class":54,"line":391},[52,7584,2423],{"class":65},[52,7586,706],{"class":69},[52,7588,2940],{"class":117},[52,7590,2943],{"class":65},[52,7592,2946],{"class":98},[52,7594,810],{"class":65},[52,7596,7597],{"class":98},"Примерка",[52,7599,102],{"class":65},[52,7601,706],{"class":69},[52,7603,73],{"class":65},[52,7605,7606],{"class":54,"line":397},[52,7607,2587],{"class":65},[52,7609,7610,7612],{"class":54,"line":405},[52,7611,2592],{"class":69},[52,7613,1132],{"class":65},[52,7615,7616],{"class":54,"line":410},[52,7617,960],{"class":65},[36,7619,7621],{"id":7620},"шаг-3-использование-на-странице-товара","Шаг 3 — Использование на странице товара",[43,7623,7624],{"className":2324,"code":2977,"language":2326,"meta":48,"style":48},[27,7625,7626,7646,7650,7688,7712,7716,7722,7730,7750,7780,7786,7794,7798,7812,7826,7830,7836,7840,7848,7854],{"__ignoreMap":48},[52,7627,7628,7630,7632,7634,7636,7638,7640,7642,7644],{"class":54,"line":55},[52,7629,203],{"class":202},[52,7631,206],{"class":65},[52,7633,2741],{"class":98},[52,7635,212],{"class":65},[52,7637,215],{"class":202},[52,7639,218],{"class":65},[52,7641,2996],{"class":127},[52,7643,275],{"class":65},[52,7645,1132],{"class":65},[52,7647,7648],{"class":54,"line":62},[52,7649,171],{"emptyLinePlaceholder":170},[52,7651,7652,7654,7656,7658,7660,7662,7664,7666,7668,7670,7672,7674,7676,7678,7680,7682,7684,7686],{"class":54,"line":76},[52,7653,449],{"class":202},[52,7655,452],{"class":202},[52,7657,3013],{"class":117},[52,7659,1870],{"class":117},[52,7661,3018],{"class":235},[52,7663,2365],{"class":65},[52,7665,3023],{"class":2368},[52,7667,2372],{"class":65},[52,7669,206],{"class":65},[52,7671,3023],{"class":69},[52,7673,250],{"class":65},[52,7675,206],{"class":65},[52,7677,3036],{"class":69},[52,7679,250],{"class":65},[52,7681,2641],{"class":795},[52,7683,212],{"class":65},[52,7685,2389],{"class":65},[52,7687,469],{"class":65},[52,7689,7690,7692,7694,7696,7698,7700,7702,7704,7706,7708,7710],{"class":54,"line":87},[52,7691,2769],{"class":117},[52,7693,3053],{"class":98},[52,7695,1894],{"class":65},[52,7697,3058],{"class":202},[52,7699,3061],{"class":235},[52,7701,238],{"class":69},[52,7703,3066],{"class":98},[52,7705,34],{"class":65},[52,7707,3071],{"class":98},[52,7709,1129],{"class":69},[52,7711,1132],{"class":65},[52,7713,7714],{"class":54,"line":109},[52,7715,171],{"emptyLinePlaceholder":170},[52,7717,7718,7720],{"class":54,"line":148},[52,7719,2396],{"class":202},[52,7721,2399],{"class":69},[52,7723,7724,7726,7728],{"class":54,"line":158},[52,7725,90],{"class":65},[52,7727,82],{"class":69},[52,7729,73],{"class":65},[52,7731,7732,7734,7736,7738,7740,7742,7744,7746,7748],{"class":54,"line":167},[52,7733,2423],{"class":65},[52,7735,10],{"class":69},[52,7737,3102],{"class":65},[52,7739,3105],{"class":98},[52,7741,34],{"class":65},[52,7743,3110],{"class":98},[52,7745,3113],{"class":65},[52,7747,10],{"class":69},[52,7749,73],{"class":65},[52,7751,7752,7754,7756,7758,7760,7762,7764,7766,7768,7770,7772,7774,7776,7778],{"class":54,"line":174},[52,7753,2423],{"class":65},[52,7755,3124],{"class":69},[52,7757,3127],{"class":117},[52,7759,2943],{"class":65},[52,7761,3105],{"class":98},[52,7763,34],{"class":65},[52,7765,3136],{"class":98},[52,7767,3139],{"class":65},[52,7769,3142],{"class":117},[52,7771,2943],{"class":65},[52,7773,3105],{"class":98},[52,7775,34],{"class":65},[52,7777,3110],{"class":98},[52,7779,3153],{"class":65},[52,7781,7782,7784],{"class":54,"line":199},[52,7783,2423],{"class":65},[52,7785,3160],{"class":795},[52,7787,7788,7790,7792],{"class":54,"line":227},[52,7789,3165],{"class":117},[52,7791,2943],{"class":65},[52,7793,3170],{"class":98},[52,7795,7796],{"class":54,"line":232},[52,7797,3175],{"class":65},[52,7799,7800,7802,7804,7806,7808,7810],{"class":54,"line":244},[52,7801,3180],{"class":69},[52,7803,250],{"class":65},[52,7805,3053],{"class":98},[52,7807,34],{"class":65},[52,7809,3110],{"class":98},[52,7811,278],{"class":65},[52,7813,7814,7816,7818,7820,7822,7824],{"class":54,"line":256},[52,7815,3195],{"class":69},[52,7817,250],{"class":65},[52,7819,3053],{"class":98},[52,7821,34],{"class":65},[52,7823,3136],{"class":98},[52,7825,278],{"class":65},[52,7827,7828],{"class":54,"line":262},[52,7829,3210],{"class":65},[52,7831,7832,7834],{"class":54,"line":281},[52,7833,3215],{"class":98},[52,7835,960],{"class":65},[52,7837,7838],{"class":54,"line":298},[52,7839,2471],{"class":65},[52,7841,7842,7844,7846],{"class":54,"line":304},[52,7843,3226],{"class":65},[52,7845,82],{"class":69},[52,7847,73],{"class":65},[52,7849,7850,7852],{"class":54,"line":309},[52,7851,2592],{"class":69},[52,7853,1132],{"class":65},[52,7855,7856],{"class":54,"line":325},[52,7857,960],{"class":65},[19,7859,7861],{"id":7860},"переменная-окружения","Переменная окружения",[15,7863,7864,7865,250],{},"Добавьте ваш API-ключ в ",[27,7866,3248],{},[43,7868,7869],{"className":981,"code":3251,"language":983,"meta":48,"style":48},[27,7870,7871],{"__ignoreMap":48},[52,7872,7873,7875,7877],{"class":54,"line":55},[52,7874,2557],{"class":98},[52,7876,121],{"class":65},[52,7878,994],{"class":127},[996,7880,3264],{},{"title":48,"searchDepth":62,"depth":62,"links":7882},[7883,7889],{"id":7031,"depth":62,"text":7032,"children":7884},[7885,7887,7888],{"id":7043,"depth":76,"text":7886},"Шаг 1 — Загрузка скриптов в layout.tsx или page.tsx",{"id":7288,"depth":76,"text":7289},{"id":7620,"depth":76,"text":7621},{"id":7860,"depth":62,"text":7861},"Интеграция с Next.js (Pages Router и App Router)",{},"\u002Fintegrations\u002Fnextjs",{"title":2280,"description":7890},"integrations\u002Fnextjs","KS6JTPT1XrolEU5h4YdImeGYebYne3YB0eM4G4u-UlY",{"id":7897,"title":5,"body":7898,"description":8711,"extension":1010,"icon":1011,"meta":8712,"navigation":170,"path":8713,"seo":8714,"stem":8715,"__hash__":8716},"content\u002Fintegrations\u002Fnuxt.md",{"type":7,"value":7899,"toc":8701},[7900,7904,7907,7911,7919,7925,8207,8213,8389,8393,8680,8682,8687,8699],[10,7901,7903],{"id":7902},"интеграция-с-nuxt","Интеграция с Nuxt",[15,7905,7906],{},"Fitting Widget легко интегрируется с Nuxt 3 и Nuxt 4.",[19,7908,7910],{"id":7909},"_1-загрузка-скрипта","1. Загрузка скрипта",[15,7912,7913,7914,7916,7917,34],{},"Используйте composable ",[27,7915,29],{}," или добавьте скрипты в ",[27,7918,33],{},[36,7920,7922,7923],{"id":7921},"вариант-а-на-страницу-через-usehead","Вариант А — На страницу через ",[27,7924,29],{},[43,7926,7927],{"className":45,"code":46,"language":47,"meta":48,"style":48},[27,7928,7929,7933,7941,7949,7965,7993,8001,8009,8013,8033,8051,8055,8063,8071,8075,8089,8103,8107,8111,8125,8133,8137,8141,8145,8149,8173,8177,8183,8187,8193,8199],{"__ignoreMap":48},[52,7930,7931],{"class":54,"line":55},[52,7932,59],{"class":58},[52,7934,7935,7937,7939],{"class":54,"line":62},[52,7936,66],{"class":65},[52,7938,70],{"class":69},[52,7940,73],{"class":65},[52,7942,7943,7945,7947],{"class":54,"line":76},[52,7944,79],{"class":65},[52,7946,82],{"class":69},[52,7948,73],{"class":65},[52,7950,7951,7953,7955,7957,7959,7961,7963],{"class":54,"line":87},[52,7952,90],{"class":65},[52,7954,10],{"class":69},[52,7956,95],{"class":65},[52,7958,99],{"class":98},[52,7960,102],{"class":65},[52,7962,10],{"class":69},[52,7964,73],{"class":65},[52,7966,7967,7969,7971,7973,7975,7977,7979,7981,7983,7985,7987,7989,7991],{"class":54,"line":109},[52,7968,90],{"class":65},[52,7970,114],{"class":69},[52,7972,118],{"class":117},[52,7974,121],{"class":65},[52,7976,124],{"class":65},[52,7978,128],{"class":127},[52,7980,124],{"class":65},[52,7982,133],{"class":117},[52,7984,121],{"class":65},[52,7986,124],{"class":65},[52,7988,140],{"class":127},[52,7990,124],{"class":65},[52,7992,145],{"class":65},[52,7994,7995,7997,7999],{"class":54,"line":148},[52,7996,151],{"class":65},[52,7998,82],{"class":69},[52,8000,73],{"class":65},[52,8002,8003,8005,8007],{"class":54,"line":158},[52,8004,102],{"class":65},[52,8006,70],{"class":69},[52,8008,73],{"class":65},[52,8010,8011],{"class":54,"line":167},[52,8012,171],{"emptyLinePlaceholder":170},[52,8014,8015,8017,8019,8021,8023,8025,8027,8029,8031],{"class":54,"line":174},[52,8016,66],{"class":65},[52,8018,179],{"class":69},[52,8020,182],{"class":117},[52,8022,185],{"class":117},[52,8024,121],{"class":65},[52,8026,124],{"class":65},[52,8028,192],{"class":127},[52,8030,124],{"class":65},[52,8032,73],{"class":65},[52,8034,8035,8037,8039,8041,8043,8045,8047,8049],{"class":54,"line":199},[52,8036,203],{"class":202},[52,8038,206],{"class":65},[52,8040,209],{"class":98},[52,8042,212],{"class":65},[52,8044,215],{"class":202},[52,8046,218],{"class":65},[52,8048,221],{"class":127},[52,8050,224],{"class":65},[52,8052,8053],{"class":54,"line":227},[52,8054,171],{"emptyLinePlaceholder":170},[52,8056,8057,8059,8061],{"class":54,"line":232},[52,8058,29],{"class":235},[52,8060,238],{"class":98},[52,8062,241],{"class":65},[52,8064,8065,8067,8069],{"class":54,"line":244},[52,8066,247],{"class":69},[52,8068,250],{"class":65},[52,8070,253],{"class":98},[52,8072,8073],{"class":54,"line":256},[52,8074,259],{"class":65},[52,8076,8077,8079,8081,8083,8085,8087],{"class":54,"line":262},[52,8078,265],{"class":69},[52,8080,250],{"class":65},[52,8082,218],{"class":65},[52,8084,272],{"class":127},[52,8086,275],{"class":65},[52,8088,278],{"class":65},[52,8090,8091,8093,8095,8097,8099,8101],{"class":54,"line":281},[52,8092,284],{"class":69},[52,8094,250],{"class":65},[52,8096,218],{"class":65},[52,8098,291],{"class":127},[52,8100,275],{"class":65},[52,8102,278],{"class":65},[52,8104,8105],{"class":54,"line":298},[52,8106,301],{"class":65},[52,8108,8109],{"class":54,"line":304},[52,8110,259],{"class":65},[52,8112,8113,8115,8117,8119,8121,8123],{"class":54,"line":309},[52,8114,284],{"class":69},[52,8116,250],{"class":65},[52,8118,218],{"class":65},[52,8120,318],{"class":127},[52,8122,275],{"class":65},[52,8124,278],{"class":65},[52,8126,8127,8129,8131],{"class":54,"line":325},[52,8128,328],{"class":69},[52,8130,250],{"class":65},[52,8132,333],{"class":65},[52,8134,8135],{"class":54,"line":336},[52,8136,339],{"class":127},[52,8138,8139],{"class":54,"line":342},[52,8140,345],{"class":127},[52,8142,8143],{"class":54,"line":348},[52,8144,351],{"class":127},[52,8146,8147],{"class":54,"line":354},[52,8148,357],{"class":127},[52,8150,8151,8153,8155,8157,8159,8161,8163,8165,8167,8169,8171],{"class":54,"line":360},[52,8152,363],{"class":127},[52,8154,366],{"class":65},[52,8156,203],{"class":202},[52,8158,34],{"class":65},[52,8160,373],{"class":98},[52,8162,34],{"class":65},[52,8164,378],{"class":98},[52,8166,34],{"class":65},[52,8168,383],{"class":98},[52,8170,386],{"class":65},[52,8172,224],{"class":127},[52,8174,8175],{"class":54,"line":391},[52,8176,394],{"class":127},[52,8178,8179,8181],{"class":54,"line":397},[52,8180,400],{"class":65},[52,8182,278],{"class":65},[52,8184,8185],{"class":54,"line":405},[52,8186,301],{"class":65},[52,8188,8189,8191],{"class":54,"line":410},[52,8190,413],{"class":98},[52,8192,278],{"class":65},[52,8194,8195,8197],{"class":54,"line":418},[52,8196,386],{"class":65},[52,8198,423],{"class":98},[52,8200,8201,8203,8205],{"class":54,"line":426},[52,8202,102],{"class":65},[52,8204,179],{"class":69},[52,8206,73],{"class":65},[36,8208,8210,8211],{"id":8209},"вариант-б-глобально-в-nuxtconfigts","Вариант Б — Глобально в ",[27,8212,33],{},[43,8214,8215],{"className":441,"code":442,"language":192,"meta":48,"style":48},[27,8216,8217,8229,8237,8245,8253,8257,8271,8285,8289,8293,8307,8315,8319,8323,8327,8331,8355,8359,8365,8369,8375,8379,8383],{"__ignoreMap":48},[52,8218,8219,8221,8223,8225,8227],{"class":54,"line":55},[52,8220,449],{"class":202},[52,8222,452],{"class":202},[52,8224,455],{"class":235},[52,8226,238],{"class":98},[52,8228,241],{"class":65},[52,8230,8231,8233,8235],{"class":54,"line":62},[52,8232,464],{"class":69},[52,8234,250],{"class":65},[52,8236,469],{"class":65},[52,8238,8239,8241,8243],{"class":54,"line":76},[52,8240,474],{"class":69},[52,8242,250],{"class":65},[52,8244,469],{"class":65},[52,8246,8247,8249,8251],{"class":54,"line":87},[52,8248,483],{"class":69},[52,8250,250],{"class":65},[52,8252,253],{"class":98},[52,8254,8255],{"class":54,"line":109},[52,8256,492],{"class":65},[52,8258,8259,8261,8263,8265,8267,8269],{"class":54,"line":148},[52,8260,497],{"class":69},[52,8262,250],{"class":65},[52,8264,218],{"class":65},[52,8266,272],{"class":127},[52,8268,275],{"class":65},[52,8270,278],{"class":65},[52,8272,8273,8275,8277,8279,8281,8283],{"class":54,"line":158},[52,8274,512],{"class":69},[52,8276,250],{"class":65},[52,8278,218],{"class":65},[52,8280,291],{"class":127},[52,8282,275],{"class":65},[52,8284,278],{"class":65},[52,8286,8287],{"class":54,"line":167},[52,8288,527],{"class":65},[52,8290,8291],{"class":54,"line":174},[52,8292,492],{"class":65},[52,8294,8295,8297,8299,8301,8303,8305],{"class":54,"line":199},[52,8296,512],{"class":69},[52,8298,250],{"class":65},[52,8300,218],{"class":65},[52,8302,318],{"class":127},[52,8304,275],{"class":65},[52,8306,278],{"class":65},[52,8308,8309,8311,8313],{"class":54,"line":227},[52,8310,550],{"class":69},[52,8312,250],{"class":65},[52,8314,333],{"class":65},[52,8316,8317],{"class":54,"line":232},[52,8318,559],{"class":127},[52,8320,8321],{"class":54,"line":244},[52,8322,564],{"class":127},[52,8324,8325],{"class":54,"line":256},[52,8326,569],{"class":127},[52,8328,8329],{"class":54,"line":262},[52,8330,574],{"class":127},[52,8332,8333,8335,8337,8339,8341,8343,8345,8347,8349,8351,8353],{"class":54,"line":281},[52,8334,579],{"class":127},[52,8336,366],{"class":65},[52,8338,203],{"class":202},[52,8340,34],{"class":65},[52,8342,373],{"class":98},[52,8344,34],{"class":65},[52,8346,378],{"class":98},[52,8348,34],{"class":65},[52,8350,383],{"class":98},[52,8352,386],{"class":65},[52,8354,224],{"class":127},[52,8356,8357],{"class":54,"line":298},[52,8358,604],{"class":127},[52,8360,8361,8363],{"class":54,"line":304},[52,8362,609],{"class":65},[52,8364,278],{"class":65},[52,8366,8367],{"class":54,"line":309},[52,8368,527],{"class":65},[52,8370,8371,8373],{"class":54,"line":325},[52,8372,620],{"class":98},[52,8374,278],{"class":65},[52,8376,8377],{"class":54,"line":336},[52,8378,301],{"class":65},[52,8380,8381],{"class":54,"line":342},[52,8382,631],{"class":65},[52,8384,8385,8387],{"class":54,"line":348},[52,8386,386],{"class":65},[52,8388,423],{"class":98},[19,8390,8392],{"id":8391},"_2-создание-компонента-обёртки","2. Создание компонента-обёртки",[43,8394,8396],{"className":45,"code":8395,"language":47,"meta":48,"style":48},"\u003C!-- components\u002FTryOnWidget.vue -->\n\u003Ctemplate>\n \u003Cdiv>\n \u003Cdiv id=\"widget-container\" class=\"aspect-[3\u002F4] w-full max-w-[600px]\" \u002F>\n \u003Cbutton @click=\"handleTryOn\">Примерка\u003C\u002Fbutton>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nconst props = defineProps\u003C{\n productName: string\n imageUrl: string\n}>()\n\nconst handleTryOn = () => {\n window.fitting('create', {\n targetElementId: 'widget-container',\n model: 'balanced',\n tryonItems: [\n {\n productName: props.productName,\n url: props.imageUrl,\n },\n ],\n })\n}\n\u003C\u002Fscript>\n",[27,8397,8398,8402,8410,8418,8446,8472,8480,8488,8492,8512,8524,8532,8540,8546,8550,8564,8584,8598,8612,8620,8624,8638,8652,8656,8662,8668,8672],{"__ignoreMap":48},[52,8399,8400],{"class":54,"line":55},[52,8401,651],{"class":58},[52,8403,8404,8406,8408],{"class":54,"line":62},[52,8405,66],{"class":65},[52,8407,70],{"class":69},[52,8409,73],{"class":65},[52,8411,8412,8414,8416],{"class":54,"line":76},[52,8413,79],{"class":65},[52,8415,82],{"class":69},[52,8417,73],{"class":65},[52,8419,8420,8422,8424,8426,8428,8430,8432,8434,8436,8438,8440,8442,8444],{"class":54,"line":87},[52,8421,90],{"class":65},[52,8423,82],{"class":69},[52,8425,676],{"class":117},[52,8427,121],{"class":65},[52,8429,124],{"class":65},[52,8431,683],{"class":127},[52,8433,124],{"class":65},[52,8435,688],{"class":117},[52,8437,121],{"class":65},[52,8439,124],{"class":65},[52,8441,695],{"class":127},[52,8443,124],{"class":65},[52,8445,145],{"class":65},[52,8447,8448,8450,8452,8454,8456,8458,8460,8462,8464,8466,8468,8470],{"class":54,"line":109},[52,8449,90],{"class":65},[52,8451,706],{"class":69},[52,8453,709],{"class":117},[52,8455,121],{"class":65},[52,8457,124],{"class":65},[52,8459,716],{"class":127},[52,8461,124],{"class":65},[52,8463,95],{"class":65},[52,8465,7597],{"class":98},[52,8467,102],{"class":65},[52,8469,706],{"class":69},[52,8471,73],{"class":65},[52,8473,8474,8476,8478],{"class":54,"line":148},[52,8475,151],{"class":65},[52,8477,82],{"class":69},[52,8479,73],{"class":65},[52,8481,8482,8484,8486],{"class":54,"line":158},[52,8483,102],{"class":65},[52,8485,70],{"class":69},[52,8487,73],{"class":65},[52,8489,8490],{"class":54,"line":167},[52,8491,171],{"emptyLinePlaceholder":170},[52,8493,8494,8496,8498,8500,8502,8504,8506,8508,8510],{"class":54,"line":174},[52,8495,66],{"class":65},[52,8497,179],{"class":69},[52,8499,182],{"class":117},[52,8501,185],{"class":117},[52,8503,121],{"class":65},[52,8505,124],{"class":65},[52,8507,192],{"class":127},[52,8509,124],{"class":65},[52,8511,73],{"class":65},[52,8513,8514,8516,8518,8520,8522],{"class":54,"line":199},[52,8515,774],{"class":117},[52,8517,777],{"class":98},[52,8519,121],{"class":65},[52,8521,782],{"class":235},[52,8523,785],{"class":65},[52,8525,8526,8528,8530],{"class":54,"line":227},[52,8527,790],{"class":69},[52,8529,250],{"class":65},[52,8531,796],{"class":795},[52,8533,8534,8536,8538],{"class":54,"line":232},[52,8535,801],{"class":69},[52,8537,250],{"class":65},[52,8539,796],{"class":795},[52,8541,8542,8544],{"class":54,"line":244},[52,8543,810],{"class":65},[52,8545,813],{"class":98},[52,8547,8548],{"class":54,"line":256},[52,8549,171],{"emptyLinePlaceholder":170},[52,8551,8552,8554,8556,8558,8560,8562],{"class":54,"line":262},[52,8553,774],{"class":117},[52,8555,824],{"class":98},[52,8557,121],{"class":65},[52,8559,829],{"class":65},[52,8561,832],{"class":117},[52,8563,469],{"class":65},[52,8565,8566,8568,8570,8572,8574,8576,8578,8580,8582],{"class":54,"line":281},[52,8567,839],{"class":98},[52,8569,34],{"class":65},[52,8571,844],{"class":235},[52,8573,238],{"class":69},[52,8575,275],{"class":65},[52,8577,851],{"class":127},[52,8579,275],{"class":65},[52,8581,856],{"class":65},[52,8583,469],{"class":65},[52,8585,8586,8588,8590,8592,8594,8596],{"class":54,"line":298},[52,8587,863],{"class":69},[52,8589,250],{"class":65},[52,8591,218],{"class":65},[52,8593,683],{"class":127},[52,8595,275],{"class":65},[52,8597,278],{"class":65},[52,8599,8600,8602,8604,8606,8608,8610],{"class":54,"line":304},[52,8601,878],{"class":69},[52,8603,250],{"class":65},[52,8605,218],{"class":65},[52,8607,885],{"class":127},[52,8609,275],{"class":65},[52,8611,278],{"class":65},[52,8613,8614,8616,8618],{"class":54,"line":309},[52,8615,894],{"class":69},[52,8617,250],{"class":65},[52,8619,253],{"class":69},[52,8621,8622],{"class":54,"line":325},[52,8623,903],{"class":65},[52,8625,8626,8628,8630,8632,8634,8636],{"class":54,"line":336},[52,8627,908],{"class":69},[52,8629,250],{"class":65},[52,8631,913],{"class":98},[52,8633,34],{"class":65},[52,8635,918],{"class":98},[52,8637,278],{"class":65},[52,8639,8640,8642,8644,8646,8648,8650],{"class":54,"line":342},[52,8641,925],{"class":69},[52,8643,250],{"class":65},[52,8645,913],{"class":98},[52,8647,34],{"class":65},[52,8649,934],{"class":98},[52,8651,278],{"class":65},[52,8653,8654],{"class":54,"line":348},[52,8655,941],{"class":65},[52,8657,8658,8660],{"class":54,"line":354},[52,8659,946],{"class":69},[52,8661,278],{"class":65},[52,8663,8664,8666],{"class":54,"line":360},[52,8665,953],{"class":65},[52,8667,423],{"class":69},[52,8669,8670],{"class":54,"line":391},[52,8671,960],{"class":65},[52,8673,8674,8676,8678],{"class":54,"line":397},[52,8675,102],{"class":65},[52,8677,179],{"class":69},[52,8679,73],{"class":65},[19,8681,7861],{"id":7860},[15,8683,8684,8685,250],{},"Добавьте в ",[27,8686,978],{},[43,8688,8689],{"className":981,"code":982,"language":983,"meta":48,"style":48},[27,8690,8691],{"__ignoreMap":48},[52,8692,8693,8695,8697],{"class":54,"line":55},[52,8694,383],{"class":98},[52,8696,121],{"class":65},[52,8698,994],{"class":127},[996,8700,998],{},{"title":48,"searchDepth":62,"depth":62,"links":8702},[8703,8709,8710],{"id":7909,"depth":62,"text":7910,"children":8704},[8705,8707],{"id":7921,"depth":76,"text":8706},"Вариант А — На страницу через useHead",{"id":8209,"depth":76,"text":8708},"Вариант Б — Глобально в nuxt.config.ts",{"id":8391,"depth":62,"text":8392},{"id":7860,"depth":62,"text":7861},"Интеграция с Nuxt 3 \u002F Nuxt 4 приложением",{},"\u002Fintegrations\u002Fnuxt",{"title":5,"description":8711},"integrations\u002Fnuxt","mSERafXf_JPUG4rn6ZlSU_qJnLNa0suHinF4LwLrASI",{"id":8718,"title":4082,"body":8719,"description":9560,"extension":1010,"icon":4968,"meta":9561,"navigation":170,"path":9562,"seo":9563,"stem":9564,"__hash__":9565},"content\u002Fintegrations\u002Freact.md",{"type":7,"value":8720,"toc":9555},[8721,8725,8728,8732,8737,8921,8929,8933,9239,9243,9553],[10,8722,8724],{"id":8723},"интеграция-с-react","Интеграция с React",[15,8726,8727],{},"Работает с любым React-окружением — Vite, Create React App или своим решением.",[19,8729,8731],{"id":8730},"_1-загрузка-скрипта-виджета","1. Загрузка скрипта виджета",[15,8733,8734,8735,250],{},"Добавьте скрипт в ваш ",[27,8736,4101],{},[43,8738,8740],{"className":1772,"code":8739,"language":1774,"meta":48,"style":48},"\u003C!-- В public\u002Findex.html или index.html (Vite) -->\n\u003Cscript\n src=\"https:\u002F\u002Fwidget.try-on.ru\u002Ffitting-widget-bundle.js\"\n id=\"fitting-widget-bundle\"\n>\u003C\u002Fscript>\n\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: '%VITE_TRY_ON_API_KEY%'\n });\n\u003C\u002Fscript>\n",[27,8741,8742,8747,8753,8765,8777,8785,8803,8827,8869,8873,8893,8905,8913],{"__ignoreMap":48},[52,8743,8744],{"class":54,"line":55},[52,8745,8746],{"class":58},"\u003C!-- В public\u002Findex.html или index.html (Vite) -->\n",[52,8748,8749,8751],{"class":54,"line":62},[52,8750,66],{"class":65},[52,8752,1783],{"class":69},[52,8754,8755,8757,8759,8761,8763],{"class":54,"line":76},[52,8756,1788],{"class":117},[52,8758,121],{"class":65},[52,8760,124],{"class":65},[52,8762,272],{"class":127},[52,8764,1797],{"class":65},[52,8766,8767,8769,8771,8773,8775],{"class":54,"line":87},[52,8768,1802],{"class":117},[52,8770,121],{"class":65},[52,8772,124],{"class":65},[52,8774,291],{"class":127},[52,8776,1797],{"class":65},[52,8778,8779,8781,8783],{"class":54,"line":109},[52,8780,1815],{"class":65},[52,8782,179],{"class":69},[52,8784,73],{"class":65},[52,8786,8787,8789,8791,8793,8795,8797,8799,8801],{"class":54,"line":148},[52,8788,66],{"class":65},[52,8790,179],{"class":69},[52,8792,676],{"class":117},[52,8794,121],{"class":65},[52,8796,124],{"class":65},[52,8798,318],{"class":127},[52,8800,124],{"class":65},[52,8802,73],{"class":65},[52,8804,8805,8807,8809,8811,8813,8815,8817,8819,8821,8823,8825],{"class":54,"line":158},[52,8806,839],{"class":98},[52,8808,34],{"class":65},[52,8810,1855],{"class":98},[52,8812,121],{"class":65},[52,8814,1860],{"class":98},[52,8816,34],{"class":65},[52,8818,1855],{"class":98},[52,8820,1867],{"class":65},[52,8822,1870],{"class":117},[52,8824,1873],{"class":65},[52,8826,469],{"class":65},[52,8828,8829,8831,8833,8835,8837,8839,8841,8843,8845,8847,8849,8851,8853,8855,8857,8859,8861,8863,8865,8867],{"class":54,"line":167},[52,8830,1880],{"class":69},[52,8832,1089],{"class":98},[52,8834,34],{"class":65},[52,8836,844],{"class":98},[52,8838,34],{"class":65},[52,8840,1891],{"class":98},[52,8842,1894],{"class":65},[52,8844,1860],{"class":98},[52,8846,34],{"class":65},[52,8848,844],{"class":98},[52,8850,34],{"class":65},[52,8852,1891],{"class":98},[52,8854,1907],{"class":65},[52,8856,1910],{"class":69},[52,8858,34],{"class":65},[52,8860,1915],{"class":235},[52,8862,238],{"class":69},[52,8864,1920],{"class":98},[52,8866,1129],{"class":69},[52,8868,1132],{"class":65},[52,8870,8871],{"class":54,"line":174},[52,8872,1929],{"class":65},[52,8874,8875,8877,8879,8881,8883,8885,8887,8889,8891],{"class":54,"line":199},[52,8876,839],{"class":98},[52,8878,34],{"class":65},[52,8880,844],{"class":235},[52,8882,238],{"class":98},[52,8884,275],{"class":65},[52,8886,1100],{"class":127},[52,8888,275],{"class":65},[52,8890,856],{"class":65},[52,8892,469],{"class":65},[52,8894,8895,8897,8899,8901,8903],{"class":54,"line":227},[52,8896,1954],{"class":69},[52,8898,250],{"class":65},[52,8900,218],{"class":65},[52,8902,4268],{"class":127},[52,8904,224],{"class":65},[52,8906,8907,8909,8911],{"class":54,"line":232},[52,8908,953],{"class":65},[52,8910,1129],{"class":98},[52,8912,1132],{"class":65},[52,8914,8915,8917,8919],{"class":54,"line":244},[52,8916,102],{"class":65},[52,8918,179],{"class":69},[52,8920,73],{"class":65},[4288,8922,8923],{"icon":4290},[15,8924,8925,8926,8928],{},"Замените ",[27,8927,4268],{}," на ваш реальный ключ во время сборки, или используйте инъекцию во время выполнения.",[19,8930,8932],{"id":8931},"_2-создайте-свой-хук","2. Создайте свой хук",[43,8934,8935],{"className":2324,"code":4303,"language":2326,"meta":48,"style":48},[27,8936,8937,8941,8949,8959,8969,8979,8983,8987,8995,9005,9035,9047,9051,9055,9063,9071,9101,9105,9109,9113,9125,9147,9171,9175,9179,9193,9213,9217,9221,9235],{"__ignoreMap":48},[52,8938,8939],{"class":54,"line":55},[52,8940,4310],{"class":58},[52,8942,8943,8945,8947],{"class":54,"line":62},[52,8944,2627],{"class":117},[52,8946,2630],{"class":795},[52,8948,469],{"class":65},[52,8950,8951,8953,8955,8957],{"class":54,"line":76},[52,8952,790],{"class":69},[52,8954,250],{"class":65},[52,8956,2641],{"class":795},[52,8958,1132],{"class":65},[52,8960,8961,8963,8965,8967],{"class":54,"line":87},[52,8962,2648],{"class":69},[52,8964,250],{"class":65},[52,8966,2641],{"class":795},[52,8968,1132],{"class":65},[52,8970,8971,8973,8975,8977],{"class":54,"line":109},[52,8972,4343],{"class":69},[52,8974,2707],{"class":65},[52,8976,2641],{"class":795},[52,8978,1132],{"class":65},[52,8980,8981],{"class":54,"line":148},[52,8982,960],{"class":65},[52,8984,8985],{"class":54,"line":158},[52,8986,171],{"emptyLinePlaceholder":170},[52,8988,8989,8991,8993],{"class":54,"line":167},[52,8990,2627],{"class":117},[52,8992,4364],{"class":795},[52,8994,469],{"class":65},[52,8996,8997,8999,9001,9003],{"class":54,"line":174},[52,8998,1288],{"class":69},[52,9000,250],{"class":65},[52,9002,2641],{"class":795},[52,9004,1132],{"class":65},[52,9006,9007,9009,9011,9013,9015,9017,9019,9021,9023,9025,9027,9029,9031,9033],{"class":54,"line":199},[52,9008,1303],{"class":69},[52,9010,2707],{"class":65},[52,9012,218],{"class":65},[52,9014,885],{"class":127},[52,9016,275],{"class":65},[52,9018,4391],{"class":65},[52,9020,218],{"class":65},[52,9022,4396],{"class":127},[52,9024,275],{"class":65},[52,9026,4391],{"class":65},[52,9028,218],{"class":65},[52,9030,4405],{"class":127},[52,9032,275],{"class":65},[52,9034,1132],{"class":65},[52,9036,9037,9039,9041,9043,9045],{"class":54,"line":227},[52,9038,1318],{"class":69},[52,9040,250],{"class":65},[52,9042,2630],{"class":795},[52,9044,4420],{"class":98},[52,9046,1132],{"class":65},[52,9048,9049],{"class":54,"line":232},[52,9050,960],{"class":65},[52,9052,9053],{"class":54,"line":244},[52,9054,171],{"emptyLinePlaceholder":170},[52,9056,9057,9059,9061],{"class":54,"line":256},[52,9058,2667],{"class":117},[52,9060,2670],{"class":98},[52,9062,241],{"class":65},[52,9064,9065,9067,9069],{"class":54,"line":262},[52,9066,2677],{"class":117},[52,9068,2680],{"class":795},[52,9070,469],{"class":65},[52,9072,9073,9075,9077,9079,9081,9083,9085,9087,9089,9091,9093,9095,9097,9099],{"class":54,"line":281},[52,9074,2687],{"class":69},[52,9076,250],{"class":65},[52,9078,2692],{"class":65},[52,9080,2695],{"class":2368},[52,9082,250],{"class":65},[52,9084,2641],{"class":795},[52,9086,856],{"class":65},[52,9088,2704],{"class":2368},[52,9090,2707],{"class":65},[52,9092,2710],{"class":795},[52,9094,1129],{"class":65},[52,9096,832],{"class":117},[52,9098,2717],{"class":795},[52,9100,1132],{"class":65},[52,9102,9103],{"class":54,"line":298},[52,9104,2724],{"class":65},[52,9106,9107],{"class":54,"line":304},[52,9108,960],{"class":65},[52,9110,9111],{"class":54,"line":309},[52,9112,171],{"emptyLinePlaceholder":170},[52,9114,9115,9117,9119,9121,9123],{"class":54,"line":325},[52,9116,449],{"class":202},[52,9118,1870],{"class":117},[52,9120,4497],{"class":235},[52,9122,1873],{"class":65},[52,9124,469],{"class":65},[52,9126,9127,9129,9131,9133,9135,9137,9139,9141,9143,9145],{"class":54,"line":336},[52,9128,2769],{"class":117},[52,9130,4508],{"class":98},[52,9132,1894],{"class":65},[52,9134,2692],{"class":65},[52,9136,4515],{"class":2368},[52,9138,250],{"class":65},[52,9140,4364],{"class":795},[52,9142,1129],{"class":65},[52,9144,832],{"class":117},[52,9146,469],{"class":65},[52,9148,9149,9151,9153,9155,9157,9159,9161,9163,9165,9167,9169],{"class":54,"line":342},[52,9150,2785],{"class":98},[52,9152,34],{"class":65},[52,9154,844],{"class":235},[52,9156,238],{"class":69},[52,9158,275],{"class":65},[52,9160,851],{"class":127},[52,9162,275],{"class":65},[52,9164,856],{"class":65},[52,9166,2704],{"class":98},[52,9168,1129],{"class":69},[52,9170,1132],{"class":65},[52,9172,9173],{"class":54,"line":348},[52,9174,1929],{"class":65},[52,9176,9177],{"class":54,"line":354},[52,9178,171],{"emptyLinePlaceholder":170},[52,9180,9181,9183,9185,9187,9189,9191],{"class":54,"line":360},[52,9182,2769],{"class":117},[52,9184,4564],{"class":98},[52,9186,1894],{"class":65},[52,9188,829],{"class":65},[52,9190,832],{"class":117},[52,9192,469],{"class":65},[52,9194,9195,9197,9199,9201,9203,9205,9207,9209,9211],{"class":54,"line":391},[52,9196,2785],{"class":98},[52,9198,34],{"class":65},[52,9200,844],{"class":235},[52,9202,238],{"class":69},[52,9204,275],{"class":65},[52,9206,4587],{"class":127},[52,9208,275],{"class":65},[52,9210,1129],{"class":69},[52,9212,1132],{"class":65},[52,9214,9215],{"class":54,"line":397},[52,9216,1929],{"class":65},[52,9218,9219],{"class":54,"line":405},[52,9220,171],{"emptyLinePlaceholder":170},[52,9222,9223,9225,9227,9229,9231,9233],{"class":54,"line":410},[52,9224,2396],{"class":202},[52,9226,206],{"class":65},[52,9228,4508],{"class":98},[52,9230,856],{"class":65},[52,9232,4564],{"class":98},[52,9234,4616],{"class":65},[52,9236,9237],{"class":54,"line":418},[52,9238,960],{"class":65},[19,9240,9242],{"id":9241},"_3-использование-в-компоненте","3. Использование в компоненте",[43,9244,9246],{"className":2324,"code":9245,"language":2326,"meta":48,"style":48},"\u002F\u002F components\u002FTryOnWidget.tsx\nimport { useFittingWidget } from '..\u002Fhooks\u002FuseFittingWidget';\n\ninterface Props {\n productName: string;\n imageUrl: string;\n}\n\nexport function TryOnWidget({ productName, imageUrl }: Props) {\n const { open } = useFittingWidget();\n\n return (\n \u003Cdiv>\n \u003Cdiv\n id=\"widget-container\"\n style={{ width: '100%', maxWidth: 600, aspectRatio: '3\u002F4' }}\n \u002F>\n \u003Cbutton\n onClick={() =>\n open({\n targetElementId: 'widget-container',\n model: 'balanced',\n tryonItems: [{ productName, url: imageUrl }],\n })\n }\n >\n Примерка\n \u003C\u002Fbutton>\n \u003C\u002Fdiv>\n );\n}\n",[27,9247,9248,9252,9272,9276,9284,9294,9304,9308,9312,9336,9354,9358,9364,9372,9378,9390,9428,9432,9438,9446,9454,9468,9482,9508,9514,9518,9522,9527,9535,9543,9549],{"__ignoreMap":48},[52,9249,9250],{"class":54,"line":55},[52,9251,4634],{"class":58},[52,9253,9254,9256,9258,9260,9262,9264,9266,9268,9270],{"class":54,"line":62},[52,9255,203],{"class":202},[52,9257,206],{"class":65},[52,9259,4497],{"class":98},[52,9261,212],{"class":65},[52,9263,215],{"class":202},[52,9265,218],{"class":65},[52,9267,4651],{"class":127},[52,9269,275],{"class":65},[52,9271,1132],{"class":65},[52,9273,9274],{"class":54,"line":76},[52,9275,171],{"emptyLinePlaceholder":170},[52,9277,9278,9280,9282],{"class":54,"line":87},[52,9279,2627],{"class":117},[52,9281,4666],{"class":795},[52,9283,469],{"class":65},[52,9285,9286,9288,9290,9292],{"class":54,"line":109},[52,9287,790],{"class":69},[52,9289,250],{"class":65},[52,9291,2641],{"class":795},[52,9293,1132],{"class":65},[52,9295,9296,9298,9300,9302],{"class":54,"line":148},[52,9297,801],{"class":69},[52,9299,250],{"class":65},[52,9301,2641],{"class":795},[52,9303,1132],{"class":65},[52,9305,9306],{"class":54,"line":158},[52,9307,960],{"class":65},[52,9309,9310],{"class":54,"line":167},[52,9311,171],{"emptyLinePlaceholder":170},[52,9313,9314,9316,9318,9320,9322,9324,9326,9328,9330,9332,9334],{"class":54,"line":174},[52,9315,449],{"class":202},[52,9317,1870],{"class":117},[52,9319,4705],{"class":235},[52,9321,2365],{"class":65},[52,9323,4710],{"class":2368},[52,9325,856],{"class":65},[52,9327,4715],{"class":2368},[52,9329,2372],{"class":65},[52,9331,4666],{"class":795},[52,9333,1129],{"class":65},[52,9335,469],{"class":65},[52,9337,9338,9340,9342,9344,9346,9348,9350,9352],{"class":54,"line":199},[52,9339,2769],{"class":117},[52,9341,206],{"class":65},[52,9343,4508],{"class":98},[52,9345,212],{"class":65},[52,9347,1894],{"class":65},[52,9349,4497],{"class":235},[52,9351,1873],{"class":69},[52,9353,1132],{"class":65},[52,9355,9356],{"class":54,"line":227},[52,9357,171],{"emptyLinePlaceholder":170},[52,9359,9360,9362],{"class":54,"line":232},[52,9361,2396],{"class":202},[52,9363,2399],{"class":69},[52,9365,9366,9368,9370],{"class":54,"line":244},[52,9367,90],{"class":65},[52,9369,82],{"class":69},[52,9371,73],{"class":65},[52,9373,9374,9376],{"class":54,"line":256},[52,9375,2423],{"class":65},[52,9377,4766],{"class":69},[52,9379,9380,9382,9384,9386,9388],{"class":54,"line":262},[52,9381,2458],{"class":117},[52,9383,121],{"class":65},[52,9385,124],{"class":65},[52,9387,683],{"class":127},[52,9389,1797],{"class":65},[52,9391,9392,9394,9396,9398,9400,9402,9404,9406,9408,9410,9412,9414,9416,9418,9420,9422,9424,9426],{"class":54,"line":281},[52,9393,4783],{"class":117},[52,9395,2891],{"class":65},[52,9397,2894],{"class":69},[52,9399,250],{"class":65},[52,9401,218],{"class":65},[52,9403,2901],{"class":127},[52,9405,275],{"class":65},[52,9407,856],{"class":65},[52,9409,2908],{"class":69},[52,9411,250],{"class":65},[52,9413,2914],{"class":2913},[52,9415,856],{"class":65},[52,9417,2919],{"class":69},[52,9419,250],{"class":65},[52,9421,218],{"class":65},[52,9423,2926],{"class":127},[52,9425,275],{"class":65},[52,9427,4818],{"class":65},[52,9429,9430],{"class":54,"line":298},[52,9431,2471],{"class":65},[52,9433,9434,9436],{"class":54,"line":304},[52,9435,2423],{"class":65},[52,9437,4829],{"class":69},[52,9439,9440,9442,9444],{"class":54,"line":309},[52,9441,4834],{"class":117},[52,9443,4837],{"class":65},[52,9445,4840],{"class":117},[52,9447,9448,9450,9452],{"class":54,"line":325},[52,9449,4845],{"class":235},[52,9451,238],{"class":98},[52,9453,241],{"class":65},[52,9455,9456,9458,9460,9462,9464,9466],{"class":54,"line":336},[52,9457,4854],{"class":69},[52,9459,250],{"class":65},[52,9461,218],{"class":65},[52,9463,683],{"class":127},[52,9465,275],{"class":65},[52,9467,278],{"class":65},[52,9469,9470,9472,9474,9476,9478,9480],{"class":54,"line":342},[52,9471,4869],{"class":69},[52,9473,250],{"class":65},[52,9475,218],{"class":65},[52,9477,885],{"class":127},[52,9479,275],{"class":65},[52,9481,278],{"class":65},[52,9483,9484,9486,9488,9490,9492,9494,9496,9498,9500,9502,9504,9506],{"class":54,"line":348},[52,9485,4884],{"class":69},[52,9487,250],{"class":65},[52,9489,4889],{"class":98},[52,9491,4892],{"class":65},[52,9493,4710],{"class":98},[52,9495,856],{"class":65},[52,9497,4899],{"class":69},[52,9499,250],{"class":65},[52,9501,4904],{"class":98},[52,9503,386],{"class":65},[52,9505,4909],{"class":98},[52,9507,278],{"class":65},[52,9509,9510,9512],{"class":54,"line":354},[52,9511,4916],{"class":65},[52,9513,423],{"class":98},[52,9515,9516],{"class":54,"line":360},[52,9517,4923],{"class":65},[52,9519,9520],{"class":54,"line":391},[52,9521,2510],{"class":65},[52,9523,9524],{"class":54,"line":397},[52,9525,9526],{"class":98}," Примерка\n",[52,9528,9529,9531,9533],{"class":54,"line":405},[52,9530,2578],{"class":65},[52,9532,706],{"class":69},[52,9534,73],{"class":65},[52,9536,9537,9539,9541],{"class":54,"line":410},[52,9538,3226],{"class":65},[52,9540,82],{"class":69},[52,9542,73],{"class":65},[52,9544,9545,9547],{"class":54,"line":418},[52,9546,2592],{"class":69},[52,9548,1132],{"class":65},[52,9550,9551],{"class":54,"line":426},[52,9552,960],{"class":65},[996,9554,4961],{},{"title":48,"searchDepth":62,"depth":62,"links":9556},[9557,9558,9559],{"id":8730,"depth":62,"text":8731},{"id":8931,"depth":62,"text":8932},{"id":9241,"depth":62,"text":9242},"Интеграция с React-приложением (Vite \u002F CRA)",{},"\u002Fintegrations\u002Freact",{"title":4082,"description":9560},"integrations\u002Freact","F7mSDoVd1RiVLbrCGyquPOzGkvCalo0IeQdlhW6YYUs",{"id":9567,"title":4976,"body":9568,"description":10189,"extension":1010,"icon":5648,"meta":10190,"navigation":170,"path":2161,"seo":10191,"stem":10192,"__hash__":10193},"content\u002Fintegrations\u002Fvanilla-js.md",{"type":7,"value":9569,"toc":10185},[9570,9574,9577,9581,10161,10165,10183],[10,9571,9573],{"id":9572},"интеграция-с-vanilla-js","Интеграция с Vanilla JS",[15,9575,9576],{},"Без фреймворков — только HTML и JavaScript.",[19,9578,9580],{"id":9579},"полный-пример","Полный пример",[43,9582,9584],{"className":1772,"code":9583,"language":1774,"meta":48,"style":48},"\u003C!DOCTYPE html>\n\u003Chtml lang=\"ru\">\n\u003Chead>\n \u003Cmeta charset=\"UTF-8\" \u002F>\n \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \u002F>\n \u003Ctitle>Страница товара — Виртуальная примерка\u003C\u002Ftitle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n \u003Ch1>Классическая джинсовая куртка\u003C\u002Fh1>\n \u003Cp>7 500 ₽\u003C\u002Fp>\n\n \u003C!-- Контейнер виджета -->\n \u003Cdiv id=\"widget-container\" style=\"width: 100%; max-width: 600px; aspect-ratio: 3 \u002F 4;\">\u003C\u002Fdiv>\n\n \u003Cbutton onclick=\"openWidget()\">Примерка\u003C\u002Fbutton>\n\n \u003C!-- 1. Загрузка пакета виджета -->\n \u003Cscript\n src=\"https:\u002F\u002Fwidget.try-on.ru\u002Ffitting-widget-bundle.js\"\n id=\"fitting-widget-bundle\"\n >\u003C\u002Fscript>\n\n \u003C!-- 2. Инициализация -->\n \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\n \u003Cscript>\n function openWidget() {\n window.fitting('create', {\n targetElementId: 'widget-container',\n model: 'balanced',\n tryonItems: [\n {\n productName: 'Классическая джинсовая куртка',\n url: 'https:\u002F\u002Fexample.com\u002Fimages\u002Fjacket.jpg',\n },\n ],\n });\n }\n \u003C\u002Fscript>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[27,9585,9586,9596,9615,9623,9641,9669,9686,9694,9702,9706,9723,9740,9744,9749,9781,9785,9813,9817,9822,9828,9840,9852,9860,9864,9869,9887,9911,9953,9957,9977,9989,9997,10005,10009,10017,10027,10047,10061,10075,10083,10087,10101,10115,10119,10125,10133,10137,10145,10153],{"__ignoreMap":48},[52,9587,9588,9590,9592,9594],{"class":54,"line":55},[52,9589,4999],{"class":65},[52,9591,5002],{"class":69},[52,9593,5005],{"class":117},[52,9595,73],{"class":65},[52,9597,9598,9600,9602,9604,9606,9608,9611,9613],{"class":54,"line":62},[52,9599,66],{"class":65},[52,9601,1774],{"class":69},[52,9603,185],{"class":117},[52,9605,121],{"class":65},[52,9607,124],{"class":65},[52,9609,9610],{"class":127},"ru",[52,9612,124],{"class":65},[52,9614,73],{"class":65},[52,9616,9617,9619,9621],{"class":54,"line":76},[52,9618,66],{"class":65},[52,9620,5033],{"class":69},[52,9622,73],{"class":65},[52,9624,9625,9627,9629,9631,9633,9635,9637,9639],{"class":54,"line":87},[52,9626,79],{"class":65},[52,9628,373],{"class":69},[52,9630,5044],{"class":117},[52,9632,121],{"class":65},[52,9634,124],{"class":65},[52,9636,5051],{"class":127},[52,9638,124],{"class":65},[52,9640,145],{"class":65},[52,9642,9643,9645,9647,9649,9651,9653,9655,9657,9659,9661,9663,9665,9667],{"class":54,"line":109},[52,9644,79],{"class":65},[52,9646,373],{"class":69},[52,9648,5064],{"class":117},[52,9650,121],{"class":65},[52,9652,124],{"class":65},[52,9654,5071],{"class":127},[52,9656,124],{"class":65},[52,9658,5076],{"class":117},[52,9660,121],{"class":65},[52,9662,124],{"class":65},[52,9664,5083],{"class":127},[52,9666,124],{"class":65},[52,9668,145],{"class":65},[52,9670,9671,9673,9675,9677,9680,9682,9684],{"class":54,"line":148},[52,9672,79],{"class":65},[52,9674,5094],{"class":69},[52,9676,95],{"class":65},[52,9678,9679],{"class":98},"Страница товара — Виртуальная примерка",[52,9681,102],{"class":65},[52,9683,5094],{"class":69},[52,9685,73],{"class":65},[52,9687,9688,9690,9692],{"class":54,"line":158},[52,9689,102],{"class":65},[52,9691,5033],{"class":69},[52,9693,73],{"class":65},[52,9695,9696,9698,9700],{"class":54,"line":167},[52,9697,66],{"class":65},[52,9699,5120],{"class":69},[52,9701,73],{"class":65},[52,9703,9704],{"class":54,"line":174},[52,9705,171],{"emptyLinePlaceholder":170},[52,9707,9708,9710,9712,9714,9717,9719,9721],{"class":54,"line":199},[52,9709,79],{"class":65},[52,9711,10],{"class":69},[52,9713,95],{"class":65},[52,9715,9716],{"class":98},"Классическая джинсовая куртка",[52,9718,102],{"class":65},[52,9720,10],{"class":69},[52,9722,73],{"class":65},[52,9724,9725,9727,9729,9731,9734,9736,9738],{"class":54,"line":227},[52,9726,79],{"class":65},[52,9728,15],{"class":69},[52,9730,95],{"class":65},[52,9732,9733],{"class":98},"7 500 ₽",[52,9735,102],{"class":65},[52,9737,15],{"class":69},[52,9739,73],{"class":65},[52,9741,9742],{"class":54,"line":232},[52,9743,171],{"emptyLinePlaceholder":170},[52,9745,9746],{"class":54,"line":244},[52,9747,9748],{"class":58}," \u003C!-- Контейнер виджета -->\n",[52,9750,9751,9753,9755,9757,9759,9761,9763,9765,9767,9769,9771,9773,9775,9777,9779],{"class":54,"line":256},[52,9752,79],{"class":65},[52,9754,82],{"class":69},[52,9756,676],{"class":117},[52,9758,121],{"class":65},[52,9760,124],{"class":65},[52,9762,683],{"class":127},[52,9764,124],{"class":65},[52,9766,2888],{"class":117},[52,9768,121],{"class":65},[52,9770,124],{"class":65},[52,9772,5193],{"class":127},[52,9774,124],{"class":65},[52,9776,1815],{"class":65},[52,9778,82],{"class":69},[52,9780,73],{"class":65},[52,9782,9783],{"class":54,"line":262},[52,9784,171],{"emptyLinePlaceholder":170},[52,9786,9787,9789,9791,9793,9795,9797,9799,9801,9803,9805,9807,9809,9811],{"class":54,"line":281},[52,9788,79],{"class":65},[52,9790,706],{"class":69},[52,9792,5214],{"class":117},[52,9794,121],{"class":65},[52,9796,124],{"class":65},[52,9798,5221],{"class":235},[52,9800,1873],{"class":127},[52,9802,124],{"class":65},[52,9804,95],{"class":65},[52,9806,7597],{"class":98},[52,9808,102],{"class":65},[52,9810,706],{"class":69},[52,9812,73],{"class":65},[52,9814,9815],{"class":54,"line":298},[52,9816,171],{"emptyLinePlaceholder":170},[52,9818,9819],{"class":54,"line":304},[52,9820,9821],{"class":58}," \u003C!-- 1. Загрузка пакета виджета -->\n",[52,9823,9824,9826],{"class":54,"line":309},[52,9825,79],{"class":65},[52,9827,1783],{"class":69},[52,9829,9830,9832,9834,9836,9838],{"class":54,"line":325},[52,9831,5255],{"class":117},[52,9833,121],{"class":65},[52,9835,124],{"class":65},[52,9837,272],{"class":127},[52,9839,1797],{"class":65},[52,9841,9842,9844,9846,9848,9850],{"class":54,"line":336},[52,9843,5268],{"class":117},[52,9845,121],{"class":65},[52,9847,124],{"class":65},[52,9849,291],{"class":127},[52,9851,1797],{"class":65},[52,9853,9854,9856,9858],{"class":54,"line":342},[52,9855,5281],{"class":65},[52,9857,179],{"class":69},[52,9859,73],{"class":65},[52,9861,9862],{"class":54,"line":348},[52,9863,171],{"emptyLinePlaceholder":170},[52,9865,9866],{"class":54,"line":354},[52,9867,9868],{"class":58}," \u003C!-- 2. Инициализация -->\n",[52,9870,9871,9873,9875,9877,9879,9881,9883,9885],{"class":54,"line":360},[52,9872,79],{"class":65},[52,9874,179],{"class":69},[52,9876,676],{"class":117},[52,9878,121],{"class":65},[52,9880,124],{"class":65},[52,9882,318],{"class":127},[52,9884,124],{"class":65},[52,9886,73],{"class":65},[52,9888,9889,9891,9893,9895,9897,9899,9901,9903,9905,9907,9909],{"class":54,"line":391},[52,9890,2785],{"class":98},[52,9892,34],{"class":65},[52,9894,1855],{"class":98},[52,9896,121],{"class":65},[52,9898,1860],{"class":98},[52,9900,34],{"class":65},[52,9902,1855],{"class":98},[52,9904,1867],{"class":65},[52,9906,1870],{"class":117},[52,9908,1873],{"class":65},[52,9910,469],{"class":65},[52,9912,9913,9915,9917,9919,9921,9923,9925,9927,9929,9931,9933,9935,9937,9939,9941,9943,9945,9947,9949,9951],{"class":54,"line":397},[52,9914,5341],{"class":69},[52,9916,1089],{"class":98},[52,9918,34],{"class":65},[52,9920,844],{"class":98},[52,9922,34],{"class":65},[52,9924,1891],{"class":98},[52,9926,1894],{"class":65},[52,9928,1860],{"class":98},[52,9930,34],{"class":65},[52,9932,844],{"class":98},[52,9934,34],{"class":65},[52,9936,1891],{"class":98},[52,9938,1907],{"class":65},[52,9940,1910],{"class":69},[52,9942,34],{"class":65},[52,9944,1915],{"class":235},[52,9946,238],{"class":69},[52,9948,1920],{"class":98},[52,9950,1129],{"class":69},[52,9952,1132],{"class":65},[52,9954,9955],{"class":54,"line":405},[52,9956,5384],{"class":65},[52,9958,9959,9961,9963,9965,9967,9969,9971,9973,9975],{"class":54,"line":410},[52,9960,2785],{"class":98},[52,9962,34],{"class":65},[52,9964,844],{"class":235},[52,9966,238],{"class":98},[52,9968,275],{"class":65},[52,9970,1100],{"class":127},[52,9972,275],{"class":65},[52,9974,856],{"class":65},[52,9976,469],{"class":65},[52,9978,9979,9981,9983,9985,9987],{"class":54,"line":418},[52,9980,5409],{"class":69},[52,9982,250],{"class":65},[52,9984,218],{"class":65},[52,9986,1961],{"class":127},[52,9988,224],{"class":65},[52,9990,9991,9993,9995],{"class":54,"line":426},[52,9992,2847],{"class":65},[52,9994,1129],{"class":98},[52,9996,1132],{"class":65},[52,9998,9999,10001,10003],{"class":54,"line":5428},[52,10000,151],{"class":65},[52,10002,179],{"class":69},[52,10004,73],{"class":65},[52,10006,10007],{"class":54,"line":5437},[52,10008,171],{"emptyLinePlaceholder":170},[52,10010,10011,10013,10015],{"class":54,"line":5442},[52,10012,79],{"class":65},[52,10014,179],{"class":69},[52,10016,73],{"class":65},[52,10018,10019,10021,10023,10025],{"class":54,"line":5451},[52,10020,5454],{"class":117},[52,10022,5457],{"class":235},[52,10024,1873],{"class":65},[52,10026,469],{"class":65},[52,10028,10029,10031,10033,10035,10037,10039,10041,10043,10045],{"class":54,"line":5464},[52,10030,5467],{"class":98},[52,10032,34],{"class":65},[52,10034,844],{"class":235},[52,10036,238],{"class":69},[52,10038,275],{"class":65},[52,10040,851],{"class":127},[52,10042,275],{"class":65},[52,10044,856],{"class":65},[52,10046,469],{"class":65},[52,10048,10049,10051,10053,10055,10057,10059],{"class":54,"line":5486},[52,10050,5489],{"class":69},[52,10052,250],{"class":65},[52,10054,218],{"class":65},[52,10056,683],{"class":127},[52,10058,275],{"class":65},[52,10060,278],{"class":65},[52,10062,10063,10065,10067,10069,10071,10073],{"class":54,"line":5502},[52,10064,5505],{"class":69},[52,10066,250],{"class":65},[52,10068,218],{"class":65},[52,10070,885],{"class":127},[52,10072,275],{"class":65},[52,10074,278],{"class":65},[52,10076,10077,10079,10081],{"class":54,"line":5518},[52,10078,5521],{"class":69},[52,10080,250],{"class":65},[52,10082,253],{"class":69},[52,10084,10085],{"class":54,"line":5528},[52,10086,3175],{"class":65},[52,10088,10089,10091,10093,10095,10097,10099],{"class":54,"line":5533},[52,10090,3180],{"class":69},[52,10092,250],{"class":65},[52,10094,218],{"class":65},[52,10096,9716],{"class":127},[52,10098,275],{"class":65},[52,10100,278],{"class":65},[52,10102,10103,10105,10107,10109,10111,10113],{"class":54,"line":5548},[52,10104,3195],{"class":69},[52,10106,250],{"class":65},[52,10108,218],{"class":65},[52,10110,5557],{"class":127},[52,10112,275],{"class":65},[52,10114,278],{"class":65},[52,10116,10117],{"class":54,"line":5564},[52,10118,3210],{"class":65},[52,10120,10121,10123],{"class":54,"line":5569},[52,10122,3215],{"class":69},[52,10124,278],{"class":65},[52,10126,10127,10129,10131],{"class":54,"line":5576},[52,10128,5579],{"class":65},[52,10130,1129],{"class":69},[52,10132,1132],{"class":65},[52,10134,10135],{"class":54,"line":5586},[52,10136,5589],{"class":65},[52,10138,10139,10141,10143],{"class":54,"line":5592},[52,10140,151],{"class":65},[52,10142,179],{"class":69},[52,10144,73],{"class":65},[52,10146,10147,10149,10151],{"class":54,"line":5601},[52,10148,102],{"class":65},[52,10150,5120],{"class":69},[52,10152,73],{"class":65},[52,10154,10155,10157,10159],{"class":54,"line":5610},[52,10156,102],{"class":65},[52,10158,1774],{"class":69},[52,10160,73],{"class":65},[19,10162,10164],{"id":10163},"ключевые-моменты","Ключевые моменты",[2153,10166,10167,10170,10178],{},[2156,10168,10169],{},"Сначала загружается пакетный скрипт.",[2156,10171,10172,10173,10175,10176,34],{},"Инициализируйте с помощью ",[27,10174,5631],{}," перед вызовом ",[27,10177,851],{},[2156,10179,10180,10182],{},[27,10181,1165],{}," должен совпадать с существующим элементом на странице.",[996,10184,5642],{},{"title":48,"searchDepth":62,"depth":62,"links":10186},[10187,10188],{"id":9579,"depth":62,"text":9580},{"id":10163,"depth":62,"text":10164},"Интеграция с обычным HTML\u002FJavaScript",{},{"title":4976,"description":10189},"integrations\u002Fvanilla-js","TOVOFdq4t72IBSUKHoJgLGlQk10I_zCs_rea9Sj9PGA",{"id":10195,"title":5656,"body":10196,"description":11026,"extension":1010,"icon":6503,"meta":11027,"navigation":170,"path":11028,"seo":11029,"stem":11030,"__hash__":11031},"content\u002Fintegrations\u002Fvue.md",{"type":7,"value":10197,"toc":11021},[10198,10202,10205,10207,10212,10390,10394,10686,10690,11019],[10,10199,10201],{"id":10200},"интеграция-с-vue-3","Интеграция с Vue 3",[15,10203,10204],{},"Работает с Vue 3 + Vite или любым другим окружением Vue 3.",[19,10206,8731],{"id":8730},[15,10208,10209,10210,250],{},"В ",[27,10211,4101],{},[43,10213,10214],{"className":1772,"code":5675,"language":1774,"meta":48,"style":48},[27,10215,10216,10222,10234,10246,10254,10272,10296,10338,10342,10362,10374,10382],{"__ignoreMap":48},[52,10217,10218,10220],{"class":54,"line":55},[52,10219,66],{"class":65},[52,10221,1783],{"class":69},[52,10223,10224,10226,10228,10230,10232],{"class":54,"line":62},[52,10225,1788],{"class":117},[52,10227,121],{"class":65},[52,10229,124],{"class":65},[52,10231,272],{"class":127},[52,10233,1797],{"class":65},[52,10235,10236,10238,10240,10242,10244],{"class":54,"line":76},[52,10237,1802],{"class":117},[52,10239,121],{"class":65},[52,10241,124],{"class":65},[52,10243,291],{"class":127},[52,10245,1797],{"class":65},[52,10247,10248,10250,10252],{"class":54,"line":87},[52,10249,1815],{"class":65},[52,10251,179],{"class":69},[52,10253,73],{"class":65},[52,10255,10256,10258,10260,10262,10264,10266,10268,10270],{"class":54,"line":109},[52,10257,66],{"class":65},[52,10259,179],{"class":69},[52,10261,676],{"class":117},[52,10263,121],{"class":65},[52,10265,124],{"class":65},[52,10267,318],{"class":127},[52,10269,124],{"class":65},[52,10271,73],{"class":65},[52,10273,10274,10276,10278,10280,10282,10284,10286,10288,10290,10292,10294],{"class":54,"line":148},[52,10275,839],{"class":98},[52,10277,34],{"class":65},[52,10279,1855],{"class":98},[52,10281,121],{"class":65},[52,10283,1860],{"class":98},[52,10285,34],{"class":65},[52,10287,1855],{"class":98},[52,10289,1867],{"class":65},[52,10291,1870],{"class":117},[52,10293,1873],{"class":65},[52,10295,469],{"class":65},[52,10297,10298,10300,10302,10304,10306,10308,10310,10312,10314,10316,10318,10320,10322,10324,10326,10328,10330,10332,10334,10336],{"class":54,"line":158},[52,10299,1880],{"class":69},[52,10301,1089],{"class":98},[52,10303,34],{"class":65},[52,10305,844],{"class":98},[52,10307,34],{"class":65},[52,10309,1891],{"class":98},[52,10311,1894],{"class":65},[52,10313,1860],{"class":98},[52,10315,34],{"class":65},[52,10317,844],{"class":98},[52,10319,34],{"class":65},[52,10321,1891],{"class":98},[52,10323,1907],{"class":65},[52,10325,1910],{"class":69},[52,10327,34],{"class":65},[52,10329,1915],{"class":235},[52,10331,238],{"class":69},[52,10333,1920],{"class":98},[52,10335,1129],{"class":69},[52,10337,1132],{"class":65},[52,10339,10340],{"class":54,"line":167},[52,10341,1929],{"class":65},[52,10343,10344,10346,10348,10350,10352,10354,10356,10358,10360],{"class":54,"line":174},[52,10345,839],{"class":98},[52,10347,34],{"class":65},[52,10349,844],{"class":235},[52,10351,238],{"class":98},[52,10353,275],{"class":65},[52,10355,1100],{"class":127},[52,10357,275],{"class":65},[52,10359,856],{"class":65},[52,10361,469],{"class":65},[52,10363,10364,10366,10368,10370,10372],{"class":54,"line":199},[52,10365,1954],{"class":69},[52,10367,250],{"class":65},[52,10369,218],{"class":65},[52,10371,1961],{"class":127},[52,10373,224],{"class":65},[52,10375,10376,10378,10380],{"class":54,"line":227},[52,10377,953],{"class":65},[52,10379,1129],{"class":98},[52,10381,1132],{"class":65},[52,10383,10384,10386,10388],{"class":54,"line":232},[52,10385,102],{"class":65},[52,10387,179],{"class":69},[52,10389,73],{"class":65},[19,10391,10393],{"id":10392},"_2-создайте-composable","2. Создайте composable",[43,10395,10396],{"className":441,"code":5858,"language":192,"meta":48,"style":48},[27,10397,10398,10402,10412,10420,10428,10436,10440,10444,10454,10462,10490,10500,10504,10508,10516,10524,10552,10556,10560,10564,10576,10598,10620,10624,10628,10642,10660,10664,10668,10682],{"__ignoreMap":48},[52,10399,10400],{"class":54,"line":55},[52,10401,5865],{"class":58},[52,10403,10404,10406,10408,10410],{"class":54,"line":62},[52,10405,449],{"class":202},[52,10407,5872],{"class":117},[52,10409,2630],{"class":795},[52,10411,469],{"class":65},[52,10413,10414,10416,10418],{"class":54,"line":76},[52,10415,790],{"class":69},[52,10417,250],{"class":65},[52,10419,796],{"class":795},[52,10421,10422,10424,10426],{"class":54,"line":87},[52,10423,2648],{"class":69},[52,10425,250],{"class":65},[52,10427,796],{"class":795},[52,10429,10430,10432,10434],{"class":54,"line":109},[52,10431,4343],{"class":69},[52,10433,2707],{"class":65},[52,10435,796],{"class":795},[52,10437,10438],{"class":54,"line":148},[52,10439,960],{"class":65},[52,10441,10442],{"class":54,"line":158},[52,10443,171],{"emptyLinePlaceholder":170},[52,10445,10446,10448,10450,10452],{"class":54,"line":167},[52,10447,449],{"class":202},[52,10449,5872],{"class":117},[52,10451,4364],{"class":795},[52,10453,469],{"class":65},[52,10455,10456,10458,10460],{"class":54,"line":174},[52,10457,1288],{"class":69},[52,10459,250],{"class":65},[52,10461,796],{"class":795},[52,10463,10464,10466,10468,10470,10472,10474,10476,10478,10480,10482,10484,10486,10488],{"class":54,"line":199},[52,10465,1303],{"class":69},[52,10467,2707],{"class":65},[52,10469,218],{"class":65},[52,10471,885],{"class":127},[52,10473,275],{"class":65},[52,10475,4391],{"class":65},[52,10477,218],{"class":65},[52,10479,4396],{"class":127},[52,10481,275],{"class":65},[52,10483,4391],{"class":65},[52,10485,218],{"class":65},[52,10487,4405],{"class":127},[52,10489,224],{"class":65},[52,10491,10492,10494,10496,10498],{"class":54,"line":227},[52,10493,1318],{"class":69},[52,10495,250],{"class":65},[52,10497,2630],{"class":795},[52,10499,5965],{"class":98},[52,10501,10502],{"class":54,"line":232},[52,10503,960],{"class":65},[52,10505,10506],{"class":54,"line":244},[52,10507,171],{"emptyLinePlaceholder":170},[52,10509,10510,10512,10514],{"class":54,"line":256},[52,10511,2667],{"class":117},[52,10513,2670],{"class":98},[52,10515,241],{"class":65},[52,10517,10518,10520,10522],{"class":54,"line":262},[52,10519,2677],{"class":117},[52,10521,2680],{"class":795},[52,10523,469],{"class":65},[52,10525,10526,10528,10530,10532,10534,10536,10538,10540,10542,10544,10546,10548,10550],{"class":54,"line":281},[52,10527,2687],{"class":69},[52,10529,250],{"class":65},[52,10531,2692],{"class":65},[52,10533,2695],{"class":2368},[52,10535,250],{"class":65},[52,10537,2641],{"class":795},[52,10539,856],{"class":65},[52,10541,2704],{"class":2368},[52,10543,2707],{"class":65},[52,10545,2710],{"class":795},[52,10547,1129],{"class":65},[52,10549,832],{"class":117},[52,10551,6018],{"class":795},[52,10553,10554],{"class":54,"line":298},[52,10555,2724],{"class":65},[52,10557,10558],{"class":54,"line":304},[52,10559,960],{"class":65},[52,10561,10562],{"class":54,"line":309},[52,10563,171],{"emptyLinePlaceholder":170},[52,10565,10566,10568,10570,10572,10574],{"class":54,"line":325},[52,10567,449],{"class":202},[52,10569,1870],{"class":117},[52,10571,4497],{"class":235},[52,10573,1873],{"class":65},[52,10575,469],{"class":65},[52,10577,10578,10580,10582,10584,10586,10588,10590,10592,10594,10596],{"class":54,"line":336},[52,10579,2769],{"class":117},[52,10581,4508],{"class":98},[52,10583,1894],{"class":65},[52,10585,2692],{"class":65},[52,10587,4515],{"class":2368},[52,10589,250],{"class":65},[52,10591,4364],{"class":795},[52,10593,1129],{"class":65},[52,10595,832],{"class":117},[52,10597,469],{"class":65},[52,10599,10600,10602,10604,10606,10608,10610,10612,10614,10616,10618],{"class":54,"line":342},[52,10601,2785],{"class":98},[52,10603,34],{"class":65},[52,10605,844],{"class":235},[52,10607,238],{"class":69},[52,10609,275],{"class":65},[52,10611,851],{"class":127},[52,10613,275],{"class":65},[52,10615,856],{"class":65},[52,10617,2704],{"class":98},[52,10619,423],{"class":69},[52,10621,10622],{"class":54,"line":348},[52,10623,2724],{"class":65},[52,10625,10626],{"class":54,"line":354},[52,10627,171],{"emptyLinePlaceholder":170},[52,10629,10630,10632,10634,10636,10638,10640],{"class":54,"line":360},[52,10631,2769],{"class":117},[52,10633,4564],{"class":98},[52,10635,1894],{"class":65},[52,10637,829],{"class":65},[52,10639,832],{"class":117},[52,10641,469],{"class":65},[52,10643,10644,10646,10648,10650,10652,10654,10656,10658],{"class":54,"line":391},[52,10645,2785],{"class":98},[52,10647,34],{"class":65},[52,10649,844],{"class":235},[52,10651,238],{"class":69},[52,10653,275],{"class":65},[52,10655,4587],{"class":127},[52,10657,275],{"class":65},[52,10659,423],{"class":69},[52,10661,10662],{"class":54,"line":397},[52,10663,2724],{"class":65},[52,10665,10666],{"class":54,"line":405},[52,10667,171],{"emptyLinePlaceholder":170},[52,10669,10670,10672,10674,10676,10678,10680],{"class":54,"line":410},[52,10671,2396],{"class":202},[52,10673,206],{"class":65},[52,10675,4508],{"class":98},[52,10677,856],{"class":65},[52,10679,4564],{"class":98},[52,10681,6149],{"class":65},[52,10683,10684],{"class":54,"line":418},[52,10685,960],{"class":65},[19,10687,10689],{"id":10688},"_3-создайте-компонент-виджета","3. Создайте компонент виджета",[43,10691,10693],{"className":45,"code":10692,"language":47,"meta":48,"style":48},"\u003C!-- components\u002FTryOnWidget.vue -->\n\u003Ctemplate>\n \u003Cdiv>\n \u003Cdiv\n id=\"widget-container\"\n style=\"width: 100%; max-width: 600px; aspect-ratio: 3\u002F4\"\n \u002F>\n \u003Cbutton @click=\"handleTryOn\">Примерка\u003C\u002Fbutton>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nimport { useFittingWidget, type TryonItem } from '~\u002Fcomposables\u002FuseFittingWidget'\n\nconst props = defineProps\u003C{\n productName: string\n imageUrl: string\n}>()\n\nconst { open } = useFittingWidget()\n\nconst handleTryOn = () => {\n open({\n targetElementId: 'widget-container',\n model: 'balanced',\n tryonItems: [\n {\n productName: props.productName,\n url: props.imageUrl,\n },\n ],\n })\n}\n\u003C\u002Fscript>\n",[27,10694,10695,10699,10707,10715,10721,10733,10745,10749,10775,10783,10791,10795,10815,10839,10843,10855,10863,10871,10877,10881,10897,10901,10915,10923,10937,10951,10959,10963,10977,10991,10995,11001,11007,11011],{"__ignoreMap":48},[52,10696,10697],{"class":54,"line":55},[52,10698,651],{"class":58},[52,10700,10701,10703,10705],{"class":54,"line":62},[52,10702,66],{"class":65},[52,10704,70],{"class":69},[52,10706,73],{"class":65},[52,10708,10709,10711,10713],{"class":54,"line":76},[52,10710,79],{"class":65},[52,10712,82],{"class":69},[52,10714,73],{"class":65},[52,10716,10717,10719],{"class":54,"line":87},[52,10718,90],{"class":65},[52,10720,4766],{"class":69},[52,10722,10723,10725,10727,10729,10731],{"class":54,"line":109},[52,10724,284],{"class":117},[52,10726,121],{"class":65},[52,10728,124],{"class":65},[52,10730,683],{"class":127},[52,10732,1797],{"class":65},[52,10734,10735,10737,10739,10741,10743],{"class":54,"line":148},[52,10736,6205],{"class":117},[52,10738,121],{"class":65},[52,10740,124],{"class":65},[52,10742,6212],{"class":127},[52,10744,1797],{"class":65},[52,10746,10747],{"class":54,"line":158},[52,10748,6219],{"class":65},[52,10750,10751,10753,10755,10757,10759,10761,10763,10765,10767,10769,10771,10773],{"class":54,"line":167},[52,10752,90],{"class":65},[52,10754,706],{"class":69},[52,10756,709],{"class":117},[52,10758,121],{"class":65},[52,10760,124],{"class":65},[52,10762,716],{"class":127},[52,10764,124],{"class":65},[52,10766,95],{"class":65},[52,10768,7597],{"class":98},[52,10770,102],{"class":65},[52,10772,706],{"class":69},[52,10774,73],{"class":65},[52,10776,10777,10779,10781],{"class":54,"line":174},[52,10778,151],{"class":65},[52,10780,82],{"class":69},[52,10782,73],{"class":65},[52,10784,10785,10787,10789],{"class":54,"line":199},[52,10786,102],{"class":65},[52,10788,70],{"class":69},[52,10790,73],{"class":65},[52,10792,10793],{"class":54,"line":227},[52,10794,171],{"emptyLinePlaceholder":170},[52,10796,10797,10799,10801,10803,10805,10807,10809,10811,10813],{"class":54,"line":232},[52,10798,66],{"class":65},[52,10800,179],{"class":69},[52,10802,182],{"class":117},[52,10804,185],{"class":117},[52,10806,121],{"class":65},[52,10808,124],{"class":65},[52,10810,192],{"class":127},[52,10812,124],{"class":65},[52,10814,73],{"class":65},[52,10816,10817,10819,10821,10823,10825,10827,10829,10831,10833,10835,10837],{"class":54,"line":244},[52,10818,203],{"class":202},[52,10820,206],{"class":65},[52,10822,4497],{"class":98},[52,10824,856],{"class":65},[52,10826,6298],{"class":202},[52,10828,2630],{"class":98},[52,10830,212],{"class":65},[52,10832,215],{"class":202},[52,10834,218],{"class":65},[52,10836,6309],{"class":127},[52,10838,224],{"class":65},[52,10840,10841],{"class":54,"line":256},[52,10842,171],{"emptyLinePlaceholder":170},[52,10844,10845,10847,10849,10851,10853],{"class":54,"line":262},[52,10846,774],{"class":117},[52,10848,777],{"class":98},[52,10850,121],{"class":65},[52,10852,782],{"class":235},[52,10854,785],{"class":65},[52,10856,10857,10859,10861],{"class":54,"line":281},[52,10858,790],{"class":69},[52,10860,250],{"class":65},[52,10862,796],{"class":795},[52,10864,10865,10867,10869],{"class":54,"line":298},[52,10866,801],{"class":69},[52,10868,250],{"class":65},[52,10870,796],{"class":795},[52,10872,10873,10875],{"class":54,"line":304},[52,10874,810],{"class":65},[52,10876,813],{"class":98},[52,10878,10879],{"class":54,"line":309},[52,10880,171],{"emptyLinePlaceholder":170},[52,10882,10883,10885,10887,10889,10891,10893,10895],{"class":54,"line":325},[52,10884,774],{"class":117},[52,10886,206],{"class":65},[52,10888,6362],{"class":98},[52,10890,386],{"class":65},[52,10892,1894],{"class":65},[52,10894,4497],{"class":235},[52,10896,813],{"class":98},[52,10898,10899],{"class":54,"line":336},[52,10900,171],{"emptyLinePlaceholder":170},[52,10902,10903,10905,10907,10909,10911,10913],{"class":54,"line":342},[52,10904,774],{"class":117},[52,10906,824],{"class":98},[52,10908,121],{"class":65},[52,10910,829],{"class":65},[52,10912,832],{"class":117},[52,10914,469],{"class":65},[52,10916,10917,10919,10921],{"class":54,"line":348},[52,10918,6393],{"class":235},[52,10920,238],{"class":69},[52,10922,241],{"class":65},[52,10924,10925,10927,10929,10931,10933,10935],{"class":54,"line":354},[52,10926,863],{"class":69},[52,10928,250],{"class":65},[52,10930,218],{"class":65},[52,10932,683],{"class":127},[52,10934,275],{"class":65},[52,10936,278],{"class":65},[52,10938,10939,10941,10943,10945,10947,10949],{"class":54,"line":360},[52,10940,878],{"class":69},[52,10942,250],{"class":65},[52,10944,218],{"class":65},[52,10946,885],{"class":127},[52,10948,275],{"class":65},[52,10950,278],{"class":65},[52,10952,10953,10955,10957],{"class":54,"line":391},[52,10954,894],{"class":69},[52,10956,250],{"class":65},[52,10958,253],{"class":69},[52,10960,10961],{"class":54,"line":397},[52,10962,903],{"class":65},[52,10964,10965,10967,10969,10971,10973,10975],{"class":54,"line":405},[52,10966,908],{"class":69},[52,10968,250],{"class":65},[52,10970,913],{"class":98},[52,10972,34],{"class":65},[52,10974,918],{"class":98},[52,10976,278],{"class":65},[52,10978,10979,10981,10983,10985,10987,10989],{"class":54,"line":410},[52,10980,925],{"class":69},[52,10982,250],{"class":65},[52,10984,913],{"class":98},[52,10986,34],{"class":65},[52,10988,934],{"class":98},[52,10990,278],{"class":65},[52,10992,10993],{"class":54,"line":418},[52,10994,941],{"class":65},[52,10996,10997,10999],{"class":54,"line":426},[52,10998,946],{"class":69},[52,11000,278],{"class":65},[52,11002,11003,11005],{"class":54,"line":5428},[52,11004,953],{"class":65},[52,11006,423],{"class":69},[52,11008,11009],{"class":54,"line":5437},[52,11010,960],{"class":65},[52,11012,11013,11015,11017],{"class":54,"line":5442},[52,11014,102],{"class":65},[52,11016,179],{"class":69},[52,11018,73],{"class":65},[996,11020,6496],{},{"title":48,"searchDepth":62,"depth":62,"links":11022},[11023,11024,11025],{"id":8730,"depth":62,"text":8731},{"id":10392,"depth":62,"text":10393},{"id":10688,"depth":62,"text":10689},"Интеграция с Vue 3 приложением",{},"\u002Fintegrations\u002Fvue",{"title":5656,"description":11026},"integrations\u002Fvue","940Q7exH9C3y9bXr_sW6skJzNNxxGlNzOBpnASqYjFU",1779283221010]