[{"data":1,"prerenderedAt":11032},["ShallowReactive",2],{"\u002Fintegrations\u002Fnuxt":3,"all-pages-\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\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","Интеграция с Nuxt",[15,16,17],"p",{},"Fitting Widget легко интегрируется с Nuxt 3 и Nuxt 4.",[19,20,22],"h2",{"id":21},"_1-загрузка-скрипта","1. Загрузка скрипта",[15,24,25,26,30,31,34],{},"Используйте composable ",[27,28,29],"code",{},"useHead"," или добавьте скрипты в ",[27,32,33],{},"nuxt.config.ts",".",[36,37,39,40],"h3",{"id":38},"вариант-а-на-страницу-через-usehead","Вариант А — На страницу через ",[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},"вариант-б-глобально-в-nuxtconfigts","Вариант Б — Глобально в ",[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-создание-компонента-обёртки","2. Создание компонента-обёртки",[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\">Примерка\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},"Примерка",[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},"переменная-окружения","Переменная окружения",[15,974,975,976,250],{},"Добавьте в ",[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},"Вариант А — На страницу через useHead",{"id":435,"depth":76,"text":1006},"Вариант Б — Глобально в nuxt.config.ts",{"id":640,"depth":62,"text":641},{"id":971,"depth":62,"text":972},"Интеграция с Nuxt 3 \u002F Nuxt 4 приложением","md","i-lucide-nut",{},"\u002Fintegrations\u002Fnuxt",{"title":5,"description":1009},"integrations\u002Fnuxt","mSERafXf_JPUG4rn6ZlSU_qJnLNa0suHinF4LwLrASI",[1018,1393,1729,2187,2278,3284,4105,4999,5679,6534,6951,7038,7918,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":3277,"extension":1010,"icon":3278,"meta":3279,"navigation":170,"path":3280,"seo":3281,"stem":3282,"__hash__":3283},"content\u002Fen\u002Fintegrations\u002Fnextjs.md","Next.js",{"type":7,"value":2282,"toc":3268},[2283,2287,2297,2301,2311,2322,2599,2603,2972,2976,3242,3246,3252,3265],[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,2958,2962,2968],{"__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,2952,2954,2956],{"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,2951],{"class":98},"Try On",[52,2953,102],{"class":65},[52,2955,706],{"class":69},[52,2957,73],{"class":65},[52,2959,2960],{"class":54,"line":397},[52,2961,2587],{"class":65},[52,2963,2964,2966],{"class":54,"line":405},[52,2965,2592],{"class":69},[52,2967,1132],{"class":65},[52,2969,2970],{"class":54,"line":410},[52,2971,960],{"class":65},[36,2973,2975],{"id":2974},"step-3-use-in-a-product-page","Step 3 — Use in a Product Page",[43,2977,2979],{"className":2324,"code":2978,"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,2980,2981,3002,3006,3048,3077,3081,3087,3095,3119,3155,3162,3172,3177,3192,3207,3212,3219,3223,3232,3238],{"__ignoreMap":48},[52,2982,2983,2985,2987,2989,2991,2993,2995,2998,3000],{"class":54,"line":55},[52,2984,203],{"class":202},[52,2986,206],{"class":65},[52,2988,2741],{"class":98},[52,2990,212],{"class":65},[52,2992,215],{"class":202},[52,2994,218],{"class":65},[52,2996,2997],{"class":127},"@\u002Fcomponents\u002FTryOnButton",[52,2999,275],{"class":65},[52,3001,1132],{"class":65},[52,3003,3004],{"class":54,"line":62},[52,3005,171],{"emptyLinePlaceholder":170},[52,3007,3008,3010,3012,3015,3017,3020,3022,3025,3027,3029,3031,3033,3035,3038,3040,3042,3044,3046],{"class":54,"line":76},[52,3009,449],{"class":202},[52,3011,452],{"class":202},[52,3013,3014],{"class":117}," async",[52,3016,1870],{"class":117},[52,3018,3019],{"class":235}," ProductPage",[52,3021,2365],{"class":65},[52,3023,3024],{"class":2368}," params",[52,3026,2372],{"class":65},[52,3028,206],{"class":65},[52,3030,3024],{"class":69},[52,3032,250],{"class":65},[52,3034,206],{"class":65},[52,3036,3037],{"class":69}," slug",[52,3039,250],{"class":65},[52,3041,2641],{"class":795},[52,3043,212],{"class":65},[52,3045,2389],{"class":65},[52,3047,469],{"class":65},[52,3049,3050,3052,3055,3057,3060,3063,3065,3068,3070,3073,3075],{"class":54,"line":87},[52,3051,2769],{"class":117},[52,3053,3054],{"class":98}," product",[52,3056,1894],{"class":65},[52,3058,3059],{"class":202}," await",[52,3061,3062],{"class":235}," getProduct",[52,3064,238],{"class":69},[52,3066,3067],{"class":98},"params",[52,3069,34],{"class":65},[52,3071,3072],{"class":98},"slug",[52,3074,1129],{"class":69},[52,3076,1132],{"class":65},[52,3078,3079],{"class":54,"line":109},[52,3080,171],{"emptyLinePlaceholder":170},[52,3082,3083,3085],{"class":54,"line":148},[52,3084,2396],{"class":202},[52,3086,2399],{"class":69},[52,3088,3089,3091,3093],{"class":54,"line":158},[52,3090,90],{"class":65},[52,3092,82],{"class":69},[52,3094,73],{"class":65},[52,3096,3097,3099,3101,3104,3107,3109,3112,3115,3117],{"class":54,"line":167},[52,3098,2423],{"class":65},[52,3100,10],{"class":69},[52,3102,3103],{"class":65},">{",[52,3105,3106],{"class":98},"product",[52,3108,34],{"class":65},[52,3110,3111],{"class":98},"name",[52,3113,3114],{"class":65},"}\u003C\u002F",[52,3116,10],{"class":69},[52,3118,73],{"class":65},[52,3120,3121,3123,3126,3129,3131,3133,3135,3138,3141,3144,3146,3148,3150,3152],{"class":54,"line":174},[52,3122,2423],{"class":65},[52,3124,3125],{"class":69},"img",[52,3127,3128],{"class":117}," src",[52,3130,2943],{"class":65},[52,3132,3106],{"class":98},[52,3134,34],{"class":65},[52,3136,3137],{"class":98},"image",[52,3139,3140],{"class":65},"} ",[52,3142,3143],{"class":117},"alt",[52,3145,2943],{"class":65},[52,3147,3106],{"class":98},[52,3149,34],{"class":65},[52,3151,3111],{"class":98},[52,3153,3154],{"class":65},"} \u002F>\n",[52,3156,3157,3159],{"class":54,"line":199},[52,3158,2423],{"class":65},[52,3160,3161],{"class":795},"TryOnButton\n",[52,3163,3164,3167,3169],{"class":54,"line":227},[52,3165,3166],{"class":117},"        items",[52,3168,2943],{"class":65},[52,3170,3171],{"class":98},"[\n",[52,3173,3174],{"class":54,"line":232},[52,3175,3176],{"class":65},"          {\n",[52,3178,3179,3182,3184,3186,3188,3190],{"class":54,"line":244},[52,3180,3181],{"class":69},"            productName",[52,3183,250],{"class":65},[52,3185,3054],{"class":98},[52,3187,34],{"class":65},[52,3189,3111],{"class":98},[52,3191,278],{"class":65},[52,3193,3194,3197,3199,3201,3203,3205],{"class":54,"line":256},[52,3195,3196],{"class":69},"            url",[52,3198,250],{"class":65},[52,3200,3054],{"class":98},[52,3202,34],{"class":65},[52,3204,3137],{"class":98},[52,3206,278],{"class":65},[52,3208,3209],{"class":54,"line":262},[52,3210,3211],{"class":65},"          },\n",[52,3213,3214,3217],{"class":54,"line":281},[52,3215,3216],{"class":98},"        ]",[52,3218,960],{"class":65},[52,3220,3221],{"class":54,"line":298},[52,3222,2471],{"class":65},[52,3224,3225,3228,3230],{"class":54,"line":304},[52,3226,3227],{"class":65},"    \u003C\u002F",[52,3229,82],{"class":69},[52,3231,73],{"class":65},[52,3233,3234,3236],{"class":54,"line":309},[52,3235,2592],{"class":69},[52,3237,1132],{"class":65},[52,3239,3240],{"class":54,"line":325},[52,3241,960],{"class":65},[19,3243,3245],{"id":3244},"environment-variable","Environment Variable",[15,3247,3248,3249,250],{},"Add your API key to ",[27,3250,3251],{},".env.local",[43,3253,3255],{"className":981,"code":3254,"language":983,"meta":48,"style":48},"NEXT_PUBLIC_TRY_ON_API_KEY=pk_live_xxx\n",[27,3256,3257],{"__ignoreMap":48},[52,3258,3259,3261,3263],{"class":54,"line":55},[52,3260,2557],{"class":98},[52,3262,121],{"class":65},[52,3264,994],{"class":127},[996,3266,3267],{},"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":3269},[3270,3276],{"id":2299,"depth":62,"text":2300,"children":3271},[3272,3274,3275],{"id":2313,"depth":76,"text":3273},"Step 1 — Load Scripts in layout.tsx or page.tsx",{"id":2601,"depth":76,"text":2602},{"id":2974,"depth":76,"text":2975},{"id":3244,"depth":62,"text":3245},"Integrate with Next.js (Pages Router & App Router)","i-lucide-triangle",{},"\u002Fen\u002Fintegrations\u002Fnextjs",{"title":2280,"description":3277},"en\u002Fintegrations\u002Fnextjs","JdA3Sttp8qaffNRKpcg9b3i_J2nMxDOCfnya8RjA3yU",{"id":3285,"title":5,"body":3286,"description":4099,"extension":1010,"icon":1011,"meta":4100,"navigation":170,"path":4101,"seo":4102,"stem":4103,"__hash__":4104},"content\u002Fen\u002Fintegrations\u002Fnuxt.md",{"type":7,"value":3287,"toc":4089},[3288,3292,3295,3299,3307,3313,3595,3601,3777,3781,4068,4070,4075,4087],[10,3289,3291],{"id":3290},"nuxt-integration","Nuxt Integration",[15,3293,3294],{},"The Fitting Widget integrates seamlessly with Nuxt 3 and Nuxt 4.",[19,3296,3298],{"id":3297},"_1-load-the-script","1. Load the Script",[15,3300,3301,3302,3304,3305,34],{},"Use the ",[27,3303,29],{}," composable, or add scripts to your ",[27,3306,33],{},[36,3308,3310,3311],{"id":3309},"option-a-per-page-with-usehead","Option A — Per Page with ",[27,3312,29],{},[43,3314,3315],{"className":45,"code":46,"language":47,"meta":48,"style":48},[27,3316,3317,3321,3329,3337,3353,3381,3389,3397,3401,3421,3439,3443,3451,3459,3463,3477,3491,3495,3499,3513,3521,3525,3529,3533,3537,3561,3565,3571,3575,3581,3587],{"__ignoreMap":48},[52,3318,3319],{"class":54,"line":55},[52,3320,59],{"class":58},[52,3322,3323,3325,3327],{"class":54,"line":62},[52,3324,66],{"class":65},[52,3326,70],{"class":69},[52,3328,73],{"class":65},[52,3330,3331,3333,3335],{"class":54,"line":76},[52,3332,79],{"class":65},[52,3334,82],{"class":69},[52,3336,73],{"class":65},[52,3338,3339,3341,3343,3345,3347,3349,3351],{"class":54,"line":87},[52,3340,90],{"class":65},[52,3342,10],{"class":69},[52,3344,95],{"class":65},[52,3346,99],{"class":98},[52,3348,102],{"class":65},[52,3350,10],{"class":69},[52,3352,73],{"class":65},[52,3354,3355,3357,3359,3361,3363,3365,3367,3369,3371,3373,3375,3377,3379],{"class":54,"line":109},[52,3356,90],{"class":65},[52,3358,114],{"class":69},[52,3360,118],{"class":117},[52,3362,121],{"class":65},[52,3364,124],{"class":65},[52,3366,128],{"class":127},[52,3368,124],{"class":65},[52,3370,133],{"class":117},[52,3372,121],{"class":65},[52,3374,124],{"class":65},[52,3376,140],{"class":127},[52,3378,124],{"class":65},[52,3380,145],{"class":65},[52,3382,3383,3385,3387],{"class":54,"line":148},[52,3384,151],{"class":65},[52,3386,82],{"class":69},[52,3388,73],{"class":65},[52,3390,3391,3393,3395],{"class":54,"line":158},[52,3392,102],{"class":65},[52,3394,70],{"class":69},[52,3396,73],{"class":65},[52,3398,3399],{"class":54,"line":167},[52,3400,171],{"emptyLinePlaceholder":170},[52,3402,3403,3405,3407,3409,3411,3413,3415,3417,3419],{"class":54,"line":174},[52,3404,66],{"class":65},[52,3406,179],{"class":69},[52,3408,182],{"class":117},[52,3410,185],{"class":117},[52,3412,121],{"class":65},[52,3414,124],{"class":65},[52,3416,192],{"class":127},[52,3418,124],{"class":65},[52,3420,73],{"class":65},[52,3422,3423,3425,3427,3429,3431,3433,3435,3437],{"class":54,"line":199},[52,3424,203],{"class":202},[52,3426,206],{"class":65},[52,3428,209],{"class":98},[52,3430,212],{"class":65},[52,3432,215],{"class":202},[52,3434,218],{"class":65},[52,3436,221],{"class":127},[52,3438,224],{"class":65},[52,3440,3441],{"class":54,"line":227},[52,3442,171],{"emptyLinePlaceholder":170},[52,3444,3445,3447,3449],{"class":54,"line":232},[52,3446,29],{"class":235},[52,3448,238],{"class":98},[52,3450,241],{"class":65},[52,3452,3453,3455,3457],{"class":54,"line":244},[52,3454,247],{"class":69},[52,3456,250],{"class":65},[52,3458,253],{"class":98},[52,3460,3461],{"class":54,"line":256},[52,3462,259],{"class":65},[52,3464,3465,3467,3469,3471,3473,3475],{"class":54,"line":262},[52,3466,265],{"class":69},[52,3468,250],{"class":65},[52,3470,218],{"class":65},[52,3472,272],{"class":127},[52,3474,275],{"class":65},[52,3476,278],{"class":65},[52,3478,3479,3481,3483,3485,3487,3489],{"class":54,"line":281},[52,3480,284],{"class":69},[52,3482,250],{"class":65},[52,3484,218],{"class":65},[52,3486,291],{"class":127},[52,3488,275],{"class":65},[52,3490,278],{"class":65},[52,3492,3493],{"class":54,"line":298},[52,3494,301],{"class":65},[52,3496,3497],{"class":54,"line":304},[52,3498,259],{"class":65},[52,3500,3501,3503,3505,3507,3509,3511],{"class":54,"line":309},[52,3502,284],{"class":69},[52,3504,250],{"class":65},[52,3506,218],{"class":65},[52,3508,318],{"class":127},[52,3510,275],{"class":65},[52,3512,278],{"class":65},[52,3514,3515,3517,3519],{"class":54,"line":325},[52,3516,328],{"class":69},[52,3518,250],{"class":65},[52,3520,333],{"class":65},[52,3522,3523],{"class":54,"line":336},[52,3524,339],{"class":127},[52,3526,3527],{"class":54,"line":342},[52,3528,345],{"class":127},[52,3530,3531],{"class":54,"line":348},[52,3532,351],{"class":127},[52,3534,3535],{"class":54,"line":354},[52,3536,357],{"class":127},[52,3538,3539,3541,3543,3545,3547,3549,3551,3553,3555,3557,3559],{"class":54,"line":360},[52,3540,363],{"class":127},[52,3542,366],{"class":65},[52,3544,203],{"class":202},[52,3546,34],{"class":65},[52,3548,373],{"class":98},[52,3550,34],{"class":65},[52,3552,378],{"class":98},[52,3554,34],{"class":65},[52,3556,383],{"class":98},[52,3558,386],{"class":65},[52,3560,224],{"class":127},[52,3562,3563],{"class":54,"line":391},[52,3564,394],{"class":127},[52,3566,3567,3569],{"class":54,"line":397},[52,3568,400],{"class":65},[52,3570,278],{"class":65},[52,3572,3573],{"class":54,"line":405},[52,3574,301],{"class":65},[52,3576,3577,3579],{"class":54,"line":410},[52,3578,413],{"class":98},[52,3580,278],{"class":65},[52,3582,3583,3585],{"class":54,"line":418},[52,3584,386],{"class":65},[52,3586,423],{"class":98},[52,3588,3589,3591,3593],{"class":54,"line":426},[52,3590,102],{"class":65},[52,3592,179],{"class":69},[52,3594,73],{"class":65},[36,3596,3598,3599],{"id":3597},"option-b-global-in-nuxtconfigts","Option B — Global in ",[27,3600,33],{},[43,3602,3603],{"className":441,"code":442,"language":192,"meta":48,"style":48},[27,3604,3605,3617,3625,3633,3641,3645,3659,3673,3677,3681,3695,3703,3707,3711,3715,3719,3743,3747,3753,3757,3763,3767,3771],{"__ignoreMap":48},[52,3606,3607,3609,3611,3613,3615],{"class":54,"line":55},[52,3608,449],{"class":202},[52,3610,452],{"class":202},[52,3612,455],{"class":235},[52,3614,238],{"class":98},[52,3616,241],{"class":65},[52,3618,3619,3621,3623],{"class":54,"line":62},[52,3620,464],{"class":69},[52,3622,250],{"class":65},[52,3624,469],{"class":65},[52,3626,3627,3629,3631],{"class":54,"line":76},[52,3628,474],{"class":69},[52,3630,250],{"class":65},[52,3632,469],{"class":65},[52,3634,3635,3637,3639],{"class":54,"line":87},[52,3636,483],{"class":69},[52,3638,250],{"class":65},[52,3640,253],{"class":98},[52,3642,3643],{"class":54,"line":109},[52,3644,492],{"class":65},[52,3646,3647,3649,3651,3653,3655,3657],{"class":54,"line":148},[52,3648,497],{"class":69},[52,3650,250],{"class":65},[52,3652,218],{"class":65},[52,3654,272],{"class":127},[52,3656,275],{"class":65},[52,3658,278],{"class":65},[52,3660,3661,3663,3665,3667,3669,3671],{"class":54,"line":158},[52,3662,512],{"class":69},[52,3664,250],{"class":65},[52,3666,218],{"class":65},[52,3668,291],{"class":127},[52,3670,275],{"class":65},[52,3672,278],{"class":65},[52,3674,3675],{"class":54,"line":167},[52,3676,527],{"class":65},[52,3678,3679],{"class":54,"line":174},[52,3680,492],{"class":65},[52,3682,3683,3685,3687,3689,3691,3693],{"class":54,"line":199},[52,3684,512],{"class":69},[52,3686,250],{"class":65},[52,3688,218],{"class":65},[52,3690,318],{"class":127},[52,3692,275],{"class":65},[52,3694,278],{"class":65},[52,3696,3697,3699,3701],{"class":54,"line":227},[52,3698,550],{"class":69},[52,3700,250],{"class":65},[52,3702,333],{"class":65},[52,3704,3705],{"class":54,"line":232},[52,3706,559],{"class":127},[52,3708,3709],{"class":54,"line":244},[52,3710,564],{"class":127},[52,3712,3713],{"class":54,"line":256},[52,3714,569],{"class":127},[52,3716,3717],{"class":54,"line":262},[52,3718,574],{"class":127},[52,3720,3721,3723,3725,3727,3729,3731,3733,3735,3737,3739,3741],{"class":54,"line":281},[52,3722,579],{"class":127},[52,3724,366],{"class":65},[52,3726,203],{"class":202},[52,3728,34],{"class":65},[52,3730,373],{"class":98},[52,3732,34],{"class":65},[52,3734,378],{"class":98},[52,3736,34],{"class":65},[52,3738,383],{"class":98},[52,3740,386],{"class":65},[52,3742,224],{"class":127},[52,3744,3745],{"class":54,"line":298},[52,3746,604],{"class":127},[52,3748,3749,3751],{"class":54,"line":304},[52,3750,609],{"class":65},[52,3752,278],{"class":65},[52,3754,3755],{"class":54,"line":309},[52,3756,527],{"class":65},[52,3758,3759,3761],{"class":54,"line":325},[52,3760,620],{"class":98},[52,3762,278],{"class":65},[52,3764,3765],{"class":54,"line":336},[52,3766,301],{"class":65},[52,3768,3769],{"class":54,"line":342},[52,3770,631],{"class":65},[52,3772,3773,3775],{"class":54,"line":348},[52,3774,386],{"class":65},[52,3776,423],{"class":98},[19,3778,3780],{"id":3779},"_2-create-the-wrapper-component","2. Create the Wrapper Component",[43,3782,3784],{"className":45,"code":3783,"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,3785,3786,3790,3798,3806,3834,3860,3868,3876,3880,3900,3912,3920,3928,3934,3938,3952,3972,3986,4000,4008,4012,4026,4040,4044,4050,4056,4060],{"__ignoreMap":48},[52,3787,3788],{"class":54,"line":55},[52,3789,651],{"class":58},[52,3791,3792,3794,3796],{"class":54,"line":62},[52,3793,66],{"class":65},[52,3795,70],{"class":69},[52,3797,73],{"class":65},[52,3799,3800,3802,3804],{"class":54,"line":76},[52,3801,79],{"class":65},[52,3803,82],{"class":69},[52,3805,73],{"class":65},[52,3807,3808,3810,3812,3814,3816,3818,3820,3822,3824,3826,3828,3830,3832],{"class":54,"line":87},[52,3809,90],{"class":65},[52,3811,82],{"class":69},[52,3813,676],{"class":117},[52,3815,121],{"class":65},[52,3817,124],{"class":65},[52,3819,683],{"class":127},[52,3821,124],{"class":65},[52,3823,688],{"class":117},[52,3825,121],{"class":65},[52,3827,124],{"class":65},[52,3829,695],{"class":127},[52,3831,124],{"class":65},[52,3833,145],{"class":65},[52,3835,3836,3838,3840,3842,3844,3846,3848,3850,3852,3854,3856,3858],{"class":54,"line":109},[52,3837,90],{"class":65},[52,3839,706],{"class":69},[52,3841,709],{"class":117},[52,3843,121],{"class":65},[52,3845,124],{"class":65},[52,3847,716],{"class":127},[52,3849,124],{"class":65},[52,3851,95],{"class":65},[52,3853,2951],{"class":98},[52,3855,102],{"class":65},[52,3857,706],{"class":69},[52,3859,73],{"class":65},[52,3861,3862,3864,3866],{"class":54,"line":148},[52,3863,151],{"class":65},[52,3865,82],{"class":69},[52,3867,73],{"class":65},[52,3869,3870,3872,3874],{"class":54,"line":158},[52,3871,102],{"class":65},[52,3873,70],{"class":69},[52,3875,73],{"class":65},[52,3877,3878],{"class":54,"line":167},[52,3879,171],{"emptyLinePlaceholder":170},[52,3881,3882,3884,3886,3888,3890,3892,3894,3896,3898],{"class":54,"line":174},[52,3883,66],{"class":65},[52,3885,179],{"class":69},[52,3887,182],{"class":117},[52,3889,185],{"class":117},[52,3891,121],{"class":65},[52,3893,124],{"class":65},[52,3895,192],{"class":127},[52,3897,124],{"class":65},[52,3899,73],{"class":65},[52,3901,3902,3904,3906,3908,3910],{"class":54,"line":199},[52,3903,774],{"class":117},[52,3905,777],{"class":98},[52,3907,121],{"class":65},[52,3909,782],{"class":235},[52,3911,785],{"class":65},[52,3913,3914,3916,3918],{"class":54,"line":227},[52,3915,790],{"class":69},[52,3917,250],{"class":65},[52,3919,796],{"class":795},[52,3921,3922,3924,3926],{"class":54,"line":232},[52,3923,801],{"class":69},[52,3925,250],{"class":65},[52,3927,796],{"class":795},[52,3929,3930,3932],{"class":54,"line":244},[52,3931,810],{"class":65},[52,3933,813],{"class":98},[52,3935,3936],{"class":54,"line":256},[52,3937,171],{"emptyLinePlaceholder":170},[52,3939,3940,3942,3944,3946,3948,3950],{"class":54,"line":262},[52,3941,774],{"class":117},[52,3943,824],{"class":98},[52,3945,121],{"class":65},[52,3947,829],{"class":65},[52,3949,832],{"class":117},[52,3951,469],{"class":65},[52,3953,3954,3956,3958,3960,3962,3964,3966,3968,3970],{"class":54,"line":281},[52,3955,839],{"class":98},[52,3957,34],{"class":65},[52,3959,844],{"class":235},[52,3961,238],{"class":69},[52,3963,275],{"class":65},[52,3965,851],{"class":127},[52,3967,275],{"class":65},[52,3969,856],{"class":65},[52,3971,469],{"class":65},[52,3973,3974,3976,3978,3980,3982,3984],{"class":54,"line":298},[52,3975,863],{"class":69},[52,3977,250],{"class":65},[52,3979,218],{"class":65},[52,3981,683],{"class":127},[52,3983,275],{"class":65},[52,3985,278],{"class":65},[52,3987,3988,3990,3992,3994,3996,3998],{"class":54,"line":304},[52,3989,878],{"class":69},[52,3991,250],{"class":65},[52,3993,218],{"class":65},[52,3995,885],{"class":127},[52,3997,275],{"class":65},[52,3999,278],{"class":65},[52,4001,4002,4004,4006],{"class":54,"line":309},[52,4003,894],{"class":69},[52,4005,250],{"class":65},[52,4007,253],{"class":69},[52,4009,4010],{"class":54,"line":325},[52,4011,903],{"class":65},[52,4013,4014,4016,4018,4020,4022,4024],{"class":54,"line":336},[52,4015,908],{"class":69},[52,4017,250],{"class":65},[52,4019,913],{"class":98},[52,4021,34],{"class":65},[52,4023,918],{"class":98},[52,4025,278],{"class":65},[52,4027,4028,4030,4032,4034,4036,4038],{"class":54,"line":342},[52,4029,925],{"class":69},[52,4031,250],{"class":65},[52,4033,913],{"class":98},[52,4035,34],{"class":65},[52,4037,934],{"class":98},[52,4039,278],{"class":65},[52,4041,4042],{"class":54,"line":348},[52,4043,941],{"class":65},[52,4045,4046,4048],{"class":54,"line":354},[52,4047,946],{"class":69},[52,4049,278],{"class":65},[52,4051,4052,4054],{"class":54,"line":360},[52,4053,953],{"class":65},[52,4055,423],{"class":69},[52,4057,4058],{"class":54,"line":391},[52,4059,960],{"class":65},[52,4061,4062,4064,4066],{"class":54,"line":397},[52,4063,102],{"class":65},[52,4065,179],{"class":69},[52,4067,73],{"class":65},[19,4069,3245],{"id":3244},[15,4071,4072,4073,250],{},"Add to ",[27,4074,978],{},[43,4076,4077],{"className":981,"code":982,"language":983,"meta":48,"style":48},[27,4078,4079],{"__ignoreMap":48},[52,4080,4081,4083,4085],{"class":54,"line":55},[52,4082,383],{"class":98},[52,4084,121],{"class":65},[52,4086,994],{"class":127},[996,4088,998],{},{"title":48,"searchDepth":62,"depth":62,"links":4090},[4091,4097,4098],{"id":3297,"depth":62,"text":3298,"children":4092},[4093,4095],{"id":3309,"depth":76,"text":4094},"Option A — Per Page with useHead",{"id":3597,"depth":76,"text":4096},"Option B — Global in nuxt.config.ts",{"id":3779,"depth":62,"text":3780},{"id":3244,"depth":62,"text":3245},"Integrate with a Nuxt 3 \u002F Nuxt 4 app",{},"\u002Fen\u002Fintegrations\u002Fnuxt",{"title":5,"description":4099},"en\u002Fintegrations\u002Fnuxt","3xlJgokLPj3qTkGk4XWJ2RH_Ar2hK0jHeC6j3_o9shE",{"id":4106,"title":4107,"body":4108,"description":4992,"extension":1010,"icon":4993,"meta":4994,"navigation":170,"path":4995,"seo":4996,"stem":4997,"__hash__":4998},"content\u002Fen\u002Fintegrations\u002Freact.md","React",{"type":7,"value":4109,"toc":4987},[4110,4114,4117,4121,4127,4312,4322,4326,4646,4650,4984],[10,4111,4113],{"id":4112},"react-integration","React Integration",[15,4115,4116],{},"Works with any React setup — Vite, Create React App, or custom.",[19,4118,4120],{"id":4119},"_1-load-the-widget-script","1. Load the Widget Script",[15,4122,4123,4124,250],{},"Add the script to your ",[27,4125,4126],{},"index.html",[43,4128,4130],{"className":1772,"code":4129,"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,4131,4132,4137,4143,4155,4167,4175,4193,4217,4259,4263,4283,4296,4304],{"__ignoreMap":48},[52,4133,4134],{"class":54,"line":55},[52,4135,4136],{"class":58},"\u003C!-- In public\u002Findex.html or index.html (Vite) -->\n",[52,4138,4139,4141],{"class":54,"line":62},[52,4140,66],{"class":65},[52,4142,1783],{"class":69},[52,4144,4145,4147,4149,4151,4153],{"class":54,"line":76},[52,4146,1788],{"class":117},[52,4148,121],{"class":65},[52,4150,124],{"class":65},[52,4152,272],{"class":127},[52,4154,1797],{"class":65},[52,4156,4157,4159,4161,4163,4165],{"class":54,"line":87},[52,4158,1802],{"class":117},[52,4160,121],{"class":65},[52,4162,124],{"class":65},[52,4164,291],{"class":127},[52,4166,1797],{"class":65},[52,4168,4169,4171,4173],{"class":54,"line":109},[52,4170,1815],{"class":65},[52,4172,179],{"class":69},[52,4174,73],{"class":65},[52,4176,4177,4179,4181,4183,4185,4187,4189,4191],{"class":54,"line":148},[52,4178,66],{"class":65},[52,4180,179],{"class":69},[52,4182,676],{"class":117},[52,4184,121],{"class":65},[52,4186,124],{"class":65},[52,4188,318],{"class":127},[52,4190,124],{"class":65},[52,4192,73],{"class":65},[52,4194,4195,4197,4199,4201,4203,4205,4207,4209,4211,4213,4215],{"class":54,"line":158},[52,4196,839],{"class":98},[52,4198,34],{"class":65},[52,4200,1855],{"class":98},[52,4202,121],{"class":65},[52,4204,1860],{"class":98},[52,4206,34],{"class":65},[52,4208,1855],{"class":98},[52,4210,1867],{"class":65},[52,4212,1870],{"class":117},[52,4214,1873],{"class":65},[52,4216,469],{"class":65},[52,4218,4219,4221,4223,4225,4227,4229,4231,4233,4235,4237,4239,4241,4243,4245,4247,4249,4251,4253,4255,4257],{"class":54,"line":167},[52,4220,1880],{"class":69},[52,4222,1089],{"class":98},[52,4224,34],{"class":65},[52,4226,844],{"class":98},[52,4228,34],{"class":65},[52,4230,1891],{"class":98},[52,4232,1894],{"class":65},[52,4234,1860],{"class":98},[52,4236,34],{"class":65},[52,4238,844],{"class":98},[52,4240,34],{"class":65},[52,4242,1891],{"class":98},[52,4244,1907],{"class":65},[52,4246,1910],{"class":69},[52,4248,34],{"class":65},[52,4250,1915],{"class":235},[52,4252,238],{"class":69},[52,4254,1920],{"class":98},[52,4256,1129],{"class":69},[52,4258,1132],{"class":65},[52,4260,4261],{"class":54,"line":174},[52,4262,1929],{"class":65},[52,4264,4265,4267,4269,4271,4273,4275,4277,4279,4281],{"class":54,"line":199},[52,4266,839],{"class":98},[52,4268,34],{"class":65},[52,4270,844],{"class":235},[52,4272,238],{"class":98},[52,4274,275],{"class":65},[52,4276,1100],{"class":127},[52,4278,275],{"class":65},[52,4280,856],{"class":65},[52,4282,469],{"class":65},[52,4284,4285,4287,4289,4291,4294],{"class":54,"line":227},[52,4286,1954],{"class":69},[52,4288,250],{"class":65},[52,4290,218],{"class":65},[52,4292,4293],{"class":127},"%VITE_TRY_ON_API_KEY%",[52,4295,224],{"class":65},[52,4297,4298,4300,4302],{"class":54,"line":232},[52,4299,953],{"class":65},[52,4301,1129],{"class":98},[52,4303,1132],{"class":65},[52,4305,4306,4308,4310],{"class":54,"line":244},[52,4307,102],{"class":65},[52,4309,179],{"class":69},[52,4311,73],{"class":65},[4313,4314,4316],"callout",{"icon":4315},"i-lucide-lightbulb",[15,4317,4318,4319,4321],{},"Replace ",[27,4320,4293],{}," at build time with your actual key, or use a runtime injection approach.",[19,4323,4325],{"id":4324},"_2-create-a-custom-hook","2. Create a Custom Hook",[43,4327,4329],{"className":2324,"code":4328,"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,4330,4331,4336,4344,4354,4364,4375,4379,4383,4392,4402,4435,4448,4452,4456,4464,4472,4502,4506,4510,4514,4527,4551,4575,4579,4583,4598,4619,4623,4627,4642],{"__ignoreMap":48},[52,4332,4333],{"class":54,"line":55},[52,4334,4335],{"class":58},"\u002F\u002F hooks\u002FuseFittingWidget.ts\n",[52,4337,4338,4340,4342],{"class":54,"line":62},[52,4339,2627],{"class":117},[52,4341,2630],{"class":795},[52,4343,469],{"class":65},[52,4345,4346,4348,4350,4352],{"class":54,"line":76},[52,4347,790],{"class":69},[52,4349,250],{"class":65},[52,4351,2641],{"class":795},[52,4353,1132],{"class":65},[52,4355,4356,4358,4360,4362],{"class":54,"line":87},[52,4357,2648],{"class":69},[52,4359,250],{"class":65},[52,4361,2641],{"class":795},[52,4363,1132],{"class":65},[52,4365,4366,4369,4371,4373],{"class":54,"line":109},[52,4367,4368],{"class":69},"  productId",[52,4370,2707],{"class":65},[52,4372,2641],{"class":795},[52,4374,1132],{"class":65},[52,4376,4377],{"class":54,"line":148},[52,4378,960],{"class":65},[52,4380,4381],{"class":54,"line":158},[52,4382,171],{"emptyLinePlaceholder":170},[52,4384,4385,4387,4390],{"class":54,"line":167},[52,4386,2627],{"class":117},[52,4388,4389],{"class":795}," CreateOptions",[52,4391,469],{"class":65},[52,4393,4394,4396,4398,4400],{"class":54,"line":174},[52,4395,1288],{"class":69},[52,4397,250],{"class":65},[52,4399,2641],{"class":795},[52,4401,1132],{"class":65},[52,4403,4404,4406,4408,4410,4412,4414,4417,4419,4422,4424,4426,4428,4431,4433],{"class":54,"line":199},[52,4405,1303],{"class":69},[52,4407,2707],{"class":65},[52,4409,218],{"class":65},[52,4411,885],{"class":127},[52,4413,275],{"class":65},[52,4415,4416],{"class":65}," |",[52,4418,218],{"class":65},[52,4420,4421],{"class":127},"quality",[52,4423,275],{"class":65},[52,4425,4416],{"class":65},[52,4427,218],{"class":65},[52,4429,4430],{"class":127},"speed",[52,4432,275],{"class":65},[52,4434,1132],{"class":65},[52,4436,4437,4439,4441,4443,4446],{"class":54,"line":227},[52,4438,1318],{"class":69},[52,4440,250],{"class":65},[52,4442,2630],{"class":795},[52,4444,4445],{"class":98},"[]",[52,4447,1132],{"class":65},[52,4449,4450],{"class":54,"line":232},[52,4451,960],{"class":65},[52,4453,4454],{"class":54,"line":244},[52,4455,171],{"emptyLinePlaceholder":170},[52,4457,4458,4460,4462],{"class":54,"line":256},[52,4459,2667],{"class":117},[52,4461,2670],{"class":98},[52,4463,241],{"class":65},[52,4465,4466,4468,4470],{"class":54,"line":262},[52,4467,2677],{"class":117},[52,4469,2680],{"class":795},[52,4471,469],{"class":65},[52,4473,4474,4476,4478,4480,4482,4484,4486,4488,4490,4492,4494,4496,4498,4500],{"class":54,"line":281},[52,4475,2687],{"class":69},[52,4477,250],{"class":65},[52,4479,2692],{"class":65},[52,4481,2695],{"class":2368},[52,4483,250],{"class":65},[52,4485,2641],{"class":795},[52,4487,856],{"class":65},[52,4489,2704],{"class":2368},[52,4491,2707],{"class":65},[52,4493,2710],{"class":795},[52,4495,1129],{"class":65},[52,4497,832],{"class":117},[52,4499,2717],{"class":795},[52,4501,1132],{"class":65},[52,4503,4504],{"class":54,"line":298},[52,4505,2724],{"class":65},[52,4507,4508],{"class":54,"line":304},[52,4509,960],{"class":65},[52,4511,4512],{"class":54,"line":309},[52,4513,171],{"emptyLinePlaceholder":170},[52,4515,4516,4518,4520,4523,4525],{"class":54,"line":325},[52,4517,449],{"class":202},[52,4519,1870],{"class":117},[52,4521,4522],{"class":235}," useFittingWidget",[52,4524,1873],{"class":65},[52,4526,469],{"class":65},[52,4528,4529,4531,4534,4536,4538,4541,4543,4545,4547,4549],{"class":54,"line":336},[52,4530,2769],{"class":117},[52,4532,4533],{"class":98}," open",[52,4535,1894],{"class":65},[52,4537,2692],{"class":65},[52,4539,4540],{"class":2368},"options",[52,4542,250],{"class":65},[52,4544,4389],{"class":795},[52,4546,1129],{"class":65},[52,4548,832],{"class":117},[52,4550,469],{"class":65},[52,4552,4553,4555,4557,4559,4561,4563,4565,4567,4569,4571,4573],{"class":54,"line":342},[52,4554,2785],{"class":98},[52,4556,34],{"class":65},[52,4558,844],{"class":235},[52,4560,238],{"class":69},[52,4562,275],{"class":65},[52,4564,851],{"class":127},[52,4566,275],{"class":65},[52,4568,856],{"class":65},[52,4570,2704],{"class":98},[52,4572,1129],{"class":69},[52,4574,1132],{"class":65},[52,4576,4577],{"class":54,"line":348},[52,4578,1929],{"class":65},[52,4580,4581],{"class":54,"line":354},[52,4582,171],{"emptyLinePlaceholder":170},[52,4584,4585,4587,4590,4592,4594,4596],{"class":54,"line":360},[52,4586,2769],{"class":117},[52,4588,4589],{"class":98}," close",[52,4591,1894],{"class":65},[52,4593,829],{"class":65},[52,4595,832],{"class":117},[52,4597,469],{"class":65},[52,4599,4600,4602,4604,4606,4608,4610,4613,4615,4617],{"class":54,"line":391},[52,4601,2785],{"class":98},[52,4603,34],{"class":65},[52,4605,844],{"class":235},[52,4607,238],{"class":69},[52,4609,275],{"class":65},[52,4611,4612],{"class":127},"close",[52,4614,275],{"class":65},[52,4616,1129],{"class":69},[52,4618,1132],{"class":65},[52,4620,4621],{"class":54,"line":397},[52,4622,1929],{"class":65},[52,4624,4625],{"class":54,"line":405},[52,4626,171],{"emptyLinePlaceholder":170},[52,4628,4629,4631,4633,4635,4637,4639],{"class":54,"line":410},[52,4630,2396],{"class":202},[52,4632,206],{"class":65},[52,4634,4533],{"class":98},[52,4636,856],{"class":65},[52,4638,4589],{"class":98},[52,4640,4641],{"class":65}," };\n",[52,4643,4644],{"class":54,"line":418},[52,4645,960],{"class":65},[19,4647,4649],{"id":4648},"_3-use-in-a-component","3. Use in a Component",[43,4651,4653],{"className":2324,"code":4652,"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,4654,4655,4660,4681,4685,4694,4704,4714,4718,4722,4749,4767,4771,4777,4785,4792,4804,4844,4848,4855,4866,4875,4890,4905,4937,4944,4949,4953,4958,4966,4974,4980],{"__ignoreMap":48},[52,4656,4657],{"class":54,"line":55},[52,4658,4659],{"class":58},"\u002F\u002F components\u002FTryOnWidget.tsx\n",[52,4661,4662,4664,4666,4668,4670,4672,4674,4677,4679],{"class":54,"line":62},[52,4663,203],{"class":202},[52,4665,206],{"class":65},[52,4667,4522],{"class":98},[52,4669,212],{"class":65},[52,4671,215],{"class":202},[52,4673,218],{"class":65},[52,4675,4676],{"class":127},"..\u002Fhooks\u002FuseFittingWidget",[52,4678,275],{"class":65},[52,4680,1132],{"class":65},[52,4682,4683],{"class":54,"line":76},[52,4684,171],{"emptyLinePlaceholder":170},[52,4686,4687,4689,4692],{"class":54,"line":87},[52,4688,2627],{"class":117},[52,4690,4691],{"class":795}," Props",[52,4693,469],{"class":65},[52,4695,4696,4698,4700,4702],{"class":54,"line":109},[52,4697,790],{"class":69},[52,4699,250],{"class":65},[52,4701,2641],{"class":795},[52,4703,1132],{"class":65},[52,4705,4706,4708,4710,4712],{"class":54,"line":148},[52,4707,801],{"class":69},[52,4709,250],{"class":65},[52,4711,2641],{"class":795},[52,4713,1132],{"class":65},[52,4715,4716],{"class":54,"line":158},[52,4717,960],{"class":65},[52,4719,4720],{"class":54,"line":167},[52,4721,171],{"emptyLinePlaceholder":170},[52,4723,4724,4726,4728,4731,4733,4736,4738,4741,4743,4745,4747],{"class":54,"line":174},[52,4725,449],{"class":202},[52,4727,1870],{"class":117},[52,4729,4730],{"class":235}," TryOnWidget",[52,4732,2365],{"class":65},[52,4734,4735],{"class":2368}," productName",[52,4737,856],{"class":65},[52,4739,4740],{"class":2368}," imageUrl",[52,4742,2372],{"class":65},[52,4744,4691],{"class":795},[52,4746,1129],{"class":65},[52,4748,469],{"class":65},[52,4750,4751,4753,4755,4757,4759,4761,4763,4765],{"class":54,"line":199},[52,4752,2769],{"class":117},[52,4754,206],{"class":65},[52,4756,4533],{"class":98},[52,4758,212],{"class":65},[52,4760,1894],{"class":65},[52,4762,4522],{"class":235},[52,4764,1873],{"class":69},[52,4766,1132],{"class":65},[52,4768,4769],{"class":54,"line":227},[52,4770,171],{"emptyLinePlaceholder":170},[52,4772,4773,4775],{"class":54,"line":232},[52,4774,2396],{"class":202},[52,4776,2399],{"class":69},[52,4778,4779,4781,4783],{"class":54,"line":244},[52,4780,90],{"class":65},[52,4782,82],{"class":69},[52,4784,73],{"class":65},[52,4786,4787,4789],{"class":54,"line":256},[52,4788,2423],{"class":65},[52,4790,4791],{"class":69},"div\n",[52,4793,4794,4796,4798,4800,4802],{"class":54,"line":262},[52,4795,2458],{"class":117},[52,4797,121],{"class":65},[52,4799,124],{"class":65},[52,4801,683],{"class":127},[52,4803,1797],{"class":65},[52,4805,4806,4809,4811,4813,4815,4817,4819,4821,4823,4825,4827,4829,4831,4833,4835,4837,4839,4841],{"class":54,"line":281},[52,4807,4808],{"class":117},"        style",[52,4810,2891],{"class":65},[52,4812,2894],{"class":69},[52,4814,250],{"class":65},[52,4816,218],{"class":65},[52,4818,2901],{"class":127},[52,4820,275],{"class":65},[52,4822,856],{"class":65},[52,4824,2908],{"class":69},[52,4826,250],{"class":65},[52,4828,2914],{"class":2913},[52,4830,856],{"class":65},[52,4832,2919],{"class":69},[52,4834,250],{"class":65},[52,4836,218],{"class":65},[52,4838,2926],{"class":127},[52,4840,275],{"class":65},[52,4842,4843],{"class":65}," }}\n",[52,4845,4846],{"class":54,"line":298},[52,4847,2471],{"class":65},[52,4849,4850,4852],{"class":54,"line":304},[52,4851,2423],{"class":65},[52,4853,4854],{"class":69},"button\n",[52,4856,4857,4860,4863],{"class":54,"line":309},[52,4858,4859],{"class":117},"        onClick",[52,4861,4862],{"class":65},"={()",[52,4864,4865],{"class":117}," =>\n",[52,4867,4868,4871,4873],{"class":54,"line":325},[52,4869,4870],{"class":235},"          open",[52,4872,238],{"class":98},[52,4874,241],{"class":65},[52,4876,4877,4880,4882,4884,4886,4888],{"class":54,"line":336},[52,4878,4879],{"class":69},"            targetElementId",[52,4881,250],{"class":65},[52,4883,218],{"class":65},[52,4885,683],{"class":127},[52,4887,275],{"class":65},[52,4889,278],{"class":65},[52,4891,4892,4895,4897,4899,4901,4903],{"class":54,"line":342},[52,4893,4894],{"class":69},"            model",[52,4896,250],{"class":65},[52,4898,218],{"class":65},[52,4900,885],{"class":127},[52,4902,275],{"class":65},[52,4904,278],{"class":65},[52,4906,4907,4910,4912,4915,4918,4920,4922,4925,4927,4930,4932,4935],{"class":54,"line":348},[52,4908,4909],{"class":69},"            tryonItems",[52,4911,250],{"class":65},[52,4913,4914],{"class":98}," [",[52,4916,4917],{"class":65},"{",[52,4919,4735],{"class":98},[52,4921,856],{"class":65},[52,4923,4924],{"class":69}," url",[52,4926,250],{"class":65},[52,4928,4929],{"class":98}," imageUrl ",[52,4931,386],{"class":65},[52,4933,4934],{"class":98},"]",[52,4936,278],{"class":65},[52,4938,4939,4942],{"class":54,"line":354},[52,4940,4941],{"class":65},"          }",[52,4943,423],{"class":98},[52,4945,4946],{"class":54,"line":360},[52,4947,4948],{"class":65},"        }\n",[52,4950,4951],{"class":54,"line":391},[52,4952,2510],{"class":65},[52,4954,4955],{"class":54,"line":397},[52,4956,4957],{"class":98},"        Try On\n",[52,4959,4960,4962,4964],{"class":54,"line":405},[52,4961,2578],{"class":65},[52,4963,706],{"class":69},[52,4965,73],{"class":65},[52,4967,4968,4970,4972],{"class":54,"line":410},[52,4969,3227],{"class":65},[52,4971,82],{"class":69},[52,4973,73],{"class":65},[52,4975,4976,4978],{"class":54,"line":418},[52,4977,2592],{"class":69},[52,4979,1132],{"class":65},[52,4981,4982],{"class":54,"line":426},[52,4983,960],{"class":65},[996,4985,4986],{},"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":4988},[4989,4990,4991],{"id":4119,"depth":62,"text":4120},{"id":4324,"depth":62,"text":4325},{"id":4648,"depth":62,"text":4649},"Integrate with a React (Vite \u002F CRA) app","i-lucide-react",{},"\u002Fen\u002Fintegrations\u002Freact",{"title":4107,"description":4992},"en\u002Fintegrations\u002Freact","pb3AGE_nU_OjJFKOaRsB1vUMbyzjRuGZlTgplr5i71Q",{"id":5000,"title":5001,"body":5002,"description":5672,"extension":1010,"icon":5673,"meta":5674,"navigation":170,"path":5675,"seo":5676,"stem":5677,"__hash__":5678},"content\u002Fen\u002Fintegrations\u002Fvanilla-js.md","Vanilla JS",{"type":7,"value":5003,"toc":5668},[5004,5008,5011,5015,5642,5646,5665],[10,5005,5007],{"id":5006},"vanilla-js-integration","Vanilla JS Integration",[15,5009,5010],{},"No framework needed — just HTML and JavaScript.",[19,5012,5014],{"id":5013},"full-example","Full Example",[43,5016,5018],{"className":1772,"code":5017,"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,5019,5020,5033,5052,5061,5081,5113,5131,5139,5148,5152,5168,5185,5189,5194,5227,5231,5261,5265,5270,5276,5289,5302,5311,5315,5320,5338,5362,5405,5410,5430,5443,5451,5460,5465,5474,5487,5509,5525,5541,5551,5556,5571,5587,5592,5599,5609,5615,5624,5633],{"__ignoreMap":48},[52,5021,5022,5025,5028,5031],{"class":54,"line":55},[52,5023,5024],{"class":65},"\u003C!",[52,5026,5027],{"class":69},"DOCTYPE",[52,5029,5030],{"class":117}," html",[52,5032,73],{"class":65},[52,5034,5035,5037,5039,5041,5043,5045,5048,5050],{"class":54,"line":62},[52,5036,66],{"class":65},[52,5038,1774],{"class":69},[52,5040,185],{"class":117},[52,5042,121],{"class":65},[52,5044,124],{"class":65},[52,5046,5047],{"class":127},"en",[52,5049,124],{"class":65},[52,5051,73],{"class":65},[52,5053,5054,5056,5059],{"class":54,"line":76},[52,5055,66],{"class":65},[52,5057,5058],{"class":69},"head",[52,5060,73],{"class":65},[52,5062,5063,5065,5067,5070,5072,5074,5077,5079],{"class":54,"line":87},[52,5064,79],{"class":65},[52,5066,373],{"class":69},[52,5068,5069],{"class":117}," charset",[52,5071,121],{"class":65},[52,5073,124],{"class":65},[52,5075,5076],{"class":127},"UTF-8",[52,5078,124],{"class":65},[52,5080,145],{"class":65},[52,5082,5083,5085,5087,5090,5092,5094,5097,5099,5102,5104,5106,5109,5111],{"class":54,"line":109},[52,5084,79],{"class":65},[52,5086,373],{"class":69},[52,5088,5089],{"class":117}," name",[52,5091,121],{"class":65},[52,5093,124],{"class":65},[52,5095,5096],{"class":127},"viewport",[52,5098,124],{"class":65},[52,5100,5101],{"class":117}," content",[52,5103,121],{"class":65},[52,5105,124],{"class":65},[52,5107,5108],{"class":127},"width=device-width, initial-scale=1.0",[52,5110,124],{"class":65},[52,5112,145],{"class":65},[52,5114,5115,5117,5120,5122,5125,5127,5129],{"class":54,"line":148},[52,5116,79],{"class":65},[52,5118,5119],{"class":69},"title",[52,5121,95],{"class":65},[52,5123,5124],{"class":98},"Product Page — Virtual Try-On",[52,5126,102],{"class":65},[52,5128,5119],{"class":69},[52,5130,73],{"class":65},[52,5132,5133,5135,5137],{"class":54,"line":158},[52,5134,102],{"class":65},[52,5136,5058],{"class":69},[52,5138,73],{"class":65},[52,5140,5141,5143,5146],{"class":54,"line":167},[52,5142,66],{"class":65},[52,5144,5145],{"class":69},"body",[52,5147,73],{"class":65},[52,5149,5150],{"class":54,"line":174},[52,5151,171],{"emptyLinePlaceholder":170},[52,5153,5154,5156,5158,5160,5162,5164,5166],{"class":54,"line":199},[52,5155,79],{"class":65},[52,5157,10],{"class":69},[52,5159,95],{"class":65},[52,5161,2103],{"class":98},[52,5163,102],{"class":65},[52,5165,10],{"class":69},[52,5167,73],{"class":65},[52,5169,5170,5172,5174,5176,5179,5181,5183],{"class":54,"line":227},[52,5171,79],{"class":65},[52,5173,15],{"class":69},[52,5175,95],{"class":65},[52,5177,5178],{"class":98},"$89.00",[52,5180,102],{"class":65},[52,5182,15],{"class":69},[52,5184,73],{"class":65},[52,5186,5187],{"class":54,"line":232},[52,5188,171],{"emptyLinePlaceholder":170},[52,5190,5191],{"class":54,"line":244},[52,5192,5193],{"class":58},"  \u003C!-- Widget container -->\n",[52,5195,5196,5198,5200,5202,5204,5206,5208,5210,5212,5214,5216,5219,5221,5223,5225],{"class":54,"line":256},[52,5197,79],{"class":65},[52,5199,82],{"class":69},[52,5201,676],{"class":117},[52,5203,121],{"class":65},[52,5205,124],{"class":65},[52,5207,683],{"class":127},[52,5209,124],{"class":65},[52,5211,2888],{"class":117},[52,5213,121],{"class":65},[52,5215,124],{"class":65},[52,5217,5218],{"class":127},"width: 100%; max-width: 600px; aspect-ratio: 3 \u002F 4;",[52,5220,124],{"class":65},[52,5222,1815],{"class":65},[52,5224,82],{"class":69},[52,5226,73],{"class":65},[52,5228,5229],{"class":54,"line":262},[52,5230,171],{"emptyLinePlaceholder":170},[52,5232,5233,5235,5237,5240,5242,5244,5247,5249,5251,5253,5255,5257,5259],{"class":54,"line":281},[52,5234,79],{"class":65},[52,5236,706],{"class":69},[52,5238,5239],{"class":117}," onclick",[52,5241,121],{"class":65},[52,5243,124],{"class":65},[52,5245,5246],{"class":235},"openWidget",[52,5248,1873],{"class":127},[52,5250,124],{"class":65},[52,5252,95],{"class":65},[52,5254,2951],{"class":98},[52,5256,102],{"class":65},[52,5258,706],{"class":69},[52,5260,73],{"class":65},[52,5262,5263],{"class":54,"line":298},[52,5264,171],{"emptyLinePlaceholder":170},[52,5266,5267],{"class":54,"line":304},[52,5268,5269],{"class":58},"  \u003C!-- 1. Load the widget bundle -->\n",[52,5271,5272,5274],{"class":54,"line":309},[52,5273,79],{"class":65},[52,5275,1783],{"class":69},[52,5277,5278,5281,5283,5285,5287],{"class":54,"line":325},[52,5279,5280],{"class":117},"    src",[52,5282,121],{"class":65},[52,5284,124],{"class":65},[52,5286,272],{"class":127},[52,5288,1797],{"class":65},[52,5290,5291,5294,5296,5298,5300],{"class":54,"line":336},[52,5292,5293],{"class":117},"    id",[52,5295,121],{"class":65},[52,5297,124],{"class":65},[52,5299,291],{"class":127},[52,5301,1797],{"class":65},[52,5303,5304,5307,5309],{"class":54,"line":342},[52,5305,5306],{"class":65},"  >\u003C\u002F",[52,5308,179],{"class":69},[52,5310,73],{"class":65},[52,5312,5313],{"class":54,"line":348},[52,5314,171],{"emptyLinePlaceholder":170},[52,5316,5317],{"class":54,"line":354},[52,5318,5319],{"class":58},"  \u003C!-- 2. Initialize -->\n",[52,5321,5322,5324,5326,5328,5330,5332,5334,5336],{"class":54,"line":360},[52,5323,79],{"class":65},[52,5325,179],{"class":69},[52,5327,676],{"class":117},[52,5329,121],{"class":65},[52,5331,124],{"class":65},[52,5333,318],{"class":127},[52,5335,124],{"class":65},[52,5337,73],{"class":65},[52,5339,5340,5342,5344,5346,5348,5350,5352,5354,5356,5358,5360],{"class":54,"line":391},[52,5341,2785],{"class":98},[52,5343,34],{"class":65},[52,5345,1855],{"class":98},[52,5347,121],{"class":65},[52,5349,1860],{"class":98},[52,5351,34],{"class":65},[52,5353,1855],{"class":98},[52,5355,1867],{"class":65},[52,5357,1870],{"class":117},[52,5359,1873],{"class":65},[52,5361,469],{"class":65},[52,5363,5364,5367,5369,5371,5373,5375,5377,5379,5381,5383,5385,5387,5389,5391,5393,5395,5397,5399,5401,5403],{"class":54,"line":397},[52,5365,5366],{"class":69},"      (",[52,5368,1089],{"class":98},[52,5370,34],{"class":65},[52,5372,844],{"class":98},[52,5374,34],{"class":65},[52,5376,1891],{"class":98},[52,5378,1894],{"class":65},[52,5380,1860],{"class":98},[52,5382,34],{"class":65},[52,5384,844],{"class":98},[52,5386,34],{"class":65},[52,5388,1891],{"class":98},[52,5390,1907],{"class":65},[52,5392,1910],{"class":69},[52,5394,34],{"class":65},[52,5396,1915],{"class":235},[52,5398,238],{"class":69},[52,5400,1920],{"class":98},[52,5402,1129],{"class":69},[52,5404,1132],{"class":65},[52,5406,5407],{"class":54,"line":405},[52,5408,5409],{"class":65},"    };\n",[52,5411,5412,5414,5416,5418,5420,5422,5424,5426,5428],{"class":54,"line":410},[52,5413,2785],{"class":98},[52,5415,34],{"class":65},[52,5417,844],{"class":235},[52,5419,238],{"class":98},[52,5421,275],{"class":65},[52,5423,1100],{"class":127},[52,5425,275],{"class":65},[52,5427,856],{"class":65},[52,5429,469],{"class":65},[52,5431,5432,5435,5437,5439,5441],{"class":54,"line":418},[52,5433,5434],{"class":69},"      apiKey",[52,5436,250],{"class":65},[52,5438,218],{"class":65},[52,5440,1961],{"class":127},[52,5442,224],{"class":65},[52,5444,5445,5447,5449],{"class":54,"line":426},[52,5446,2847],{"class":65},[52,5448,1129],{"class":98},[52,5450,1132],{"class":65},[52,5452,5454,5456,5458],{"class":54,"line":5453},32,[52,5455,151],{"class":65},[52,5457,179],{"class":69},[52,5459,73],{"class":65},[52,5461,5463],{"class":54,"line":5462},33,[52,5464,171],{"emptyLinePlaceholder":170},[52,5466,5468,5470,5472],{"class":54,"line":5467},34,[52,5469,79],{"class":65},[52,5471,179],{"class":69},[52,5473,73],{"class":65},[52,5475,5477,5480,5483,5485],{"class":54,"line":5476},35,[52,5478,5479],{"class":117},"    function",[52,5481,5482],{"class":235}," openWidget",[52,5484,1873],{"class":65},[52,5486,469],{"class":65},[52,5488,5490,5493,5495,5497,5499,5501,5503,5505,5507],{"class":54,"line":5489},36,[52,5491,5492],{"class":98},"      window",[52,5494,34],{"class":65},[52,5496,844],{"class":235},[52,5498,238],{"class":69},[52,5500,275],{"class":65},[52,5502,851],{"class":127},[52,5504,275],{"class":65},[52,5506,856],{"class":65},[52,5508,469],{"class":65},[52,5510,5512,5515,5517,5519,5521,5523],{"class":54,"line":5511},37,[52,5513,5514],{"class":69},"        targetElementId",[52,5516,250],{"class":65},[52,5518,218],{"class":65},[52,5520,683],{"class":127},[52,5522,275],{"class":65},[52,5524,278],{"class":65},[52,5526,5528,5531,5533,5535,5537,5539],{"class":54,"line":5527},38,[52,5529,5530],{"class":69},"        model",[52,5532,250],{"class":65},[52,5534,218],{"class":65},[52,5536,885],{"class":127},[52,5538,275],{"class":65},[52,5540,278],{"class":65},[52,5542,5544,5547,5549],{"class":54,"line":5543},39,[52,5545,5546],{"class":69},"        tryonItems",[52,5548,250],{"class":65},[52,5550,253],{"class":69},[52,5552,5554],{"class":54,"line":5553},40,[52,5555,3176],{"class":65},[52,5557,5559,5561,5563,5565,5567,5569],{"class":54,"line":5558},41,[52,5560,3181],{"class":69},[52,5562,250],{"class":65},[52,5564,218],{"class":65},[52,5566,2103],{"class":127},[52,5568,275],{"class":65},[52,5570,278],{"class":65},[52,5572,5574,5576,5578,5580,5583,5585],{"class":54,"line":5573},42,[52,5575,3196],{"class":69},[52,5577,250],{"class":65},[52,5579,218],{"class":65},[52,5581,5582],{"class":127},"https:\u002F\u002Fexample.com\u002Fimages\u002Fjacket.jpg",[52,5584,275],{"class":65},[52,5586,278],{"class":65},[52,5588,5590],{"class":54,"line":5589},43,[52,5591,3211],{"class":65},[52,5593,5595,5597],{"class":54,"line":5594},44,[52,5596,3216],{"class":69},[52,5598,278],{"class":65},[52,5600,5602,5605,5607],{"class":54,"line":5601},45,[52,5603,5604],{"class":65},"      }",[52,5606,1129],{"class":69},[52,5608,1132],{"class":65},[52,5610,5612],{"class":54,"line":5611},46,[52,5613,5614],{"class":65},"    }\n",[52,5616,5618,5620,5622],{"class":54,"line":5617},47,[52,5619,151],{"class":65},[52,5621,179],{"class":69},[52,5623,73],{"class":65},[52,5625,5627,5629,5631],{"class":54,"line":5626},48,[52,5628,102],{"class":65},[52,5630,5145],{"class":69},[52,5632,73],{"class":65},[52,5634,5636,5638,5640],{"class":54,"line":5635},49,[52,5637,102],{"class":65},[52,5639,1774],{"class":69},[52,5641,73],{"class":65},[19,5643,5645],{"id":5644},"key-points","Key Points",[2153,5647,5648,5651,5660],{},[2156,5649,5650],{},"Load the bundle script first.",[2156,5652,5653,5654,5657,5658,34],{},"Initialize with ",[27,5655,5656],{},"window.fitting('init', { apiKey })"," before calling ",[27,5659,851],{},[2156,5661,2198,5662,5664],{},[27,5663,1165],{}," must match an existing element on the page.",[996,5666,5667],{},"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":5669},[5670,5671],{"id":5013,"depth":62,"text":5014},{"id":5644,"depth":62,"text":5645},"Integrate with plain HTML\u002FJavaScript","i-lucide-file-code",{},"\u002Fen\u002Fintegrations\u002Fvanilla-js",{"title":5001,"description":5672},"en\u002Fintegrations\u002Fvanilla-js","Ts8msIFer-tIlPDRwRbkNZSpWu0JrTJP8uMKqB57tJQ",{"id":5680,"title":5681,"body":5682,"description":6527,"extension":1010,"icon":6528,"meta":6529,"navigation":170,"path":6530,"seo":6531,"stem":6532,"__hash__":6533},"content\u002Fen\u002Fintegrations\u002Fvue.md","Vue 3",{"type":7,"value":5683,"toc":6522},[5684,5688,5691,5693,5698,5877,5881,6179,6183,6519],[10,5685,5687],{"id":5686},"vue-3-integration","Vue 3 Integration",[15,5689,5690],{},"Works with Vue 3 + Vite or any Vue 3 setup.",[19,5692,4120],{"id":4119},[15,5694,5695,5696,250],{},"In ",[27,5697,4126],{},[43,5699,5701],{"className":1772,"code":5700,"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,5702,5703,5709,5721,5733,5741,5759,5783,5825,5829,5849,5861,5869],{"__ignoreMap":48},[52,5704,5705,5707],{"class":54,"line":55},[52,5706,66],{"class":65},[52,5708,1783],{"class":69},[52,5710,5711,5713,5715,5717,5719],{"class":54,"line":62},[52,5712,1788],{"class":117},[52,5714,121],{"class":65},[52,5716,124],{"class":65},[52,5718,272],{"class":127},[52,5720,1797],{"class":65},[52,5722,5723,5725,5727,5729,5731],{"class":54,"line":76},[52,5724,1802],{"class":117},[52,5726,121],{"class":65},[52,5728,124],{"class":65},[52,5730,291],{"class":127},[52,5732,1797],{"class":65},[52,5734,5735,5737,5739],{"class":54,"line":87},[52,5736,1815],{"class":65},[52,5738,179],{"class":69},[52,5740,73],{"class":65},[52,5742,5743,5745,5747,5749,5751,5753,5755,5757],{"class":54,"line":109},[52,5744,66],{"class":65},[52,5746,179],{"class":69},[52,5748,676],{"class":117},[52,5750,121],{"class":65},[52,5752,124],{"class":65},[52,5754,318],{"class":127},[52,5756,124],{"class":65},[52,5758,73],{"class":65},[52,5760,5761,5763,5765,5767,5769,5771,5773,5775,5777,5779,5781],{"class":54,"line":148},[52,5762,839],{"class":98},[52,5764,34],{"class":65},[52,5766,1855],{"class":98},[52,5768,121],{"class":65},[52,5770,1860],{"class":98},[52,5772,34],{"class":65},[52,5774,1855],{"class":98},[52,5776,1867],{"class":65},[52,5778,1870],{"class":117},[52,5780,1873],{"class":65},[52,5782,469],{"class":65},[52,5784,5785,5787,5789,5791,5793,5795,5797,5799,5801,5803,5805,5807,5809,5811,5813,5815,5817,5819,5821,5823],{"class":54,"line":158},[52,5786,1880],{"class":69},[52,5788,1089],{"class":98},[52,5790,34],{"class":65},[52,5792,844],{"class":98},[52,5794,34],{"class":65},[52,5796,1891],{"class":98},[52,5798,1894],{"class":65},[52,5800,1860],{"class":98},[52,5802,34],{"class":65},[52,5804,844],{"class":98},[52,5806,34],{"class":65},[52,5808,1891],{"class":98},[52,5810,1907],{"class":65},[52,5812,1910],{"class":69},[52,5814,34],{"class":65},[52,5816,1915],{"class":235},[52,5818,238],{"class":69},[52,5820,1920],{"class":98},[52,5822,1129],{"class":69},[52,5824,1132],{"class":65},[52,5826,5827],{"class":54,"line":167},[52,5828,1929],{"class":65},[52,5830,5831,5833,5835,5837,5839,5841,5843,5845,5847],{"class":54,"line":174},[52,5832,839],{"class":98},[52,5834,34],{"class":65},[52,5836,844],{"class":235},[52,5838,238],{"class":98},[52,5840,275],{"class":65},[52,5842,1100],{"class":127},[52,5844,275],{"class":65},[52,5846,856],{"class":65},[52,5848,469],{"class":65},[52,5850,5851,5853,5855,5857,5859],{"class":54,"line":199},[52,5852,1954],{"class":69},[52,5854,250],{"class":65},[52,5856,218],{"class":65},[52,5858,1961],{"class":127},[52,5860,224],{"class":65},[52,5862,5863,5865,5867],{"class":54,"line":227},[52,5864,953],{"class":65},[52,5866,1129],{"class":98},[52,5868,1132],{"class":65},[52,5870,5871,5873,5875],{"class":54,"line":232},[52,5872,102],{"class":65},[52,5874,179],{"class":69},[52,5876,73],{"class":65},[19,5878,5880],{"id":5879},"_2-create-a-composable","2. Create a Composable",[43,5882,5884],{"className":441,"code":5883,"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,5885,5886,5891,5902,5910,5918,5926,5930,5934,5944,5952,5980,5991,5995,5999,6007,6015,6044,6048,6052,6056,6068,6090,6112,6116,6120,6134,6152,6156,6160,6175],{"__ignoreMap":48},[52,5887,5888],{"class":54,"line":55},[52,5889,5890],{"class":58},"\u002F\u002F composables\u002FuseFittingWidget.ts\n",[52,5892,5893,5895,5898,5900],{"class":54,"line":62},[52,5894,449],{"class":202},[52,5896,5897],{"class":117}," interface",[52,5899,2630],{"class":795},[52,5901,469],{"class":65},[52,5903,5904,5906,5908],{"class":54,"line":76},[52,5905,790],{"class":69},[52,5907,250],{"class":65},[52,5909,796],{"class":795},[52,5911,5912,5914,5916],{"class":54,"line":87},[52,5913,2648],{"class":69},[52,5915,250],{"class":65},[52,5917,796],{"class":795},[52,5919,5920,5922,5924],{"class":54,"line":109},[52,5921,4368],{"class":69},[52,5923,2707],{"class":65},[52,5925,796],{"class":795},[52,5927,5928],{"class":54,"line":148},[52,5929,960],{"class":65},[52,5931,5932],{"class":54,"line":158},[52,5933,171],{"emptyLinePlaceholder":170},[52,5935,5936,5938,5940,5942],{"class":54,"line":167},[52,5937,449],{"class":202},[52,5939,5897],{"class":117},[52,5941,4389],{"class":795},[52,5943,469],{"class":65},[52,5945,5946,5948,5950],{"class":54,"line":174},[52,5947,1288],{"class":69},[52,5949,250],{"class":65},[52,5951,796],{"class":795},[52,5953,5954,5956,5958,5960,5962,5964,5966,5968,5970,5972,5974,5976,5978],{"class":54,"line":199},[52,5955,1303],{"class":69},[52,5957,2707],{"class":65},[52,5959,218],{"class":65},[52,5961,885],{"class":127},[52,5963,275],{"class":65},[52,5965,4416],{"class":65},[52,5967,218],{"class":65},[52,5969,4421],{"class":127},[52,5971,275],{"class":65},[52,5973,4416],{"class":65},[52,5975,218],{"class":65},[52,5977,4430],{"class":127},[52,5979,224],{"class":65},[52,5981,5982,5984,5986,5988],{"class":54,"line":227},[52,5983,1318],{"class":69},[52,5985,250],{"class":65},[52,5987,2630],{"class":795},[52,5989,5990],{"class":98},"[]\n",[52,5992,5993],{"class":54,"line":232},[52,5994,960],{"class":65},[52,5996,5997],{"class":54,"line":244},[52,5998,171],{"emptyLinePlaceholder":170},[52,6000,6001,6003,6005],{"class":54,"line":256},[52,6002,2667],{"class":117},[52,6004,2670],{"class":98},[52,6006,241],{"class":65},[52,6008,6009,6011,6013],{"class":54,"line":262},[52,6010,2677],{"class":117},[52,6012,2680],{"class":795},[52,6014,469],{"class":65},[52,6016,6017,6019,6021,6023,6025,6027,6029,6031,6033,6035,6037,6039,6041],{"class":54,"line":281},[52,6018,2687],{"class":69},[52,6020,250],{"class":65},[52,6022,2692],{"class":65},[52,6024,2695],{"class":2368},[52,6026,250],{"class":65},[52,6028,2641],{"class":795},[52,6030,856],{"class":65},[52,6032,2704],{"class":2368},[52,6034,2707],{"class":65},[52,6036,2710],{"class":795},[52,6038,1129],{"class":65},[52,6040,832],{"class":117},[52,6042,6043],{"class":795}," void\n",[52,6045,6046],{"class":54,"line":298},[52,6047,2724],{"class":65},[52,6049,6050],{"class":54,"line":304},[52,6051,960],{"class":65},[52,6053,6054],{"class":54,"line":309},[52,6055,171],{"emptyLinePlaceholder":170},[52,6057,6058,6060,6062,6064,6066],{"class":54,"line":325},[52,6059,449],{"class":202},[52,6061,1870],{"class":117},[52,6063,4522],{"class":235},[52,6065,1873],{"class":65},[52,6067,469],{"class":65},[52,6069,6070,6072,6074,6076,6078,6080,6082,6084,6086,6088],{"class":54,"line":336},[52,6071,2769],{"class":117},[52,6073,4533],{"class":98},[52,6075,1894],{"class":65},[52,6077,2692],{"class":65},[52,6079,4540],{"class":2368},[52,6081,250],{"class":65},[52,6083,4389],{"class":795},[52,6085,1129],{"class":65},[52,6087,832],{"class":117},[52,6089,469],{"class":65},[52,6091,6092,6094,6096,6098,6100,6102,6104,6106,6108,6110],{"class":54,"line":342},[52,6093,2785],{"class":98},[52,6095,34],{"class":65},[52,6097,844],{"class":235},[52,6099,238],{"class":69},[52,6101,275],{"class":65},[52,6103,851],{"class":127},[52,6105,275],{"class":65},[52,6107,856],{"class":65},[52,6109,2704],{"class":98},[52,6111,423],{"class":69},[52,6113,6114],{"class":54,"line":348},[52,6115,2724],{"class":65},[52,6117,6118],{"class":54,"line":354},[52,6119,171],{"emptyLinePlaceholder":170},[52,6121,6122,6124,6126,6128,6130,6132],{"class":54,"line":360},[52,6123,2769],{"class":117},[52,6125,4589],{"class":98},[52,6127,1894],{"class":65},[52,6129,829],{"class":65},[52,6131,832],{"class":117},[52,6133,469],{"class":65},[52,6135,6136,6138,6140,6142,6144,6146,6148,6150],{"class":54,"line":391},[52,6137,2785],{"class":98},[52,6139,34],{"class":65},[52,6141,844],{"class":235},[52,6143,238],{"class":69},[52,6145,275],{"class":65},[52,6147,4612],{"class":127},[52,6149,275],{"class":65},[52,6151,423],{"class":69},[52,6153,6154],{"class":54,"line":397},[52,6155,2724],{"class":65},[52,6157,6158],{"class":54,"line":405},[52,6159,171],{"emptyLinePlaceholder":170},[52,6161,6162,6164,6166,6168,6170,6172],{"class":54,"line":410},[52,6163,2396],{"class":202},[52,6165,206],{"class":65},[52,6167,4533],{"class":98},[52,6169,856],{"class":65},[52,6171,4589],{"class":98},[52,6173,6174],{"class":65}," }\n",[52,6176,6177],{"class":54,"line":418},[52,6178,960],{"class":65},[19,6180,6182],{"id":6181},"_3-create-the-widget-component","3. Create the Widget Component",[43,6184,6186],{"className":45,"code":6185,"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,6187,6188,6192,6200,6208,6214,6226,6240,6245,6271,6279,6287,6291,6311,6337,6341,6353,6361,6369,6375,6379,6396,6400,6414,6423,6437,6451,6459,6463,6477,6491,6495,6501,6507,6511],{"__ignoreMap":48},[52,6189,6190],{"class":54,"line":55},[52,6191,651],{"class":58},[52,6193,6194,6196,6198],{"class":54,"line":62},[52,6195,66],{"class":65},[52,6197,70],{"class":69},[52,6199,73],{"class":65},[52,6201,6202,6204,6206],{"class":54,"line":76},[52,6203,79],{"class":65},[52,6205,82],{"class":69},[52,6207,73],{"class":65},[52,6209,6210,6212],{"class":54,"line":87},[52,6211,90],{"class":65},[52,6213,4791],{"class":69},[52,6215,6216,6218,6220,6222,6224],{"class":54,"line":109},[52,6217,284],{"class":117},[52,6219,121],{"class":65},[52,6221,124],{"class":65},[52,6223,683],{"class":127},[52,6225,1797],{"class":65},[52,6227,6228,6231,6233,6235,6238],{"class":54,"line":148},[52,6229,6230],{"class":117},"      style",[52,6232,121],{"class":65},[52,6234,124],{"class":65},[52,6236,6237],{"class":127},"width: 100%; max-width: 600px; aspect-ratio: 3\u002F4",[52,6239,1797],{"class":65},[52,6241,6242],{"class":54,"line":158},[52,6243,6244],{"class":65},"    \u002F>\n",[52,6246,6247,6249,6251,6253,6255,6257,6259,6261,6263,6265,6267,6269],{"class":54,"line":167},[52,6248,90],{"class":65},[52,6250,706],{"class":69},[52,6252,709],{"class":117},[52,6254,121],{"class":65},[52,6256,124],{"class":65},[52,6258,716],{"class":127},[52,6260,124],{"class":65},[52,6262,95],{"class":65},[52,6264,2951],{"class":98},[52,6266,102],{"class":65},[52,6268,706],{"class":69},[52,6270,73],{"class":65},[52,6272,6273,6275,6277],{"class":54,"line":174},[52,6274,151],{"class":65},[52,6276,82],{"class":69},[52,6278,73],{"class":65},[52,6280,6281,6283,6285],{"class":54,"line":199},[52,6282,102],{"class":65},[52,6284,70],{"class":69},[52,6286,73],{"class":65},[52,6288,6289],{"class":54,"line":227},[52,6290,171],{"emptyLinePlaceholder":170},[52,6292,6293,6295,6297,6299,6301,6303,6305,6307,6309],{"class":54,"line":232},[52,6294,66],{"class":65},[52,6296,179],{"class":69},[52,6298,182],{"class":117},[52,6300,185],{"class":117},[52,6302,121],{"class":65},[52,6304,124],{"class":65},[52,6306,192],{"class":127},[52,6308,124],{"class":65},[52,6310,73],{"class":65},[52,6312,6313,6315,6317,6319,6321,6324,6326,6328,6330,6332,6335],{"class":54,"line":244},[52,6314,203],{"class":202},[52,6316,206],{"class":65},[52,6318,4522],{"class":98},[52,6320,856],{"class":65},[52,6322,6323],{"class":202}," type",[52,6325,2630],{"class":98},[52,6327,212],{"class":65},[52,6329,215],{"class":202},[52,6331,218],{"class":65},[52,6333,6334],{"class":127},"~\u002Fcomposables\u002FuseFittingWidget",[52,6336,224],{"class":65},[52,6338,6339],{"class":54,"line":256},[52,6340,171],{"emptyLinePlaceholder":170},[52,6342,6343,6345,6347,6349,6351],{"class":54,"line":262},[52,6344,774],{"class":117},[52,6346,777],{"class":98},[52,6348,121],{"class":65},[52,6350,782],{"class":235},[52,6352,785],{"class":65},[52,6354,6355,6357,6359],{"class":54,"line":281},[52,6356,790],{"class":69},[52,6358,250],{"class":65},[52,6360,796],{"class":795},[52,6362,6363,6365,6367],{"class":54,"line":298},[52,6364,801],{"class":69},[52,6366,250],{"class":65},[52,6368,796],{"class":795},[52,6370,6371,6373],{"class":54,"line":304},[52,6372,810],{"class":65},[52,6374,813],{"class":98},[52,6376,6377],{"class":54,"line":309},[52,6378,171],{"emptyLinePlaceholder":170},[52,6380,6381,6383,6385,6388,6390,6392,6394],{"class":54,"line":325},[52,6382,774],{"class":117},[52,6384,206],{"class":65},[52,6386,6387],{"class":98}," open ",[52,6389,386],{"class":65},[52,6391,1894],{"class":65},[52,6393,4522],{"class":235},[52,6395,813],{"class":98},[52,6397,6398],{"class":54,"line":336},[52,6399,171],{"emptyLinePlaceholder":170},[52,6401,6402,6404,6406,6408,6410,6412],{"class":54,"line":342},[52,6403,774],{"class":117},[52,6405,824],{"class":98},[52,6407,121],{"class":65},[52,6409,829],{"class":65},[52,6411,832],{"class":117},[52,6413,469],{"class":65},[52,6415,6416,6419,6421],{"class":54,"line":348},[52,6417,6418],{"class":235},"  open",[52,6420,238],{"class":69},[52,6422,241],{"class":65},[52,6424,6425,6427,6429,6431,6433,6435],{"class":54,"line":354},[52,6426,863],{"class":69},[52,6428,250],{"class":65},[52,6430,218],{"class":65},[52,6432,683],{"class":127},[52,6434,275],{"class":65},[52,6436,278],{"class":65},[52,6438,6439,6441,6443,6445,6447,6449],{"class":54,"line":360},[52,6440,878],{"class":69},[52,6442,250],{"class":65},[52,6444,218],{"class":65},[52,6446,885],{"class":127},[52,6448,275],{"class":65},[52,6450,278],{"class":65},[52,6452,6453,6455,6457],{"class":54,"line":391},[52,6454,894],{"class":69},[52,6456,250],{"class":65},[52,6458,253],{"class":69},[52,6460,6461],{"class":54,"line":397},[52,6462,903],{"class":65},[52,6464,6465,6467,6469,6471,6473,6475],{"class":54,"line":405},[52,6466,908],{"class":69},[52,6468,250],{"class":65},[52,6470,913],{"class":98},[52,6472,34],{"class":65},[52,6474,918],{"class":98},[52,6476,278],{"class":65},[52,6478,6479,6481,6483,6485,6487,6489],{"class":54,"line":410},[52,6480,925],{"class":69},[52,6482,250],{"class":65},[52,6484,913],{"class":98},[52,6486,34],{"class":65},[52,6488,934],{"class":98},[52,6490,278],{"class":65},[52,6492,6493],{"class":54,"line":418},[52,6494,941],{"class":65},[52,6496,6497,6499],{"class":54,"line":426},[52,6498,946],{"class":69},[52,6500,278],{"class":65},[52,6502,6503,6505],{"class":54,"line":5453},[52,6504,953],{"class":65},[52,6506,423],{"class":69},[52,6508,6509],{"class":54,"line":5462},[52,6510,960],{"class":65},[52,6512,6513,6515,6517],{"class":54,"line":5467},[52,6514,102],{"class":65},[52,6516,179],{"class":69},[52,6518,73],{"class":65},[996,6520,6521],{},"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":6523},[6524,6525,6526],{"id":4119,"depth":62,"text":4120},{"id":5879,"depth":62,"text":5880},{"id":6181,"depth":62,"text":6182},"Integrate with a Vue 3 application","i-lucide-venetian-mask",{},"\u002Fen\u002Fintegrations\u002Fvue",{"title":5681,"description":6527},"en\u002Fintegrations\u002Fvue","GShiJEM5AAOgyg7U0MXXp-Lqn_Y-1BooZA_uvPnVwT0",{"id":6535,"title":6536,"body":6537,"description":6946,"extension":1010,"icon":2181,"meta":6947,"navigation":170,"path":2264,"seo":6948,"stem":6949,"__hash__":6950},"content\u002Fgetting-started\u002Fquick-start.md","Быстрый старт",{"type":7,"value":6538,"toc":6937},[6539,6542,6545,6549,6556,6560,6568,6610,6614,6754,6758,6764,6790,6794,6800,6910,6914,6917,6921,6934],[10,6540,6536],{"id":6541},"быстрый-старт",[15,6543,6544],{},"Следуйте этим шагам, чтобы добавить виртуальную примерку на ваш сайт.",[19,6546,6548],{"id":6547},"_1-получите-api-ключ","1. Получите API-ключ",[15,6550,6551,6552,6555],{},"Зарегистрируйтесь на ",[1748,6553,1753],{"href":1750,"rel":6554},[1752],", чтобы получить бесплатный API-ключ.",[19,6557,6559],{"id":6558},"_2-загрузите-скрипт-виджета","2. Загрузите скрипт виджета",[15,6561,6562,6563,6565,6566,250],{},"Добавьте следующий тег ",[27,6564,1764],{}," на страницу, желательно перед закрывающим тегом ",[27,6567,1768],{},[43,6569,6570],{"className":1772,"code":1773,"language":1774,"meta":48,"style":48},[27,6571,6572,6578,6590,6602],{"__ignoreMap":48},[52,6573,6574,6576],{"class":54,"line":55},[52,6575,66],{"class":65},[52,6577,1783],{"class":69},[52,6579,6580,6582,6584,6586,6588],{"class":54,"line":62},[52,6581,1788],{"class":117},[52,6583,121],{"class":65},[52,6585,124],{"class":65},[52,6587,272],{"class":127},[52,6589,1797],{"class":65},[52,6591,6592,6594,6596,6598,6600],{"class":54,"line":76},[52,6593,1802],{"class":117},[52,6595,121],{"class":65},[52,6597,124],{"class":65},[52,6599,291],{"class":127},[52,6601,1797],{"class":65},[52,6603,6604,6606,6608],{"class":54,"line":87},[52,6605,1815],{"class":65},[52,6607,179],{"class":69},[52,6609,73],{"class":65},[19,6611,6613],{"id":6612},"_3-инициализируйте-виджет","3. Инициализируйте виджет",[43,6615,6616],{"className":1772,"code":1826,"language":1774,"meta":48,"style":48},[27,6617,6618,6636,6660,6702,6706,6726,6738,6746],{"__ignoreMap":48},[52,6619,6620,6622,6624,6626,6628,6630,6632,6634],{"class":54,"line":55},[52,6621,66],{"class":65},[52,6623,179],{"class":69},[52,6625,676],{"class":117},[52,6627,121],{"class":65},[52,6629,124],{"class":65},[52,6631,318],{"class":127},[52,6633,124],{"class":65},[52,6635,73],{"class":65},[52,6637,6638,6640,6642,6644,6646,6648,6650,6652,6654,6656,6658],{"class":54,"line":62},[52,6639,839],{"class":98},[52,6641,34],{"class":65},[52,6643,1855],{"class":98},[52,6645,121],{"class":65},[52,6647,1860],{"class":98},[52,6649,34],{"class":65},[52,6651,1855],{"class":98},[52,6653,1867],{"class":65},[52,6655,1870],{"class":117},[52,6657,1873],{"class":65},[52,6659,469],{"class":65},[52,6661,6662,6664,6666,6668,6670,6672,6674,6676,6678,6680,6682,6684,6686,6688,6690,6692,6694,6696,6698,6700],{"class":54,"line":76},[52,6663,1880],{"class":69},[52,6665,1089],{"class":98},[52,6667,34],{"class":65},[52,6669,844],{"class":98},[52,6671,34],{"class":65},[52,6673,1891],{"class":98},[52,6675,1894],{"class":65},[52,6677,1860],{"class":98},[52,6679,34],{"class":65},[52,6681,844],{"class":98},[52,6683,34],{"class":65},[52,6685,1891],{"class":98},[52,6687,1907],{"class":65},[52,6689,1910],{"class":69},[52,6691,34],{"class":65},[52,6693,1915],{"class":235},[52,6695,238],{"class":69},[52,6697,1920],{"class":98},[52,6699,1129],{"class":69},[52,6701,1132],{"class":65},[52,6703,6704],{"class":54,"line":87},[52,6705,1929],{"class":65},[52,6707,6708,6710,6712,6714,6716,6718,6720,6722,6724],{"class":54,"line":109},[52,6709,839],{"class":98},[52,6711,34],{"class":65},[52,6713,844],{"class":235},[52,6715,238],{"class":98},[52,6717,275],{"class":65},[52,6719,1100],{"class":127},[52,6721,275],{"class":65},[52,6723,856],{"class":65},[52,6725,469],{"class":65},[52,6727,6728,6730,6732,6734,6736],{"class":54,"line":148},[52,6729,1954],{"class":69},[52,6731,250],{"class":65},[52,6733,218],{"class":65},[52,6735,1961],{"class":127},[52,6737,224],{"class":65},[52,6739,6740,6742,6744],{"class":54,"line":158},[52,6741,953],{"class":65},[52,6743,1129],{"class":98},[52,6745,1132],{"class":65},[52,6747,6748,6750,6752],{"class":54,"line":167},[52,6749,102],{"class":65},[52,6751,179],{"class":69},[52,6753,73],{"class":65},[19,6755,6757],{"id":6756},"_4-добавьте-контейнер","4. Добавьте контейнер",[15,6759,6760,6761,6763],{},"Разместите ",[27,6762,1989],{}," там, где должен отображаться виджет:",[43,6765,6766],{"className":1772,"code":1993,"language":1774,"meta":48,"style":48},[27,6767,6768],{"__ignoreMap":48},[52,6769,6770,6772,6774,6776,6778,6780,6782,6784,6786,6788],{"class":54,"line":55},[52,6771,66],{"class":65},[52,6773,82],{"class":69},[52,6775,676],{"class":117},[52,6777,121],{"class":65},[52,6779,124],{"class":65},[52,6781,683],{"class":127},[52,6783,124],{"class":65},[52,6785,1815],{"class":65},[52,6787,82],{"class":69},[52,6789,73],{"class":65},[19,6791,6793],{"id":6792},"_5-запустите-виджет","5. Запустите виджет",[15,6795,6796,6797,6799],{},"Вызовите метод ",[27,6798,851],{}," при нажатии пользователем кнопки:",[43,6801,6802],{"className":1080,"code":2030,"language":1082,"meta":48,"style":48},[27,6803,6804,6824,6838,6852,6860,6864,6878,6892,6896,6902],{"__ignoreMap":48},[52,6805,6806,6808,6810,6812,6814,6816,6818,6820,6822],{"class":54,"line":55},[52,6807,1089],{"class":98},[52,6809,34],{"class":65},[52,6811,844],{"class":235},[52,6813,238],{"class":98},[52,6815,275],{"class":65},[52,6817,851],{"class":127},[52,6819,275],{"class":65},[52,6821,856],{"class":65},[52,6823,469],{"class":65},[52,6825,6826,6828,6830,6832,6834,6836],{"class":54,"line":62},[52,6827,1288],{"class":69},[52,6829,250],{"class":65},[52,6831,218],{"class":65},[52,6833,683],{"class":127},[52,6835,275],{"class":65},[52,6837,278],{"class":65},[52,6839,6840,6842,6844,6846,6848,6850],{"class":54,"line":76},[52,6841,1303],{"class":69},[52,6843,250],{"class":65},[52,6845,218],{"class":65},[52,6847,885],{"class":127},[52,6849,275],{"class":65},[52,6851,278],{"class":65},[52,6853,6854,6856,6858],{"class":54,"line":87},[52,6855,1318],{"class":69},[52,6857,250],{"class":65},[52,6859,253],{"class":98},[52,6861,6862],{"class":54,"line":109},[52,6863,259],{"class":65},[52,6865,6866,6868,6870,6872,6874,6876],{"class":54,"line":148},[52,6867,1331],{"class":69},[52,6869,250],{"class":65},[52,6871,218],{"class":65},[52,6873,2103],{"class":127},[52,6875,275],{"class":65},[52,6877,278],{"class":65},[52,6879,6880,6882,6884,6886,6888,6890],{"class":54,"line":158},[52,6881,1347],{"class":69},[52,6883,250],{"class":65},[52,6885,218],{"class":65},[52,6887,2118],{"class":127},[52,6889,275],{"class":65},[52,6891,278],{"class":65},[52,6893,6894],{"class":54,"line":167},[52,6895,301],{"class":65},[52,6897,6898,6900],{"class":54,"line":174},[52,6899,413],{"class":98},[52,6901,278],{"class":65},[52,6903,6904,6906,6908],{"class":54,"line":199},[52,6905,386],{"class":65},[52,6907,1129],{"class":98},[52,6909,1132],{"class":65},[19,6911,6913],{"id":6912},"результат","Результат",[15,6915,6916],{},"Теперь ваши покупатели могут загрузить фотографию и мгновенно увидеть, как на них сидит одежда.",[19,6918,6920],{"id":6919},"дальнейшие-шаги","Дальнейшие шаги",[2153,6922,6923,6929],{},[2156,6924,6925,6926,34],{},"Ознакомьтесь с руководствами для конкретных фреймворков в разделе ",[1748,6927,6928],{"href":2161},"Интеграции",[2156,6930,6931,6932,34],{},"Изучите полный ",[1748,6933,1020],{"href":1389},[996,6935,6936],{},"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":6938},[6939,6940,6941,6942,6943,6944,6945],{"id":6547,"depth":62,"text":6548},{"id":6558,"depth":62,"text":6559},{"id":6612,"depth":62,"text":6613},{"id":6756,"depth":62,"text":6757},{"id":6792,"depth":62,"text":6793},{"id":6912,"depth":62,"text":6913},{"id":6919,"depth":62,"text":6920},"Запустите Fitting Widget за считанные минуты",{},{"title":6536,"description":6946},"getting-started\u002Fquick-start","4USnYxFPZA1hrOvVApcSHMt9oQc0aZ6Ct8ohgcj8WJ8",{"id":6952,"title":6953,"body":6954,"description":7032,"extension":1010,"icon":2272,"meta":7033,"navigation":170,"path":7034,"seo":7035,"stem":7036,"__hash__":7037},"content\u002Findex.md","Введение",{"type":7,"value":6955,"toc":7027},[6956,6960,6965,6969,6998,7002,7019,7021],[10,6957,6959],{"id":6958},"fitting-widget-виртуальная-примерка","Fitting Widget — Виртуальная примерка",[15,6961,6962,6964],{},[2200,6963,2202],{}," — это готовое решение для виртуальной примерки одежды в интернет-магазинах. Он позволяет вашим покупателям загрузить фотографию и мгновенно увидеть, как на них выглядит любой предмет одежды — прямо на странице товара.",[19,6966,6968],{"id":6967},"ключевые-возможности","Ключевые возможности",[2153,6970,6971,6980,6986,6992],{},[2156,6972,6973,6976,6977,6979],{},[2200,6974,6975],{},"Быстрая интеграция"," — Один тег ",[27,6978,1764],{}," и несколько строк кода.",[2156,6981,6982,6985],{},[2200,6983,6984],{},"Не зависит от фреймворков"," — Работает с Vanilla JS, React, Vue, Next.js, Nuxt и другими.",[2156,6987,6988,6991],{},[2200,6989,6990],{},"Настраиваемый"," — Стилизуйте виджет под ваш бренд.",[2156,6993,6994,6997],{},[2200,6995,6996],{},"Лёгкий"," — Оптимизированная загрузка, которая не замедляет магазин.",[19,6999,7001],{"id":7000},"как-это-работает","Как это работает",[2239,7003,7004,7007,7010,7016],{},[2156,7005,7006],{},"Загрузите скрипт виджета на страницу.",[2156,7008,7009],{},"Инициализируйте его с вашим API-ключом.",[2156,7011,7012,7013,7015],{},"Вызовите ",[27,7014,2252],{}," с URL-адресами изображений товаров.",[2156,7017,7018],{},"Виджет отображается внутри выбранного вами контейнера.",[19,7020,6536],{"id":6541},[15,7022,7023,7024,7026],{},"Перейдите к руководству ",[1748,7025,6536],{"href":2264},", чтобы начать работу менее чем за 5 минут.",{"title":48,"searchDepth":62,"depth":62,"links":7028},[7029,7030,7031],{"id":6967,"depth":62,"text":6968},{"id":7000,"depth":62,"text":7001},{"id":6541,"depth":62,"text":6536},"Что такое Fitting Widget и зачем его использовать?",{},"\u002F",{"title":6953,"description":7032},"index","kGT91Bb-Wx88tMoHoRu65KMhDKtcehaBgnLzJYfeCWE",{"id":7039,"title":2280,"body":7040,"description":7912,"extension":1010,"icon":3278,"meta":7913,"navigation":170,"path":7914,"seo":7915,"stem":7916,"__hash__":7917},"content\u002Fintegrations\u002Fnextjs.md",{"type":7,"value":7041,"toc":7903},[7042,7046,7054,7058,7066,7075,7311,7315,7642,7646,7882,7884,7889,7901],[10,7043,7045],{"id":7044},"интеграция-с-nextjs","Интеграция с Next.js",[15,7047,7048,7049,7051,7052,34],{},"Fitting Widget работает как с ",[2200,7050,2292],{},", так и с ",[2200,7053,2296],{},[19,7055,7057],{"id":7056},"app-router-рекомендуется","App Router (рекомендуется)",[15,7059,7060,7061,7063,7064,34],{},"Используйте компонент Next.js ",[27,7062,2306],{}," с ",[27,7065,2310],{},[36,7067,7069,7070,7072,7073],{"id":7068},"шаг-1-загрузка-скриптов-в-layouttsx-или-pagetsx","Шаг 1 — Загрузка скриптов в ",[27,7071,2317],{}," или ",[27,7074,2321],{},[43,7076,7077],{"className":2324,"code":2325,"language":2326,"meta":48,"style":48},[27,7078,7079,7095,7099,7131,7137,7141,7149,7153,7159,7171,7183,7195,7199,7203,7209,7221,7233,7237,7243,7247,7251,7255,7259,7279,7283,7289,7297,7301,7307],{"__ignoreMap":48},[52,7080,7081,7083,7085,7087,7089,7091,7093],{"class":54,"line":55},[52,7082,203],{"class":202},[52,7084,2335],{"class":98},[52,7086,2338],{"class":202},[52,7088,218],{"class":65},[52,7090,2343],{"class":127},[52,7092,275],{"class":65},[52,7094,1132],{"class":65},[52,7096,7097],{"class":54,"line":62},[52,7098,171],{"emptyLinePlaceholder":170},[52,7100,7101,7103,7105,7107,7109,7111,7113,7115,7117,7119,7121,7123,7125,7127,7129],{"class":54,"line":76},[52,7102,449],{"class":202},[52,7104,452],{"class":202},[52,7106,1870],{"class":117},[52,7108,2362],{"class":235},[52,7110,2365],{"class":65},[52,7112,2369],{"class":2368},[52,7114,2372],{"class":65},[52,7116,206],{"class":65},[52,7118,2369],{"class":69},[52,7120,250],{"class":65},[52,7122,2381],{"class":795},[52,7124,34],{"class":65},[52,7126,2386],{"class":795},[52,7128,2389],{"class":65},[52,7130,469],{"class":65},[52,7132,7133,7135],{"class":54,"line":87},[52,7134,2396],{"class":202},[52,7136,2399],{"class":69},[52,7138,7139],{"class":54,"line":109},[52,7140,2404],{"class":65},[52,7142,7143,7145,7147],{"class":54,"line":148},[52,7144,2409],{"class":65},[52,7146,2412],{"class":98},[52,7148,960],{"class":65},[52,7150,7151],{"class":54,"line":158},[52,7152,171],{"emptyLinePlaceholder":170},[52,7154,7155,7157],{"class":54,"line":167},[52,7156,2423],{"class":65},[52,7158,2426],{"class":795},[52,7160,7161,7163,7165,7167,7169],{"class":54,"line":174},[52,7162,2431],{"class":117},[52,7164,121],{"class":65},[52,7166,124],{"class":65},[52,7168,272],{"class":127},[52,7170,1797],{"class":65},[52,7172,7173,7175,7177,7179,7181],{"class":54,"line":199},[52,7174,2444],{"class":117},[52,7176,121],{"class":65},[52,7178,124],{"class":65},[52,7180,2451],{"class":127},[52,7182,1797],{"class":65},[52,7184,7185,7187,7189,7191,7193],{"class":54,"line":227},[52,7186,2458],{"class":117},[52,7188,121],{"class":65},[52,7190,124],{"class":65},[52,7192,291],{"class":127},[52,7194,1797],{"class":65},[52,7196,7197],{"class":54,"line":232},[52,7198,2471],{"class":65},[52,7200,7201],{"class":54,"line":244},[52,7202,171],{"emptyLinePlaceholder":170},[52,7204,7205,7207],{"class":54,"line":256},[52,7206,2423],{"class":65},[52,7208,2426],{"class":795},[52,7210,7211,7213,7215,7217,7219],{"class":54,"line":262},[52,7212,2444],{"class":117},[52,7214,121],{"class":65},[52,7216,124],{"class":65},[52,7218,2451],{"class":127},[52,7220,1797],{"class":65},[52,7222,7223,7225,7227,7229,7231],{"class":54,"line":281},[52,7224,2458],{"class":117},[52,7226,121],{"class":65},[52,7228,124],{"class":65},[52,7230,318],{"class":127},[52,7232,1797],{"class":65},[52,7234,7235],{"class":54,"line":298},[52,7236,2510],{"class":65},[52,7238,7239,7241],{"class":54,"line":304},[52,7240,2515],{"class":65},[52,7242,2518],{"class":65},[52,7244,7245],{"class":54,"line":309},[52,7246,2523],{"class":127},[52,7248,7249],{"class":54,"line":325},[52,7250,2528],{"class":127},[52,7252,7253],{"class":54,"line":336},[52,7254,2533],{"class":127},[52,7256,7257],{"class":54,"line":342},[52,7258,2538],{"class":127},[52,7260,7261,7263,7265,7267,7269,7271,7273,7275,7277],{"class":54,"line":348},[52,7262,2543],{"class":127},[52,7264,366],{"class":65},[52,7266,2548],{"class":98},[52,7268,34],{"class":65},[52,7270,378],{"class":98},[52,7272,34],{"class":65},[52,7274,2557],{"class":98},[52,7276,386],{"class":65},[52,7278,224],{"class":127},[52,7280,7281],{"class":54,"line":354},[52,7282,2566],{"class":127},[52,7284,7285,7287],{"class":54,"line":360},[52,7286,2571],{"class":65},[52,7288,960],{"class":65},[52,7290,7291,7293,7295],{"class":54,"line":391},[52,7292,2578],{"class":65},[52,7294,2306],{"class":795},[52,7296,73],{"class":65},[52,7298,7299],{"class":54,"line":397},[52,7300,2587],{"class":65},[52,7302,7303,7305],{"class":54,"line":405},[52,7304,2592],{"class":69},[52,7306,1132],{"class":65},[52,7308,7309],{"class":54,"line":410},[52,7310,960],{"class":65},[36,7312,7314],{"id":7313},"шаг-2-создание-кнопки-виджета","Шаг 2 — Создание кнопки виджета",[43,7316,7318],{"className":2324,"code":7317,"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,7319,7320,7330,7334,7342,7352,7362,7366,7370,7378,7386,7416,7420,7424,7428,7456,7470,7490,7504,7518,7528,7536,7540,7544,7550,7554,7606,7628,7632,7638],{"__ignoreMap":48},[52,7321,7322,7324,7326,7328],{"class":54,"line":55},[52,7323,275],{"class":65},[52,7325,2614],{"class":127},[52,7327,275],{"class":65},[52,7329,1132],{"class":65},[52,7331,7332],{"class":54,"line":62},[52,7333,171],{"emptyLinePlaceholder":170},[52,7335,7336,7338,7340],{"class":54,"line":76},[52,7337,2627],{"class":117},[52,7339,2630],{"class":795},[52,7341,469],{"class":65},[52,7343,7344,7346,7348,7350],{"class":54,"line":87},[52,7345,790],{"class":69},[52,7347,250],{"class":65},[52,7349,2641],{"class":795},[52,7351,1132],{"class":65},[52,7353,7354,7356,7358,7360],{"class":54,"line":109},[52,7355,2648],{"class":69},[52,7357,250],{"class":65},[52,7359,2641],{"class":795},[52,7361,1132],{"class":65},[52,7363,7364],{"class":54,"line":148},[52,7365,960],{"class":65},[52,7367,7368],{"class":54,"line":158},[52,7369,171],{"emptyLinePlaceholder":170},[52,7371,7372,7374,7376],{"class":54,"line":167},[52,7373,2667],{"class":117},[52,7375,2670],{"class":98},[52,7377,241],{"class":65},[52,7379,7380,7382,7384],{"class":54,"line":174},[52,7381,2677],{"class":117},[52,7383,2680],{"class":795},[52,7385,469],{"class":65},[52,7387,7388,7390,7392,7394,7396,7398,7400,7402,7404,7406,7408,7410,7412,7414],{"class":54,"line":199},[52,7389,2687],{"class":69},[52,7391,250],{"class":65},[52,7393,2692],{"class":65},[52,7395,2695],{"class":2368},[52,7397,250],{"class":65},[52,7399,2641],{"class":795},[52,7401,856],{"class":65},[52,7403,2704],{"class":2368},[52,7405,2707],{"class":65},[52,7407,2710],{"class":795},[52,7409,1129],{"class":65},[52,7411,832],{"class":117},[52,7413,2717],{"class":795},[52,7415,1132],{"class":65},[52,7417,7418],{"class":54,"line":227},[52,7419,2724],{"class":65},[52,7421,7422],{"class":54,"line":232},[52,7423,960],{"class":65},[52,7425,7426],{"class":54,"line":244},[52,7427,171],{"emptyLinePlaceholder":170},[52,7429,7430,7432,7434,7436,7438,7440,7442,7444,7446,7448,7450,7452,7454],{"class":54,"line":256},[52,7431,449],{"class":202},[52,7433,1870],{"class":117},[52,7435,2741],{"class":235},[52,7437,2365],{"class":65},[52,7439,2746],{"class":2368},[52,7441,2372],{"class":65},[52,7443,206],{"class":65},[52,7445,2746],{"class":69},[52,7447,250],{"class":65},[52,7449,2630],{"class":795},[52,7451,2759],{"class":98},[52,7453,2762],{"class":65},[52,7455,469],{"class":65},[52,7457,7458,7460,7462,7464,7466,7468],{"class":54,"line":262},[52,7459,2769],{"class":117},[52,7461,2772],{"class":98},[52,7463,1894],{"class":65},[52,7465,829],{"class":65},[52,7467,832],{"class":117},[52,7469,469],{"class":65},[52,7471,7472,7474,7476,7478,7480,7482,7484,7486,7488],{"class":54,"line":281},[52,7473,2785],{"class":98},[52,7475,34],{"class":65},[52,7477,844],{"class":235},[52,7479,238],{"class":69},[52,7481,275],{"class":65},[52,7483,851],{"class":127},[52,7485,275],{"class":65},[52,7487,856],{"class":65},[52,7489,469],{"class":65},[52,7491,7492,7494,7496,7498,7500,7502],{"class":54,"line":298},[52,7493,2806],{"class":69},[52,7495,250],{"class":65},[52,7497,218],{"class":65},[52,7499,683],{"class":127},[52,7501,275],{"class":65},[52,7503,278],{"class":65},[52,7505,7506,7508,7510,7512,7514,7516],{"class":54,"line":304},[52,7507,2821],{"class":69},[52,7509,250],{"class":65},[52,7511,218],{"class":65},[52,7513,885],{"class":127},[52,7515,275],{"class":65},[52,7517,278],{"class":65},[52,7519,7520,7522,7524,7526],{"class":54,"line":309},[52,7521,2836],{"class":69},[52,7523,250],{"class":65},[52,7525,2746],{"class":98},[52,7527,278],{"class":65},[52,7529,7530,7532,7534],{"class":54,"line":325},[52,7531,2847],{"class":65},[52,7533,1129],{"class":69},[52,7535,1132],{"class":65},[52,7537,7538],{"class":54,"line":336},[52,7539,1929],{"class":65},[52,7541,7542],{"class":54,"line":342},[52,7543,171],{"emptyLinePlaceholder":170},[52,7545,7546,7548],{"class":54,"line":348},[52,7547,2396],{"class":202},[52,7549,2399],{"class":69},[52,7551,7552],{"class":54,"line":354},[52,7553,2404],{"class":65},[52,7555,7556,7558,7560,7562,7564,7566,7568,7570,7572,7574,7576,7578,7580,7582,7584,7586,7588,7590,7592,7594,7596,7598,7600,7602,7604],{"class":54,"line":360},[52,7557,2423],{"class":65},[52,7559,82],{"class":69},[52,7561,676],{"class":117},[52,7563,121],{"class":65},[52,7565,124],{"class":65},[52,7567,683],{"class":127},[52,7569,124],{"class":65},[52,7571,2888],{"class":117},[52,7573,2891],{"class":65},[52,7575,2894],{"class":69},[52,7577,250],{"class":65},[52,7579,218],{"class":65},[52,7581,2901],{"class":127},[52,7583,275],{"class":65},[52,7585,856],{"class":65},[52,7587,2908],{"class":69},[52,7589,250],{"class":65},[52,7591,2914],{"class":2913},[52,7593,856],{"class":65},[52,7595,2919],{"class":69},[52,7597,250],{"class":65},[52,7599,218],{"class":65},[52,7601,2926],{"class":127},[52,7603,275],{"class":65},[52,7605,2931],{"class":65},[52,7607,7608,7610,7612,7614,7616,7618,7620,7622,7624,7626],{"class":54,"line":391},[52,7609,2423],{"class":65},[52,7611,706],{"class":69},[52,7613,2940],{"class":117},[52,7615,2943],{"class":65},[52,7617,2946],{"class":98},[52,7619,810],{"class":65},[52,7621,723],{"class":98},[52,7623,102],{"class":65},[52,7625,706],{"class":69},[52,7627,73],{"class":65},[52,7629,7630],{"class":54,"line":397},[52,7631,2587],{"class":65},[52,7633,7634,7636],{"class":54,"line":405},[52,7635,2592],{"class":69},[52,7637,1132],{"class":65},[52,7639,7640],{"class":54,"line":410},[52,7641,960],{"class":65},[36,7643,7645],{"id":7644},"шаг-3-использование-на-странице-товара","Шаг 3 — Использование на странице товара",[43,7647,7648],{"className":2324,"code":2978,"language":2326,"meta":48,"style":48},[27,7649,7650,7670,7674,7712,7736,7740,7746,7754,7774,7804,7810,7818,7822,7836,7850,7854,7860,7864,7872,7878],{"__ignoreMap":48},[52,7651,7652,7654,7656,7658,7660,7662,7664,7666,7668],{"class":54,"line":55},[52,7653,203],{"class":202},[52,7655,206],{"class":65},[52,7657,2741],{"class":98},[52,7659,212],{"class":65},[52,7661,215],{"class":202},[52,7663,218],{"class":65},[52,7665,2997],{"class":127},[52,7667,275],{"class":65},[52,7669,1132],{"class":65},[52,7671,7672],{"class":54,"line":62},[52,7673,171],{"emptyLinePlaceholder":170},[52,7675,7676,7678,7680,7682,7684,7686,7688,7690,7692,7694,7696,7698,7700,7702,7704,7706,7708,7710],{"class":54,"line":76},[52,7677,449],{"class":202},[52,7679,452],{"class":202},[52,7681,3014],{"class":117},[52,7683,1870],{"class":117},[52,7685,3019],{"class":235},[52,7687,2365],{"class":65},[52,7689,3024],{"class":2368},[52,7691,2372],{"class":65},[52,7693,206],{"class":65},[52,7695,3024],{"class":69},[52,7697,250],{"class":65},[52,7699,206],{"class":65},[52,7701,3037],{"class":69},[52,7703,250],{"class":65},[52,7705,2641],{"class":795},[52,7707,212],{"class":65},[52,7709,2389],{"class":65},[52,7711,469],{"class":65},[52,7713,7714,7716,7718,7720,7722,7724,7726,7728,7730,7732,7734],{"class":54,"line":87},[52,7715,2769],{"class":117},[52,7717,3054],{"class":98},[52,7719,1894],{"class":65},[52,7721,3059],{"class":202},[52,7723,3062],{"class":235},[52,7725,238],{"class":69},[52,7727,3067],{"class":98},[52,7729,34],{"class":65},[52,7731,3072],{"class":98},[52,7733,1129],{"class":69},[52,7735,1132],{"class":65},[52,7737,7738],{"class":54,"line":109},[52,7739,171],{"emptyLinePlaceholder":170},[52,7741,7742,7744],{"class":54,"line":148},[52,7743,2396],{"class":202},[52,7745,2399],{"class":69},[52,7747,7748,7750,7752],{"class":54,"line":158},[52,7749,90],{"class":65},[52,7751,82],{"class":69},[52,7753,73],{"class":65},[52,7755,7756,7758,7760,7762,7764,7766,7768,7770,7772],{"class":54,"line":167},[52,7757,2423],{"class":65},[52,7759,10],{"class":69},[52,7761,3103],{"class":65},[52,7763,3106],{"class":98},[52,7765,34],{"class":65},[52,7767,3111],{"class":98},[52,7769,3114],{"class":65},[52,7771,10],{"class":69},[52,7773,73],{"class":65},[52,7775,7776,7778,7780,7782,7784,7786,7788,7790,7792,7794,7796,7798,7800,7802],{"class":54,"line":174},[52,7777,2423],{"class":65},[52,7779,3125],{"class":69},[52,7781,3128],{"class":117},[52,7783,2943],{"class":65},[52,7785,3106],{"class":98},[52,7787,34],{"class":65},[52,7789,3137],{"class":98},[52,7791,3140],{"class":65},[52,7793,3143],{"class":117},[52,7795,2943],{"class":65},[52,7797,3106],{"class":98},[52,7799,34],{"class":65},[52,7801,3111],{"class":98},[52,7803,3154],{"class":65},[52,7805,7806,7808],{"class":54,"line":199},[52,7807,2423],{"class":65},[52,7809,3161],{"class":795},[52,7811,7812,7814,7816],{"class":54,"line":227},[52,7813,3166],{"class":117},[52,7815,2943],{"class":65},[52,7817,3171],{"class":98},[52,7819,7820],{"class":54,"line":232},[52,7821,3176],{"class":65},[52,7823,7824,7826,7828,7830,7832,7834],{"class":54,"line":244},[52,7825,3181],{"class":69},[52,7827,250],{"class":65},[52,7829,3054],{"class":98},[52,7831,34],{"class":65},[52,7833,3111],{"class":98},[52,7835,278],{"class":65},[52,7837,7838,7840,7842,7844,7846,7848],{"class":54,"line":256},[52,7839,3196],{"class":69},[52,7841,250],{"class":65},[52,7843,3054],{"class":98},[52,7845,34],{"class":65},[52,7847,3137],{"class":98},[52,7849,278],{"class":65},[52,7851,7852],{"class":54,"line":262},[52,7853,3211],{"class":65},[52,7855,7856,7858],{"class":54,"line":281},[52,7857,3216],{"class":98},[52,7859,960],{"class":65},[52,7861,7862],{"class":54,"line":298},[52,7863,2471],{"class":65},[52,7865,7866,7868,7870],{"class":54,"line":304},[52,7867,3227],{"class":65},[52,7869,82],{"class":69},[52,7871,73],{"class":65},[52,7873,7874,7876],{"class":54,"line":309},[52,7875,2592],{"class":69},[52,7877,1132],{"class":65},[52,7879,7880],{"class":54,"line":325},[52,7881,960],{"class":65},[19,7883,972],{"id":971},[15,7885,7886,7887,250],{},"Добавьте ваш API-ключ в ",[27,7888,3251],{},[43,7890,7891],{"className":981,"code":3254,"language":983,"meta":48,"style":48},[27,7892,7893],{"__ignoreMap":48},[52,7894,7895,7897,7899],{"class":54,"line":55},[52,7896,2557],{"class":98},[52,7898,121],{"class":65},[52,7900,994],{"class":127},[996,7902,3267],{},{"title":48,"searchDepth":62,"depth":62,"links":7904},[7905,7911],{"id":7056,"depth":62,"text":7057,"children":7906},[7907,7909,7910],{"id":7068,"depth":76,"text":7908},"Шаг 1 — Загрузка скриптов в layout.tsx или page.tsx",{"id":7313,"depth":76,"text":7314},{"id":7644,"depth":76,"text":7645},{"id":971,"depth":62,"text":972},"Интеграция с Next.js (Pages Router и App Router)",{},"\u002Fintegrations\u002Fnextjs",{"title":2280,"description":7912},"integrations\u002Fnextjs","KS6JTPT1XrolEU5h4YdImeGYebYne3YB0eM4G4u-UlY",{"id":4,"title":5,"body":7919,"description":1009,"extension":1010,"icon":1011,"meta":8715,"navigation":170,"path":1013,"seo":8716,"stem":1015,"__hash__":1016},{"type":7,"value":7920,"toc":8707},[7921,7923,7925,7927,7933,7937,8219,8223,8399,8401,8687,8689,8693,8705],[10,7922,13],{"id":12},[15,7924,17],{},[19,7926,22],{"id":21},[15,7928,25,7929,30,7931,34],{},[27,7930,29],{},[27,7932,33],{},[36,7934,39,7935],{"id":38},[27,7936,29],{},[43,7938,7939],{"className":45,"code":46,"language":47,"meta":48,"style":48},[27,7940,7941,7945,7953,7961,7977,8005,8013,8021,8025,8045,8063,8067,8075,8083,8087,8101,8115,8119,8123,8137,8145,8149,8153,8157,8161,8185,8189,8195,8199,8205,8211],{"__ignoreMap":48},[52,7942,7943],{"class":54,"line":55},[52,7944,59],{"class":58},[52,7946,7947,7949,7951],{"class":54,"line":62},[52,7948,66],{"class":65},[52,7950,70],{"class":69},[52,7952,73],{"class":65},[52,7954,7955,7957,7959],{"class":54,"line":76},[52,7956,79],{"class":65},[52,7958,82],{"class":69},[52,7960,73],{"class":65},[52,7962,7963,7965,7967,7969,7971,7973,7975],{"class":54,"line":87},[52,7964,90],{"class":65},[52,7966,10],{"class":69},[52,7968,95],{"class":65},[52,7970,99],{"class":98},[52,7972,102],{"class":65},[52,7974,10],{"class":69},[52,7976,73],{"class":65},[52,7978,7979,7981,7983,7985,7987,7989,7991,7993,7995,7997,7999,8001,8003],{"class":54,"line":109},[52,7980,90],{"class":65},[52,7982,114],{"class":69},[52,7984,118],{"class":117},[52,7986,121],{"class":65},[52,7988,124],{"class":65},[52,7990,128],{"class":127},[52,7992,124],{"class":65},[52,7994,133],{"class":117},[52,7996,121],{"class":65},[52,7998,124],{"class":65},[52,8000,140],{"class":127},[52,8002,124],{"class":65},[52,8004,145],{"class":65},[52,8006,8007,8009,8011],{"class":54,"line":148},[52,8008,151],{"class":65},[52,8010,82],{"class":69},[52,8012,73],{"class":65},[52,8014,8015,8017,8019],{"class":54,"line":158},[52,8016,102],{"class":65},[52,8018,70],{"class":69},[52,8020,73],{"class":65},[52,8022,8023],{"class":54,"line":167},[52,8024,171],{"emptyLinePlaceholder":170},[52,8026,8027,8029,8031,8033,8035,8037,8039,8041,8043],{"class":54,"line":174},[52,8028,66],{"class":65},[52,8030,179],{"class":69},[52,8032,182],{"class":117},[52,8034,185],{"class":117},[52,8036,121],{"class":65},[52,8038,124],{"class":65},[52,8040,192],{"class":127},[52,8042,124],{"class":65},[52,8044,73],{"class":65},[52,8046,8047,8049,8051,8053,8055,8057,8059,8061],{"class":54,"line":199},[52,8048,203],{"class":202},[52,8050,206],{"class":65},[52,8052,209],{"class":98},[52,8054,212],{"class":65},[52,8056,215],{"class":202},[52,8058,218],{"class":65},[52,8060,221],{"class":127},[52,8062,224],{"class":65},[52,8064,8065],{"class":54,"line":227},[52,8066,171],{"emptyLinePlaceholder":170},[52,8068,8069,8071,8073],{"class":54,"line":232},[52,8070,29],{"class":235},[52,8072,238],{"class":98},[52,8074,241],{"class":65},[52,8076,8077,8079,8081],{"class":54,"line":244},[52,8078,247],{"class":69},[52,8080,250],{"class":65},[52,8082,253],{"class":98},[52,8084,8085],{"class":54,"line":256},[52,8086,259],{"class":65},[52,8088,8089,8091,8093,8095,8097,8099],{"class":54,"line":262},[52,8090,265],{"class":69},[52,8092,250],{"class":65},[52,8094,218],{"class":65},[52,8096,272],{"class":127},[52,8098,275],{"class":65},[52,8100,278],{"class":65},[52,8102,8103,8105,8107,8109,8111,8113],{"class":54,"line":281},[52,8104,284],{"class":69},[52,8106,250],{"class":65},[52,8108,218],{"class":65},[52,8110,291],{"class":127},[52,8112,275],{"class":65},[52,8114,278],{"class":65},[52,8116,8117],{"class":54,"line":298},[52,8118,301],{"class":65},[52,8120,8121],{"class":54,"line":304},[52,8122,259],{"class":65},[52,8124,8125,8127,8129,8131,8133,8135],{"class":54,"line":309},[52,8126,284],{"class":69},[52,8128,250],{"class":65},[52,8130,218],{"class":65},[52,8132,318],{"class":127},[52,8134,275],{"class":65},[52,8136,278],{"class":65},[52,8138,8139,8141,8143],{"class":54,"line":325},[52,8140,328],{"class":69},[52,8142,250],{"class":65},[52,8144,333],{"class":65},[52,8146,8147],{"class":54,"line":336},[52,8148,339],{"class":127},[52,8150,8151],{"class":54,"line":342},[52,8152,345],{"class":127},[52,8154,8155],{"class":54,"line":348},[52,8156,351],{"class":127},[52,8158,8159],{"class":54,"line":354},[52,8160,357],{"class":127},[52,8162,8163,8165,8167,8169,8171,8173,8175,8177,8179,8181,8183],{"class":54,"line":360},[52,8164,363],{"class":127},[52,8166,366],{"class":65},[52,8168,203],{"class":202},[52,8170,34],{"class":65},[52,8172,373],{"class":98},[52,8174,34],{"class":65},[52,8176,378],{"class":98},[52,8178,34],{"class":65},[52,8180,383],{"class":98},[52,8182,386],{"class":65},[52,8184,224],{"class":127},[52,8186,8187],{"class":54,"line":391},[52,8188,394],{"class":127},[52,8190,8191,8193],{"class":54,"line":397},[52,8192,400],{"class":65},[52,8194,278],{"class":65},[52,8196,8197],{"class":54,"line":405},[52,8198,301],{"class":65},[52,8200,8201,8203],{"class":54,"line":410},[52,8202,413],{"class":98},[52,8204,278],{"class":65},[52,8206,8207,8209],{"class":54,"line":418},[52,8208,386],{"class":65},[52,8210,423],{"class":98},[52,8212,8213,8215,8217],{"class":54,"line":426},[52,8214,102],{"class":65},[52,8216,179],{"class":69},[52,8218,73],{"class":65},[36,8220,436,8221],{"id":435},[27,8222,33],{},[43,8224,8225],{"className":441,"code":442,"language":192,"meta":48,"style":48},[27,8226,8227,8239,8247,8255,8263,8267,8281,8295,8299,8303,8317,8325,8329,8333,8337,8341,8365,8369,8375,8379,8385,8389,8393],{"__ignoreMap":48},[52,8228,8229,8231,8233,8235,8237],{"class":54,"line":55},[52,8230,449],{"class":202},[52,8232,452],{"class":202},[52,8234,455],{"class":235},[52,8236,238],{"class":98},[52,8238,241],{"class":65},[52,8240,8241,8243,8245],{"class":54,"line":62},[52,8242,464],{"class":69},[52,8244,250],{"class":65},[52,8246,469],{"class":65},[52,8248,8249,8251,8253],{"class":54,"line":76},[52,8250,474],{"class":69},[52,8252,250],{"class":65},[52,8254,469],{"class":65},[52,8256,8257,8259,8261],{"class":54,"line":87},[52,8258,483],{"class":69},[52,8260,250],{"class":65},[52,8262,253],{"class":98},[52,8264,8265],{"class":54,"line":109},[52,8266,492],{"class":65},[52,8268,8269,8271,8273,8275,8277,8279],{"class":54,"line":148},[52,8270,497],{"class":69},[52,8272,250],{"class":65},[52,8274,218],{"class":65},[52,8276,272],{"class":127},[52,8278,275],{"class":65},[52,8280,278],{"class":65},[52,8282,8283,8285,8287,8289,8291,8293],{"class":54,"line":158},[52,8284,512],{"class":69},[52,8286,250],{"class":65},[52,8288,218],{"class":65},[52,8290,291],{"class":127},[52,8292,275],{"class":65},[52,8294,278],{"class":65},[52,8296,8297],{"class":54,"line":167},[52,8298,527],{"class":65},[52,8300,8301],{"class":54,"line":174},[52,8302,492],{"class":65},[52,8304,8305,8307,8309,8311,8313,8315],{"class":54,"line":199},[52,8306,512],{"class":69},[52,8308,250],{"class":65},[52,8310,218],{"class":65},[52,8312,318],{"class":127},[52,8314,275],{"class":65},[52,8316,278],{"class":65},[52,8318,8319,8321,8323],{"class":54,"line":227},[52,8320,550],{"class":69},[52,8322,250],{"class":65},[52,8324,333],{"class":65},[52,8326,8327],{"class":54,"line":232},[52,8328,559],{"class":127},[52,8330,8331],{"class":54,"line":244},[52,8332,564],{"class":127},[52,8334,8335],{"class":54,"line":256},[52,8336,569],{"class":127},[52,8338,8339],{"class":54,"line":262},[52,8340,574],{"class":127},[52,8342,8343,8345,8347,8349,8351,8353,8355,8357,8359,8361,8363],{"class":54,"line":281},[52,8344,579],{"class":127},[52,8346,366],{"class":65},[52,8348,203],{"class":202},[52,8350,34],{"class":65},[52,8352,373],{"class":98},[52,8354,34],{"class":65},[52,8356,378],{"class":98},[52,8358,34],{"class":65},[52,8360,383],{"class":98},[52,8362,386],{"class":65},[52,8364,224],{"class":127},[52,8366,8367],{"class":54,"line":298},[52,8368,604],{"class":127},[52,8370,8371,8373],{"class":54,"line":304},[52,8372,609],{"class":65},[52,8374,278],{"class":65},[52,8376,8377],{"class":54,"line":309},[52,8378,527],{"class":65},[52,8380,8381,8383],{"class":54,"line":325},[52,8382,620],{"class":98},[52,8384,278],{"class":65},[52,8386,8387],{"class":54,"line":336},[52,8388,301],{"class":65},[52,8390,8391],{"class":54,"line":342},[52,8392,631],{"class":65},[52,8394,8395,8397],{"class":54,"line":348},[52,8396,386],{"class":65},[52,8398,423],{"class":98},[19,8400,641],{"id":640},[43,8402,8403],{"className":45,"code":644,"language":47,"meta":48,"style":48},[27,8404,8405,8409,8417,8425,8453,8479,8487,8495,8499,8519,8531,8539,8547,8553,8557,8571,8591,8605,8619,8627,8631,8645,8659,8663,8669,8675,8679],{"__ignoreMap":48},[52,8406,8407],{"class":54,"line":55},[52,8408,651],{"class":58},[52,8410,8411,8413,8415],{"class":54,"line":62},[52,8412,66],{"class":65},[52,8414,70],{"class":69},[52,8416,73],{"class":65},[52,8418,8419,8421,8423],{"class":54,"line":76},[52,8420,79],{"class":65},[52,8422,82],{"class":69},[52,8424,73],{"class":65},[52,8426,8427,8429,8431,8433,8435,8437,8439,8441,8443,8445,8447,8449,8451],{"class":54,"line":87},[52,8428,90],{"class":65},[52,8430,82],{"class":69},[52,8432,676],{"class":117},[52,8434,121],{"class":65},[52,8436,124],{"class":65},[52,8438,683],{"class":127},[52,8440,124],{"class":65},[52,8442,688],{"class":117},[52,8444,121],{"class":65},[52,8446,124],{"class":65},[52,8448,695],{"class":127},[52,8450,124],{"class":65},[52,8452,145],{"class":65},[52,8454,8455,8457,8459,8461,8463,8465,8467,8469,8471,8473,8475,8477],{"class":54,"line":109},[52,8456,90],{"class":65},[52,8458,706],{"class":69},[52,8460,709],{"class":117},[52,8462,121],{"class":65},[52,8464,124],{"class":65},[52,8466,716],{"class":127},[52,8468,124],{"class":65},[52,8470,95],{"class":65},[52,8472,723],{"class":98},[52,8474,102],{"class":65},[52,8476,706],{"class":69},[52,8478,73],{"class":65},[52,8480,8481,8483,8485],{"class":54,"line":148},[52,8482,151],{"class":65},[52,8484,82],{"class":69},[52,8486,73],{"class":65},[52,8488,8489,8491,8493],{"class":54,"line":158},[52,8490,102],{"class":65},[52,8492,70],{"class":69},[52,8494,73],{"class":65},[52,8496,8497],{"class":54,"line":167},[52,8498,171],{"emptyLinePlaceholder":170},[52,8500,8501,8503,8505,8507,8509,8511,8513,8515,8517],{"class":54,"line":174},[52,8502,66],{"class":65},[52,8504,179],{"class":69},[52,8506,182],{"class":117},[52,8508,185],{"class":117},[52,8510,121],{"class":65},[52,8512,124],{"class":65},[52,8514,192],{"class":127},[52,8516,124],{"class":65},[52,8518,73],{"class":65},[52,8520,8521,8523,8525,8527,8529],{"class":54,"line":199},[52,8522,774],{"class":117},[52,8524,777],{"class":98},[52,8526,121],{"class":65},[52,8528,782],{"class":235},[52,8530,785],{"class":65},[52,8532,8533,8535,8537],{"class":54,"line":227},[52,8534,790],{"class":69},[52,8536,250],{"class":65},[52,8538,796],{"class":795},[52,8540,8541,8543,8545],{"class":54,"line":232},[52,8542,801],{"class":69},[52,8544,250],{"class":65},[52,8546,796],{"class":795},[52,8548,8549,8551],{"class":54,"line":244},[52,8550,810],{"class":65},[52,8552,813],{"class":98},[52,8554,8555],{"class":54,"line":256},[52,8556,171],{"emptyLinePlaceholder":170},[52,8558,8559,8561,8563,8565,8567,8569],{"class":54,"line":262},[52,8560,774],{"class":117},[52,8562,824],{"class":98},[52,8564,121],{"class":65},[52,8566,829],{"class":65},[52,8568,832],{"class":117},[52,8570,469],{"class":65},[52,8572,8573,8575,8577,8579,8581,8583,8585,8587,8589],{"class":54,"line":281},[52,8574,839],{"class":98},[52,8576,34],{"class":65},[52,8578,844],{"class":235},[52,8580,238],{"class":69},[52,8582,275],{"class":65},[52,8584,851],{"class":127},[52,8586,275],{"class":65},[52,8588,856],{"class":65},[52,8590,469],{"class":65},[52,8592,8593,8595,8597,8599,8601,8603],{"class":54,"line":298},[52,8594,863],{"class":69},[52,8596,250],{"class":65},[52,8598,218],{"class":65},[52,8600,683],{"class":127},[52,8602,275],{"class":65},[52,8604,278],{"class":65},[52,8606,8607,8609,8611,8613,8615,8617],{"class":54,"line":304},[52,8608,878],{"class":69},[52,8610,250],{"class":65},[52,8612,218],{"class":65},[52,8614,885],{"class":127},[52,8616,275],{"class":65},[52,8618,278],{"class":65},[52,8620,8621,8623,8625],{"class":54,"line":309},[52,8622,894],{"class":69},[52,8624,250],{"class":65},[52,8626,253],{"class":69},[52,8628,8629],{"class":54,"line":325},[52,8630,903],{"class":65},[52,8632,8633,8635,8637,8639,8641,8643],{"class":54,"line":336},[52,8634,908],{"class":69},[52,8636,250],{"class":65},[52,8638,913],{"class":98},[52,8640,34],{"class":65},[52,8642,918],{"class":98},[52,8644,278],{"class":65},[52,8646,8647,8649,8651,8653,8655,8657],{"class":54,"line":342},[52,8648,925],{"class":69},[52,8650,250],{"class":65},[52,8652,913],{"class":98},[52,8654,34],{"class":65},[52,8656,934],{"class":98},[52,8658,278],{"class":65},[52,8660,8661],{"class":54,"line":348},[52,8662,941],{"class":65},[52,8664,8665,8667],{"class":54,"line":354},[52,8666,946],{"class":69},[52,8668,278],{"class":65},[52,8670,8671,8673],{"class":54,"line":360},[52,8672,953],{"class":65},[52,8674,423],{"class":69},[52,8676,8677],{"class":54,"line":391},[52,8678,960],{"class":65},[52,8680,8681,8683,8685],{"class":54,"line":397},[52,8682,102],{"class":65},[52,8684,179],{"class":69},[52,8686,73],{"class":65},[19,8688,972],{"id":971},[15,8690,975,8691,250],{},[27,8692,978],{},[43,8694,8695],{"className":981,"code":982,"language":983,"meta":48,"style":48},[27,8696,8697],{"__ignoreMap":48},[52,8698,8699,8701,8703],{"class":54,"line":55},[52,8700,383],{"class":98},[52,8702,121],{"class":65},[52,8704,994],{"class":127},[996,8706,998],{},{"title":48,"searchDepth":62,"depth":62,"links":8708},[8709,8713,8714],{"id":21,"depth":62,"text":22,"children":8710},[8711,8712],{"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":8718,"title":4107,"body":8719,"description":9560,"extension":1010,"icon":4993,"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,4126],{},[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,4293],{"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},[4313,8922,8923],{"icon":4315},[15,8924,8925,8926,8928],{},"Замените ",[27,8927,4293],{}," на ваш реальный ключ во время сборки, или используйте инъекцию во время выполнения.",[19,8930,8932],{"id":8931},"_2-создайте-свой-хук","2. Создайте свой хук",[43,8934,8935],{"className":2324,"code":4328,"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,4335],{"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,4368],{"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,4389],{"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,4416],{"class":65},[52,9020,218],{"class":65},[52,9022,4421],{"class":127},[52,9024,275],{"class":65},[52,9026,4416],{"class":65},[52,9028,218],{"class":65},[52,9030,4430],{"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,4445],{"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,4522],{"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,4533],{"class":98},[52,9132,1894],{"class":65},[52,9134,2692],{"class":65},[52,9136,4540],{"class":2368},[52,9138,250],{"class":65},[52,9140,4389],{"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,4589],{"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,4612],{"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,4533],{"class":98},[52,9230,856],{"class":65},[52,9232,4589],{"class":98},[52,9234,4641],{"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,4659],{"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,4522],{"class":98},[52,9261,212],{"class":65},[52,9263,215],{"class":202},[52,9265,218],{"class":65},[52,9267,4676],{"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,4691],{"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,4730],{"class":235},[52,9321,2365],{"class":65},[52,9323,4735],{"class":2368},[52,9325,856],{"class":65},[52,9327,4740],{"class":2368},[52,9329,2372],{"class":65},[52,9331,4691],{"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,4533],{"class":98},[52,9345,212],{"class":65},[52,9347,1894],{"class":65},[52,9349,4522],{"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,4791],{"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,4808],{"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,4843],{"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,4854],{"class":69},[52,9439,9440,9442,9444],{"class":54,"line":309},[52,9441,4859],{"class":117},[52,9443,4862],{"class":65},[52,9445,4865],{"class":117},[52,9447,9448,9450,9452],{"class":54,"line":325},[52,9449,4870],{"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,4879],{"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,4894],{"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,4909],{"class":69},[52,9487,250],{"class":65},[52,9489,4914],{"class":98},[52,9491,4917],{"class":65},[52,9493,4735],{"class":98},[52,9495,856],{"class":65},[52,9497,4924],{"class":69},[52,9499,250],{"class":65},[52,9501,4929],{"class":98},[52,9503,386],{"class":65},[52,9505,4934],{"class":98},[52,9507,278],{"class":65},[52,9509,9510,9512],{"class":54,"line":354},[52,9511,4941],{"class":65},[52,9513,423],{"class":98},[52,9515,9516],{"class":54,"line":360},[52,9517,4948],{"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,3227],{"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,4986],{},{"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":4107,"description":9560},"integrations\u002Freact","F7mSDoVd1RiVLbrCGyquPOzGkvCalo0IeQdlhW6YYUs",{"id":9567,"title":5001,"body":9568,"description":10189,"extension":1010,"icon":5673,"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,5024],{"class":65},[52,9591,5027],{"class":69},[52,9593,5030],{"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,5058],{"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,5069],{"class":117},[52,9632,121],{"class":65},[52,9634,124],{"class":65},[52,9636,5076],{"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,5089],{"class":117},[52,9650,121],{"class":65},[52,9652,124],{"class":65},[52,9654,5096],{"class":127},[52,9656,124],{"class":65},[52,9658,5101],{"class":117},[52,9660,121],{"class":65},[52,9662,124],{"class":65},[52,9664,5108],{"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,5119],{"class":69},[52,9676,95],{"class":65},[52,9678,9679],{"class":98},"Страница товара — Виртуальная примерка",[52,9681,102],{"class":65},[52,9683,5119],{"class":69},[52,9685,73],{"class":65},[52,9687,9688,9690,9692],{"class":54,"line":158},[52,9689,102],{"class":65},[52,9691,5058],{"class":69},[52,9693,73],{"class":65},[52,9695,9696,9698,9700],{"class":54,"line":167},[52,9697,66],{"class":65},[52,9699,5145],{"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,5218],{"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,5239],{"class":117},[52,9794,121],{"class":65},[52,9796,124],{"class":65},[52,9798,5246],{"class":235},[52,9800,1873],{"class":127},[52,9802,124],{"class":65},[52,9804,95],{"class":65},[52,9806,723],{"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,5280],{"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,5293],{"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,5306],{"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,5366],{"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,5409],{"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,5434],{"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":5453},[52,10000,151],{"class":65},[52,10002,179],{"class":69},[52,10004,73],{"class":65},[52,10006,10007],{"class":54,"line":5462},[52,10008,171],{"emptyLinePlaceholder":170},[52,10010,10011,10013,10015],{"class":54,"line":5467},[52,10012,79],{"class":65},[52,10014,179],{"class":69},[52,10016,73],{"class":65},[52,10018,10019,10021,10023,10025],{"class":54,"line":5476},[52,10020,5479],{"class":117},[52,10022,5482],{"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":5489},[52,10030,5492],{"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":5511},[52,10050,5514],{"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":5527},[52,10064,5530],{"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":5543},[52,10078,5546],{"class":69},[52,10080,250],{"class":65},[52,10082,253],{"class":69},[52,10084,10085],{"class":54,"line":5553},[52,10086,3176],{"class":65},[52,10088,10089,10091,10093,10095,10097,10099],{"class":54,"line":5558},[52,10090,3181],{"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":5573},[52,10104,3196],{"class":69},[52,10106,250],{"class":65},[52,10108,218],{"class":65},[52,10110,5582],{"class":127},[52,10112,275],{"class":65},[52,10114,278],{"class":65},[52,10116,10117],{"class":54,"line":5589},[52,10118,3211],{"class":65},[52,10120,10121,10123],{"class":54,"line":5594},[52,10122,3216],{"class":69},[52,10124,278],{"class":65},[52,10126,10127,10129,10131],{"class":54,"line":5601},[52,10128,5604],{"class":65},[52,10130,1129],{"class":69},[52,10132,1132],{"class":65},[52,10134,10135],{"class":54,"line":5611},[52,10136,5614],{"class":65},[52,10138,10139,10141,10143],{"class":54,"line":5617},[52,10140,151],{"class":65},[52,10142,179],{"class":69},[52,10144,73],{"class":65},[52,10146,10147,10149,10151],{"class":54,"line":5626},[52,10148,102],{"class":65},[52,10150,5145],{"class":69},[52,10152,73],{"class":65},[52,10154,10155,10157,10159],{"class":54,"line":5635},[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,5656],{}," перед вызовом ",[27,10177,851],{},[2156,10179,10180,10182],{},[27,10181,1165],{}," должен совпадать с существующим элементом на странице.",[996,10184,5667],{},{"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":5001,"description":10189},"integrations\u002Fvanilla-js","TOVOFdq4t72IBSUKHoJgLGlQk10I_zCs_rea9Sj9PGA",{"id":10195,"title":5681,"body":10196,"description":11026,"extension":1010,"icon":6528,"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,4126],{},[43,10213,10214],{"className":1772,"code":5700,"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":5883,"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,5890],{"class":58},[52,10403,10404,10406,10408,10410],{"class":54,"line":62},[52,10405,449],{"class":202},[52,10407,5897],{"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,4368],{"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,5897],{"class":117},[52,10451,4389],{"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,4416],{"class":65},[52,10477,218],{"class":65},[52,10479,4421],{"class":127},[52,10481,275],{"class":65},[52,10483,4416],{"class":65},[52,10485,218],{"class":65},[52,10487,4430],{"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,5990],{"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,6043],{"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,4522],{"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,4533],{"class":98},[52,10583,1894],{"class":65},[52,10585,2692],{"class":65},[52,10587,4540],{"class":2368},[52,10589,250],{"class":65},[52,10591,4389],{"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,4589],{"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,4612],{"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,4533],{"class":98},[52,10677,856],{"class":65},[52,10679,4589],{"class":98},[52,10681,6174],{"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,4791],{"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,6230],{"class":117},[52,10738,121],{"class":65},[52,10740,124],{"class":65},[52,10742,6237],{"class":127},[52,10744,1797],{"class":65},[52,10746,10747],{"class":54,"line":158},[52,10748,6244],{"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,723],{"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,4522],{"class":98},[52,10824,856],{"class":65},[52,10826,6323],{"class":202},[52,10828,2630],{"class":98},[52,10830,212],{"class":65},[52,10832,215],{"class":202},[52,10834,218],{"class":65},[52,10836,6334],{"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,6387],{"class":98},[52,10890,386],{"class":65},[52,10892,1894],{"class":65},[52,10894,4522],{"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,6418],{"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":5453},[52,11004,953],{"class":65},[52,11006,423],{"class":69},[52,11008,11009],{"class":54,"line":5462},[52,11010,960],{"class":65},[52,11012,11013,11015,11017],{"class":54,"line":5467},[52,11014,102],{"class":65},[52,11016,179],{"class":69},[52,11018,73],{"class":65},[996,11020,6521],{},{"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":5681,"description":11026},"integrations\u002Fvue","940Q7exH9C3y9bXr_sW6skJzNNxxGlNzOBpnASqYjFU",1779283220738]