[{"data":1,"prerenderedAt":10838},["ShallowReactive",2],{"\u002Fintegrations\u002Fvanilla-js":3,"all-pages-\u002Fintegrations\u002Fvanilla-js":800},{"id":4,"title":5,"body":6,"description":792,"extension":793,"icon":794,"meta":795,"navigation":191,"path":796,"seo":797,"stem":798,"__hash__":799},"content\u002Fintegrations\u002Fvanilla-js.md","Vanilla JS",{"type":7,"value":8,"toc":788},"minimark",[9,14,18,23,758,762,784],[10,11,13],"h1",{"id":12},"интеграция-с-vanilla-js","Интеграция с Vanilla JS",[15,16,17],"p",{},"Без фреймворков — только HTML и JavaScript.",[19,20,22],"h2",{"id":21},"полный-пример","Полный пример",[24,25,30],"pre",{"className":26,"code":27,"language":28,"meta":29,"style":29},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\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","html","",[31,32,33,53,78,88,112,145,167,176,186,193,211,229,234,241,280,285,320,325,331,339,355,370,381,386,392,412,444,499,505,529,547,557,567,572,581,594,617,634,651,662,668,684,701,707,715,725,731,740,749],"code",{"__ignoreMap":29},[34,35,38,42,46,50],"span",{"class":36,"line":37},"line",1,[34,39,41],{"class":40},"sMK4o","\u003C!",[34,43,45],{"class":44},"swJcz","DOCTYPE",[34,47,49],{"class":48},"spNyl"," html",[34,51,52],{"class":40},">\n",[34,54,56,59,61,64,67,70,74,76],{"class":36,"line":55},2,[34,57,58],{"class":40},"\u003C",[34,60,28],{"class":44},[34,62,63],{"class":48}," lang",[34,65,66],{"class":40},"=",[34,68,69],{"class":40},"\"",[34,71,73],{"class":72},"sfazB","ru",[34,75,69],{"class":40},[34,77,52],{"class":40},[34,79,81,83,86],{"class":36,"line":80},3,[34,82,58],{"class":40},[34,84,85],{"class":44},"head",[34,87,52],{"class":40},[34,89,91,94,97,100,102,104,107,109],{"class":36,"line":90},4,[34,92,93],{"class":40},"  \u003C",[34,95,96],{"class":44},"meta",[34,98,99],{"class":48}," charset",[34,101,66],{"class":40},[34,103,69],{"class":40},[34,105,106],{"class":72},"UTF-8",[34,108,69],{"class":40},[34,110,111],{"class":40}," \u002F>\n",[34,113,115,117,119,122,124,126,129,131,134,136,138,141,143],{"class":36,"line":114},5,[34,116,93],{"class":40},[34,118,96],{"class":44},[34,120,121],{"class":48}," name",[34,123,66],{"class":40},[34,125,69],{"class":40},[34,127,128],{"class":72},"viewport",[34,130,69],{"class":40},[34,132,133],{"class":48}," content",[34,135,66],{"class":40},[34,137,69],{"class":40},[34,139,140],{"class":72},"width=device-width, initial-scale=1.0",[34,142,69],{"class":40},[34,144,111],{"class":40},[34,146,148,150,153,156,160,163,165],{"class":36,"line":147},6,[34,149,93],{"class":40},[34,151,152],{"class":44},"title",[34,154,155],{"class":40},">",[34,157,159],{"class":158},"sTEyZ","Страница товара — Виртуальная примерка",[34,161,162],{"class":40},"\u003C\u002F",[34,164,152],{"class":44},[34,166,52],{"class":40},[34,168,170,172,174],{"class":36,"line":169},7,[34,171,162],{"class":40},[34,173,85],{"class":44},[34,175,52],{"class":40},[34,177,179,181,184],{"class":36,"line":178},8,[34,180,58],{"class":40},[34,182,183],{"class":44},"body",[34,185,52],{"class":40},[34,187,189],{"class":36,"line":188},9,[34,190,192],{"emptyLinePlaceholder":191},true,"\n",[34,194,196,198,200,202,205,207,209],{"class":36,"line":195},10,[34,197,93],{"class":40},[34,199,10],{"class":44},[34,201,155],{"class":40},[34,203,204],{"class":158},"Классическая джинсовая куртка",[34,206,162],{"class":40},[34,208,10],{"class":44},[34,210,52],{"class":40},[34,212,214,216,218,220,223,225,227],{"class":36,"line":213},11,[34,215,93],{"class":40},[34,217,15],{"class":44},[34,219,155],{"class":40},[34,221,222],{"class":158},"7 500 ₽",[34,224,162],{"class":40},[34,226,15],{"class":44},[34,228,52],{"class":40},[34,230,232],{"class":36,"line":231},12,[34,233,192],{"emptyLinePlaceholder":191},[34,235,237],{"class":36,"line":236},13,[34,238,240],{"class":239},"sHwdD","  \u003C!-- Контейнер виджета -->\n",[34,242,244,246,249,252,254,256,259,261,264,266,268,271,273,276,278],{"class":36,"line":243},14,[34,245,93],{"class":40},[34,247,248],{"class":44},"div",[34,250,251],{"class":48}," id",[34,253,66],{"class":40},[34,255,69],{"class":40},[34,257,258],{"class":72},"widget-container",[34,260,69],{"class":40},[34,262,263],{"class":48}," style",[34,265,66],{"class":40},[34,267,69],{"class":40},[34,269,270],{"class":72},"width: 100%; max-width: 600px; aspect-ratio: 3 \u002F 4;",[34,272,69],{"class":40},[34,274,275],{"class":40},">\u003C\u002F",[34,277,248],{"class":44},[34,279,52],{"class":40},[34,281,283],{"class":36,"line":282},15,[34,284,192],{"emptyLinePlaceholder":191},[34,286,288,290,293,296,298,300,304,307,309,311,314,316,318],{"class":36,"line":287},16,[34,289,93],{"class":40},[34,291,292],{"class":44},"button",[34,294,295],{"class":48}," onclick",[34,297,66],{"class":40},[34,299,69],{"class":40},[34,301,303],{"class":302},"s2Zo4","openWidget",[34,305,306],{"class":72},"()",[34,308,69],{"class":40},[34,310,155],{"class":40},[34,312,313],{"class":158},"Примерка",[34,315,162],{"class":40},[34,317,292],{"class":44},[34,319,52],{"class":40},[34,321,323],{"class":36,"line":322},17,[34,324,192],{"emptyLinePlaceholder":191},[34,326,328],{"class":36,"line":327},18,[34,329,330],{"class":239},"  \u003C!-- 1. Загрузка пакета виджета -->\n",[34,332,334,336],{"class":36,"line":333},19,[34,335,93],{"class":40},[34,337,338],{"class":44},"script\n",[34,340,342,345,347,349,352],{"class":36,"line":341},20,[34,343,344],{"class":48},"    src",[34,346,66],{"class":40},[34,348,69],{"class":40},[34,350,351],{"class":72},"https:\u002F\u002Fwidget.try-on.ru\u002Ffitting-widget-bundle.js",[34,353,354],{"class":40},"\"\n",[34,356,358,361,363,365,368],{"class":36,"line":357},21,[34,359,360],{"class":48},"    id",[34,362,66],{"class":40},[34,364,69],{"class":40},[34,366,367],{"class":72},"fitting-widget-bundle",[34,369,354],{"class":40},[34,371,373,376,379],{"class":36,"line":372},22,[34,374,375],{"class":40},"  >\u003C\u002F",[34,377,378],{"class":44},"script",[34,380,52],{"class":40},[34,382,384],{"class":36,"line":383},23,[34,385,192],{"emptyLinePlaceholder":191},[34,387,389],{"class":36,"line":388},24,[34,390,391],{"class":239},"  \u003C!-- 2. Инициализация -->\n",[34,393,395,397,399,401,403,405,408,410],{"class":36,"line":394},25,[34,396,93],{"class":40},[34,398,378],{"class":44},[34,400,251],{"class":48},[34,402,66],{"class":40},[34,404,69],{"class":40},[34,406,407],{"class":72},"fitting-init",[34,409,69],{"class":40},[34,411,52],{"class":40},[34,413,415,418,421,424,426,429,431,433,436,439,441],{"class":36,"line":414},26,[34,416,417],{"class":158},"    window",[34,419,420],{"class":40},".",[34,422,423],{"class":158},"fitting ",[34,425,66],{"class":40},[34,427,428],{"class":158}," window",[34,430,420],{"class":40},[34,432,423],{"class":158},[34,434,435],{"class":40},"||",[34,437,438],{"class":48}," function",[34,440,306],{"class":40},[34,442,443],{"class":40}," {\n",[34,445,447,450,453,455,458,460,463,466,468,470,472,474,476,479,482,484,487,490,493,496],{"class":36,"line":446},27,[34,448,449],{"class":44},"      (",[34,451,452],{"class":158},"window",[34,454,420],{"class":40},[34,456,457],{"class":158},"fitting",[34,459,420],{"class":40},[34,461,462],{"class":158},"q",[34,464,465],{"class":40}," =",[34,467,428],{"class":158},[34,469,420],{"class":40},[34,471,457],{"class":158},[34,473,420],{"class":40},[34,475,462],{"class":158},[34,477,478],{"class":40}," ||",[34,480,481],{"class":44}," [])",[34,483,420],{"class":40},[34,485,486],{"class":302},"push",[34,488,489],{"class":44},"(",[34,491,492],{"class":158},"arguments",[34,494,495],{"class":44},")",[34,497,498],{"class":40},";\n",[34,500,502],{"class":36,"line":501},28,[34,503,504],{"class":40},"    };\n",[34,506,508,510,512,514,516,519,522,524,527],{"class":36,"line":507},29,[34,509,417],{"class":158},[34,511,420],{"class":40},[34,513,457],{"class":302},[34,515,489],{"class":158},[34,517,518],{"class":40},"'",[34,520,521],{"class":72},"init",[34,523,518],{"class":40},[34,525,526],{"class":40},",",[34,528,443],{"class":40},[34,530,532,535,538,541,544],{"class":36,"line":531},30,[34,533,534],{"class":44},"      apiKey",[34,536,537],{"class":40},":",[34,539,540],{"class":40}," '",[34,542,543],{"class":72},"YOUR_API_KEY",[34,545,546],{"class":40},"'\n",[34,548,550,553,555],{"class":36,"line":549},31,[34,551,552],{"class":40},"    }",[34,554,495],{"class":158},[34,556,498],{"class":40},[34,558,560,563,565],{"class":36,"line":559},32,[34,561,562],{"class":40},"  \u003C\u002F",[34,564,378],{"class":44},[34,566,52],{"class":40},[34,568,570],{"class":36,"line":569},33,[34,571,192],{"emptyLinePlaceholder":191},[34,573,575,577,579],{"class":36,"line":574},34,[34,576,93],{"class":40},[34,578,378],{"class":44},[34,580,52],{"class":40},[34,582,584,587,590,592],{"class":36,"line":583},35,[34,585,586],{"class":48},"    function",[34,588,589],{"class":302}," openWidget",[34,591,306],{"class":40},[34,593,443],{"class":40},[34,595,597,600,602,604,606,608,611,613,615],{"class":36,"line":596},36,[34,598,599],{"class":158},"      window",[34,601,420],{"class":40},[34,603,457],{"class":302},[34,605,489],{"class":44},[34,607,518],{"class":40},[34,609,610],{"class":72},"create",[34,612,518],{"class":40},[34,614,526],{"class":40},[34,616,443],{"class":40},[34,618,620,623,625,627,629,631],{"class":36,"line":619},37,[34,621,622],{"class":44},"        targetElementId",[34,624,537],{"class":40},[34,626,540],{"class":40},[34,628,258],{"class":72},[34,630,518],{"class":40},[34,632,633],{"class":40},",\n",[34,635,637,640,642,644,647,649],{"class":36,"line":636},38,[34,638,639],{"class":44},"        model",[34,641,537],{"class":40},[34,643,540],{"class":40},[34,645,646],{"class":72},"balanced",[34,648,518],{"class":40},[34,650,633],{"class":40},[34,652,654,657,659],{"class":36,"line":653},39,[34,655,656],{"class":44},"        tryonItems",[34,658,537],{"class":40},[34,660,661],{"class":44}," [\n",[34,663,665],{"class":36,"line":664},40,[34,666,667],{"class":40},"          {\n",[34,669,671,674,676,678,680,682],{"class":36,"line":670},41,[34,672,673],{"class":44},"            productName",[34,675,537],{"class":40},[34,677,540],{"class":40},[34,679,204],{"class":72},[34,681,518],{"class":40},[34,683,633],{"class":40},[34,685,687,690,692,694,697,699],{"class":36,"line":686},42,[34,688,689],{"class":44},"            url",[34,691,537],{"class":40},[34,693,540],{"class":40},[34,695,696],{"class":72},"https:\u002F\u002Fexample.com\u002Fimages\u002Fjacket.jpg",[34,698,518],{"class":40},[34,700,633],{"class":40},[34,702,704],{"class":36,"line":703},43,[34,705,706],{"class":40},"          },\n",[34,708,710,713],{"class":36,"line":709},44,[34,711,712],{"class":44},"        ]",[34,714,633],{"class":40},[34,716,718,721,723],{"class":36,"line":717},45,[34,719,720],{"class":40},"      }",[34,722,495],{"class":44},[34,724,498],{"class":40},[34,726,728],{"class":36,"line":727},46,[34,729,730],{"class":40},"    }\n",[34,732,734,736,738],{"class":36,"line":733},47,[34,735,562],{"class":40},[34,737,378],{"class":44},[34,739,52],{"class":40},[34,741,743,745,747],{"class":36,"line":742},48,[34,744,162],{"class":40},[34,746,183],{"class":44},[34,748,52],{"class":40},[34,750,752,754,756],{"class":36,"line":751},49,[34,753,162],{"class":40},[34,755,28],{"class":44},[34,757,52],{"class":40},[19,759,761],{"id":760},"ключевые-моменты","Ключевые моменты",[763,764,765,769,778],"ul",{},[766,767,768],"li",{},"Сначала загружается пакетный скрипт.",[766,770,771,772,775,776,420],{},"Инициализируйте с помощью ",[31,773,774],{},"window.fitting('init', { apiKey })"," перед вызовом ",[31,777,610],{},[766,779,780,783],{},[31,781,782],{},"targetElementId"," должен совпадать с существующим элементом на странице.",[785,786,787],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html 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":29,"searchDepth":55,"depth":55,"links":789},[790,791],{"id":21,"depth":55,"text":22},{"id":760,"depth":55,"text":761},"Интеграция с обычным HTML\u002FJavaScript","md","i-lucide-file-code",{},"\u002Fintegrations\u002Fvanilla-js",{"title":5,"description":792},"integrations\u002Fvanilla-js","TOVOFdq4t72IBSUKHoJgLGlQk10I_zCs_rea9Sj9PGA",[801,1177,1513,1953,2044,3062,3962,4856,5484,6339,6756,6843,7725,8546,9395,10000],{"id":802,"title":803,"body":804,"description":1170,"extension":793,"icon":1171,"meta":1172,"navigation":191,"path":1173,"seo":1174,"stem":1175,"__hash__":1176},"content\u002Fapi\u002Findex.md","Справочник API",{"type":7,"value":805,"toc":1164},[806,809,813,816,861,913,916,920,923,992,997,1040,1161],[10,807,803],{"id":808},"справочник-api",[19,810,812],{"id":811},"windowfittinginit-options","window.fitting('init', options)",[15,814,815],{},"Инициализирует виджет. Вызывается один раз, до всех остальных методов.",[817,818,819,839],"table",{},[820,821,822],"thead",{},[823,824,825,829,832,836],"tr",{},[826,827,828],"th",{},"Параметр",[826,830,831],{},"Тип",[826,833,835],{"align":834},"center","Обязателен",[826,837,838],{},"Описание",[840,841,842],"tbody",{},[823,843,844,850,855,858],{},[845,846,847],"td",{},[31,848,849],{},"apiKey",[845,851,852],{},[31,853,854],{},"string",[845,856,857],{"align":834},"Да",[845,859,860],{},"Ваш API-ключ виджета",[24,862,866],{"className":863,"code":864,"language":865,"meta":29,"style":29},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","window.fitting('init', {\n  apiKey: 'pk_live_xxx',\n});\n","js",[31,867,868,888,904],{"__ignoreMap":29},[34,869,870,872,874,876,878,880,882,884,886],{"class":36,"line":37},[34,871,452],{"class":158},[34,873,420],{"class":40},[34,875,457],{"class":302},[34,877,489],{"class":158},[34,879,518],{"class":40},[34,881,521],{"class":72},[34,883,518],{"class":40},[34,885,526],{"class":40},[34,887,443],{"class":40},[34,889,890,893,895,897,900,902],{"class":36,"line":55},[34,891,892],{"class":44},"  apiKey",[34,894,537],{"class":40},[34,896,540],{"class":40},[34,898,899],{"class":72},"pk_live_xxx",[34,901,518],{"class":40},[34,903,633],{"class":40},[34,905,906,909,911],{"class":36,"line":80},[34,907,908],{"class":40},"}",[34,910,495],{"class":158},[34,912,498],{"class":40},[914,915],"hr",{},[19,917,919],{"id":918},"windowfittingcreate-options","window.fitting('create', options)",[15,921,922],{},"Запускает виртуальную примерку.",[817,924,925,937],{},[820,926,927],{},[823,928,929,931,933,935],{},[826,930,828],{},[826,932,831],{},[826,934,835],{"align":834},[826,936,838],{},[840,938,939,954,971],{},[823,940,941,945,949,951],{},[845,942,943],{},[31,944,782],{},[845,946,947],{},[31,948,854],{},[845,950,857],{"align":834},[845,952,953],{},"ID контейнера, в котором отображается виджет",[823,955,956,961,966,968],{},[845,957,958],{},[31,959,960],{},"tryonItems",[845,962,963],{},[31,964,965],{},"TryonItem[]",[845,967,857],{"align":834},[845,969,970],{},"Массив товаров, доступных для примерки",[823,972,973,978,983,986],{},[845,974,975],{},[31,976,977],{},"model",[845,979,980],{},[31,981,982],{},"'balanced' | 'quality' | 'performance'",[845,984,985],{"align":834},"Нет",[845,987,988,989,495],{},"Режим отрисовки (по умолчанию: ",[31,990,991],{},"'balanced'",[993,994,996],"h3",{"id":995},"tryonitem","TryonItem",[817,998,999,1010],{},[820,1000,1001],{},[823,1002,1003,1006,1008],{},[826,1004,1005],{},"Поле",[826,1007,831],{},[826,1009,838],{},[840,1011,1012,1026],{},[823,1013,1014,1019,1023],{},[845,1015,1016],{},[31,1017,1018],{},"productName",[845,1020,1021],{},[31,1022,854],{},[845,1024,1025],{},"Отображаемое название товара",[823,1027,1028,1033,1037],{},[845,1029,1030],{},[31,1031,1032],{},"url",[845,1034,1035],{},[31,1036,854],{},[845,1038,1039],{},"Полный URL изображения товара",[24,1041,1043],{"className":863,"code":1042,"language":865,"meta":29,"style":29},"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",[31,1044,1045,1065,1080,1095,1104,1109,1125,1141,1146,1153],{"__ignoreMap":29},[34,1046,1047,1049,1051,1053,1055,1057,1059,1061,1063],{"class":36,"line":37},[34,1048,452],{"class":158},[34,1050,420],{"class":40},[34,1052,457],{"class":302},[34,1054,489],{"class":158},[34,1056,518],{"class":40},[34,1058,610],{"class":72},[34,1060,518],{"class":40},[34,1062,526],{"class":40},[34,1064,443],{"class":40},[34,1066,1067,1070,1072,1074,1076,1078],{"class":36,"line":55},[34,1068,1069],{"class":44},"  targetElementId",[34,1071,537],{"class":40},[34,1073,540],{"class":40},[34,1075,258],{"class":72},[34,1077,518],{"class":40},[34,1079,633],{"class":40},[34,1081,1082,1085,1087,1089,1091,1093],{"class":36,"line":80},[34,1083,1084],{"class":44},"  model",[34,1086,537],{"class":40},[34,1088,540],{"class":40},[34,1090,646],{"class":72},[34,1092,518],{"class":40},[34,1094,633],{"class":40},[34,1096,1097,1100,1102],{"class":36,"line":90},[34,1098,1099],{"class":44},"  tryonItems",[34,1101,537],{"class":40},[34,1103,661],{"class":158},[34,1105,1106],{"class":36,"line":114},[34,1107,1108],{"class":40},"    {\n",[34,1110,1111,1114,1116,1118,1121,1123],{"class":36,"line":147},[34,1112,1113],{"class":44},"      productName",[34,1115,537],{"class":40},[34,1117,540],{"class":40},[34,1119,1120],{"class":72},"Джинсовая куртка",[34,1122,518],{"class":40},[34,1124,633],{"class":40},[34,1126,1127,1130,1132,1134,1137,1139],{"class":36,"line":169},[34,1128,1129],{"class":44},"      url",[34,1131,537],{"class":40},[34,1133,540],{"class":40},[34,1135,1136],{"class":72},"https:\u002F\u002Fexample.com\u002Fjacket.png",[34,1138,518],{"class":40},[34,1140,633],{"class":40},[34,1142,1143],{"class":36,"line":178},[34,1144,1145],{"class":40},"    },\n",[34,1147,1148,1151],{"class":36,"line":188},[34,1149,1150],{"class":158},"  ]",[34,1152,633],{"class":40},[34,1154,1155,1157,1159],{"class":36,"line":195},[34,1156,908],{"class":40},[34,1158,495],{"class":158},[34,1160,498],{"class":40},[785,1162,1163],{},"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":29,"searchDepth":55,"depth":55,"links":1165},[1166,1167],{"id":811,"depth":55,"text":812},{"id":918,"depth":55,"text":919,"children":1168},[1169],{"id":995,"depth":80,"text":996},"Полный справочник по API Fitting Widget","i-lucide-code",{},"\u002Fapi",{"title":803,"description":1170},"api\u002Findex","nBz9Z0BX1B-BPJzD-HVF5oHrejoQd0__hLi-_PGCmvk",{"id":1178,"title":1179,"body":1180,"description":1507,"extension":793,"icon":1171,"meta":1508,"navigation":191,"path":1509,"seo":1510,"stem":1511,"__hash__":1512},"content\u002Fen\u002Fapi\u002Findex.md","API Reference",{"type":7,"value":1181,"toc":1501},[1182,1185,1187,1190,1226,1272,1274,1276,1279,1344,1346,1387,1499],[10,1183,1179],{"id":1184},"api-reference",[19,1186,812],{"id":811},[15,1188,1189],{},"Initializes the widget. Call this once, before any other methods.",[817,1191,1192,1208],{},[820,1193,1194],{},[823,1195,1196,1199,1202,1205],{},[826,1197,1198],{},"Parameter",[826,1200,1201],{},"Type",[826,1203,1204],{"align":834},"Required",[826,1206,1207],{},"Description",[840,1209,1210],{},[823,1211,1212,1216,1220,1223],{},[845,1213,1214],{},[31,1215,849],{},[845,1217,1218],{},[31,1219,854],{},[845,1221,1222],{"align":834},"Yes",[845,1224,1225],{},"Your widget API key",[24,1227,1228],{"className":863,"code":864,"language":865,"meta":29,"style":29},[31,1229,1230,1250,1264],{"__ignoreMap":29},[34,1231,1232,1234,1236,1238,1240,1242,1244,1246,1248],{"class":36,"line":37},[34,1233,452],{"class":158},[34,1235,420],{"class":40},[34,1237,457],{"class":302},[34,1239,489],{"class":158},[34,1241,518],{"class":40},[34,1243,521],{"class":72},[34,1245,518],{"class":40},[34,1247,526],{"class":40},[34,1249,443],{"class":40},[34,1251,1252,1254,1256,1258,1260,1262],{"class":36,"line":55},[34,1253,892],{"class":44},[34,1255,537],{"class":40},[34,1257,540],{"class":40},[34,1259,899],{"class":72},[34,1261,518],{"class":40},[34,1263,633],{"class":40},[34,1265,1266,1268,1270],{"class":36,"line":80},[34,1267,908],{"class":40},[34,1269,495],{"class":158},[34,1271,498],{"class":40},[914,1273],{},[19,1275,919],{"id":918},[15,1277,1278],{},"Opens the virtual try-on experience.",[817,1280,1281,1293],{},[820,1282,1283],{},[823,1284,1285,1287,1289,1291],{},[826,1286,1198],{},[826,1288,1201],{},[826,1290,1204],{"align":834},[826,1292,1207],{},[840,1294,1295,1310,1325],{},[823,1296,1297,1301,1305,1307],{},[845,1298,1299],{},[31,1300,782],{},[845,1302,1303],{},[31,1304,854],{},[845,1306,1222],{"align":834},[845,1308,1309],{},"ID of the container element where the widget renders",[823,1311,1312,1316,1320,1322],{},[845,1313,1314],{},[31,1315,960],{},[845,1317,1318],{},[31,1319,965],{},[845,1321,1222],{"align":834},[845,1323,1324],{},"Array of items available for try-on",[823,1326,1327,1331,1336,1339],{},[845,1328,1329],{},[31,1330,977],{},[845,1332,1333],{},[31,1334,1335],{},"'balanced' | 'quality' | 'speed'",[845,1337,1338],{"align":834},"No",[845,1340,1341,1342,495],{},"Rendering model (default: ",[31,1343,991],{},[993,1345,996],{"id":995},[817,1347,1348,1359],{},[820,1349,1350],{},[823,1351,1352,1355,1357],{},[826,1353,1354],{},"Field",[826,1356,1201],{},[826,1358,1207],{},[840,1360,1361,1374],{},[823,1362,1363,1367,1371],{},[845,1364,1365],{},[31,1366,1018],{},[845,1368,1369],{},[31,1370,854],{},[845,1372,1373],{},"Display name of the garment",[823,1375,1376,1380,1384],{},[845,1377,1378],{},[31,1379,1032],{},[845,1381,1382],{},[31,1383,854],{},[845,1385,1386],{},"Full URL to the garment image",[24,1388,1390],{"className":863,"code":1389,"language":865,"meta":29,"style":29},"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",[31,1391,1392,1412,1426,1440,1448,1452,1467,1481,1485,1491],{"__ignoreMap":29},[34,1393,1394,1396,1398,1400,1402,1404,1406,1408,1410],{"class":36,"line":37},[34,1395,452],{"class":158},[34,1397,420],{"class":40},[34,1399,457],{"class":302},[34,1401,489],{"class":158},[34,1403,518],{"class":40},[34,1405,610],{"class":72},[34,1407,518],{"class":40},[34,1409,526],{"class":40},[34,1411,443],{"class":40},[34,1413,1414,1416,1418,1420,1422,1424],{"class":36,"line":55},[34,1415,1069],{"class":44},[34,1417,537],{"class":40},[34,1419,540],{"class":40},[34,1421,258],{"class":72},[34,1423,518],{"class":40},[34,1425,633],{"class":40},[34,1427,1428,1430,1432,1434,1436,1438],{"class":36,"line":80},[34,1429,1084],{"class":44},[34,1431,537],{"class":40},[34,1433,540],{"class":40},[34,1435,646],{"class":72},[34,1437,518],{"class":40},[34,1439,633],{"class":40},[34,1441,1442,1444,1446],{"class":36,"line":90},[34,1443,1099],{"class":44},[34,1445,537],{"class":40},[34,1447,661],{"class":158},[34,1449,1450],{"class":36,"line":114},[34,1451,1108],{"class":40},[34,1453,1454,1456,1458,1460,1463,1465],{"class":36,"line":147},[34,1455,1113],{"class":44},[34,1457,537],{"class":40},[34,1459,540],{"class":40},[34,1461,1462],{"class":72},"Denim Jacket",[34,1464,518],{"class":40},[34,1466,633],{"class":40},[34,1468,1469,1471,1473,1475,1477,1479],{"class":36,"line":169},[34,1470,1129],{"class":44},[34,1472,537],{"class":40},[34,1474,540],{"class":40},[34,1476,1136],{"class":72},[34,1478,518],{"class":40},[34,1480,633],{"class":40},[34,1482,1483],{"class":36,"line":178},[34,1484,1145],{"class":40},[34,1486,1487,1489],{"class":36,"line":188},[34,1488,1150],{"class":158},[34,1490,633],{"class":40},[34,1492,1493,1495,1497],{"class":36,"line":195},[34,1494,908],{"class":40},[34,1496,495],{"class":158},[34,1498,498],{"class":40},[785,1500,1163],{},{"title":29,"searchDepth":55,"depth":55,"links":1502},[1503,1504],{"id":811,"depth":55,"text":812},{"id":918,"depth":55,"text":919,"children":1505},[1506],{"id":995,"depth":80,"text":996},"Complete reference for the Fitting Widget API",{},"\u002Fen\u002Fapi",{"title":1179,"description":1507},"en\u002Fapi\u002Findex","5vrf4TtfB7Sr4MpfgLzStW-oF0xDBiShwkqA4UFzgA0",{"id":1514,"title":1515,"body":1516,"description":1946,"extension":793,"icon":1947,"meta":1948,"navigation":191,"path":1949,"seo":1950,"stem":1951,"__hash__":1952},"content\u002Fen\u002Fgetting-started\u002Fquick-start.md","Quick Start",{"type":7,"value":1517,"toc":1937},[1518,1521,1524,1528,1539,1543,1554,1599,1603,1749,1753,1760,1787,1791,1797,1910,1914,1917,1921,1934],[10,1519,1515],{"id":1520},"quick-start",[15,1522,1523],{},"Follow these steps to add virtual try-on to your e-commerce site.",[19,1525,1527],{"id":1526},"_1-get-your-api-key","1. Get Your API Key",[15,1529,1530,1531,1538],{},"Sign up at ",[1532,1533,1537],"a",{"href":1534,"rel":1535},"https:\u002F\u002Fwidget.try-on.ru",[1536],"nofollow","widget.try-on.ru"," to obtain your free API key.",[19,1540,1542],{"id":1541},"_2-load-the-widget-script","2. Load the Widget Script",[15,1544,1545,1546,1549,1550,1553],{},"Add the following ",[31,1547,1548],{},"\u003Cscript>"," tag to your page, ideally right before the closing ",[31,1551,1552],{},"\u003C\u002Fbody>"," tag:",[24,1555,1557],{"className":26,"code":1556,"language":28,"meta":29,"style":29},"\u003Cscript\n  src=\"https:\u002F\u002Fwidget.try-on.ru\u002Ffitting-widget-bundle.js\"\n  id=\"fitting-widget-bundle\"\n>\u003C\u002Fscript>\n",[31,1558,1559,1565,1578,1591],{"__ignoreMap":29},[34,1560,1561,1563],{"class":36,"line":37},[34,1562,58],{"class":40},[34,1564,338],{"class":44},[34,1566,1567,1570,1572,1574,1576],{"class":36,"line":55},[34,1568,1569],{"class":48},"  src",[34,1571,66],{"class":40},[34,1573,69],{"class":40},[34,1575,351],{"class":72},[34,1577,354],{"class":40},[34,1579,1580,1583,1585,1587,1589],{"class":36,"line":80},[34,1581,1582],{"class":48},"  id",[34,1584,66],{"class":40},[34,1586,69],{"class":40},[34,1588,367],{"class":72},[34,1590,354],{"class":40},[34,1592,1593,1595,1597],{"class":36,"line":90},[34,1594,275],{"class":40},[34,1596,378],{"class":44},[34,1598,52],{"class":40},[19,1600,1602],{"id":1601},"_3-initialize-the-widget","3. Initialize the Widget",[24,1604,1606],{"className":26,"code":1605,"language":28,"meta":29,"style":29},"\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",[31,1607,1608,1626,1651,1694,1699,1719,1732,1741],{"__ignoreMap":29},[34,1609,1610,1612,1614,1616,1618,1620,1622,1624],{"class":36,"line":37},[34,1611,58],{"class":40},[34,1613,378],{"class":44},[34,1615,251],{"class":48},[34,1617,66],{"class":40},[34,1619,69],{"class":40},[34,1621,407],{"class":72},[34,1623,69],{"class":40},[34,1625,52],{"class":40},[34,1627,1628,1631,1633,1635,1637,1639,1641,1643,1645,1647,1649],{"class":36,"line":55},[34,1629,1630],{"class":158},"  window",[34,1632,420],{"class":40},[34,1634,423],{"class":158},[34,1636,66],{"class":40},[34,1638,428],{"class":158},[34,1640,420],{"class":40},[34,1642,423],{"class":158},[34,1644,435],{"class":40},[34,1646,438],{"class":48},[34,1648,306],{"class":40},[34,1650,443],{"class":40},[34,1652,1653,1656,1658,1660,1662,1664,1666,1668,1670,1672,1674,1676,1678,1680,1682,1684,1686,1688,1690,1692],{"class":36,"line":80},[34,1654,1655],{"class":44},"    (",[34,1657,452],{"class":158},[34,1659,420],{"class":40},[34,1661,457],{"class":158},[34,1663,420],{"class":40},[34,1665,462],{"class":158},[34,1667,465],{"class":40},[34,1669,428],{"class":158},[34,1671,420],{"class":40},[34,1673,457],{"class":158},[34,1675,420],{"class":40},[34,1677,462],{"class":158},[34,1679,478],{"class":40},[34,1681,481],{"class":44},[34,1683,420],{"class":40},[34,1685,486],{"class":302},[34,1687,489],{"class":44},[34,1689,492],{"class":158},[34,1691,495],{"class":44},[34,1693,498],{"class":40},[34,1695,1696],{"class":36,"line":90},[34,1697,1698],{"class":40},"  };\n",[34,1700,1701,1703,1705,1707,1709,1711,1713,1715,1717],{"class":36,"line":114},[34,1702,1630],{"class":158},[34,1704,420],{"class":40},[34,1706,457],{"class":302},[34,1708,489],{"class":158},[34,1710,518],{"class":40},[34,1712,521],{"class":72},[34,1714,518],{"class":40},[34,1716,526],{"class":40},[34,1718,443],{"class":40},[34,1720,1721,1724,1726,1728,1730],{"class":36,"line":147},[34,1722,1723],{"class":44},"    apiKey",[34,1725,537],{"class":40},[34,1727,540],{"class":40},[34,1729,543],{"class":72},[34,1731,546],{"class":40},[34,1733,1734,1737,1739],{"class":36,"line":169},[34,1735,1736],{"class":40},"  }",[34,1738,495],{"class":158},[34,1740,498],{"class":40},[34,1742,1743,1745,1747],{"class":36,"line":178},[34,1744,162],{"class":40},[34,1746,378],{"class":44},[34,1748,52],{"class":40},[19,1750,1752],{"id":1751},"_4-add-a-container","4. Add a Container",[15,1754,1755,1756,1759],{},"Place a ",[31,1757,1758],{},"\u003Cdiv>"," wherever you want the widget to appear:",[24,1761,1763],{"className":26,"code":1762,"language":28,"meta":29,"style":29},"\u003Cdiv id=\"widget-container\">\u003C\u002Fdiv>\n",[31,1764,1765],{"__ignoreMap":29},[34,1766,1767,1769,1771,1773,1775,1777,1779,1781,1783,1785],{"class":36,"line":37},[34,1768,58],{"class":40},[34,1770,248],{"class":44},[34,1772,251],{"class":48},[34,1774,66],{"class":40},[34,1776,69],{"class":40},[34,1778,258],{"class":72},[34,1780,69],{"class":40},[34,1782,275],{"class":40},[34,1784,248],{"class":44},[34,1786,52],{"class":40},[19,1788,1790],{"id":1789},"_5-launch-the-widget","5. Launch the Widget",[15,1792,1793,1794,1796],{},"Call the ",[31,1795,610],{}," method when the user clicks a button:",[24,1798,1800],{"className":863,"code":1799,"language":865,"meta":29,"style":29},"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",[31,1801,1802,1822,1836,1850,1858,1862,1877,1892,1896,1902],{"__ignoreMap":29},[34,1803,1804,1806,1808,1810,1812,1814,1816,1818,1820],{"class":36,"line":37},[34,1805,452],{"class":158},[34,1807,420],{"class":40},[34,1809,457],{"class":302},[34,1811,489],{"class":158},[34,1813,518],{"class":40},[34,1815,610],{"class":72},[34,1817,518],{"class":40},[34,1819,526],{"class":40},[34,1821,443],{"class":40},[34,1823,1824,1826,1828,1830,1832,1834],{"class":36,"line":55},[34,1825,1069],{"class":44},[34,1827,537],{"class":40},[34,1829,540],{"class":40},[34,1831,258],{"class":72},[34,1833,518],{"class":40},[34,1835,633],{"class":40},[34,1837,1838,1840,1842,1844,1846,1848],{"class":36,"line":80},[34,1839,1084],{"class":44},[34,1841,537],{"class":40},[34,1843,540],{"class":40},[34,1845,646],{"class":72},[34,1847,518],{"class":40},[34,1849,633],{"class":40},[34,1851,1852,1854,1856],{"class":36,"line":90},[34,1853,1099],{"class":44},[34,1855,537],{"class":40},[34,1857,661],{"class":158},[34,1859,1860],{"class":36,"line":114},[34,1861,1108],{"class":40},[34,1863,1864,1866,1868,1870,1873,1875],{"class":36,"line":147},[34,1865,1113],{"class":44},[34,1867,537],{"class":40},[34,1869,540],{"class":40},[34,1871,1872],{"class":72},"Classic Denim Jacket",[34,1874,518],{"class":40},[34,1876,633],{"class":40},[34,1878,1879,1881,1883,1885,1888,1890],{"class":36,"line":169},[34,1880,1129],{"class":44},[34,1882,537],{"class":40},[34,1884,540],{"class":40},[34,1886,1887],{"class":72},"https:\u002F\u002Fyour-store.com\u002Fimages\u002Fjacket.jpg",[34,1889,518],{"class":40},[34,1891,633],{"class":40},[34,1893,1894],{"class":36,"line":178},[34,1895,1145],{"class":40},[34,1897,1898,1900],{"class":36,"line":188},[34,1899,1150],{"class":158},[34,1901,633],{"class":40},[34,1903,1904,1906,1908],{"class":36,"line":195},[34,1905,908],{"class":40},[34,1907,495],{"class":158},[34,1909,498],{"class":40},[19,1911,1913],{"id":1912},"result","Result",[15,1915,1916],{},"Your customers can now upload a photo and see the garment on them instantly.",[19,1918,1920],{"id":1919},"next-steps","Next Steps",[763,1922,1923,1929],{},[766,1924,1925,1926,420],{},"See framework-specific guides under ",[1532,1927,1928],{"href":796},"Integrations",[766,1930,1931,1932,420],{},"Explore the full ",[1532,1933,1179],{"href":1173},[785,1935,1936],{},"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":29,"searchDepth":55,"depth":55,"links":1938},[1939,1940,1941,1942,1943,1944,1945],{"id":1526,"depth":55,"text":1527},{"id":1541,"depth":55,"text":1542},{"id":1601,"depth":55,"text":1602},{"id":1751,"depth":55,"text":1752},{"id":1789,"depth":55,"text":1790},{"id":1912,"depth":55,"text":1913},{"id":1919,"depth":55,"text":1920},"Get the Fitting Widget running in minutes","i-lucide-rocket",{},"\u002Fen\u002Fgetting-started\u002Fquick-start",{"title":1515,"description":1946},"en\u002Fgetting-started\u002Fquick-start","Cy6rzr6z6R2nhbEqOeB18fbbe2pOjXOk0inGXqhKfHg",{"id":1954,"title":1955,"body":1956,"description":2037,"extension":793,"icon":2038,"meta":2039,"navigation":191,"path":2040,"seo":2041,"stem":2042,"__hash__":2043},"content\u002Fen\u002Findex.md","Introduction",{"type":7,"value":1957,"toc":2032},[1958,1962,1970,1974,2000,2004,2023,2025],[10,1959,1961],{"id":1960},"fitting-widget-virtual-try-on","Fitting Widget — Virtual Try-On",[15,1963,1964,1965,1969],{},"The ",[1966,1967,1968],"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,1971,1973],{"id":1972},"key-features","Key Features",[763,1975,1976,1982,1988,1994],{},[766,1977,1978,1981],{},[1966,1979,1980],{},"Quick Integration"," — Add one script tag and a few lines of code.",[766,1983,1984,1987],{},[1966,1985,1986],{},"Framework-Agnostic"," — Works with Vanilla JS, React, Vue, Next.js, Nuxt, and more.",[766,1989,1990,1993],{},[1966,1991,1992],{},"Customizable"," — Style the widget to match your brand.",[766,1995,1996,1999],{},[1966,1997,1998],{},"Lightweight"," — Optimized loading; won't slow down your store.",[19,2001,2003],{"id":2002},"how-it-works","How It Works",[2005,2006,2007,2010,2013,2020],"ol",{},[766,2008,2009],{},"Load the widget script on your page.",[766,2011,2012],{},"Initialize with your API key.",[766,2014,2015,2016,2019],{},"Call ",[31,2017,2018],{},"window.fitting('create', { ... })"," with product image URLs.",[766,2021,2022],{},"The widget renders inside a container element of your choice.",[19,2024,1515],{"id":1520},[15,2026,2027,2028,2031],{},"Head over to the ",[1532,2029,1515],{"href":2030},"\u002Fgetting-started\u002Fquick-start"," guide to get up and running in under 5 minutes.",{"title":29,"searchDepth":55,"depth":55,"links":2033},[2034,2035,2036],{"id":1972,"depth":55,"text":1973},{"id":2002,"depth":55,"text":2003},{"id":1520,"depth":55,"text":1515},"What is the Fitting Widget and why use it?","i-lucide-sparkles",{},"\u002Fen",{"title":1955,"description":2037},"en\u002Findex","zjI3aBTZ8Y2iRdmkieXP4q0o6PKbIjE5hUkB6Y1ledA",{"id":2045,"title":2046,"body":2047,"description":3055,"extension":793,"icon":3056,"meta":3057,"navigation":191,"path":3058,"seo":3059,"stem":3060,"__hash__":3061},"content\u002Fen\u002Fintegrations\u002Fnextjs.md","Next.js",{"type":7,"value":2048,"toc":3046},[2049,2053,2063,2067,2077,2088,2374,2378,2749,2753,3017,3021,3027,3043],[10,2050,2052],{"id":2051},"nextjs-integration","Next.js Integration",[15,2054,2055,2056,2059,2060,420],{},"The Fitting Widget works with both the ",[1966,2057,2058],{},"Pages Router"," and ",[1966,2061,2062],{},"App Router",[19,2064,2066],{"id":2065},"app-router-recommended","App Router (Recommended)",[15,2068,2069,2070,2073,2074,420],{},"Use the Next.js ",[31,2071,2072],{},"Script"," component with ",[31,2075,2076],{},"strategy=\"afterInteractive\"",[993,2078,2080,2081,2084,2085],{"id":2079},"step-1-load-scripts-in-layouttsx-or-pagetsx","Step 1 — Load Scripts in ",[31,2082,2083],{},"layout.tsx"," or ",[31,2086,2087],{},"page.tsx",[24,2089,2093],{"className":2090,"code":2091,"language":2092,"meta":29,"style":29},"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",[31,2094,2095,2116,2120,2164,2172,2177,2188,2192,2200,2213,2227,2240,2245,2249,2255,2267,2279,2284,2292,2297,2302,2307,2312,2337,2342,2349,2358,2363,2370],{"__ignoreMap":29},[34,2096,2097,2101,2104,2107,2109,2112,2114],{"class":36,"line":37},[34,2098,2100],{"class":2099},"s7zQu","import",[34,2102,2103],{"class":158}," Script ",[34,2105,2106],{"class":2099},"from",[34,2108,540],{"class":40},[34,2110,2111],{"class":72},"next\u002Fscript",[34,2113,518],{"class":40},[34,2115,498],{"class":40},[34,2117,2118],{"class":36,"line":55},[34,2119,192],{"emptyLinePlaceholder":191},[34,2121,2122,2125,2128,2130,2133,2136,2140,2143,2146,2148,2150,2154,2156,2159,2162],{"class":36,"line":80},[34,2123,2124],{"class":2099},"export",[34,2126,2127],{"class":2099}," default",[34,2129,438],{"class":48},[34,2131,2132],{"class":302}," ProductLayout",[34,2134,2135],{"class":40},"({",[34,2137,2139],{"class":2138},"sHdIc"," children",[34,2141,2142],{"class":40}," }:",[34,2144,2145],{"class":40}," {",[34,2147,2139],{"class":44},[34,2149,537],{"class":40},[34,2151,2153],{"class":2152},"sBMFI"," React",[34,2155,420],{"class":40},[34,2157,2158],{"class":2152},"ReactNode",[34,2160,2161],{"class":40}," })",[34,2163,443],{"class":40},[34,2165,2166,2169],{"class":36,"line":90},[34,2167,2168],{"class":2099},"  return",[34,2170,2171],{"class":44}," (\n",[34,2173,2174],{"class":36,"line":114},[34,2175,2176],{"class":40},"    \u003C>\n",[34,2178,2179,2182,2185],{"class":36,"line":147},[34,2180,2181],{"class":40},"      {",[34,2183,2184],{"class":158},"children",[34,2186,2187],{"class":40},"}\n",[34,2189,2190],{"class":36,"line":169},[34,2191,192],{"emptyLinePlaceholder":191},[34,2193,2194,2197],{"class":36,"line":178},[34,2195,2196],{"class":40},"      \u003C",[34,2198,2199],{"class":2152},"Script\n",[34,2201,2202,2205,2207,2209,2211],{"class":36,"line":188},[34,2203,2204],{"class":48},"        src",[34,2206,66],{"class":40},[34,2208,69],{"class":40},[34,2210,351],{"class":72},[34,2212,354],{"class":40},[34,2214,2215,2218,2220,2222,2225],{"class":36,"line":195},[34,2216,2217],{"class":48},"        strategy",[34,2219,66],{"class":40},[34,2221,69],{"class":40},[34,2223,2224],{"class":72},"afterInteractive",[34,2226,354],{"class":40},[34,2228,2229,2232,2234,2236,2238],{"class":36,"line":213},[34,2230,2231],{"class":48},"        id",[34,2233,66],{"class":40},[34,2235,69],{"class":40},[34,2237,367],{"class":72},[34,2239,354],{"class":40},[34,2241,2242],{"class":36,"line":231},[34,2243,2244],{"class":40},"      \u002F>\n",[34,2246,2247],{"class":36,"line":236},[34,2248,192],{"emptyLinePlaceholder":191},[34,2250,2251,2253],{"class":36,"line":243},[34,2252,2196],{"class":40},[34,2254,2199],{"class":2152},[34,2256,2257,2259,2261,2263,2265],{"class":36,"line":282},[34,2258,2217],{"class":48},[34,2260,66],{"class":40},[34,2262,69],{"class":40},[34,2264,2224],{"class":72},[34,2266,354],{"class":40},[34,2268,2269,2271,2273,2275,2277],{"class":36,"line":287},[34,2270,2231],{"class":48},[34,2272,66],{"class":40},[34,2274,69],{"class":40},[34,2276,407],{"class":72},[34,2278,354],{"class":40},[34,2280,2281],{"class":36,"line":322},[34,2282,2283],{"class":40},"      >\n",[34,2285,2286,2289],{"class":36,"line":327},[34,2287,2288],{"class":40},"        {",[34,2290,2291],{"class":40},"`\n",[34,2293,2294],{"class":36,"line":333},[34,2295,2296],{"class":72},"          window.fitting = window.fitting || function() {\n",[34,2298,2299],{"class":36,"line":341},[34,2300,2301],{"class":72},"            (window.fitting.q = window.fitting.q || []).push(arguments);\n",[34,2303,2304],{"class":36,"line":357},[34,2305,2306],{"class":72},"          };\n",[34,2308,2309],{"class":36,"line":372},[34,2310,2311],{"class":72},"          window.fitting('init', {\n",[34,2313,2314,2317,2320,2323,2325,2328,2330,2333,2335],{"class":36,"line":383},[34,2315,2316],{"class":72},"            apiKey: '",[34,2318,2319],{"class":40},"${",[34,2321,2322],{"class":158},"process",[34,2324,420],{"class":40},[34,2326,2327],{"class":158},"env",[34,2329,420],{"class":40},[34,2331,2332],{"class":158},"NEXT_PUBLIC_TRY_ON_API_KEY",[34,2334,908],{"class":40},[34,2336,546],{"class":72},[34,2338,2339],{"class":36,"line":388},[34,2340,2341],{"class":72},"          });\n",[34,2343,2344,2347],{"class":36,"line":394},[34,2345,2346],{"class":40},"        `",[34,2348,2187],{"class":40},[34,2350,2351,2354,2356],{"class":36,"line":414},[34,2352,2353],{"class":40},"      \u003C\u002F",[34,2355,2072],{"class":2152},[34,2357,52],{"class":40},[34,2359,2360],{"class":36,"line":446},[34,2361,2362],{"class":40},"    \u003C\u002F>\n",[34,2364,2365,2368],{"class":36,"line":501},[34,2366,2367],{"class":44},"  )",[34,2369,498],{"class":40},[34,2371,2372],{"class":36,"line":507},[34,2373,2187],{"class":40},[993,2375,2377],{"id":2376},"step-2-create-the-widget-button","Step 2 — Create the Widget Button",[24,2379,2381],{"className":2090,"code":2380,"language":2092,"meta":29,"style":29},"'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",[31,2382,2383,2394,2398,2408,2420,2431,2435,2439,2450,2460,2498,2503,2507,2511,2543,2560,2580,2595,2610,2621,2629,2633,2637,2643,2647,2708,2735,2739,2745],{"__ignoreMap":29},[34,2384,2385,2387,2390,2392],{"class":36,"line":37},[34,2386,518],{"class":40},[34,2388,2389],{"class":72},"use client",[34,2391,518],{"class":40},[34,2393,498],{"class":40},[34,2395,2396],{"class":36,"line":55},[34,2397,192],{"emptyLinePlaceholder":191},[34,2399,2400,2403,2406],{"class":36,"line":80},[34,2401,2402],{"class":48},"interface",[34,2404,2405],{"class":2152}," TryonItem",[34,2407,443],{"class":40},[34,2409,2410,2413,2415,2418],{"class":36,"line":90},[34,2411,2412],{"class":44},"  productName",[34,2414,537],{"class":40},[34,2416,2417],{"class":2152}," string",[34,2419,498],{"class":40},[34,2421,2422,2425,2427,2429],{"class":36,"line":114},[34,2423,2424],{"class":44},"  url",[34,2426,537],{"class":40},[34,2428,2417],{"class":2152},[34,2430,498],{"class":40},[34,2432,2433],{"class":36,"line":147},[34,2434,2187],{"class":40},[34,2436,2437],{"class":36,"line":169},[34,2438,192],{"emptyLinePlaceholder":191},[34,2440,2441,2444,2447],{"class":36,"line":178},[34,2442,2443],{"class":48},"declare",[34,2445,2446],{"class":158}," global ",[34,2448,2449],{"class":40},"{\n",[34,2451,2452,2455,2458],{"class":36,"line":188},[34,2453,2454],{"class":48},"  interface",[34,2456,2457],{"class":2152}," Window",[34,2459,443],{"class":40},[34,2461,2462,2465,2467,2470,2473,2475,2477,2479,2482,2485,2488,2490,2493,2496],{"class":36,"line":195},[34,2463,2464],{"class":44},"    fitting",[34,2466,537],{"class":40},[34,2468,2469],{"class":40}," (",[34,2471,2472],{"class":2138},"command",[34,2474,537],{"class":40},[34,2476,2417],{"class":2152},[34,2478,526],{"class":40},[34,2480,2481],{"class":2138}," options",[34,2483,2484],{"class":40},"?:",[34,2486,2487],{"class":2152}," unknown",[34,2489,495],{"class":40},[34,2491,2492],{"class":48}," =>",[34,2494,2495],{"class":2152}," void",[34,2497,498],{"class":40},[34,2499,2500],{"class":36,"line":213},[34,2501,2502],{"class":40},"  }\n",[34,2504,2505],{"class":36,"line":231},[34,2506,2187],{"class":40},[34,2508,2509],{"class":36,"line":236},[34,2510,192],{"emptyLinePlaceholder":191},[34,2512,2513,2515,2517,2520,2522,2525,2527,2529,2531,2533,2535,2538,2541],{"class":36,"line":243},[34,2514,2124],{"class":2099},[34,2516,438],{"class":48},[34,2518,2519],{"class":302}," TryOnButton",[34,2521,2135],{"class":40},[34,2523,2524],{"class":2138}," items",[34,2526,2142],{"class":40},[34,2528,2145],{"class":40},[34,2530,2524],{"class":44},[34,2532,537],{"class":40},[34,2534,2405],{"class":2152},[34,2536,2537],{"class":158},"[] ",[34,2539,2540],{"class":40},"})",[34,2542,443],{"class":40},[34,2544,2545,2548,2551,2553,2556,2558],{"class":36,"line":282},[34,2546,2547],{"class":48},"  const",[34,2549,2550],{"class":158}," handleClick",[34,2552,465],{"class":40},[34,2554,2555],{"class":40}," ()",[34,2557,2492],{"class":48},[34,2559,443],{"class":40},[34,2561,2562,2564,2566,2568,2570,2572,2574,2576,2578],{"class":36,"line":287},[34,2563,417],{"class":158},[34,2565,420],{"class":40},[34,2567,457],{"class":302},[34,2569,489],{"class":44},[34,2571,518],{"class":40},[34,2573,610],{"class":72},[34,2575,518],{"class":40},[34,2577,526],{"class":40},[34,2579,443],{"class":40},[34,2581,2582,2585,2587,2589,2591,2593],{"class":36,"line":322},[34,2583,2584],{"class":44},"      targetElementId",[34,2586,537],{"class":40},[34,2588,540],{"class":40},[34,2590,258],{"class":72},[34,2592,518],{"class":40},[34,2594,633],{"class":40},[34,2596,2597,2600,2602,2604,2606,2608],{"class":36,"line":327},[34,2598,2599],{"class":44},"      model",[34,2601,537],{"class":40},[34,2603,540],{"class":40},[34,2605,646],{"class":72},[34,2607,518],{"class":40},[34,2609,633],{"class":40},[34,2611,2612,2615,2617,2619],{"class":36,"line":333},[34,2613,2614],{"class":44},"      tryonItems",[34,2616,537],{"class":40},[34,2618,2524],{"class":158},[34,2620,633],{"class":40},[34,2622,2623,2625,2627],{"class":36,"line":341},[34,2624,552],{"class":40},[34,2626,495],{"class":44},[34,2628,498],{"class":40},[34,2630,2631],{"class":36,"line":357},[34,2632,1698],{"class":40},[34,2634,2635],{"class":36,"line":372},[34,2636,192],{"emptyLinePlaceholder":191},[34,2638,2639,2641],{"class":36,"line":383},[34,2640,2168],{"class":2099},[34,2642,2171],{"class":44},[34,2644,2645],{"class":36,"line":388},[34,2646,2176],{"class":40},[34,2648,2649,2651,2653,2655,2657,2659,2661,2663,2665,2668,2671,2673,2675,2678,2680,2682,2685,2687,2691,2693,2696,2698,2700,2703,2705],{"class":36,"line":394},[34,2650,2196],{"class":40},[34,2652,248],{"class":44},[34,2654,251],{"class":48},[34,2656,66],{"class":40},[34,2658,69],{"class":40},[34,2660,258],{"class":72},[34,2662,69],{"class":40},[34,2664,263],{"class":48},[34,2666,2667],{"class":40},"={{",[34,2669,2670],{"class":44}," width",[34,2672,537],{"class":40},[34,2674,540],{"class":40},[34,2676,2677],{"class":72},"100%",[34,2679,518],{"class":40},[34,2681,526],{"class":40},[34,2683,2684],{"class":44}," maxWidth",[34,2686,537],{"class":40},[34,2688,2690],{"class":2689},"sbssI"," 600",[34,2692,526],{"class":40},[34,2694,2695],{"class":44}," aspectRatio",[34,2697,537],{"class":40},[34,2699,540],{"class":40},[34,2701,2702],{"class":72},"3\u002F4",[34,2704,518],{"class":40},[34,2706,2707],{"class":40}," }} \u002F>\n",[34,2709,2710,2712,2714,2717,2720,2723,2726,2729,2731,2733],{"class":36,"line":414},[34,2711,2196],{"class":40},[34,2713,292],{"class":44},[34,2715,2716],{"class":48}," onClick",[34,2718,2719],{"class":40},"={",[34,2721,2722],{"class":158},"handleClick",[34,2724,2725],{"class":40},"}>",[34,2727,2728],{"class":158},"Try On",[34,2730,162],{"class":40},[34,2732,292],{"class":44},[34,2734,52],{"class":40},[34,2736,2737],{"class":36,"line":446},[34,2738,2362],{"class":40},[34,2740,2741,2743],{"class":36,"line":501},[34,2742,2367],{"class":44},[34,2744,498],{"class":40},[34,2746,2747],{"class":36,"line":507},[34,2748,2187],{"class":40},[993,2750,2752],{"id":2751},"step-3-use-in-a-product-page","Step 3 — Use in a Product Page",[24,2754,2756],{"className":2090,"code":2755,"language":2092,"meta":29,"style":29},"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",[31,2757,2758,2781,2785,2827,2856,2860,2866,2875,2899,2935,2942,2952,2956,2970,2984,2988,2994,2998,3007,3013],{"__ignoreMap":29},[34,2759,2760,2762,2764,2766,2769,2772,2774,2777,2779],{"class":36,"line":37},[34,2761,2100],{"class":2099},[34,2763,2145],{"class":40},[34,2765,2519],{"class":158},[34,2767,2768],{"class":40}," }",[34,2770,2771],{"class":2099}," from",[34,2773,540],{"class":40},[34,2775,2776],{"class":72},"@\u002Fcomponents\u002FTryOnButton",[34,2778,518],{"class":40},[34,2780,498],{"class":40},[34,2782,2783],{"class":36,"line":55},[34,2784,192],{"emptyLinePlaceholder":191},[34,2786,2787,2789,2791,2794,2796,2799,2801,2804,2806,2808,2810,2812,2814,2817,2819,2821,2823,2825],{"class":36,"line":80},[34,2788,2124],{"class":2099},[34,2790,2127],{"class":2099},[34,2792,2793],{"class":48}," async",[34,2795,438],{"class":48},[34,2797,2798],{"class":302}," ProductPage",[34,2800,2135],{"class":40},[34,2802,2803],{"class":2138}," params",[34,2805,2142],{"class":40},[34,2807,2145],{"class":40},[34,2809,2803],{"class":44},[34,2811,537],{"class":40},[34,2813,2145],{"class":40},[34,2815,2816],{"class":44}," slug",[34,2818,537],{"class":40},[34,2820,2417],{"class":2152},[34,2822,2768],{"class":40},[34,2824,2161],{"class":40},[34,2826,443],{"class":40},[34,2828,2829,2831,2834,2836,2839,2842,2844,2847,2849,2852,2854],{"class":36,"line":90},[34,2830,2547],{"class":48},[34,2832,2833],{"class":158}," product",[34,2835,465],{"class":40},[34,2837,2838],{"class":2099}," await",[34,2840,2841],{"class":302}," getProduct",[34,2843,489],{"class":44},[34,2845,2846],{"class":158},"params",[34,2848,420],{"class":40},[34,2850,2851],{"class":158},"slug",[34,2853,495],{"class":44},[34,2855,498],{"class":40},[34,2857,2858],{"class":36,"line":114},[34,2859,192],{"emptyLinePlaceholder":191},[34,2861,2862,2864],{"class":36,"line":147},[34,2863,2168],{"class":2099},[34,2865,2171],{"class":44},[34,2867,2868,2871,2873],{"class":36,"line":169},[34,2869,2870],{"class":40},"    \u003C",[34,2872,248],{"class":44},[34,2874,52],{"class":40},[34,2876,2877,2879,2881,2884,2887,2889,2892,2895,2897],{"class":36,"line":178},[34,2878,2196],{"class":40},[34,2880,10],{"class":44},[34,2882,2883],{"class":40},">{",[34,2885,2886],{"class":158},"product",[34,2888,420],{"class":40},[34,2890,2891],{"class":158},"name",[34,2893,2894],{"class":40},"}\u003C\u002F",[34,2896,10],{"class":44},[34,2898,52],{"class":40},[34,2900,2901,2903,2906,2909,2911,2913,2915,2918,2921,2924,2926,2928,2930,2932],{"class":36,"line":188},[34,2902,2196],{"class":40},[34,2904,2905],{"class":44},"img",[34,2907,2908],{"class":48}," src",[34,2910,2719],{"class":40},[34,2912,2886],{"class":158},[34,2914,420],{"class":40},[34,2916,2917],{"class":158},"image",[34,2919,2920],{"class":40},"} ",[34,2922,2923],{"class":48},"alt",[34,2925,2719],{"class":40},[34,2927,2886],{"class":158},[34,2929,420],{"class":40},[34,2931,2891],{"class":158},[34,2933,2934],{"class":40},"} \u002F>\n",[34,2936,2937,2939],{"class":36,"line":195},[34,2938,2196],{"class":40},[34,2940,2941],{"class":2152},"TryOnButton\n",[34,2943,2944,2947,2949],{"class":36,"line":213},[34,2945,2946],{"class":48},"        items",[34,2948,2719],{"class":40},[34,2950,2951],{"class":158},"[\n",[34,2953,2954],{"class":36,"line":231},[34,2955,667],{"class":40},[34,2957,2958,2960,2962,2964,2966,2968],{"class":36,"line":236},[34,2959,673],{"class":44},[34,2961,537],{"class":40},[34,2963,2833],{"class":158},[34,2965,420],{"class":40},[34,2967,2891],{"class":158},[34,2969,633],{"class":40},[34,2971,2972,2974,2976,2978,2980,2982],{"class":36,"line":243},[34,2973,689],{"class":44},[34,2975,537],{"class":40},[34,2977,2833],{"class":158},[34,2979,420],{"class":40},[34,2981,2917],{"class":158},[34,2983,633],{"class":40},[34,2985,2986],{"class":36,"line":282},[34,2987,706],{"class":40},[34,2989,2990,2992],{"class":36,"line":287},[34,2991,712],{"class":158},[34,2993,2187],{"class":40},[34,2995,2996],{"class":36,"line":322},[34,2997,2244],{"class":40},[34,2999,3000,3003,3005],{"class":36,"line":327},[34,3001,3002],{"class":40},"    \u003C\u002F",[34,3004,248],{"class":44},[34,3006,52],{"class":40},[34,3008,3009,3011],{"class":36,"line":333},[34,3010,2367],{"class":44},[34,3012,498],{"class":40},[34,3014,3015],{"class":36,"line":341},[34,3016,2187],{"class":40},[19,3018,3020],{"id":3019},"environment-variable","Environment Variable",[15,3022,3023,3024,537],{},"Add your API key to ",[31,3025,3026],{},".env.local",[24,3028,3032],{"className":3029,"code":3030,"language":3031,"meta":29,"style":29},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","NEXT_PUBLIC_TRY_ON_API_KEY=pk_live_xxx\n","bash",[31,3033,3034],{"__ignoreMap":29},[34,3035,3036,3038,3040],{"class":36,"line":37},[34,3037,2332],{"class":158},[34,3039,66],{"class":40},[34,3041,3042],{"class":72},"pk_live_xxx\n",[785,3044,3045],{},"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":29,"searchDepth":55,"depth":55,"links":3047},[3048,3054],{"id":2065,"depth":55,"text":2066,"children":3049},[3050,3052,3053],{"id":2079,"depth":80,"text":3051},"Step 1 — Load Scripts in layout.tsx or page.tsx",{"id":2376,"depth":80,"text":2377},{"id":2751,"depth":80,"text":2752},{"id":3019,"depth":55,"text":3020},"Integrate with Next.js (Pages Router & App Router)","i-lucide-triangle",{},"\u002Fen\u002Fintegrations\u002Fnextjs",{"title":2046,"description":3055},"en\u002Fintegrations\u002Fnextjs","JdA3Sttp8qaffNRKpcg9b3i_J2nMxDOCfnya8RjA3yU",{"id":3063,"title":3064,"body":3065,"description":3955,"extension":793,"icon":3956,"meta":3957,"navigation":191,"path":3958,"seo":3959,"stem":3960,"__hash__":3961},"content\u002Fen\u002Fintegrations\u002Fnuxt.md","Nuxt",{"type":7,"value":3066,"toc":3945},[3067,3071,3074,3078,3088,3094,3405,3411,3607,3611,3921,3923,3929,3942],[10,3068,3070],{"id":3069},"nuxt-integration","Nuxt Integration",[15,3072,3073],{},"The Fitting Widget integrates seamlessly with Nuxt 3 and Nuxt 4.",[19,3075,3077],{"id":3076},"_1-load-the-script","1. Load the Script",[15,3079,3080,3081,3084,3085,420],{},"Use the ",[31,3082,3083],{},"useHead"," composable, or add scripts to your ",[31,3086,3087],{},"nuxt.config.ts",[993,3089,3091,3092],{"id":3090},"option-a-per-page-with-usehead","Option A — Per Page with ",[31,3093,3083],{},[24,3095,3099],{"className":3096,"code":3097,"language":3098,"meta":29,"style":29},"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",[31,3100,3101,3106,3115,3123,3140,3173,3181,3189,3193,3215,3235,3239,3247,3256,3260,3275,3290,3294,3298,3312,3322,3327,3332,3337,3342,3368,3373,3380,3384,3390,3397],{"__ignoreMap":29},[34,3102,3103],{"class":36,"line":37},[34,3104,3105],{"class":239},"\u003C!-- pages\u002Fproduct\u002F[slug].vue -->\n",[34,3107,3108,3110,3113],{"class":36,"line":55},[34,3109,58],{"class":40},[34,3111,3112],{"class":44},"template",[34,3114,52],{"class":40},[34,3116,3117,3119,3121],{"class":36,"line":80},[34,3118,93],{"class":40},[34,3120,248],{"class":44},[34,3122,52],{"class":40},[34,3124,3125,3127,3129,3131,3134,3136,3138],{"class":36,"line":90},[34,3126,2870],{"class":40},[34,3128,10],{"class":44},[34,3130,155],{"class":40},[34,3132,3133],{"class":158},"{{ product.name }}",[34,3135,162],{"class":40},[34,3137,10],{"class":44},[34,3139,52],{"class":40},[34,3141,3142,3144,3147,3150,3152,3154,3157,3159,3162,3164,3166,3169,3171],{"class":36,"line":114},[34,3143,2870],{"class":40},[34,3145,3146],{"class":44},"TryOnWidget",[34,3148,3149],{"class":48}," :product-name",[34,3151,66],{"class":40},[34,3153,69],{"class":40},[34,3155,3156],{"class":72},"product.name",[34,3158,69],{"class":40},[34,3160,3161],{"class":48}," :image-url",[34,3163,66],{"class":40},[34,3165,69],{"class":40},[34,3167,3168],{"class":72},"product.image",[34,3170,69],{"class":40},[34,3172,111],{"class":40},[34,3174,3175,3177,3179],{"class":36,"line":147},[34,3176,562],{"class":40},[34,3178,248],{"class":44},[34,3180,52],{"class":40},[34,3182,3183,3185,3187],{"class":36,"line":169},[34,3184,162],{"class":40},[34,3186,3112],{"class":44},[34,3188,52],{"class":40},[34,3190,3191],{"class":36,"line":178},[34,3192,192],{"emptyLinePlaceholder":191},[34,3194,3195,3197,3199,3202,3204,3206,3208,3211,3213],{"class":36,"line":188},[34,3196,58],{"class":40},[34,3198,378],{"class":44},[34,3200,3201],{"class":48}," setup",[34,3203,63],{"class":48},[34,3205,66],{"class":40},[34,3207,69],{"class":40},[34,3209,3210],{"class":72},"ts",[34,3212,69],{"class":40},[34,3214,52],{"class":40},[34,3216,3217,3219,3221,3224,3226,3228,3230,3233],{"class":36,"line":195},[34,3218,2100],{"class":2099},[34,3220,2145],{"class":40},[34,3222,3223],{"class":158}," useHead",[34,3225,2768],{"class":40},[34,3227,2771],{"class":2099},[34,3229,540],{"class":40},[34,3231,3232],{"class":72},"#app",[34,3234,546],{"class":40},[34,3236,3237],{"class":36,"line":213},[34,3238,192],{"emptyLinePlaceholder":191},[34,3240,3241,3243,3245],{"class":36,"line":231},[34,3242,3083],{"class":302},[34,3244,489],{"class":158},[34,3246,2449],{"class":40},[34,3248,3249,3252,3254],{"class":36,"line":236},[34,3250,3251],{"class":44},"  script",[34,3253,537],{"class":40},[34,3255,661],{"class":158},[34,3257,3258],{"class":36,"line":243},[34,3259,1108],{"class":40},[34,3261,3262,3265,3267,3269,3271,3273],{"class":36,"line":282},[34,3263,3264],{"class":44},"      src",[34,3266,537],{"class":40},[34,3268,540],{"class":40},[34,3270,351],{"class":72},[34,3272,518],{"class":40},[34,3274,633],{"class":40},[34,3276,3277,3280,3282,3284,3286,3288],{"class":36,"line":287},[34,3278,3279],{"class":44},"      id",[34,3281,537],{"class":40},[34,3283,540],{"class":40},[34,3285,367],{"class":72},[34,3287,518],{"class":40},[34,3289,633],{"class":40},[34,3291,3292],{"class":36,"line":322},[34,3293,1145],{"class":40},[34,3295,3296],{"class":36,"line":327},[34,3297,1108],{"class":40},[34,3299,3300,3302,3304,3306,3308,3310],{"class":36,"line":333},[34,3301,3279],{"class":44},[34,3303,537],{"class":40},[34,3305,540],{"class":40},[34,3307,407],{"class":72},[34,3309,518],{"class":40},[34,3311,633],{"class":40},[34,3313,3314,3317,3319],{"class":36,"line":341},[34,3315,3316],{"class":44},"      innerHTML",[34,3318,537],{"class":40},[34,3320,3321],{"class":40}," `\n",[34,3323,3324],{"class":36,"line":357},[34,3325,3326],{"class":72},"        window.fitting = window.fitting || function() {\n",[34,3328,3329],{"class":36,"line":372},[34,3330,3331],{"class":72},"          (window.fitting.q = window.fitting.q || []).push(arguments);\n",[34,3333,3334],{"class":36,"line":383},[34,3335,3336],{"class":72},"        };\n",[34,3338,3339],{"class":36,"line":388},[34,3340,3341],{"class":72},"        window.fitting('init', {\n",[34,3343,3344,3347,3349,3351,3353,3355,3357,3359,3361,3364,3366],{"class":36,"line":394},[34,3345,3346],{"class":72},"          apiKey: '",[34,3348,2319],{"class":40},[34,3350,2100],{"class":2099},[34,3352,420],{"class":40},[34,3354,96],{"class":158},[34,3356,420],{"class":40},[34,3358,2327],{"class":158},[34,3360,420],{"class":40},[34,3362,3363],{"class":158},"VITE_TRY_ON_API_KEY",[34,3365,908],{"class":40},[34,3367,546],{"class":72},[34,3369,3370],{"class":36,"line":414},[34,3371,3372],{"class":72},"        });\n",[34,3374,3375,3378],{"class":36,"line":446},[34,3376,3377],{"class":40},"      `",[34,3379,633],{"class":40},[34,3381,3382],{"class":36,"line":501},[34,3383,1145],{"class":40},[34,3385,3386,3388],{"class":36,"line":507},[34,3387,1150],{"class":158},[34,3389,633],{"class":40},[34,3391,3392,3394],{"class":36,"line":531},[34,3393,908],{"class":40},[34,3395,3396],{"class":158},")\n",[34,3398,3399,3401,3403],{"class":36,"line":549},[34,3400,162],{"class":40},[34,3402,378],{"class":44},[34,3404,52],{"class":40},[993,3406,3408,3409],{"id":3407},"option-b-global-in-nuxtconfigts","Option B — Global in ",[31,3410,3087],{},[24,3412,3415],{"className":3413,"code":3414,"language":3210,"meta":29,"style":29},"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",[31,3416,3417,3430,3439,3448,3457,3462,3477,3492,3497,3501,3515,3524,3529,3534,3539,3544,3569,3574,3581,3585,3592,3596,3601],{"__ignoreMap":29},[34,3418,3419,3421,3423,3426,3428],{"class":36,"line":37},[34,3420,2124],{"class":2099},[34,3422,2127],{"class":2099},[34,3424,3425],{"class":302}," defineNuxtConfig",[34,3427,489],{"class":158},[34,3429,2449],{"class":40},[34,3431,3432,3435,3437],{"class":36,"line":55},[34,3433,3434],{"class":44},"  app",[34,3436,537],{"class":40},[34,3438,443],{"class":40},[34,3440,3441,3444,3446],{"class":36,"line":80},[34,3442,3443],{"class":44},"    head",[34,3445,537],{"class":40},[34,3447,443],{"class":40},[34,3449,3450,3453,3455],{"class":36,"line":90},[34,3451,3452],{"class":44},"      script",[34,3454,537],{"class":40},[34,3456,661],{"class":158},[34,3458,3459],{"class":36,"line":114},[34,3460,3461],{"class":40},"        {\n",[34,3463,3464,3467,3469,3471,3473,3475],{"class":36,"line":147},[34,3465,3466],{"class":44},"          src",[34,3468,537],{"class":40},[34,3470,540],{"class":40},[34,3472,351],{"class":72},[34,3474,518],{"class":40},[34,3476,633],{"class":40},[34,3478,3479,3482,3484,3486,3488,3490],{"class":36,"line":169},[34,3480,3481],{"class":44},"          id",[34,3483,537],{"class":40},[34,3485,540],{"class":40},[34,3487,367],{"class":72},[34,3489,518],{"class":40},[34,3491,633],{"class":40},[34,3493,3494],{"class":36,"line":178},[34,3495,3496],{"class":40},"        },\n",[34,3498,3499],{"class":36,"line":188},[34,3500,3461],{"class":40},[34,3502,3503,3505,3507,3509,3511,3513],{"class":36,"line":195},[34,3504,3481],{"class":44},[34,3506,537],{"class":40},[34,3508,540],{"class":40},[34,3510,407],{"class":72},[34,3512,518],{"class":40},[34,3514,633],{"class":40},[34,3516,3517,3520,3522],{"class":36,"line":213},[34,3518,3519],{"class":44},"          innerHTML",[34,3521,537],{"class":40},[34,3523,3321],{"class":40},[34,3525,3526],{"class":36,"line":231},[34,3527,3528],{"class":72},"            window.fitting = window.fitting || function() {\n",[34,3530,3531],{"class":36,"line":236},[34,3532,3533],{"class":72},"              (window.fitting.q = window.fitting.q || []).push(arguments);\n",[34,3535,3536],{"class":36,"line":243},[34,3537,3538],{"class":72},"            };\n",[34,3540,3541],{"class":36,"line":282},[34,3542,3543],{"class":72},"            window.fitting('init', {\n",[34,3545,3546,3549,3551,3553,3555,3557,3559,3561,3563,3565,3567],{"class":36,"line":287},[34,3547,3548],{"class":72},"              apiKey: '",[34,3550,2319],{"class":40},[34,3552,2100],{"class":2099},[34,3554,420],{"class":40},[34,3556,96],{"class":158},[34,3558,420],{"class":40},[34,3560,2327],{"class":158},[34,3562,420],{"class":40},[34,3564,3363],{"class":158},[34,3566,908],{"class":40},[34,3568,546],{"class":72},[34,3570,3571],{"class":36,"line":322},[34,3572,3573],{"class":72},"            });\n",[34,3575,3576,3579],{"class":36,"line":327},[34,3577,3578],{"class":40},"          `",[34,3580,633],{"class":40},[34,3582,3583],{"class":36,"line":333},[34,3584,3496],{"class":40},[34,3586,3587,3590],{"class":36,"line":341},[34,3588,3589],{"class":158},"      ]",[34,3591,633],{"class":40},[34,3593,3594],{"class":36,"line":357},[34,3595,1145],{"class":40},[34,3597,3598],{"class":36,"line":372},[34,3599,3600],{"class":40},"  },\n",[34,3602,3603,3605],{"class":36,"line":383},[34,3604,908],{"class":40},[34,3606,3396],{"class":158},[19,3608,3610],{"id":3609},"_2-create-the-wrapper-component","2. Create the Wrapper Component",[24,3612,3614],{"className":3096,"code":3613,"language":3098,"meta":29,"style":29},"\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",[31,3615,3616,3621,3629,3637,3667,3695,3703,3711,3715,3735,3751,3760,3769,3776,3780,3795,3815,3830,3845,3854,3859,3875,3891,3896,3903,3909,3913],{"__ignoreMap":29},[34,3617,3618],{"class":36,"line":37},[34,3619,3620],{"class":239},"\u003C!-- components\u002FTryOnWidget.vue -->\n",[34,3622,3623,3625,3627],{"class":36,"line":55},[34,3624,58],{"class":40},[34,3626,3112],{"class":44},[34,3628,52],{"class":40},[34,3630,3631,3633,3635],{"class":36,"line":80},[34,3632,93],{"class":40},[34,3634,248],{"class":44},[34,3636,52],{"class":40},[34,3638,3639,3641,3643,3645,3647,3649,3651,3653,3656,3658,3660,3663,3665],{"class":36,"line":90},[34,3640,2870],{"class":40},[34,3642,248],{"class":44},[34,3644,251],{"class":48},[34,3646,66],{"class":40},[34,3648,69],{"class":40},[34,3650,258],{"class":72},[34,3652,69],{"class":40},[34,3654,3655],{"class":48}," class",[34,3657,66],{"class":40},[34,3659,69],{"class":40},[34,3661,3662],{"class":72},"aspect-[3\u002F4] w-full max-w-[600px]",[34,3664,69],{"class":40},[34,3666,111],{"class":40},[34,3668,3669,3671,3673,3676,3678,3680,3683,3685,3687,3689,3691,3693],{"class":36,"line":114},[34,3670,2870],{"class":40},[34,3672,292],{"class":44},[34,3674,3675],{"class":48}," @click",[34,3677,66],{"class":40},[34,3679,69],{"class":40},[34,3681,3682],{"class":72},"handleTryOn",[34,3684,69],{"class":40},[34,3686,155],{"class":40},[34,3688,2728],{"class":158},[34,3690,162],{"class":40},[34,3692,292],{"class":44},[34,3694,52],{"class":40},[34,3696,3697,3699,3701],{"class":36,"line":147},[34,3698,562],{"class":40},[34,3700,248],{"class":44},[34,3702,52],{"class":40},[34,3704,3705,3707,3709],{"class":36,"line":169},[34,3706,162],{"class":40},[34,3708,3112],{"class":44},[34,3710,52],{"class":40},[34,3712,3713],{"class":36,"line":178},[34,3714,192],{"emptyLinePlaceholder":191},[34,3716,3717,3719,3721,3723,3725,3727,3729,3731,3733],{"class":36,"line":188},[34,3718,58],{"class":40},[34,3720,378],{"class":44},[34,3722,3201],{"class":48},[34,3724,63],{"class":48},[34,3726,66],{"class":40},[34,3728,69],{"class":40},[34,3730,3210],{"class":72},[34,3732,69],{"class":40},[34,3734,52],{"class":40},[34,3736,3737,3740,3743,3745,3748],{"class":36,"line":195},[34,3738,3739],{"class":48},"const",[34,3741,3742],{"class":158}," props ",[34,3744,66],{"class":40},[34,3746,3747],{"class":302}," defineProps",[34,3749,3750],{"class":40},"\u003C{\n",[34,3752,3753,3755,3757],{"class":36,"line":213},[34,3754,2412],{"class":44},[34,3756,537],{"class":40},[34,3758,3759],{"class":2152}," string\n",[34,3761,3762,3765,3767],{"class":36,"line":231},[34,3763,3764],{"class":44},"  imageUrl",[34,3766,537],{"class":40},[34,3768,3759],{"class":2152},[34,3770,3771,3773],{"class":36,"line":236},[34,3772,2725],{"class":40},[34,3774,3775],{"class":158},"()\n",[34,3777,3778],{"class":36,"line":243},[34,3779,192],{"emptyLinePlaceholder":191},[34,3781,3782,3784,3787,3789,3791,3793],{"class":36,"line":282},[34,3783,3739],{"class":48},[34,3785,3786],{"class":158}," handleTryOn ",[34,3788,66],{"class":40},[34,3790,2555],{"class":40},[34,3792,2492],{"class":48},[34,3794,443],{"class":40},[34,3796,3797,3799,3801,3803,3805,3807,3809,3811,3813],{"class":36,"line":287},[34,3798,1630],{"class":158},[34,3800,420],{"class":40},[34,3802,457],{"class":302},[34,3804,489],{"class":44},[34,3806,518],{"class":40},[34,3808,610],{"class":72},[34,3810,518],{"class":40},[34,3812,526],{"class":40},[34,3814,443],{"class":40},[34,3816,3817,3820,3822,3824,3826,3828],{"class":36,"line":322},[34,3818,3819],{"class":44},"    targetElementId",[34,3821,537],{"class":40},[34,3823,540],{"class":40},[34,3825,258],{"class":72},[34,3827,518],{"class":40},[34,3829,633],{"class":40},[34,3831,3832,3835,3837,3839,3841,3843],{"class":36,"line":327},[34,3833,3834],{"class":44},"    model",[34,3836,537],{"class":40},[34,3838,540],{"class":40},[34,3840,646],{"class":72},[34,3842,518],{"class":40},[34,3844,633],{"class":40},[34,3846,3847,3850,3852],{"class":36,"line":333},[34,3848,3849],{"class":44},"    tryonItems",[34,3851,537],{"class":40},[34,3853,661],{"class":44},[34,3855,3856],{"class":36,"line":341},[34,3857,3858],{"class":40},"      {\n",[34,3860,3861,3864,3866,3869,3871,3873],{"class":36,"line":357},[34,3862,3863],{"class":44},"        productName",[34,3865,537],{"class":40},[34,3867,3868],{"class":158}," props",[34,3870,420],{"class":40},[34,3872,1018],{"class":158},[34,3874,633],{"class":40},[34,3876,3877,3880,3882,3884,3886,3889],{"class":36,"line":372},[34,3878,3879],{"class":44},"        url",[34,3881,537],{"class":40},[34,3883,3868],{"class":158},[34,3885,420],{"class":40},[34,3887,3888],{"class":158},"imageUrl",[34,3890,633],{"class":40},[34,3892,3893],{"class":36,"line":383},[34,3894,3895],{"class":40},"      },\n",[34,3897,3898,3901],{"class":36,"line":388},[34,3899,3900],{"class":44},"    ]",[34,3902,633],{"class":40},[34,3904,3905,3907],{"class":36,"line":394},[34,3906,1736],{"class":40},[34,3908,3396],{"class":44},[34,3910,3911],{"class":36,"line":414},[34,3912,2187],{"class":40},[34,3914,3915,3917,3919],{"class":36,"line":446},[34,3916,162],{"class":40},[34,3918,378],{"class":44},[34,3920,52],{"class":40},[19,3922,3020],{"id":3019},[15,3924,3925,3926,537],{},"Add to ",[31,3927,3928],{},".env",[24,3930,3932],{"className":3029,"code":3931,"language":3031,"meta":29,"style":29},"VITE_TRY_ON_API_KEY=pk_live_xxx\n",[31,3933,3934],{"__ignoreMap":29},[34,3935,3936,3938,3940],{"class":36,"line":37},[34,3937,3363],{"class":158},[34,3939,66],{"class":40},[34,3941,3042],{"class":72},[785,3943,3944],{},"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":29,"searchDepth":55,"depth":55,"links":3946},[3947,3953,3954],{"id":3076,"depth":55,"text":3077,"children":3948},[3949,3951],{"id":3090,"depth":80,"text":3950},"Option A — Per Page with useHead",{"id":3407,"depth":80,"text":3952},"Option B — Global in nuxt.config.ts",{"id":3609,"depth":55,"text":3610},{"id":3019,"depth":55,"text":3020},"Integrate with a Nuxt 3 \u002F Nuxt 4 app","i-lucide-nut",{},"\u002Fen\u002Fintegrations\u002Fnuxt",{"title":3064,"description":3955},"en\u002Fintegrations\u002Fnuxt","3xlJgokLPj3qTkGk4XWJ2RH_Ar2hK0jHeC6j3_o9shE",{"id":3963,"title":3964,"body":3965,"description":4849,"extension":793,"icon":4850,"meta":4851,"navigation":191,"path":4852,"seo":4853,"stem":4854,"__hash__":4855},"content\u002Fen\u002Fintegrations\u002Freact.md","React",{"type":7,"value":3966,"toc":4844},[3967,3971,3974,3978,3984,4169,4179,4183,4503,4507,4841],[10,3968,3970],{"id":3969},"react-integration","React Integration",[15,3972,3973],{},"Works with any React setup — Vite, Create React App, or custom.",[19,3975,3977],{"id":3976},"_1-load-the-widget-script","1. Load the Widget Script",[15,3979,3980,3981,537],{},"Add the script to your ",[31,3982,3983],{},"index.html",[24,3985,3987],{"className":26,"code":3986,"language":28,"meta":29,"style":29},"\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",[31,3988,3989,3994,4000,4012,4024,4032,4050,4074,4116,4120,4140,4153,4161],{"__ignoreMap":29},[34,3990,3991],{"class":36,"line":37},[34,3992,3993],{"class":239},"\u003C!-- In public\u002Findex.html or index.html (Vite) -->\n",[34,3995,3996,3998],{"class":36,"line":55},[34,3997,58],{"class":40},[34,3999,338],{"class":44},[34,4001,4002,4004,4006,4008,4010],{"class":36,"line":80},[34,4003,1569],{"class":48},[34,4005,66],{"class":40},[34,4007,69],{"class":40},[34,4009,351],{"class":72},[34,4011,354],{"class":40},[34,4013,4014,4016,4018,4020,4022],{"class":36,"line":90},[34,4015,1582],{"class":48},[34,4017,66],{"class":40},[34,4019,69],{"class":40},[34,4021,367],{"class":72},[34,4023,354],{"class":40},[34,4025,4026,4028,4030],{"class":36,"line":114},[34,4027,275],{"class":40},[34,4029,378],{"class":44},[34,4031,52],{"class":40},[34,4033,4034,4036,4038,4040,4042,4044,4046,4048],{"class":36,"line":147},[34,4035,58],{"class":40},[34,4037,378],{"class":44},[34,4039,251],{"class":48},[34,4041,66],{"class":40},[34,4043,69],{"class":40},[34,4045,407],{"class":72},[34,4047,69],{"class":40},[34,4049,52],{"class":40},[34,4051,4052,4054,4056,4058,4060,4062,4064,4066,4068,4070,4072],{"class":36,"line":169},[34,4053,1630],{"class":158},[34,4055,420],{"class":40},[34,4057,423],{"class":158},[34,4059,66],{"class":40},[34,4061,428],{"class":158},[34,4063,420],{"class":40},[34,4065,423],{"class":158},[34,4067,435],{"class":40},[34,4069,438],{"class":48},[34,4071,306],{"class":40},[34,4073,443],{"class":40},[34,4075,4076,4078,4080,4082,4084,4086,4088,4090,4092,4094,4096,4098,4100,4102,4104,4106,4108,4110,4112,4114],{"class":36,"line":178},[34,4077,1655],{"class":44},[34,4079,452],{"class":158},[34,4081,420],{"class":40},[34,4083,457],{"class":158},[34,4085,420],{"class":40},[34,4087,462],{"class":158},[34,4089,465],{"class":40},[34,4091,428],{"class":158},[34,4093,420],{"class":40},[34,4095,457],{"class":158},[34,4097,420],{"class":40},[34,4099,462],{"class":158},[34,4101,478],{"class":40},[34,4103,481],{"class":44},[34,4105,420],{"class":40},[34,4107,486],{"class":302},[34,4109,489],{"class":44},[34,4111,492],{"class":158},[34,4113,495],{"class":44},[34,4115,498],{"class":40},[34,4117,4118],{"class":36,"line":188},[34,4119,1698],{"class":40},[34,4121,4122,4124,4126,4128,4130,4132,4134,4136,4138],{"class":36,"line":195},[34,4123,1630],{"class":158},[34,4125,420],{"class":40},[34,4127,457],{"class":302},[34,4129,489],{"class":158},[34,4131,518],{"class":40},[34,4133,521],{"class":72},[34,4135,518],{"class":40},[34,4137,526],{"class":40},[34,4139,443],{"class":40},[34,4141,4142,4144,4146,4148,4151],{"class":36,"line":213},[34,4143,1723],{"class":44},[34,4145,537],{"class":40},[34,4147,540],{"class":40},[34,4149,4150],{"class":72},"%VITE_TRY_ON_API_KEY%",[34,4152,546],{"class":40},[34,4154,4155,4157,4159],{"class":36,"line":231},[34,4156,1736],{"class":40},[34,4158,495],{"class":158},[34,4160,498],{"class":40},[34,4162,4163,4165,4167],{"class":36,"line":236},[34,4164,162],{"class":40},[34,4166,378],{"class":44},[34,4168,52],{"class":40},[4170,4171,4173],"callout",{"icon":4172},"i-lucide-lightbulb",[15,4174,4175,4176,4178],{},"Replace ",[31,4177,4150],{}," at build time with your actual key, or use a runtime injection approach.",[19,4180,4182],{"id":4181},"_2-create-a-custom-hook","2. Create a Custom Hook",[24,4184,4186],{"className":2090,"code":4185,"language":2092,"meta":29,"style":29},"\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",[31,4187,4188,4193,4201,4211,4221,4232,4236,4240,4249,4259,4292,4305,4309,4313,4321,4329,4359,4363,4367,4371,4384,4408,4432,4436,4440,4455,4476,4480,4484,4499],{"__ignoreMap":29},[34,4189,4190],{"class":36,"line":37},[34,4191,4192],{"class":239},"\u002F\u002F hooks\u002FuseFittingWidget.ts\n",[34,4194,4195,4197,4199],{"class":36,"line":55},[34,4196,2402],{"class":48},[34,4198,2405],{"class":2152},[34,4200,443],{"class":40},[34,4202,4203,4205,4207,4209],{"class":36,"line":80},[34,4204,2412],{"class":44},[34,4206,537],{"class":40},[34,4208,2417],{"class":2152},[34,4210,498],{"class":40},[34,4212,4213,4215,4217,4219],{"class":36,"line":90},[34,4214,2424],{"class":44},[34,4216,537],{"class":40},[34,4218,2417],{"class":2152},[34,4220,498],{"class":40},[34,4222,4223,4226,4228,4230],{"class":36,"line":114},[34,4224,4225],{"class":44},"  productId",[34,4227,2484],{"class":40},[34,4229,2417],{"class":2152},[34,4231,498],{"class":40},[34,4233,4234],{"class":36,"line":147},[34,4235,2187],{"class":40},[34,4237,4238],{"class":36,"line":169},[34,4239,192],{"emptyLinePlaceholder":191},[34,4241,4242,4244,4247],{"class":36,"line":178},[34,4243,2402],{"class":48},[34,4245,4246],{"class":2152}," CreateOptions",[34,4248,443],{"class":40},[34,4250,4251,4253,4255,4257],{"class":36,"line":188},[34,4252,1069],{"class":44},[34,4254,537],{"class":40},[34,4256,2417],{"class":2152},[34,4258,498],{"class":40},[34,4260,4261,4263,4265,4267,4269,4271,4274,4276,4279,4281,4283,4285,4288,4290],{"class":36,"line":195},[34,4262,1084],{"class":44},[34,4264,2484],{"class":40},[34,4266,540],{"class":40},[34,4268,646],{"class":72},[34,4270,518],{"class":40},[34,4272,4273],{"class":40}," |",[34,4275,540],{"class":40},[34,4277,4278],{"class":72},"quality",[34,4280,518],{"class":40},[34,4282,4273],{"class":40},[34,4284,540],{"class":40},[34,4286,4287],{"class":72},"speed",[34,4289,518],{"class":40},[34,4291,498],{"class":40},[34,4293,4294,4296,4298,4300,4303],{"class":36,"line":213},[34,4295,1099],{"class":44},[34,4297,537],{"class":40},[34,4299,2405],{"class":2152},[34,4301,4302],{"class":158},"[]",[34,4304,498],{"class":40},[34,4306,4307],{"class":36,"line":231},[34,4308,2187],{"class":40},[34,4310,4311],{"class":36,"line":236},[34,4312,192],{"emptyLinePlaceholder":191},[34,4314,4315,4317,4319],{"class":36,"line":243},[34,4316,2443],{"class":48},[34,4318,2446],{"class":158},[34,4320,2449],{"class":40},[34,4322,4323,4325,4327],{"class":36,"line":282},[34,4324,2454],{"class":48},[34,4326,2457],{"class":2152},[34,4328,443],{"class":40},[34,4330,4331,4333,4335,4337,4339,4341,4343,4345,4347,4349,4351,4353,4355,4357],{"class":36,"line":287},[34,4332,2464],{"class":44},[34,4334,537],{"class":40},[34,4336,2469],{"class":40},[34,4338,2472],{"class":2138},[34,4340,537],{"class":40},[34,4342,2417],{"class":2152},[34,4344,526],{"class":40},[34,4346,2481],{"class":2138},[34,4348,2484],{"class":40},[34,4350,2487],{"class":2152},[34,4352,495],{"class":40},[34,4354,2492],{"class":48},[34,4356,2495],{"class":2152},[34,4358,498],{"class":40},[34,4360,4361],{"class":36,"line":322},[34,4362,2502],{"class":40},[34,4364,4365],{"class":36,"line":327},[34,4366,2187],{"class":40},[34,4368,4369],{"class":36,"line":333},[34,4370,192],{"emptyLinePlaceholder":191},[34,4372,4373,4375,4377,4380,4382],{"class":36,"line":341},[34,4374,2124],{"class":2099},[34,4376,438],{"class":48},[34,4378,4379],{"class":302}," useFittingWidget",[34,4381,306],{"class":40},[34,4383,443],{"class":40},[34,4385,4386,4388,4391,4393,4395,4398,4400,4402,4404,4406],{"class":36,"line":357},[34,4387,2547],{"class":48},[34,4389,4390],{"class":158}," open",[34,4392,465],{"class":40},[34,4394,2469],{"class":40},[34,4396,4397],{"class":2138},"options",[34,4399,537],{"class":40},[34,4401,4246],{"class":2152},[34,4403,495],{"class":40},[34,4405,2492],{"class":48},[34,4407,443],{"class":40},[34,4409,4410,4412,4414,4416,4418,4420,4422,4424,4426,4428,4430],{"class":36,"line":372},[34,4411,417],{"class":158},[34,4413,420],{"class":40},[34,4415,457],{"class":302},[34,4417,489],{"class":44},[34,4419,518],{"class":40},[34,4421,610],{"class":72},[34,4423,518],{"class":40},[34,4425,526],{"class":40},[34,4427,2481],{"class":158},[34,4429,495],{"class":44},[34,4431,498],{"class":40},[34,4433,4434],{"class":36,"line":383},[34,4435,1698],{"class":40},[34,4437,4438],{"class":36,"line":388},[34,4439,192],{"emptyLinePlaceholder":191},[34,4441,4442,4444,4447,4449,4451,4453],{"class":36,"line":394},[34,4443,2547],{"class":48},[34,4445,4446],{"class":158}," close",[34,4448,465],{"class":40},[34,4450,2555],{"class":40},[34,4452,2492],{"class":48},[34,4454,443],{"class":40},[34,4456,4457,4459,4461,4463,4465,4467,4470,4472,4474],{"class":36,"line":414},[34,4458,417],{"class":158},[34,4460,420],{"class":40},[34,4462,457],{"class":302},[34,4464,489],{"class":44},[34,4466,518],{"class":40},[34,4468,4469],{"class":72},"close",[34,4471,518],{"class":40},[34,4473,495],{"class":44},[34,4475,498],{"class":40},[34,4477,4478],{"class":36,"line":446},[34,4479,1698],{"class":40},[34,4481,4482],{"class":36,"line":501},[34,4483,192],{"emptyLinePlaceholder":191},[34,4485,4486,4488,4490,4492,4494,4496],{"class":36,"line":507},[34,4487,2168],{"class":2099},[34,4489,2145],{"class":40},[34,4491,4390],{"class":158},[34,4493,526],{"class":40},[34,4495,4446],{"class":158},[34,4497,4498],{"class":40}," };\n",[34,4500,4501],{"class":36,"line":531},[34,4502,2187],{"class":40},[19,4504,4506],{"id":4505},"_3-use-in-a-component","3. Use in a Component",[24,4508,4510],{"className":2090,"code":4509,"language":2092,"meta":29,"style":29},"\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",[31,4511,4512,4517,4538,4542,4551,4561,4571,4575,4579,4606,4624,4628,4634,4642,4649,4661,4701,4705,4712,4723,4732,4747,4762,4794,4801,4806,4810,4815,4823,4831,4837],{"__ignoreMap":29},[34,4513,4514],{"class":36,"line":37},[34,4515,4516],{"class":239},"\u002F\u002F components\u002FTryOnWidget.tsx\n",[34,4518,4519,4521,4523,4525,4527,4529,4531,4534,4536],{"class":36,"line":55},[34,4520,2100],{"class":2099},[34,4522,2145],{"class":40},[34,4524,4379],{"class":158},[34,4526,2768],{"class":40},[34,4528,2771],{"class":2099},[34,4530,540],{"class":40},[34,4532,4533],{"class":72},"..\u002Fhooks\u002FuseFittingWidget",[34,4535,518],{"class":40},[34,4537,498],{"class":40},[34,4539,4540],{"class":36,"line":80},[34,4541,192],{"emptyLinePlaceholder":191},[34,4543,4544,4546,4549],{"class":36,"line":90},[34,4545,2402],{"class":48},[34,4547,4548],{"class":2152}," Props",[34,4550,443],{"class":40},[34,4552,4553,4555,4557,4559],{"class":36,"line":114},[34,4554,2412],{"class":44},[34,4556,537],{"class":40},[34,4558,2417],{"class":2152},[34,4560,498],{"class":40},[34,4562,4563,4565,4567,4569],{"class":36,"line":147},[34,4564,3764],{"class":44},[34,4566,537],{"class":40},[34,4568,2417],{"class":2152},[34,4570,498],{"class":40},[34,4572,4573],{"class":36,"line":169},[34,4574,2187],{"class":40},[34,4576,4577],{"class":36,"line":178},[34,4578,192],{"emptyLinePlaceholder":191},[34,4580,4581,4583,4585,4588,4590,4593,4595,4598,4600,4602,4604],{"class":36,"line":188},[34,4582,2124],{"class":2099},[34,4584,438],{"class":48},[34,4586,4587],{"class":302}," TryOnWidget",[34,4589,2135],{"class":40},[34,4591,4592],{"class":2138}," productName",[34,4594,526],{"class":40},[34,4596,4597],{"class":2138}," imageUrl",[34,4599,2142],{"class":40},[34,4601,4548],{"class":2152},[34,4603,495],{"class":40},[34,4605,443],{"class":40},[34,4607,4608,4610,4612,4614,4616,4618,4620,4622],{"class":36,"line":195},[34,4609,2547],{"class":48},[34,4611,2145],{"class":40},[34,4613,4390],{"class":158},[34,4615,2768],{"class":40},[34,4617,465],{"class":40},[34,4619,4379],{"class":302},[34,4621,306],{"class":44},[34,4623,498],{"class":40},[34,4625,4626],{"class":36,"line":213},[34,4627,192],{"emptyLinePlaceholder":191},[34,4629,4630,4632],{"class":36,"line":231},[34,4631,2168],{"class":2099},[34,4633,2171],{"class":44},[34,4635,4636,4638,4640],{"class":36,"line":236},[34,4637,2870],{"class":40},[34,4639,248],{"class":44},[34,4641,52],{"class":40},[34,4643,4644,4646],{"class":36,"line":243},[34,4645,2196],{"class":40},[34,4647,4648],{"class":44},"div\n",[34,4650,4651,4653,4655,4657,4659],{"class":36,"line":282},[34,4652,2231],{"class":48},[34,4654,66],{"class":40},[34,4656,69],{"class":40},[34,4658,258],{"class":72},[34,4660,354],{"class":40},[34,4662,4663,4666,4668,4670,4672,4674,4676,4678,4680,4682,4684,4686,4688,4690,4692,4694,4696,4698],{"class":36,"line":287},[34,4664,4665],{"class":48},"        style",[34,4667,2667],{"class":40},[34,4669,2670],{"class":44},[34,4671,537],{"class":40},[34,4673,540],{"class":40},[34,4675,2677],{"class":72},[34,4677,518],{"class":40},[34,4679,526],{"class":40},[34,4681,2684],{"class":44},[34,4683,537],{"class":40},[34,4685,2690],{"class":2689},[34,4687,526],{"class":40},[34,4689,2695],{"class":44},[34,4691,537],{"class":40},[34,4693,540],{"class":40},[34,4695,2702],{"class":72},[34,4697,518],{"class":40},[34,4699,4700],{"class":40}," }}\n",[34,4702,4703],{"class":36,"line":322},[34,4704,2244],{"class":40},[34,4706,4707,4709],{"class":36,"line":327},[34,4708,2196],{"class":40},[34,4710,4711],{"class":44},"button\n",[34,4713,4714,4717,4720],{"class":36,"line":333},[34,4715,4716],{"class":48},"        onClick",[34,4718,4719],{"class":40},"={()",[34,4721,4722],{"class":48}," =>\n",[34,4724,4725,4728,4730],{"class":36,"line":341},[34,4726,4727],{"class":302},"          open",[34,4729,489],{"class":158},[34,4731,2449],{"class":40},[34,4733,4734,4737,4739,4741,4743,4745],{"class":36,"line":357},[34,4735,4736],{"class":44},"            targetElementId",[34,4738,537],{"class":40},[34,4740,540],{"class":40},[34,4742,258],{"class":72},[34,4744,518],{"class":40},[34,4746,633],{"class":40},[34,4748,4749,4752,4754,4756,4758,4760],{"class":36,"line":372},[34,4750,4751],{"class":44},"            model",[34,4753,537],{"class":40},[34,4755,540],{"class":40},[34,4757,646],{"class":72},[34,4759,518],{"class":40},[34,4761,633],{"class":40},[34,4763,4764,4767,4769,4772,4775,4777,4779,4782,4784,4787,4789,4792],{"class":36,"line":383},[34,4765,4766],{"class":44},"            tryonItems",[34,4768,537],{"class":40},[34,4770,4771],{"class":158}," [",[34,4773,4774],{"class":40},"{",[34,4776,4592],{"class":158},[34,4778,526],{"class":40},[34,4780,4781],{"class":44}," url",[34,4783,537],{"class":40},[34,4785,4786],{"class":158}," imageUrl ",[34,4788,908],{"class":40},[34,4790,4791],{"class":158},"]",[34,4793,633],{"class":40},[34,4795,4796,4799],{"class":36,"line":388},[34,4797,4798],{"class":40},"          }",[34,4800,3396],{"class":158},[34,4802,4803],{"class":36,"line":394},[34,4804,4805],{"class":40},"        }\n",[34,4807,4808],{"class":36,"line":414},[34,4809,2283],{"class":40},[34,4811,4812],{"class":36,"line":446},[34,4813,4814],{"class":158},"        Try On\n",[34,4816,4817,4819,4821],{"class":36,"line":501},[34,4818,2353],{"class":40},[34,4820,292],{"class":44},[34,4822,52],{"class":40},[34,4824,4825,4827,4829],{"class":36,"line":507},[34,4826,3002],{"class":40},[34,4828,248],{"class":44},[34,4830,52],{"class":40},[34,4832,4833,4835],{"class":36,"line":531},[34,4834,2367],{"class":44},[34,4836,498],{"class":40},[34,4838,4839],{"class":36,"line":549},[34,4840,2187],{"class":40},[785,4842,4843],{},"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":29,"searchDepth":55,"depth":55,"links":4845},[4846,4847,4848],{"id":3976,"depth":55,"text":3977},{"id":4181,"depth":55,"text":4182},{"id":4505,"depth":55,"text":4506},"Integrate with a React (Vite \u002F CRA) app","i-lucide-react",{},"\u002Fen\u002Fintegrations\u002Freact",{"title":3964,"description":4849},"en\u002Fintegrations\u002Freact","pb3AGE_nU_OjJFKOaRsB1vUMbyzjRuGZlTgplr5i71Q",{"id":4857,"title":5,"body":4858,"description":5478,"extension":793,"icon":794,"meta":5479,"navigation":191,"path":5480,"seo":5481,"stem":5482,"__hash__":5483},"content\u002Fen\u002Fintegrations\u002Fvanilla-js.md",{"type":7,"value":4859,"toc":5474},[4860,4864,4867,4871,5450,5454,5472],[10,4861,4863],{"id":4862},"vanilla-js-integration","Vanilla JS Integration",[15,4865,4866],{},"No framework needed — just HTML and JavaScript.",[19,4868,4870],{"id":4869},"full-example","Full Example",[24,4872,4874],{"className":26,"code":4873,"language":28,"meta":29,"style":29},"\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",[31,4875,4876,4886,4905,4913,4931,4959,4976,4984,4992,4996,5012,5029,5033,5038,5070,5074,5102,5106,5111,5117,5129,5141,5149,5153,5158,5176,5200,5242,5246,5266,5278,5286,5294,5298,5306,5316,5336,5350,5364,5372,5376,5390,5404,5408,5414,5422,5426,5434,5442],{"__ignoreMap":29},[34,4877,4878,4880,4882,4884],{"class":36,"line":37},[34,4879,41],{"class":40},[34,4881,45],{"class":44},[34,4883,49],{"class":48},[34,4885,52],{"class":40},[34,4887,4888,4890,4892,4894,4896,4898,4901,4903],{"class":36,"line":55},[34,4889,58],{"class":40},[34,4891,28],{"class":44},[34,4893,63],{"class":48},[34,4895,66],{"class":40},[34,4897,69],{"class":40},[34,4899,4900],{"class":72},"en",[34,4902,69],{"class":40},[34,4904,52],{"class":40},[34,4906,4907,4909,4911],{"class":36,"line":80},[34,4908,58],{"class":40},[34,4910,85],{"class":44},[34,4912,52],{"class":40},[34,4914,4915,4917,4919,4921,4923,4925,4927,4929],{"class":36,"line":90},[34,4916,93],{"class":40},[34,4918,96],{"class":44},[34,4920,99],{"class":48},[34,4922,66],{"class":40},[34,4924,69],{"class":40},[34,4926,106],{"class":72},[34,4928,69],{"class":40},[34,4930,111],{"class":40},[34,4932,4933,4935,4937,4939,4941,4943,4945,4947,4949,4951,4953,4955,4957],{"class":36,"line":114},[34,4934,93],{"class":40},[34,4936,96],{"class":44},[34,4938,121],{"class":48},[34,4940,66],{"class":40},[34,4942,69],{"class":40},[34,4944,128],{"class":72},[34,4946,69],{"class":40},[34,4948,133],{"class":48},[34,4950,66],{"class":40},[34,4952,69],{"class":40},[34,4954,140],{"class":72},[34,4956,69],{"class":40},[34,4958,111],{"class":40},[34,4960,4961,4963,4965,4967,4970,4972,4974],{"class":36,"line":147},[34,4962,93],{"class":40},[34,4964,152],{"class":44},[34,4966,155],{"class":40},[34,4968,4969],{"class":158},"Product Page — Virtual Try-On",[34,4971,162],{"class":40},[34,4973,152],{"class":44},[34,4975,52],{"class":40},[34,4977,4978,4980,4982],{"class":36,"line":169},[34,4979,162],{"class":40},[34,4981,85],{"class":44},[34,4983,52],{"class":40},[34,4985,4986,4988,4990],{"class":36,"line":178},[34,4987,58],{"class":40},[34,4989,183],{"class":44},[34,4991,52],{"class":40},[34,4993,4994],{"class":36,"line":188},[34,4995,192],{"emptyLinePlaceholder":191},[34,4997,4998,5000,5002,5004,5006,5008,5010],{"class":36,"line":195},[34,4999,93],{"class":40},[34,5001,10],{"class":44},[34,5003,155],{"class":40},[34,5005,1872],{"class":158},[34,5007,162],{"class":40},[34,5009,10],{"class":44},[34,5011,52],{"class":40},[34,5013,5014,5016,5018,5020,5023,5025,5027],{"class":36,"line":213},[34,5015,93],{"class":40},[34,5017,15],{"class":44},[34,5019,155],{"class":40},[34,5021,5022],{"class":158},"$89.00",[34,5024,162],{"class":40},[34,5026,15],{"class":44},[34,5028,52],{"class":40},[34,5030,5031],{"class":36,"line":231},[34,5032,192],{"emptyLinePlaceholder":191},[34,5034,5035],{"class":36,"line":236},[34,5036,5037],{"class":239},"  \u003C!-- Widget container -->\n",[34,5039,5040,5042,5044,5046,5048,5050,5052,5054,5056,5058,5060,5062,5064,5066,5068],{"class":36,"line":243},[34,5041,93],{"class":40},[34,5043,248],{"class":44},[34,5045,251],{"class":48},[34,5047,66],{"class":40},[34,5049,69],{"class":40},[34,5051,258],{"class":72},[34,5053,69],{"class":40},[34,5055,263],{"class":48},[34,5057,66],{"class":40},[34,5059,69],{"class":40},[34,5061,270],{"class":72},[34,5063,69],{"class":40},[34,5065,275],{"class":40},[34,5067,248],{"class":44},[34,5069,52],{"class":40},[34,5071,5072],{"class":36,"line":282},[34,5073,192],{"emptyLinePlaceholder":191},[34,5075,5076,5078,5080,5082,5084,5086,5088,5090,5092,5094,5096,5098,5100],{"class":36,"line":287},[34,5077,93],{"class":40},[34,5079,292],{"class":44},[34,5081,295],{"class":48},[34,5083,66],{"class":40},[34,5085,69],{"class":40},[34,5087,303],{"class":302},[34,5089,306],{"class":72},[34,5091,69],{"class":40},[34,5093,155],{"class":40},[34,5095,2728],{"class":158},[34,5097,162],{"class":40},[34,5099,292],{"class":44},[34,5101,52],{"class":40},[34,5103,5104],{"class":36,"line":322},[34,5105,192],{"emptyLinePlaceholder":191},[34,5107,5108],{"class":36,"line":327},[34,5109,5110],{"class":239},"  \u003C!-- 1. Load the widget bundle -->\n",[34,5112,5113,5115],{"class":36,"line":333},[34,5114,93],{"class":40},[34,5116,338],{"class":44},[34,5118,5119,5121,5123,5125,5127],{"class":36,"line":341},[34,5120,344],{"class":48},[34,5122,66],{"class":40},[34,5124,69],{"class":40},[34,5126,351],{"class":72},[34,5128,354],{"class":40},[34,5130,5131,5133,5135,5137,5139],{"class":36,"line":357},[34,5132,360],{"class":48},[34,5134,66],{"class":40},[34,5136,69],{"class":40},[34,5138,367],{"class":72},[34,5140,354],{"class":40},[34,5142,5143,5145,5147],{"class":36,"line":372},[34,5144,375],{"class":40},[34,5146,378],{"class":44},[34,5148,52],{"class":40},[34,5150,5151],{"class":36,"line":383},[34,5152,192],{"emptyLinePlaceholder":191},[34,5154,5155],{"class":36,"line":388},[34,5156,5157],{"class":239},"  \u003C!-- 2. Initialize -->\n",[34,5159,5160,5162,5164,5166,5168,5170,5172,5174],{"class":36,"line":394},[34,5161,93],{"class":40},[34,5163,378],{"class":44},[34,5165,251],{"class":48},[34,5167,66],{"class":40},[34,5169,69],{"class":40},[34,5171,407],{"class":72},[34,5173,69],{"class":40},[34,5175,52],{"class":40},[34,5177,5178,5180,5182,5184,5186,5188,5190,5192,5194,5196,5198],{"class":36,"line":414},[34,5179,417],{"class":158},[34,5181,420],{"class":40},[34,5183,423],{"class":158},[34,5185,66],{"class":40},[34,5187,428],{"class":158},[34,5189,420],{"class":40},[34,5191,423],{"class":158},[34,5193,435],{"class":40},[34,5195,438],{"class":48},[34,5197,306],{"class":40},[34,5199,443],{"class":40},[34,5201,5202,5204,5206,5208,5210,5212,5214,5216,5218,5220,5222,5224,5226,5228,5230,5232,5234,5236,5238,5240],{"class":36,"line":446},[34,5203,449],{"class":44},[34,5205,452],{"class":158},[34,5207,420],{"class":40},[34,5209,457],{"class":158},[34,5211,420],{"class":40},[34,5213,462],{"class":158},[34,5215,465],{"class":40},[34,5217,428],{"class":158},[34,5219,420],{"class":40},[34,5221,457],{"class":158},[34,5223,420],{"class":40},[34,5225,462],{"class":158},[34,5227,478],{"class":40},[34,5229,481],{"class":44},[34,5231,420],{"class":40},[34,5233,486],{"class":302},[34,5235,489],{"class":44},[34,5237,492],{"class":158},[34,5239,495],{"class":44},[34,5241,498],{"class":40},[34,5243,5244],{"class":36,"line":501},[34,5245,504],{"class":40},[34,5247,5248,5250,5252,5254,5256,5258,5260,5262,5264],{"class":36,"line":507},[34,5249,417],{"class":158},[34,5251,420],{"class":40},[34,5253,457],{"class":302},[34,5255,489],{"class":158},[34,5257,518],{"class":40},[34,5259,521],{"class":72},[34,5261,518],{"class":40},[34,5263,526],{"class":40},[34,5265,443],{"class":40},[34,5267,5268,5270,5272,5274,5276],{"class":36,"line":531},[34,5269,534],{"class":44},[34,5271,537],{"class":40},[34,5273,540],{"class":40},[34,5275,543],{"class":72},[34,5277,546],{"class":40},[34,5279,5280,5282,5284],{"class":36,"line":549},[34,5281,552],{"class":40},[34,5283,495],{"class":158},[34,5285,498],{"class":40},[34,5287,5288,5290,5292],{"class":36,"line":559},[34,5289,562],{"class":40},[34,5291,378],{"class":44},[34,5293,52],{"class":40},[34,5295,5296],{"class":36,"line":569},[34,5297,192],{"emptyLinePlaceholder":191},[34,5299,5300,5302,5304],{"class":36,"line":574},[34,5301,93],{"class":40},[34,5303,378],{"class":44},[34,5305,52],{"class":40},[34,5307,5308,5310,5312,5314],{"class":36,"line":583},[34,5309,586],{"class":48},[34,5311,589],{"class":302},[34,5313,306],{"class":40},[34,5315,443],{"class":40},[34,5317,5318,5320,5322,5324,5326,5328,5330,5332,5334],{"class":36,"line":596},[34,5319,599],{"class":158},[34,5321,420],{"class":40},[34,5323,457],{"class":302},[34,5325,489],{"class":44},[34,5327,518],{"class":40},[34,5329,610],{"class":72},[34,5331,518],{"class":40},[34,5333,526],{"class":40},[34,5335,443],{"class":40},[34,5337,5338,5340,5342,5344,5346,5348],{"class":36,"line":619},[34,5339,622],{"class":44},[34,5341,537],{"class":40},[34,5343,540],{"class":40},[34,5345,258],{"class":72},[34,5347,518],{"class":40},[34,5349,633],{"class":40},[34,5351,5352,5354,5356,5358,5360,5362],{"class":36,"line":636},[34,5353,639],{"class":44},[34,5355,537],{"class":40},[34,5357,540],{"class":40},[34,5359,646],{"class":72},[34,5361,518],{"class":40},[34,5363,633],{"class":40},[34,5365,5366,5368,5370],{"class":36,"line":653},[34,5367,656],{"class":44},[34,5369,537],{"class":40},[34,5371,661],{"class":44},[34,5373,5374],{"class":36,"line":664},[34,5375,667],{"class":40},[34,5377,5378,5380,5382,5384,5386,5388],{"class":36,"line":670},[34,5379,673],{"class":44},[34,5381,537],{"class":40},[34,5383,540],{"class":40},[34,5385,1872],{"class":72},[34,5387,518],{"class":40},[34,5389,633],{"class":40},[34,5391,5392,5394,5396,5398,5400,5402],{"class":36,"line":686},[34,5393,689],{"class":44},[34,5395,537],{"class":40},[34,5397,540],{"class":40},[34,5399,696],{"class":72},[34,5401,518],{"class":40},[34,5403,633],{"class":40},[34,5405,5406],{"class":36,"line":703},[34,5407,706],{"class":40},[34,5409,5410,5412],{"class":36,"line":709},[34,5411,712],{"class":44},[34,5413,633],{"class":40},[34,5415,5416,5418,5420],{"class":36,"line":717},[34,5417,720],{"class":40},[34,5419,495],{"class":44},[34,5421,498],{"class":40},[34,5423,5424],{"class":36,"line":727},[34,5425,730],{"class":40},[34,5427,5428,5430,5432],{"class":36,"line":733},[34,5429,562],{"class":40},[34,5431,378],{"class":44},[34,5433,52],{"class":40},[34,5435,5436,5438,5440],{"class":36,"line":742},[34,5437,162],{"class":40},[34,5439,183],{"class":44},[34,5441,52],{"class":40},[34,5443,5444,5446,5448],{"class":36,"line":751},[34,5445,162],{"class":40},[34,5447,28],{"class":44},[34,5449,52],{"class":40},[19,5451,5453],{"id":5452},"key-points","Key Points",[763,5455,5456,5459,5467],{},[766,5457,5458],{},"Load the bundle script first.",[766,5460,5461,5462,5464,5465,420],{},"Initialize with ",[31,5463,774],{}," before calling ",[31,5466,610],{},[766,5468,1964,5469,5471],{},[31,5470,782],{}," must match an existing element on the page.",[785,5473,787],{},{"title":29,"searchDepth":55,"depth":55,"links":5475},[5476,5477],{"id":4869,"depth":55,"text":4870},{"id":5452,"depth":55,"text":5453},"Integrate with plain HTML\u002FJavaScript",{},"\u002Fen\u002Fintegrations\u002Fvanilla-js",{"title":5,"description":5478},"en\u002Fintegrations\u002Fvanilla-js","Ts8msIFer-tIlPDRwRbkNZSpWu0JrTJP8uMKqB57tJQ",{"id":5485,"title":5486,"body":5487,"description":6332,"extension":793,"icon":6333,"meta":6334,"navigation":191,"path":6335,"seo":6336,"stem":6337,"__hash__":6338},"content\u002Fen\u002Fintegrations\u002Fvue.md","Vue 3",{"type":7,"value":5488,"toc":6327},[5489,5493,5496,5498,5503,5682,5686,5984,5988,6324],[10,5490,5492],{"id":5491},"vue-3-integration","Vue 3 Integration",[15,5494,5495],{},"Works with Vue 3 + Vite or any Vue 3 setup.",[19,5497,3977],{"id":3976},[15,5499,5500,5501,537],{},"In ",[31,5502,3983],{},[24,5504,5506],{"className":26,"code":5505,"language":28,"meta":29,"style":29},"\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",[31,5507,5508,5514,5526,5538,5546,5564,5588,5630,5634,5654,5666,5674],{"__ignoreMap":29},[34,5509,5510,5512],{"class":36,"line":37},[34,5511,58],{"class":40},[34,5513,338],{"class":44},[34,5515,5516,5518,5520,5522,5524],{"class":36,"line":55},[34,5517,1569],{"class":48},[34,5519,66],{"class":40},[34,5521,69],{"class":40},[34,5523,351],{"class":72},[34,5525,354],{"class":40},[34,5527,5528,5530,5532,5534,5536],{"class":36,"line":80},[34,5529,1582],{"class":48},[34,5531,66],{"class":40},[34,5533,69],{"class":40},[34,5535,367],{"class":72},[34,5537,354],{"class":40},[34,5539,5540,5542,5544],{"class":36,"line":90},[34,5541,275],{"class":40},[34,5543,378],{"class":44},[34,5545,52],{"class":40},[34,5547,5548,5550,5552,5554,5556,5558,5560,5562],{"class":36,"line":114},[34,5549,58],{"class":40},[34,5551,378],{"class":44},[34,5553,251],{"class":48},[34,5555,66],{"class":40},[34,5557,69],{"class":40},[34,5559,407],{"class":72},[34,5561,69],{"class":40},[34,5563,52],{"class":40},[34,5565,5566,5568,5570,5572,5574,5576,5578,5580,5582,5584,5586],{"class":36,"line":147},[34,5567,1630],{"class":158},[34,5569,420],{"class":40},[34,5571,423],{"class":158},[34,5573,66],{"class":40},[34,5575,428],{"class":158},[34,5577,420],{"class":40},[34,5579,423],{"class":158},[34,5581,435],{"class":40},[34,5583,438],{"class":48},[34,5585,306],{"class":40},[34,5587,443],{"class":40},[34,5589,5590,5592,5594,5596,5598,5600,5602,5604,5606,5608,5610,5612,5614,5616,5618,5620,5622,5624,5626,5628],{"class":36,"line":169},[34,5591,1655],{"class":44},[34,5593,452],{"class":158},[34,5595,420],{"class":40},[34,5597,457],{"class":158},[34,5599,420],{"class":40},[34,5601,462],{"class":158},[34,5603,465],{"class":40},[34,5605,428],{"class":158},[34,5607,420],{"class":40},[34,5609,457],{"class":158},[34,5611,420],{"class":40},[34,5613,462],{"class":158},[34,5615,478],{"class":40},[34,5617,481],{"class":44},[34,5619,420],{"class":40},[34,5621,486],{"class":302},[34,5623,489],{"class":44},[34,5625,492],{"class":158},[34,5627,495],{"class":44},[34,5629,498],{"class":40},[34,5631,5632],{"class":36,"line":178},[34,5633,1698],{"class":40},[34,5635,5636,5638,5640,5642,5644,5646,5648,5650,5652],{"class":36,"line":188},[34,5637,1630],{"class":158},[34,5639,420],{"class":40},[34,5641,457],{"class":302},[34,5643,489],{"class":158},[34,5645,518],{"class":40},[34,5647,521],{"class":72},[34,5649,518],{"class":40},[34,5651,526],{"class":40},[34,5653,443],{"class":40},[34,5655,5656,5658,5660,5662,5664],{"class":36,"line":195},[34,5657,1723],{"class":44},[34,5659,537],{"class":40},[34,5661,540],{"class":40},[34,5663,543],{"class":72},[34,5665,546],{"class":40},[34,5667,5668,5670,5672],{"class":36,"line":213},[34,5669,1736],{"class":40},[34,5671,495],{"class":158},[34,5673,498],{"class":40},[34,5675,5676,5678,5680],{"class":36,"line":231},[34,5677,162],{"class":40},[34,5679,378],{"class":44},[34,5681,52],{"class":40},[19,5683,5685],{"id":5684},"_2-create-a-composable","2. Create a Composable",[24,5687,5689],{"className":3413,"code":5688,"language":3210,"meta":29,"style":29},"\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",[31,5690,5691,5696,5707,5715,5723,5731,5735,5739,5749,5757,5785,5796,5800,5804,5812,5820,5849,5853,5857,5861,5873,5895,5917,5921,5925,5939,5957,5961,5965,5980],{"__ignoreMap":29},[34,5692,5693],{"class":36,"line":37},[34,5694,5695],{"class":239},"\u002F\u002F composables\u002FuseFittingWidget.ts\n",[34,5697,5698,5700,5703,5705],{"class":36,"line":55},[34,5699,2124],{"class":2099},[34,5701,5702],{"class":48}," interface",[34,5704,2405],{"class":2152},[34,5706,443],{"class":40},[34,5708,5709,5711,5713],{"class":36,"line":80},[34,5710,2412],{"class":44},[34,5712,537],{"class":40},[34,5714,3759],{"class":2152},[34,5716,5717,5719,5721],{"class":36,"line":90},[34,5718,2424],{"class":44},[34,5720,537],{"class":40},[34,5722,3759],{"class":2152},[34,5724,5725,5727,5729],{"class":36,"line":114},[34,5726,4225],{"class":44},[34,5728,2484],{"class":40},[34,5730,3759],{"class":2152},[34,5732,5733],{"class":36,"line":147},[34,5734,2187],{"class":40},[34,5736,5737],{"class":36,"line":169},[34,5738,192],{"emptyLinePlaceholder":191},[34,5740,5741,5743,5745,5747],{"class":36,"line":178},[34,5742,2124],{"class":2099},[34,5744,5702],{"class":48},[34,5746,4246],{"class":2152},[34,5748,443],{"class":40},[34,5750,5751,5753,5755],{"class":36,"line":188},[34,5752,1069],{"class":44},[34,5754,537],{"class":40},[34,5756,3759],{"class":2152},[34,5758,5759,5761,5763,5765,5767,5769,5771,5773,5775,5777,5779,5781,5783],{"class":36,"line":195},[34,5760,1084],{"class":44},[34,5762,2484],{"class":40},[34,5764,540],{"class":40},[34,5766,646],{"class":72},[34,5768,518],{"class":40},[34,5770,4273],{"class":40},[34,5772,540],{"class":40},[34,5774,4278],{"class":72},[34,5776,518],{"class":40},[34,5778,4273],{"class":40},[34,5780,540],{"class":40},[34,5782,4287],{"class":72},[34,5784,546],{"class":40},[34,5786,5787,5789,5791,5793],{"class":36,"line":213},[34,5788,1099],{"class":44},[34,5790,537],{"class":40},[34,5792,2405],{"class":2152},[34,5794,5795],{"class":158},"[]\n",[34,5797,5798],{"class":36,"line":231},[34,5799,2187],{"class":40},[34,5801,5802],{"class":36,"line":236},[34,5803,192],{"emptyLinePlaceholder":191},[34,5805,5806,5808,5810],{"class":36,"line":243},[34,5807,2443],{"class":48},[34,5809,2446],{"class":158},[34,5811,2449],{"class":40},[34,5813,5814,5816,5818],{"class":36,"line":282},[34,5815,2454],{"class":48},[34,5817,2457],{"class":2152},[34,5819,443],{"class":40},[34,5821,5822,5824,5826,5828,5830,5832,5834,5836,5838,5840,5842,5844,5846],{"class":36,"line":287},[34,5823,2464],{"class":44},[34,5825,537],{"class":40},[34,5827,2469],{"class":40},[34,5829,2472],{"class":2138},[34,5831,537],{"class":40},[34,5833,2417],{"class":2152},[34,5835,526],{"class":40},[34,5837,2481],{"class":2138},[34,5839,2484],{"class":40},[34,5841,2487],{"class":2152},[34,5843,495],{"class":40},[34,5845,2492],{"class":48},[34,5847,5848],{"class":2152}," void\n",[34,5850,5851],{"class":36,"line":322},[34,5852,2502],{"class":40},[34,5854,5855],{"class":36,"line":327},[34,5856,2187],{"class":40},[34,5858,5859],{"class":36,"line":333},[34,5860,192],{"emptyLinePlaceholder":191},[34,5862,5863,5865,5867,5869,5871],{"class":36,"line":341},[34,5864,2124],{"class":2099},[34,5866,438],{"class":48},[34,5868,4379],{"class":302},[34,5870,306],{"class":40},[34,5872,443],{"class":40},[34,5874,5875,5877,5879,5881,5883,5885,5887,5889,5891,5893],{"class":36,"line":357},[34,5876,2547],{"class":48},[34,5878,4390],{"class":158},[34,5880,465],{"class":40},[34,5882,2469],{"class":40},[34,5884,4397],{"class":2138},[34,5886,537],{"class":40},[34,5888,4246],{"class":2152},[34,5890,495],{"class":40},[34,5892,2492],{"class":48},[34,5894,443],{"class":40},[34,5896,5897,5899,5901,5903,5905,5907,5909,5911,5913,5915],{"class":36,"line":372},[34,5898,417],{"class":158},[34,5900,420],{"class":40},[34,5902,457],{"class":302},[34,5904,489],{"class":44},[34,5906,518],{"class":40},[34,5908,610],{"class":72},[34,5910,518],{"class":40},[34,5912,526],{"class":40},[34,5914,2481],{"class":158},[34,5916,3396],{"class":44},[34,5918,5919],{"class":36,"line":383},[34,5920,2502],{"class":40},[34,5922,5923],{"class":36,"line":388},[34,5924,192],{"emptyLinePlaceholder":191},[34,5926,5927,5929,5931,5933,5935,5937],{"class":36,"line":394},[34,5928,2547],{"class":48},[34,5930,4446],{"class":158},[34,5932,465],{"class":40},[34,5934,2555],{"class":40},[34,5936,2492],{"class":48},[34,5938,443],{"class":40},[34,5940,5941,5943,5945,5947,5949,5951,5953,5955],{"class":36,"line":414},[34,5942,417],{"class":158},[34,5944,420],{"class":40},[34,5946,457],{"class":302},[34,5948,489],{"class":44},[34,5950,518],{"class":40},[34,5952,4469],{"class":72},[34,5954,518],{"class":40},[34,5956,3396],{"class":44},[34,5958,5959],{"class":36,"line":446},[34,5960,2502],{"class":40},[34,5962,5963],{"class":36,"line":501},[34,5964,192],{"emptyLinePlaceholder":191},[34,5966,5967,5969,5971,5973,5975,5977],{"class":36,"line":507},[34,5968,2168],{"class":2099},[34,5970,2145],{"class":40},[34,5972,4390],{"class":158},[34,5974,526],{"class":40},[34,5976,4446],{"class":158},[34,5978,5979],{"class":40}," }\n",[34,5981,5982],{"class":36,"line":531},[34,5983,2187],{"class":40},[19,5985,5987],{"id":5986},"_3-create-the-widget-component","3. Create the Widget Component",[24,5989,5991],{"className":3096,"code":5990,"language":3098,"meta":29,"style":29},"\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",[31,5992,5993,5997,6005,6013,6019,6031,6045,6050,6076,6084,6092,6096,6116,6142,6146,6158,6166,6174,6180,6184,6201,6205,6219,6228,6242,6256,6264,6268,6282,6296,6300,6306,6312,6316],{"__ignoreMap":29},[34,5994,5995],{"class":36,"line":37},[34,5996,3620],{"class":239},[34,5998,5999,6001,6003],{"class":36,"line":55},[34,6000,58],{"class":40},[34,6002,3112],{"class":44},[34,6004,52],{"class":40},[34,6006,6007,6009,6011],{"class":36,"line":80},[34,6008,93],{"class":40},[34,6010,248],{"class":44},[34,6012,52],{"class":40},[34,6014,6015,6017],{"class":36,"line":90},[34,6016,2870],{"class":40},[34,6018,4648],{"class":44},[34,6020,6021,6023,6025,6027,6029],{"class":36,"line":114},[34,6022,3279],{"class":48},[34,6024,66],{"class":40},[34,6026,69],{"class":40},[34,6028,258],{"class":72},[34,6030,354],{"class":40},[34,6032,6033,6036,6038,6040,6043],{"class":36,"line":147},[34,6034,6035],{"class":48},"      style",[34,6037,66],{"class":40},[34,6039,69],{"class":40},[34,6041,6042],{"class":72},"width: 100%; max-width: 600px; aspect-ratio: 3\u002F4",[34,6044,354],{"class":40},[34,6046,6047],{"class":36,"line":169},[34,6048,6049],{"class":40},"    \u002F>\n",[34,6051,6052,6054,6056,6058,6060,6062,6064,6066,6068,6070,6072,6074],{"class":36,"line":178},[34,6053,2870],{"class":40},[34,6055,292],{"class":44},[34,6057,3675],{"class":48},[34,6059,66],{"class":40},[34,6061,69],{"class":40},[34,6063,3682],{"class":72},[34,6065,69],{"class":40},[34,6067,155],{"class":40},[34,6069,2728],{"class":158},[34,6071,162],{"class":40},[34,6073,292],{"class":44},[34,6075,52],{"class":40},[34,6077,6078,6080,6082],{"class":36,"line":188},[34,6079,562],{"class":40},[34,6081,248],{"class":44},[34,6083,52],{"class":40},[34,6085,6086,6088,6090],{"class":36,"line":195},[34,6087,162],{"class":40},[34,6089,3112],{"class":44},[34,6091,52],{"class":40},[34,6093,6094],{"class":36,"line":213},[34,6095,192],{"emptyLinePlaceholder":191},[34,6097,6098,6100,6102,6104,6106,6108,6110,6112,6114],{"class":36,"line":231},[34,6099,58],{"class":40},[34,6101,378],{"class":44},[34,6103,3201],{"class":48},[34,6105,63],{"class":48},[34,6107,66],{"class":40},[34,6109,69],{"class":40},[34,6111,3210],{"class":72},[34,6113,69],{"class":40},[34,6115,52],{"class":40},[34,6117,6118,6120,6122,6124,6126,6129,6131,6133,6135,6137,6140],{"class":36,"line":236},[34,6119,2100],{"class":2099},[34,6121,2145],{"class":40},[34,6123,4379],{"class":158},[34,6125,526],{"class":40},[34,6127,6128],{"class":2099}," type",[34,6130,2405],{"class":158},[34,6132,2768],{"class":40},[34,6134,2771],{"class":2099},[34,6136,540],{"class":40},[34,6138,6139],{"class":72},"~\u002Fcomposables\u002FuseFittingWidget",[34,6141,546],{"class":40},[34,6143,6144],{"class":36,"line":243},[34,6145,192],{"emptyLinePlaceholder":191},[34,6147,6148,6150,6152,6154,6156],{"class":36,"line":282},[34,6149,3739],{"class":48},[34,6151,3742],{"class":158},[34,6153,66],{"class":40},[34,6155,3747],{"class":302},[34,6157,3750],{"class":40},[34,6159,6160,6162,6164],{"class":36,"line":287},[34,6161,2412],{"class":44},[34,6163,537],{"class":40},[34,6165,3759],{"class":2152},[34,6167,6168,6170,6172],{"class":36,"line":322},[34,6169,3764],{"class":44},[34,6171,537],{"class":40},[34,6173,3759],{"class":2152},[34,6175,6176,6178],{"class":36,"line":327},[34,6177,2725],{"class":40},[34,6179,3775],{"class":158},[34,6181,6182],{"class":36,"line":333},[34,6183,192],{"emptyLinePlaceholder":191},[34,6185,6186,6188,6190,6193,6195,6197,6199],{"class":36,"line":341},[34,6187,3739],{"class":48},[34,6189,2145],{"class":40},[34,6191,6192],{"class":158}," open ",[34,6194,908],{"class":40},[34,6196,465],{"class":40},[34,6198,4379],{"class":302},[34,6200,3775],{"class":158},[34,6202,6203],{"class":36,"line":357},[34,6204,192],{"emptyLinePlaceholder":191},[34,6206,6207,6209,6211,6213,6215,6217],{"class":36,"line":372},[34,6208,3739],{"class":48},[34,6210,3786],{"class":158},[34,6212,66],{"class":40},[34,6214,2555],{"class":40},[34,6216,2492],{"class":48},[34,6218,443],{"class":40},[34,6220,6221,6224,6226],{"class":36,"line":383},[34,6222,6223],{"class":302},"  open",[34,6225,489],{"class":44},[34,6227,2449],{"class":40},[34,6229,6230,6232,6234,6236,6238,6240],{"class":36,"line":388},[34,6231,3819],{"class":44},[34,6233,537],{"class":40},[34,6235,540],{"class":40},[34,6237,258],{"class":72},[34,6239,518],{"class":40},[34,6241,633],{"class":40},[34,6243,6244,6246,6248,6250,6252,6254],{"class":36,"line":394},[34,6245,3834],{"class":44},[34,6247,537],{"class":40},[34,6249,540],{"class":40},[34,6251,646],{"class":72},[34,6253,518],{"class":40},[34,6255,633],{"class":40},[34,6257,6258,6260,6262],{"class":36,"line":414},[34,6259,3849],{"class":44},[34,6261,537],{"class":40},[34,6263,661],{"class":44},[34,6265,6266],{"class":36,"line":446},[34,6267,3858],{"class":40},[34,6269,6270,6272,6274,6276,6278,6280],{"class":36,"line":501},[34,6271,3863],{"class":44},[34,6273,537],{"class":40},[34,6275,3868],{"class":158},[34,6277,420],{"class":40},[34,6279,1018],{"class":158},[34,6281,633],{"class":40},[34,6283,6284,6286,6288,6290,6292,6294],{"class":36,"line":507},[34,6285,3879],{"class":44},[34,6287,537],{"class":40},[34,6289,3868],{"class":158},[34,6291,420],{"class":40},[34,6293,3888],{"class":158},[34,6295,633],{"class":40},[34,6297,6298],{"class":36,"line":531},[34,6299,3895],{"class":40},[34,6301,6302,6304],{"class":36,"line":549},[34,6303,3900],{"class":44},[34,6305,633],{"class":40},[34,6307,6308,6310],{"class":36,"line":559},[34,6309,1736],{"class":40},[34,6311,3396],{"class":44},[34,6313,6314],{"class":36,"line":569},[34,6315,2187],{"class":40},[34,6317,6318,6320,6322],{"class":36,"line":574},[34,6319,162],{"class":40},[34,6321,378],{"class":44},[34,6323,52],{"class":40},[785,6325,6326],{},"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":29,"searchDepth":55,"depth":55,"links":6328},[6329,6330,6331],{"id":3976,"depth":55,"text":3977},{"id":5684,"depth":55,"text":5685},{"id":5986,"depth":55,"text":5987},"Integrate with a Vue 3 application","i-lucide-venetian-mask",{},"\u002Fen\u002Fintegrations\u002Fvue",{"title":5486,"description":6332},"en\u002Fintegrations\u002Fvue","GShiJEM5AAOgyg7U0MXXp-Lqn_Y-1BooZA_uvPnVwT0",{"id":6340,"title":6341,"body":6342,"description":6751,"extension":793,"icon":1947,"meta":6752,"navigation":191,"path":2030,"seo":6753,"stem":6754,"__hash__":6755},"content\u002Fgetting-started\u002Fquick-start.md","Быстрый старт",{"type":7,"value":6343,"toc":6742},[6344,6347,6350,6354,6361,6365,6373,6415,6419,6559,6563,6569,6595,6599,6605,6715,6719,6722,6726,6739],[10,6345,6341],{"id":6346},"быстрый-старт",[15,6348,6349],{},"Следуйте этим шагам, чтобы добавить виртуальную примерку на ваш сайт.",[19,6351,6353],{"id":6352},"_1-получите-api-ключ","1. Получите API-ключ",[15,6355,6356,6357,6360],{},"Зарегистрируйтесь на ",[1532,6358,1537],{"href":1534,"rel":6359},[1536],", чтобы получить бесплатный API-ключ.",[19,6362,6364],{"id":6363},"_2-загрузите-скрипт-виджета","2. Загрузите скрипт виджета",[15,6366,6367,6368,6370,6371,537],{},"Добавьте следующий тег ",[31,6369,1548],{}," на страницу, желательно перед закрывающим тегом ",[31,6372,1552],{},[24,6374,6375],{"className":26,"code":1556,"language":28,"meta":29,"style":29},[31,6376,6377,6383,6395,6407],{"__ignoreMap":29},[34,6378,6379,6381],{"class":36,"line":37},[34,6380,58],{"class":40},[34,6382,338],{"class":44},[34,6384,6385,6387,6389,6391,6393],{"class":36,"line":55},[34,6386,1569],{"class":48},[34,6388,66],{"class":40},[34,6390,69],{"class":40},[34,6392,351],{"class":72},[34,6394,354],{"class":40},[34,6396,6397,6399,6401,6403,6405],{"class":36,"line":80},[34,6398,1582],{"class":48},[34,6400,66],{"class":40},[34,6402,69],{"class":40},[34,6404,367],{"class":72},[34,6406,354],{"class":40},[34,6408,6409,6411,6413],{"class":36,"line":90},[34,6410,275],{"class":40},[34,6412,378],{"class":44},[34,6414,52],{"class":40},[19,6416,6418],{"id":6417},"_3-инициализируйте-виджет","3. Инициализируйте виджет",[24,6420,6421],{"className":26,"code":1605,"language":28,"meta":29,"style":29},[31,6422,6423,6441,6465,6507,6511,6531,6543,6551],{"__ignoreMap":29},[34,6424,6425,6427,6429,6431,6433,6435,6437,6439],{"class":36,"line":37},[34,6426,58],{"class":40},[34,6428,378],{"class":44},[34,6430,251],{"class":48},[34,6432,66],{"class":40},[34,6434,69],{"class":40},[34,6436,407],{"class":72},[34,6438,69],{"class":40},[34,6440,52],{"class":40},[34,6442,6443,6445,6447,6449,6451,6453,6455,6457,6459,6461,6463],{"class":36,"line":55},[34,6444,1630],{"class":158},[34,6446,420],{"class":40},[34,6448,423],{"class":158},[34,6450,66],{"class":40},[34,6452,428],{"class":158},[34,6454,420],{"class":40},[34,6456,423],{"class":158},[34,6458,435],{"class":40},[34,6460,438],{"class":48},[34,6462,306],{"class":40},[34,6464,443],{"class":40},[34,6466,6467,6469,6471,6473,6475,6477,6479,6481,6483,6485,6487,6489,6491,6493,6495,6497,6499,6501,6503,6505],{"class":36,"line":80},[34,6468,1655],{"class":44},[34,6470,452],{"class":158},[34,6472,420],{"class":40},[34,6474,457],{"class":158},[34,6476,420],{"class":40},[34,6478,462],{"class":158},[34,6480,465],{"class":40},[34,6482,428],{"class":158},[34,6484,420],{"class":40},[34,6486,457],{"class":158},[34,6488,420],{"class":40},[34,6490,462],{"class":158},[34,6492,478],{"class":40},[34,6494,481],{"class":44},[34,6496,420],{"class":40},[34,6498,486],{"class":302},[34,6500,489],{"class":44},[34,6502,492],{"class":158},[34,6504,495],{"class":44},[34,6506,498],{"class":40},[34,6508,6509],{"class":36,"line":90},[34,6510,1698],{"class":40},[34,6512,6513,6515,6517,6519,6521,6523,6525,6527,6529],{"class":36,"line":114},[34,6514,1630],{"class":158},[34,6516,420],{"class":40},[34,6518,457],{"class":302},[34,6520,489],{"class":158},[34,6522,518],{"class":40},[34,6524,521],{"class":72},[34,6526,518],{"class":40},[34,6528,526],{"class":40},[34,6530,443],{"class":40},[34,6532,6533,6535,6537,6539,6541],{"class":36,"line":147},[34,6534,1723],{"class":44},[34,6536,537],{"class":40},[34,6538,540],{"class":40},[34,6540,543],{"class":72},[34,6542,546],{"class":40},[34,6544,6545,6547,6549],{"class":36,"line":169},[34,6546,1736],{"class":40},[34,6548,495],{"class":158},[34,6550,498],{"class":40},[34,6552,6553,6555,6557],{"class":36,"line":178},[34,6554,162],{"class":40},[34,6556,378],{"class":44},[34,6558,52],{"class":40},[19,6560,6562],{"id":6561},"_4-добавьте-контейнер","4. Добавьте контейнер",[15,6564,6565,6566,6568],{},"Разместите ",[31,6567,1758],{}," там, где должен отображаться виджет:",[24,6570,6571],{"className":26,"code":1762,"language":28,"meta":29,"style":29},[31,6572,6573],{"__ignoreMap":29},[34,6574,6575,6577,6579,6581,6583,6585,6587,6589,6591,6593],{"class":36,"line":37},[34,6576,58],{"class":40},[34,6578,248],{"class":44},[34,6580,251],{"class":48},[34,6582,66],{"class":40},[34,6584,69],{"class":40},[34,6586,258],{"class":72},[34,6588,69],{"class":40},[34,6590,275],{"class":40},[34,6592,248],{"class":44},[34,6594,52],{"class":40},[19,6596,6598],{"id":6597},"_5-запустите-виджет","5. Запустите виджет",[15,6600,6601,6602,6604],{},"Вызовите метод ",[31,6603,610],{}," при нажатии пользователем кнопки:",[24,6606,6607],{"className":863,"code":1799,"language":865,"meta":29,"style":29},[31,6608,6609,6629,6643,6657,6665,6669,6683,6697,6701,6707],{"__ignoreMap":29},[34,6610,6611,6613,6615,6617,6619,6621,6623,6625,6627],{"class":36,"line":37},[34,6612,452],{"class":158},[34,6614,420],{"class":40},[34,6616,457],{"class":302},[34,6618,489],{"class":158},[34,6620,518],{"class":40},[34,6622,610],{"class":72},[34,6624,518],{"class":40},[34,6626,526],{"class":40},[34,6628,443],{"class":40},[34,6630,6631,6633,6635,6637,6639,6641],{"class":36,"line":55},[34,6632,1069],{"class":44},[34,6634,537],{"class":40},[34,6636,540],{"class":40},[34,6638,258],{"class":72},[34,6640,518],{"class":40},[34,6642,633],{"class":40},[34,6644,6645,6647,6649,6651,6653,6655],{"class":36,"line":80},[34,6646,1084],{"class":44},[34,6648,537],{"class":40},[34,6650,540],{"class":40},[34,6652,646],{"class":72},[34,6654,518],{"class":40},[34,6656,633],{"class":40},[34,6658,6659,6661,6663],{"class":36,"line":90},[34,6660,1099],{"class":44},[34,6662,537],{"class":40},[34,6664,661],{"class":158},[34,6666,6667],{"class":36,"line":114},[34,6668,1108],{"class":40},[34,6670,6671,6673,6675,6677,6679,6681],{"class":36,"line":147},[34,6672,1113],{"class":44},[34,6674,537],{"class":40},[34,6676,540],{"class":40},[34,6678,1872],{"class":72},[34,6680,518],{"class":40},[34,6682,633],{"class":40},[34,6684,6685,6687,6689,6691,6693,6695],{"class":36,"line":169},[34,6686,1129],{"class":44},[34,6688,537],{"class":40},[34,6690,540],{"class":40},[34,6692,1887],{"class":72},[34,6694,518],{"class":40},[34,6696,633],{"class":40},[34,6698,6699],{"class":36,"line":178},[34,6700,1145],{"class":40},[34,6702,6703,6705],{"class":36,"line":188},[34,6704,1150],{"class":158},[34,6706,633],{"class":40},[34,6708,6709,6711,6713],{"class":36,"line":195},[34,6710,908],{"class":40},[34,6712,495],{"class":158},[34,6714,498],{"class":40},[19,6716,6718],{"id":6717},"результат","Результат",[15,6720,6721],{},"Теперь ваши покупатели могут загрузить фотографию и мгновенно увидеть, как на них сидит одежда.",[19,6723,6725],{"id":6724},"дальнейшие-шаги","Дальнейшие шаги",[763,6727,6728,6734],{},[766,6729,6730,6731,420],{},"Ознакомьтесь с руководствами для конкретных фреймворков в разделе ",[1532,6732,6733],{"href":796},"Интеграции",[766,6735,6736,6737,420],{},"Изучите полный ",[1532,6738,803],{"href":1173},[785,6740,6741],{},"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":29,"searchDepth":55,"depth":55,"links":6743},[6744,6745,6746,6747,6748,6749,6750],{"id":6352,"depth":55,"text":6353},{"id":6363,"depth":55,"text":6364},{"id":6417,"depth":55,"text":6418},{"id":6561,"depth":55,"text":6562},{"id":6597,"depth":55,"text":6598},{"id":6717,"depth":55,"text":6718},{"id":6724,"depth":55,"text":6725},"Запустите Fitting Widget за считанные минуты",{},{"title":6341,"description":6751},"getting-started\u002Fquick-start","4USnYxFPZA1hrOvVApcSHMt9oQc0aZ6Ct8ohgcj8WJ8",{"id":6757,"title":6758,"body":6759,"description":6837,"extension":793,"icon":2038,"meta":6838,"navigation":191,"path":6839,"seo":6840,"stem":6841,"__hash__":6842},"content\u002Findex.md","Введение",{"type":7,"value":6760,"toc":6832},[6761,6765,6770,6774,6803,6807,6824,6826],[10,6762,6764],{"id":6763},"fitting-widget-виртуальная-примерка","Fitting Widget — Виртуальная примерка",[15,6766,6767,6769],{},[1966,6768,1968],{}," — это готовое решение для виртуальной примерки одежды в интернет-магазинах. Он позволяет вашим покупателям загрузить фотографию и мгновенно увидеть, как на них выглядит любой предмет одежды — прямо на странице товара.",[19,6771,6773],{"id":6772},"ключевые-возможности","Ключевые возможности",[763,6775,6776,6785,6791,6797],{},[766,6777,6778,6781,6782,6784],{},[1966,6779,6780],{},"Быстрая интеграция"," — Один тег ",[31,6783,1548],{}," и несколько строк кода.",[766,6786,6787,6790],{},[1966,6788,6789],{},"Не зависит от фреймворков"," — Работает с Vanilla JS, React, Vue, Next.js, Nuxt и другими.",[766,6792,6793,6796],{},[1966,6794,6795],{},"Настраиваемый"," — Стилизуйте виджет под ваш бренд.",[766,6798,6799,6802],{},[1966,6800,6801],{},"Лёгкий"," — Оптимизированная загрузка, которая не замедляет магазин.",[19,6804,6806],{"id":6805},"как-это-работает","Как это работает",[2005,6808,6809,6812,6815,6821],{},[766,6810,6811],{},"Загрузите скрипт виджета на страницу.",[766,6813,6814],{},"Инициализируйте его с вашим API-ключом.",[766,6816,6817,6818,6820],{},"Вызовите ",[31,6819,2018],{}," с URL-адресами изображений товаров.",[766,6822,6823],{},"Виджет отображается внутри выбранного вами контейнера.",[19,6825,6341],{"id":6346},[15,6827,6828,6829,6831],{},"Перейдите к руководству ",[1532,6830,6341],{"href":2030},", чтобы начать работу менее чем за 5 минут.",{"title":29,"searchDepth":55,"depth":55,"links":6833},[6834,6835,6836],{"id":6772,"depth":55,"text":6773},{"id":6805,"depth":55,"text":6806},{"id":6346,"depth":55,"text":6341},"Что такое Fitting Widget и зачем его использовать?",{},"\u002F",{"title":6758,"description":6837},"index","kGT91Bb-Wx88tMoHoRu65KMhDKtcehaBgnLzJYfeCWE",{"id":6844,"title":2046,"body":6845,"description":7719,"extension":793,"icon":3056,"meta":7720,"navigation":191,"path":7721,"seo":7722,"stem":7723,"__hash__":7724},"content\u002Fintegrations\u002Fnextjs.md",{"type":7,"value":6846,"toc":7710},[6847,6851,6859,6863,6871,6880,7116,7120,7447,7451,7687,7691,7696,7708],[10,6848,6850],{"id":6849},"интеграция-с-nextjs","Интеграция с Next.js",[15,6852,6853,6854,6856,6857,420],{},"Fitting Widget работает как с ",[1966,6855,2058],{},", так и с ",[1966,6858,2062],{},[19,6860,6862],{"id":6861},"app-router-рекомендуется","App Router (рекомендуется)",[15,6864,6865,6866,6868,6869,420],{},"Используйте компонент Next.js ",[31,6867,2072],{}," с ",[31,6870,2076],{},[993,6872,6874,6875,6877,6878],{"id":6873},"шаг-1-загрузка-скриптов-в-layouttsx-или-pagetsx","Шаг 1 — Загрузка скриптов в ",[31,6876,2083],{}," или ",[31,6879,2087],{},[24,6881,6882],{"className":2090,"code":2091,"language":2092,"meta":29,"style":29},[31,6883,6884,6900,6904,6936,6942,6946,6954,6958,6964,6976,6988,7000,7004,7008,7014,7026,7038,7042,7048,7052,7056,7060,7064,7084,7088,7094,7102,7106,7112],{"__ignoreMap":29},[34,6885,6886,6888,6890,6892,6894,6896,6898],{"class":36,"line":37},[34,6887,2100],{"class":2099},[34,6889,2103],{"class":158},[34,6891,2106],{"class":2099},[34,6893,540],{"class":40},[34,6895,2111],{"class":72},[34,6897,518],{"class":40},[34,6899,498],{"class":40},[34,6901,6902],{"class":36,"line":55},[34,6903,192],{"emptyLinePlaceholder":191},[34,6905,6906,6908,6910,6912,6914,6916,6918,6920,6922,6924,6926,6928,6930,6932,6934],{"class":36,"line":80},[34,6907,2124],{"class":2099},[34,6909,2127],{"class":2099},[34,6911,438],{"class":48},[34,6913,2132],{"class":302},[34,6915,2135],{"class":40},[34,6917,2139],{"class":2138},[34,6919,2142],{"class":40},[34,6921,2145],{"class":40},[34,6923,2139],{"class":44},[34,6925,537],{"class":40},[34,6927,2153],{"class":2152},[34,6929,420],{"class":40},[34,6931,2158],{"class":2152},[34,6933,2161],{"class":40},[34,6935,443],{"class":40},[34,6937,6938,6940],{"class":36,"line":90},[34,6939,2168],{"class":2099},[34,6941,2171],{"class":44},[34,6943,6944],{"class":36,"line":114},[34,6945,2176],{"class":40},[34,6947,6948,6950,6952],{"class":36,"line":147},[34,6949,2181],{"class":40},[34,6951,2184],{"class":158},[34,6953,2187],{"class":40},[34,6955,6956],{"class":36,"line":169},[34,6957,192],{"emptyLinePlaceholder":191},[34,6959,6960,6962],{"class":36,"line":178},[34,6961,2196],{"class":40},[34,6963,2199],{"class":2152},[34,6965,6966,6968,6970,6972,6974],{"class":36,"line":188},[34,6967,2204],{"class":48},[34,6969,66],{"class":40},[34,6971,69],{"class":40},[34,6973,351],{"class":72},[34,6975,354],{"class":40},[34,6977,6978,6980,6982,6984,6986],{"class":36,"line":195},[34,6979,2217],{"class":48},[34,6981,66],{"class":40},[34,6983,69],{"class":40},[34,6985,2224],{"class":72},[34,6987,354],{"class":40},[34,6989,6990,6992,6994,6996,6998],{"class":36,"line":213},[34,6991,2231],{"class":48},[34,6993,66],{"class":40},[34,6995,69],{"class":40},[34,6997,367],{"class":72},[34,6999,354],{"class":40},[34,7001,7002],{"class":36,"line":231},[34,7003,2244],{"class":40},[34,7005,7006],{"class":36,"line":236},[34,7007,192],{"emptyLinePlaceholder":191},[34,7009,7010,7012],{"class":36,"line":243},[34,7011,2196],{"class":40},[34,7013,2199],{"class":2152},[34,7015,7016,7018,7020,7022,7024],{"class":36,"line":282},[34,7017,2217],{"class":48},[34,7019,66],{"class":40},[34,7021,69],{"class":40},[34,7023,2224],{"class":72},[34,7025,354],{"class":40},[34,7027,7028,7030,7032,7034,7036],{"class":36,"line":287},[34,7029,2231],{"class":48},[34,7031,66],{"class":40},[34,7033,69],{"class":40},[34,7035,407],{"class":72},[34,7037,354],{"class":40},[34,7039,7040],{"class":36,"line":322},[34,7041,2283],{"class":40},[34,7043,7044,7046],{"class":36,"line":327},[34,7045,2288],{"class":40},[34,7047,2291],{"class":40},[34,7049,7050],{"class":36,"line":333},[34,7051,2296],{"class":72},[34,7053,7054],{"class":36,"line":341},[34,7055,2301],{"class":72},[34,7057,7058],{"class":36,"line":357},[34,7059,2306],{"class":72},[34,7061,7062],{"class":36,"line":372},[34,7063,2311],{"class":72},[34,7065,7066,7068,7070,7072,7074,7076,7078,7080,7082],{"class":36,"line":383},[34,7067,2316],{"class":72},[34,7069,2319],{"class":40},[34,7071,2322],{"class":158},[34,7073,420],{"class":40},[34,7075,2327],{"class":158},[34,7077,420],{"class":40},[34,7079,2332],{"class":158},[34,7081,908],{"class":40},[34,7083,546],{"class":72},[34,7085,7086],{"class":36,"line":388},[34,7087,2341],{"class":72},[34,7089,7090,7092],{"class":36,"line":394},[34,7091,2346],{"class":40},[34,7093,2187],{"class":40},[34,7095,7096,7098,7100],{"class":36,"line":414},[34,7097,2353],{"class":40},[34,7099,2072],{"class":2152},[34,7101,52],{"class":40},[34,7103,7104],{"class":36,"line":446},[34,7105,2362],{"class":40},[34,7107,7108,7110],{"class":36,"line":501},[34,7109,2367],{"class":44},[34,7111,498],{"class":40},[34,7113,7114],{"class":36,"line":507},[34,7115,2187],{"class":40},[993,7117,7119],{"id":7118},"шаг-2-создание-кнопки-виджета","Шаг 2 — Создание кнопки виджета",[24,7121,7123],{"className":2090,"code":7122,"language":2092,"meta":29,"style":29},"'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",[31,7124,7125,7135,7139,7147,7157,7167,7171,7175,7183,7191,7221,7225,7229,7233,7261,7275,7295,7309,7323,7333,7341,7345,7349,7355,7359,7411,7433,7437,7443],{"__ignoreMap":29},[34,7126,7127,7129,7131,7133],{"class":36,"line":37},[34,7128,518],{"class":40},[34,7130,2389],{"class":72},[34,7132,518],{"class":40},[34,7134,498],{"class":40},[34,7136,7137],{"class":36,"line":55},[34,7138,192],{"emptyLinePlaceholder":191},[34,7140,7141,7143,7145],{"class":36,"line":80},[34,7142,2402],{"class":48},[34,7144,2405],{"class":2152},[34,7146,443],{"class":40},[34,7148,7149,7151,7153,7155],{"class":36,"line":90},[34,7150,2412],{"class":44},[34,7152,537],{"class":40},[34,7154,2417],{"class":2152},[34,7156,498],{"class":40},[34,7158,7159,7161,7163,7165],{"class":36,"line":114},[34,7160,2424],{"class":44},[34,7162,537],{"class":40},[34,7164,2417],{"class":2152},[34,7166,498],{"class":40},[34,7168,7169],{"class":36,"line":147},[34,7170,2187],{"class":40},[34,7172,7173],{"class":36,"line":169},[34,7174,192],{"emptyLinePlaceholder":191},[34,7176,7177,7179,7181],{"class":36,"line":178},[34,7178,2443],{"class":48},[34,7180,2446],{"class":158},[34,7182,2449],{"class":40},[34,7184,7185,7187,7189],{"class":36,"line":188},[34,7186,2454],{"class":48},[34,7188,2457],{"class":2152},[34,7190,443],{"class":40},[34,7192,7193,7195,7197,7199,7201,7203,7205,7207,7209,7211,7213,7215,7217,7219],{"class":36,"line":195},[34,7194,2464],{"class":44},[34,7196,537],{"class":40},[34,7198,2469],{"class":40},[34,7200,2472],{"class":2138},[34,7202,537],{"class":40},[34,7204,2417],{"class":2152},[34,7206,526],{"class":40},[34,7208,2481],{"class":2138},[34,7210,2484],{"class":40},[34,7212,2487],{"class":2152},[34,7214,495],{"class":40},[34,7216,2492],{"class":48},[34,7218,2495],{"class":2152},[34,7220,498],{"class":40},[34,7222,7223],{"class":36,"line":213},[34,7224,2502],{"class":40},[34,7226,7227],{"class":36,"line":231},[34,7228,2187],{"class":40},[34,7230,7231],{"class":36,"line":236},[34,7232,192],{"emptyLinePlaceholder":191},[34,7234,7235,7237,7239,7241,7243,7245,7247,7249,7251,7253,7255,7257,7259],{"class":36,"line":243},[34,7236,2124],{"class":2099},[34,7238,438],{"class":48},[34,7240,2519],{"class":302},[34,7242,2135],{"class":40},[34,7244,2524],{"class":2138},[34,7246,2142],{"class":40},[34,7248,2145],{"class":40},[34,7250,2524],{"class":44},[34,7252,537],{"class":40},[34,7254,2405],{"class":2152},[34,7256,2537],{"class":158},[34,7258,2540],{"class":40},[34,7260,443],{"class":40},[34,7262,7263,7265,7267,7269,7271,7273],{"class":36,"line":282},[34,7264,2547],{"class":48},[34,7266,2550],{"class":158},[34,7268,465],{"class":40},[34,7270,2555],{"class":40},[34,7272,2492],{"class":48},[34,7274,443],{"class":40},[34,7276,7277,7279,7281,7283,7285,7287,7289,7291,7293],{"class":36,"line":287},[34,7278,417],{"class":158},[34,7280,420],{"class":40},[34,7282,457],{"class":302},[34,7284,489],{"class":44},[34,7286,518],{"class":40},[34,7288,610],{"class":72},[34,7290,518],{"class":40},[34,7292,526],{"class":40},[34,7294,443],{"class":40},[34,7296,7297,7299,7301,7303,7305,7307],{"class":36,"line":322},[34,7298,2584],{"class":44},[34,7300,537],{"class":40},[34,7302,540],{"class":40},[34,7304,258],{"class":72},[34,7306,518],{"class":40},[34,7308,633],{"class":40},[34,7310,7311,7313,7315,7317,7319,7321],{"class":36,"line":327},[34,7312,2599],{"class":44},[34,7314,537],{"class":40},[34,7316,540],{"class":40},[34,7318,646],{"class":72},[34,7320,518],{"class":40},[34,7322,633],{"class":40},[34,7324,7325,7327,7329,7331],{"class":36,"line":333},[34,7326,2614],{"class":44},[34,7328,537],{"class":40},[34,7330,2524],{"class":158},[34,7332,633],{"class":40},[34,7334,7335,7337,7339],{"class":36,"line":341},[34,7336,552],{"class":40},[34,7338,495],{"class":44},[34,7340,498],{"class":40},[34,7342,7343],{"class":36,"line":357},[34,7344,1698],{"class":40},[34,7346,7347],{"class":36,"line":372},[34,7348,192],{"emptyLinePlaceholder":191},[34,7350,7351,7353],{"class":36,"line":383},[34,7352,2168],{"class":2099},[34,7354,2171],{"class":44},[34,7356,7357],{"class":36,"line":388},[34,7358,2176],{"class":40},[34,7360,7361,7363,7365,7367,7369,7371,7373,7375,7377,7379,7381,7383,7385,7387,7389,7391,7393,7395,7397,7399,7401,7403,7405,7407,7409],{"class":36,"line":394},[34,7362,2196],{"class":40},[34,7364,248],{"class":44},[34,7366,251],{"class":48},[34,7368,66],{"class":40},[34,7370,69],{"class":40},[34,7372,258],{"class":72},[34,7374,69],{"class":40},[34,7376,263],{"class":48},[34,7378,2667],{"class":40},[34,7380,2670],{"class":44},[34,7382,537],{"class":40},[34,7384,540],{"class":40},[34,7386,2677],{"class":72},[34,7388,518],{"class":40},[34,7390,526],{"class":40},[34,7392,2684],{"class":44},[34,7394,537],{"class":40},[34,7396,2690],{"class":2689},[34,7398,526],{"class":40},[34,7400,2695],{"class":44},[34,7402,537],{"class":40},[34,7404,540],{"class":40},[34,7406,2702],{"class":72},[34,7408,518],{"class":40},[34,7410,2707],{"class":40},[34,7412,7413,7415,7417,7419,7421,7423,7425,7427,7429,7431],{"class":36,"line":414},[34,7414,2196],{"class":40},[34,7416,292],{"class":44},[34,7418,2716],{"class":48},[34,7420,2719],{"class":40},[34,7422,2722],{"class":158},[34,7424,2725],{"class":40},[34,7426,313],{"class":158},[34,7428,162],{"class":40},[34,7430,292],{"class":44},[34,7432,52],{"class":40},[34,7434,7435],{"class":36,"line":446},[34,7436,2362],{"class":40},[34,7438,7439,7441],{"class":36,"line":501},[34,7440,2367],{"class":44},[34,7442,498],{"class":40},[34,7444,7445],{"class":36,"line":507},[34,7446,2187],{"class":40},[993,7448,7450],{"id":7449},"шаг-3-использование-на-странице-товара","Шаг 3 — Использование на странице товара",[24,7452,7453],{"className":2090,"code":2755,"language":2092,"meta":29,"style":29},[31,7454,7455,7475,7479,7517,7541,7545,7551,7559,7579,7609,7615,7623,7627,7641,7655,7659,7665,7669,7677,7683],{"__ignoreMap":29},[34,7456,7457,7459,7461,7463,7465,7467,7469,7471,7473],{"class":36,"line":37},[34,7458,2100],{"class":2099},[34,7460,2145],{"class":40},[34,7462,2519],{"class":158},[34,7464,2768],{"class":40},[34,7466,2771],{"class":2099},[34,7468,540],{"class":40},[34,7470,2776],{"class":72},[34,7472,518],{"class":40},[34,7474,498],{"class":40},[34,7476,7477],{"class":36,"line":55},[34,7478,192],{"emptyLinePlaceholder":191},[34,7480,7481,7483,7485,7487,7489,7491,7493,7495,7497,7499,7501,7503,7505,7507,7509,7511,7513,7515],{"class":36,"line":80},[34,7482,2124],{"class":2099},[34,7484,2127],{"class":2099},[34,7486,2793],{"class":48},[34,7488,438],{"class":48},[34,7490,2798],{"class":302},[34,7492,2135],{"class":40},[34,7494,2803],{"class":2138},[34,7496,2142],{"class":40},[34,7498,2145],{"class":40},[34,7500,2803],{"class":44},[34,7502,537],{"class":40},[34,7504,2145],{"class":40},[34,7506,2816],{"class":44},[34,7508,537],{"class":40},[34,7510,2417],{"class":2152},[34,7512,2768],{"class":40},[34,7514,2161],{"class":40},[34,7516,443],{"class":40},[34,7518,7519,7521,7523,7525,7527,7529,7531,7533,7535,7537,7539],{"class":36,"line":90},[34,7520,2547],{"class":48},[34,7522,2833],{"class":158},[34,7524,465],{"class":40},[34,7526,2838],{"class":2099},[34,7528,2841],{"class":302},[34,7530,489],{"class":44},[34,7532,2846],{"class":158},[34,7534,420],{"class":40},[34,7536,2851],{"class":158},[34,7538,495],{"class":44},[34,7540,498],{"class":40},[34,7542,7543],{"class":36,"line":114},[34,7544,192],{"emptyLinePlaceholder":191},[34,7546,7547,7549],{"class":36,"line":147},[34,7548,2168],{"class":2099},[34,7550,2171],{"class":44},[34,7552,7553,7555,7557],{"class":36,"line":169},[34,7554,2870],{"class":40},[34,7556,248],{"class":44},[34,7558,52],{"class":40},[34,7560,7561,7563,7565,7567,7569,7571,7573,7575,7577],{"class":36,"line":178},[34,7562,2196],{"class":40},[34,7564,10],{"class":44},[34,7566,2883],{"class":40},[34,7568,2886],{"class":158},[34,7570,420],{"class":40},[34,7572,2891],{"class":158},[34,7574,2894],{"class":40},[34,7576,10],{"class":44},[34,7578,52],{"class":40},[34,7580,7581,7583,7585,7587,7589,7591,7593,7595,7597,7599,7601,7603,7605,7607],{"class":36,"line":188},[34,7582,2196],{"class":40},[34,7584,2905],{"class":44},[34,7586,2908],{"class":48},[34,7588,2719],{"class":40},[34,7590,2886],{"class":158},[34,7592,420],{"class":40},[34,7594,2917],{"class":158},[34,7596,2920],{"class":40},[34,7598,2923],{"class":48},[34,7600,2719],{"class":40},[34,7602,2886],{"class":158},[34,7604,420],{"class":40},[34,7606,2891],{"class":158},[34,7608,2934],{"class":40},[34,7610,7611,7613],{"class":36,"line":195},[34,7612,2196],{"class":40},[34,7614,2941],{"class":2152},[34,7616,7617,7619,7621],{"class":36,"line":213},[34,7618,2946],{"class":48},[34,7620,2719],{"class":40},[34,7622,2951],{"class":158},[34,7624,7625],{"class":36,"line":231},[34,7626,667],{"class":40},[34,7628,7629,7631,7633,7635,7637,7639],{"class":36,"line":236},[34,7630,673],{"class":44},[34,7632,537],{"class":40},[34,7634,2833],{"class":158},[34,7636,420],{"class":40},[34,7638,2891],{"class":158},[34,7640,633],{"class":40},[34,7642,7643,7645,7647,7649,7651,7653],{"class":36,"line":243},[34,7644,689],{"class":44},[34,7646,537],{"class":40},[34,7648,2833],{"class":158},[34,7650,420],{"class":40},[34,7652,2917],{"class":158},[34,7654,633],{"class":40},[34,7656,7657],{"class":36,"line":282},[34,7658,706],{"class":40},[34,7660,7661,7663],{"class":36,"line":287},[34,7662,712],{"class":158},[34,7664,2187],{"class":40},[34,7666,7667],{"class":36,"line":322},[34,7668,2244],{"class":40},[34,7670,7671,7673,7675],{"class":36,"line":327},[34,7672,3002],{"class":40},[34,7674,248],{"class":44},[34,7676,52],{"class":40},[34,7678,7679,7681],{"class":36,"line":333},[34,7680,2367],{"class":44},[34,7682,498],{"class":40},[34,7684,7685],{"class":36,"line":341},[34,7686,2187],{"class":40},[19,7688,7690],{"id":7689},"переменная-окружения","Переменная окружения",[15,7692,7693,7694,537],{},"Добавьте ваш API-ключ в ",[31,7695,3026],{},[24,7697,7698],{"className":3029,"code":3030,"language":3031,"meta":29,"style":29},[31,7699,7700],{"__ignoreMap":29},[34,7701,7702,7704,7706],{"class":36,"line":37},[34,7703,2332],{"class":158},[34,7705,66],{"class":40},[34,7707,3042],{"class":72},[785,7709,3045],{},{"title":29,"searchDepth":55,"depth":55,"links":7711},[7712,7718],{"id":6861,"depth":55,"text":6862,"children":7713},[7714,7716,7717],{"id":6873,"depth":80,"text":7715},"Шаг 1 — Загрузка скриптов в layout.tsx или page.tsx",{"id":7118,"depth":80,"text":7119},{"id":7449,"depth":80,"text":7450},{"id":7689,"depth":55,"text":7690},"Интеграция с Next.js (Pages Router и App Router)",{},"\u002Fintegrations\u002Fnextjs",{"title":2046,"description":7719},"integrations\u002Fnextjs","KS6JTPT1XrolEU5h4YdImeGYebYne3YB0eM4G4u-UlY",{"id":7726,"title":3064,"body":7727,"description":8540,"extension":793,"icon":3956,"meta":8541,"navigation":191,"path":8542,"seo":8543,"stem":8544,"__hash__":8545},"content\u002Fintegrations\u002Fnuxt.md",{"type":7,"value":7728,"toc":8530},[7729,7733,7736,7740,7748,7754,8036,8042,8218,8222,8509,8511,8516,8528],[10,7730,7732],{"id":7731},"интеграция-с-nuxt","Интеграция с Nuxt",[15,7734,7735],{},"Fitting Widget легко интегрируется с Nuxt 3 и Nuxt 4.",[19,7737,7739],{"id":7738},"_1-загрузка-скрипта","1. Загрузка скрипта",[15,7741,7742,7743,7745,7746,420],{},"Используйте composable ",[31,7744,3083],{}," или добавьте скрипты в ",[31,7747,3087],{},[993,7749,7751,7752],{"id":7750},"вариант-а-на-страницу-через-usehead","Вариант А — На страницу через ",[31,7753,3083],{},[24,7755,7756],{"className":3096,"code":3097,"language":3098,"meta":29,"style":29},[31,7757,7758,7762,7770,7778,7794,7822,7830,7838,7842,7862,7880,7884,7892,7900,7904,7918,7932,7936,7940,7954,7962,7966,7970,7974,7978,8002,8006,8012,8016,8022,8028],{"__ignoreMap":29},[34,7759,7760],{"class":36,"line":37},[34,7761,3105],{"class":239},[34,7763,7764,7766,7768],{"class":36,"line":55},[34,7765,58],{"class":40},[34,7767,3112],{"class":44},[34,7769,52],{"class":40},[34,7771,7772,7774,7776],{"class":36,"line":80},[34,7773,93],{"class":40},[34,7775,248],{"class":44},[34,7777,52],{"class":40},[34,7779,7780,7782,7784,7786,7788,7790,7792],{"class":36,"line":90},[34,7781,2870],{"class":40},[34,7783,10],{"class":44},[34,7785,155],{"class":40},[34,7787,3133],{"class":158},[34,7789,162],{"class":40},[34,7791,10],{"class":44},[34,7793,52],{"class":40},[34,7795,7796,7798,7800,7802,7804,7806,7808,7810,7812,7814,7816,7818,7820],{"class":36,"line":114},[34,7797,2870],{"class":40},[34,7799,3146],{"class":44},[34,7801,3149],{"class":48},[34,7803,66],{"class":40},[34,7805,69],{"class":40},[34,7807,3156],{"class":72},[34,7809,69],{"class":40},[34,7811,3161],{"class":48},[34,7813,66],{"class":40},[34,7815,69],{"class":40},[34,7817,3168],{"class":72},[34,7819,69],{"class":40},[34,7821,111],{"class":40},[34,7823,7824,7826,7828],{"class":36,"line":147},[34,7825,562],{"class":40},[34,7827,248],{"class":44},[34,7829,52],{"class":40},[34,7831,7832,7834,7836],{"class":36,"line":169},[34,7833,162],{"class":40},[34,7835,3112],{"class":44},[34,7837,52],{"class":40},[34,7839,7840],{"class":36,"line":178},[34,7841,192],{"emptyLinePlaceholder":191},[34,7843,7844,7846,7848,7850,7852,7854,7856,7858,7860],{"class":36,"line":188},[34,7845,58],{"class":40},[34,7847,378],{"class":44},[34,7849,3201],{"class":48},[34,7851,63],{"class":48},[34,7853,66],{"class":40},[34,7855,69],{"class":40},[34,7857,3210],{"class":72},[34,7859,69],{"class":40},[34,7861,52],{"class":40},[34,7863,7864,7866,7868,7870,7872,7874,7876,7878],{"class":36,"line":195},[34,7865,2100],{"class":2099},[34,7867,2145],{"class":40},[34,7869,3223],{"class":158},[34,7871,2768],{"class":40},[34,7873,2771],{"class":2099},[34,7875,540],{"class":40},[34,7877,3232],{"class":72},[34,7879,546],{"class":40},[34,7881,7882],{"class":36,"line":213},[34,7883,192],{"emptyLinePlaceholder":191},[34,7885,7886,7888,7890],{"class":36,"line":231},[34,7887,3083],{"class":302},[34,7889,489],{"class":158},[34,7891,2449],{"class":40},[34,7893,7894,7896,7898],{"class":36,"line":236},[34,7895,3251],{"class":44},[34,7897,537],{"class":40},[34,7899,661],{"class":158},[34,7901,7902],{"class":36,"line":243},[34,7903,1108],{"class":40},[34,7905,7906,7908,7910,7912,7914,7916],{"class":36,"line":282},[34,7907,3264],{"class":44},[34,7909,537],{"class":40},[34,7911,540],{"class":40},[34,7913,351],{"class":72},[34,7915,518],{"class":40},[34,7917,633],{"class":40},[34,7919,7920,7922,7924,7926,7928,7930],{"class":36,"line":287},[34,7921,3279],{"class":44},[34,7923,537],{"class":40},[34,7925,540],{"class":40},[34,7927,367],{"class":72},[34,7929,518],{"class":40},[34,7931,633],{"class":40},[34,7933,7934],{"class":36,"line":322},[34,7935,1145],{"class":40},[34,7937,7938],{"class":36,"line":327},[34,7939,1108],{"class":40},[34,7941,7942,7944,7946,7948,7950,7952],{"class":36,"line":333},[34,7943,3279],{"class":44},[34,7945,537],{"class":40},[34,7947,540],{"class":40},[34,7949,407],{"class":72},[34,7951,518],{"class":40},[34,7953,633],{"class":40},[34,7955,7956,7958,7960],{"class":36,"line":341},[34,7957,3316],{"class":44},[34,7959,537],{"class":40},[34,7961,3321],{"class":40},[34,7963,7964],{"class":36,"line":357},[34,7965,3326],{"class":72},[34,7967,7968],{"class":36,"line":372},[34,7969,3331],{"class":72},[34,7971,7972],{"class":36,"line":383},[34,7973,3336],{"class":72},[34,7975,7976],{"class":36,"line":388},[34,7977,3341],{"class":72},[34,7979,7980,7982,7984,7986,7988,7990,7992,7994,7996,7998,8000],{"class":36,"line":394},[34,7981,3346],{"class":72},[34,7983,2319],{"class":40},[34,7985,2100],{"class":2099},[34,7987,420],{"class":40},[34,7989,96],{"class":158},[34,7991,420],{"class":40},[34,7993,2327],{"class":158},[34,7995,420],{"class":40},[34,7997,3363],{"class":158},[34,7999,908],{"class":40},[34,8001,546],{"class":72},[34,8003,8004],{"class":36,"line":414},[34,8005,3372],{"class":72},[34,8007,8008,8010],{"class":36,"line":446},[34,8009,3377],{"class":40},[34,8011,633],{"class":40},[34,8013,8014],{"class":36,"line":501},[34,8015,1145],{"class":40},[34,8017,8018,8020],{"class":36,"line":507},[34,8019,1150],{"class":158},[34,8021,633],{"class":40},[34,8023,8024,8026],{"class":36,"line":531},[34,8025,908],{"class":40},[34,8027,3396],{"class":158},[34,8029,8030,8032,8034],{"class":36,"line":549},[34,8031,162],{"class":40},[34,8033,378],{"class":44},[34,8035,52],{"class":40},[993,8037,8039,8040],{"id":8038},"вариант-б-глобально-в-nuxtconfigts","Вариант Б — Глобально в ",[31,8041,3087],{},[24,8043,8044],{"className":3413,"code":3414,"language":3210,"meta":29,"style":29},[31,8045,8046,8058,8066,8074,8082,8086,8100,8114,8118,8122,8136,8144,8148,8152,8156,8160,8184,8188,8194,8198,8204,8208,8212],{"__ignoreMap":29},[34,8047,8048,8050,8052,8054,8056],{"class":36,"line":37},[34,8049,2124],{"class":2099},[34,8051,2127],{"class":2099},[34,8053,3425],{"class":302},[34,8055,489],{"class":158},[34,8057,2449],{"class":40},[34,8059,8060,8062,8064],{"class":36,"line":55},[34,8061,3434],{"class":44},[34,8063,537],{"class":40},[34,8065,443],{"class":40},[34,8067,8068,8070,8072],{"class":36,"line":80},[34,8069,3443],{"class":44},[34,8071,537],{"class":40},[34,8073,443],{"class":40},[34,8075,8076,8078,8080],{"class":36,"line":90},[34,8077,3452],{"class":44},[34,8079,537],{"class":40},[34,8081,661],{"class":158},[34,8083,8084],{"class":36,"line":114},[34,8085,3461],{"class":40},[34,8087,8088,8090,8092,8094,8096,8098],{"class":36,"line":147},[34,8089,3466],{"class":44},[34,8091,537],{"class":40},[34,8093,540],{"class":40},[34,8095,351],{"class":72},[34,8097,518],{"class":40},[34,8099,633],{"class":40},[34,8101,8102,8104,8106,8108,8110,8112],{"class":36,"line":169},[34,8103,3481],{"class":44},[34,8105,537],{"class":40},[34,8107,540],{"class":40},[34,8109,367],{"class":72},[34,8111,518],{"class":40},[34,8113,633],{"class":40},[34,8115,8116],{"class":36,"line":178},[34,8117,3496],{"class":40},[34,8119,8120],{"class":36,"line":188},[34,8121,3461],{"class":40},[34,8123,8124,8126,8128,8130,8132,8134],{"class":36,"line":195},[34,8125,3481],{"class":44},[34,8127,537],{"class":40},[34,8129,540],{"class":40},[34,8131,407],{"class":72},[34,8133,518],{"class":40},[34,8135,633],{"class":40},[34,8137,8138,8140,8142],{"class":36,"line":213},[34,8139,3519],{"class":44},[34,8141,537],{"class":40},[34,8143,3321],{"class":40},[34,8145,8146],{"class":36,"line":231},[34,8147,3528],{"class":72},[34,8149,8150],{"class":36,"line":236},[34,8151,3533],{"class":72},[34,8153,8154],{"class":36,"line":243},[34,8155,3538],{"class":72},[34,8157,8158],{"class":36,"line":282},[34,8159,3543],{"class":72},[34,8161,8162,8164,8166,8168,8170,8172,8174,8176,8178,8180,8182],{"class":36,"line":287},[34,8163,3548],{"class":72},[34,8165,2319],{"class":40},[34,8167,2100],{"class":2099},[34,8169,420],{"class":40},[34,8171,96],{"class":158},[34,8173,420],{"class":40},[34,8175,2327],{"class":158},[34,8177,420],{"class":40},[34,8179,3363],{"class":158},[34,8181,908],{"class":40},[34,8183,546],{"class":72},[34,8185,8186],{"class":36,"line":322},[34,8187,3573],{"class":72},[34,8189,8190,8192],{"class":36,"line":327},[34,8191,3578],{"class":40},[34,8193,633],{"class":40},[34,8195,8196],{"class":36,"line":333},[34,8197,3496],{"class":40},[34,8199,8200,8202],{"class":36,"line":341},[34,8201,3589],{"class":158},[34,8203,633],{"class":40},[34,8205,8206],{"class":36,"line":357},[34,8207,1145],{"class":40},[34,8209,8210],{"class":36,"line":372},[34,8211,3600],{"class":40},[34,8213,8214,8216],{"class":36,"line":383},[34,8215,908],{"class":40},[34,8217,3396],{"class":158},[19,8219,8221],{"id":8220},"_2-создание-компонента-обёртки","2. Создание компонента-обёртки",[24,8223,8225],{"className":3096,"code":8224,"language":3098,"meta":29,"style":29},"\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",[31,8226,8227,8231,8239,8247,8275,8301,8309,8317,8321,8341,8353,8361,8369,8375,8379,8393,8413,8427,8441,8449,8453,8467,8481,8485,8491,8497,8501],{"__ignoreMap":29},[34,8228,8229],{"class":36,"line":37},[34,8230,3620],{"class":239},[34,8232,8233,8235,8237],{"class":36,"line":55},[34,8234,58],{"class":40},[34,8236,3112],{"class":44},[34,8238,52],{"class":40},[34,8240,8241,8243,8245],{"class":36,"line":80},[34,8242,93],{"class":40},[34,8244,248],{"class":44},[34,8246,52],{"class":40},[34,8248,8249,8251,8253,8255,8257,8259,8261,8263,8265,8267,8269,8271,8273],{"class":36,"line":90},[34,8250,2870],{"class":40},[34,8252,248],{"class":44},[34,8254,251],{"class":48},[34,8256,66],{"class":40},[34,8258,69],{"class":40},[34,8260,258],{"class":72},[34,8262,69],{"class":40},[34,8264,3655],{"class":48},[34,8266,66],{"class":40},[34,8268,69],{"class":40},[34,8270,3662],{"class":72},[34,8272,69],{"class":40},[34,8274,111],{"class":40},[34,8276,8277,8279,8281,8283,8285,8287,8289,8291,8293,8295,8297,8299],{"class":36,"line":114},[34,8278,2870],{"class":40},[34,8280,292],{"class":44},[34,8282,3675],{"class":48},[34,8284,66],{"class":40},[34,8286,69],{"class":40},[34,8288,3682],{"class":72},[34,8290,69],{"class":40},[34,8292,155],{"class":40},[34,8294,313],{"class":158},[34,8296,162],{"class":40},[34,8298,292],{"class":44},[34,8300,52],{"class":40},[34,8302,8303,8305,8307],{"class":36,"line":147},[34,8304,562],{"class":40},[34,8306,248],{"class":44},[34,8308,52],{"class":40},[34,8310,8311,8313,8315],{"class":36,"line":169},[34,8312,162],{"class":40},[34,8314,3112],{"class":44},[34,8316,52],{"class":40},[34,8318,8319],{"class":36,"line":178},[34,8320,192],{"emptyLinePlaceholder":191},[34,8322,8323,8325,8327,8329,8331,8333,8335,8337,8339],{"class":36,"line":188},[34,8324,58],{"class":40},[34,8326,378],{"class":44},[34,8328,3201],{"class":48},[34,8330,63],{"class":48},[34,8332,66],{"class":40},[34,8334,69],{"class":40},[34,8336,3210],{"class":72},[34,8338,69],{"class":40},[34,8340,52],{"class":40},[34,8342,8343,8345,8347,8349,8351],{"class":36,"line":195},[34,8344,3739],{"class":48},[34,8346,3742],{"class":158},[34,8348,66],{"class":40},[34,8350,3747],{"class":302},[34,8352,3750],{"class":40},[34,8354,8355,8357,8359],{"class":36,"line":213},[34,8356,2412],{"class":44},[34,8358,537],{"class":40},[34,8360,3759],{"class":2152},[34,8362,8363,8365,8367],{"class":36,"line":231},[34,8364,3764],{"class":44},[34,8366,537],{"class":40},[34,8368,3759],{"class":2152},[34,8370,8371,8373],{"class":36,"line":236},[34,8372,2725],{"class":40},[34,8374,3775],{"class":158},[34,8376,8377],{"class":36,"line":243},[34,8378,192],{"emptyLinePlaceholder":191},[34,8380,8381,8383,8385,8387,8389,8391],{"class":36,"line":282},[34,8382,3739],{"class":48},[34,8384,3786],{"class":158},[34,8386,66],{"class":40},[34,8388,2555],{"class":40},[34,8390,2492],{"class":48},[34,8392,443],{"class":40},[34,8394,8395,8397,8399,8401,8403,8405,8407,8409,8411],{"class":36,"line":287},[34,8396,1630],{"class":158},[34,8398,420],{"class":40},[34,8400,457],{"class":302},[34,8402,489],{"class":44},[34,8404,518],{"class":40},[34,8406,610],{"class":72},[34,8408,518],{"class":40},[34,8410,526],{"class":40},[34,8412,443],{"class":40},[34,8414,8415,8417,8419,8421,8423,8425],{"class":36,"line":322},[34,8416,3819],{"class":44},[34,8418,537],{"class":40},[34,8420,540],{"class":40},[34,8422,258],{"class":72},[34,8424,518],{"class":40},[34,8426,633],{"class":40},[34,8428,8429,8431,8433,8435,8437,8439],{"class":36,"line":327},[34,8430,3834],{"class":44},[34,8432,537],{"class":40},[34,8434,540],{"class":40},[34,8436,646],{"class":72},[34,8438,518],{"class":40},[34,8440,633],{"class":40},[34,8442,8443,8445,8447],{"class":36,"line":333},[34,8444,3849],{"class":44},[34,8446,537],{"class":40},[34,8448,661],{"class":44},[34,8450,8451],{"class":36,"line":341},[34,8452,3858],{"class":40},[34,8454,8455,8457,8459,8461,8463,8465],{"class":36,"line":357},[34,8456,3863],{"class":44},[34,8458,537],{"class":40},[34,8460,3868],{"class":158},[34,8462,420],{"class":40},[34,8464,1018],{"class":158},[34,8466,633],{"class":40},[34,8468,8469,8471,8473,8475,8477,8479],{"class":36,"line":372},[34,8470,3879],{"class":44},[34,8472,537],{"class":40},[34,8474,3868],{"class":158},[34,8476,420],{"class":40},[34,8478,3888],{"class":158},[34,8480,633],{"class":40},[34,8482,8483],{"class":36,"line":383},[34,8484,3895],{"class":40},[34,8486,8487,8489],{"class":36,"line":388},[34,8488,3900],{"class":44},[34,8490,633],{"class":40},[34,8492,8493,8495],{"class":36,"line":394},[34,8494,1736],{"class":40},[34,8496,3396],{"class":44},[34,8498,8499],{"class":36,"line":414},[34,8500,2187],{"class":40},[34,8502,8503,8505,8507],{"class":36,"line":446},[34,8504,162],{"class":40},[34,8506,378],{"class":44},[34,8508,52],{"class":40},[19,8510,7690],{"id":7689},[15,8512,8513,8514,537],{},"Добавьте в ",[31,8515,3928],{},[24,8517,8518],{"className":3029,"code":3931,"language":3031,"meta":29,"style":29},[31,8519,8520],{"__ignoreMap":29},[34,8521,8522,8524,8526],{"class":36,"line":37},[34,8523,3363],{"class":158},[34,8525,66],{"class":40},[34,8527,3042],{"class":72},[785,8529,3944],{},{"title":29,"searchDepth":55,"depth":55,"links":8531},[8532,8538,8539],{"id":7738,"depth":55,"text":7739,"children":8533},[8534,8536],{"id":7750,"depth":80,"text":8535},"Вариант А — На страницу через useHead",{"id":8038,"depth":80,"text":8537},"Вариант Б — Глобально в nuxt.config.ts",{"id":8220,"depth":55,"text":8221},{"id":7689,"depth":55,"text":7690},"Интеграция с Nuxt 3 \u002F Nuxt 4 приложением",{},"\u002Fintegrations\u002Fnuxt",{"title":3064,"description":8540},"integrations\u002Fnuxt","mSERafXf_JPUG4rn6ZlSU_qJnLNa0suHinF4LwLrASI",{"id":8547,"title":3964,"body":8548,"description":9389,"extension":793,"icon":4850,"meta":9390,"navigation":191,"path":9391,"seo":9392,"stem":9393,"__hash__":9394},"content\u002Fintegrations\u002Freact.md",{"type":7,"value":8549,"toc":9384},[8550,8554,8557,8561,8566,8750,8758,8762,9068,9072,9382],[10,8551,8553],{"id":8552},"интеграция-с-react","Интеграция с React",[15,8555,8556],{},"Работает с любым React-окружением — Vite, Create React App или своим решением.",[19,8558,8560],{"id":8559},"_1-загрузка-скрипта-виджета","1. Загрузка скрипта виджета",[15,8562,8563,8564,537],{},"Добавьте скрипт в ваш ",[31,8565,3983],{},[24,8567,8569],{"className":26,"code":8568,"language":28,"meta":29,"style":29},"\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",[31,8570,8571,8576,8582,8594,8606,8614,8632,8656,8698,8702,8722,8734,8742],{"__ignoreMap":29},[34,8572,8573],{"class":36,"line":37},[34,8574,8575],{"class":239},"\u003C!-- В public\u002Findex.html или index.html (Vite) -->\n",[34,8577,8578,8580],{"class":36,"line":55},[34,8579,58],{"class":40},[34,8581,338],{"class":44},[34,8583,8584,8586,8588,8590,8592],{"class":36,"line":80},[34,8585,1569],{"class":48},[34,8587,66],{"class":40},[34,8589,69],{"class":40},[34,8591,351],{"class":72},[34,8593,354],{"class":40},[34,8595,8596,8598,8600,8602,8604],{"class":36,"line":90},[34,8597,1582],{"class":48},[34,8599,66],{"class":40},[34,8601,69],{"class":40},[34,8603,367],{"class":72},[34,8605,354],{"class":40},[34,8607,8608,8610,8612],{"class":36,"line":114},[34,8609,275],{"class":40},[34,8611,378],{"class":44},[34,8613,52],{"class":40},[34,8615,8616,8618,8620,8622,8624,8626,8628,8630],{"class":36,"line":147},[34,8617,58],{"class":40},[34,8619,378],{"class":44},[34,8621,251],{"class":48},[34,8623,66],{"class":40},[34,8625,69],{"class":40},[34,8627,407],{"class":72},[34,8629,69],{"class":40},[34,8631,52],{"class":40},[34,8633,8634,8636,8638,8640,8642,8644,8646,8648,8650,8652,8654],{"class":36,"line":169},[34,8635,1630],{"class":158},[34,8637,420],{"class":40},[34,8639,423],{"class":158},[34,8641,66],{"class":40},[34,8643,428],{"class":158},[34,8645,420],{"class":40},[34,8647,423],{"class":158},[34,8649,435],{"class":40},[34,8651,438],{"class":48},[34,8653,306],{"class":40},[34,8655,443],{"class":40},[34,8657,8658,8660,8662,8664,8666,8668,8670,8672,8674,8676,8678,8680,8682,8684,8686,8688,8690,8692,8694,8696],{"class":36,"line":178},[34,8659,1655],{"class":44},[34,8661,452],{"class":158},[34,8663,420],{"class":40},[34,8665,457],{"class":158},[34,8667,420],{"class":40},[34,8669,462],{"class":158},[34,8671,465],{"class":40},[34,8673,428],{"class":158},[34,8675,420],{"class":40},[34,8677,457],{"class":158},[34,8679,420],{"class":40},[34,8681,462],{"class":158},[34,8683,478],{"class":40},[34,8685,481],{"class":44},[34,8687,420],{"class":40},[34,8689,486],{"class":302},[34,8691,489],{"class":44},[34,8693,492],{"class":158},[34,8695,495],{"class":44},[34,8697,498],{"class":40},[34,8699,8700],{"class":36,"line":188},[34,8701,1698],{"class":40},[34,8703,8704,8706,8708,8710,8712,8714,8716,8718,8720],{"class":36,"line":195},[34,8705,1630],{"class":158},[34,8707,420],{"class":40},[34,8709,457],{"class":302},[34,8711,489],{"class":158},[34,8713,518],{"class":40},[34,8715,521],{"class":72},[34,8717,518],{"class":40},[34,8719,526],{"class":40},[34,8721,443],{"class":40},[34,8723,8724,8726,8728,8730,8732],{"class":36,"line":213},[34,8725,1723],{"class":44},[34,8727,537],{"class":40},[34,8729,540],{"class":40},[34,8731,4150],{"class":72},[34,8733,546],{"class":40},[34,8735,8736,8738,8740],{"class":36,"line":231},[34,8737,1736],{"class":40},[34,8739,495],{"class":158},[34,8741,498],{"class":40},[34,8743,8744,8746,8748],{"class":36,"line":236},[34,8745,162],{"class":40},[34,8747,378],{"class":44},[34,8749,52],{"class":40},[4170,8751,8752],{"icon":4172},[15,8753,8754,8755,8757],{},"Замените ",[31,8756,4150],{}," на ваш реальный ключ во время сборки, или используйте инъекцию во время выполнения.",[19,8759,8761],{"id":8760},"_2-создайте-свой-хук","2. Создайте свой хук",[24,8763,8764],{"className":2090,"code":4185,"language":2092,"meta":29,"style":29},[31,8765,8766,8770,8778,8788,8798,8808,8812,8816,8824,8834,8864,8876,8880,8884,8892,8900,8930,8934,8938,8942,8954,8976,9000,9004,9008,9022,9042,9046,9050,9064],{"__ignoreMap":29},[34,8767,8768],{"class":36,"line":37},[34,8769,4192],{"class":239},[34,8771,8772,8774,8776],{"class":36,"line":55},[34,8773,2402],{"class":48},[34,8775,2405],{"class":2152},[34,8777,443],{"class":40},[34,8779,8780,8782,8784,8786],{"class":36,"line":80},[34,8781,2412],{"class":44},[34,8783,537],{"class":40},[34,8785,2417],{"class":2152},[34,8787,498],{"class":40},[34,8789,8790,8792,8794,8796],{"class":36,"line":90},[34,8791,2424],{"class":44},[34,8793,537],{"class":40},[34,8795,2417],{"class":2152},[34,8797,498],{"class":40},[34,8799,8800,8802,8804,8806],{"class":36,"line":114},[34,8801,4225],{"class":44},[34,8803,2484],{"class":40},[34,8805,2417],{"class":2152},[34,8807,498],{"class":40},[34,8809,8810],{"class":36,"line":147},[34,8811,2187],{"class":40},[34,8813,8814],{"class":36,"line":169},[34,8815,192],{"emptyLinePlaceholder":191},[34,8817,8818,8820,8822],{"class":36,"line":178},[34,8819,2402],{"class":48},[34,8821,4246],{"class":2152},[34,8823,443],{"class":40},[34,8825,8826,8828,8830,8832],{"class":36,"line":188},[34,8827,1069],{"class":44},[34,8829,537],{"class":40},[34,8831,2417],{"class":2152},[34,8833,498],{"class":40},[34,8835,8836,8838,8840,8842,8844,8846,8848,8850,8852,8854,8856,8858,8860,8862],{"class":36,"line":195},[34,8837,1084],{"class":44},[34,8839,2484],{"class":40},[34,8841,540],{"class":40},[34,8843,646],{"class":72},[34,8845,518],{"class":40},[34,8847,4273],{"class":40},[34,8849,540],{"class":40},[34,8851,4278],{"class":72},[34,8853,518],{"class":40},[34,8855,4273],{"class":40},[34,8857,540],{"class":40},[34,8859,4287],{"class":72},[34,8861,518],{"class":40},[34,8863,498],{"class":40},[34,8865,8866,8868,8870,8872,8874],{"class":36,"line":213},[34,8867,1099],{"class":44},[34,8869,537],{"class":40},[34,8871,2405],{"class":2152},[34,8873,4302],{"class":158},[34,8875,498],{"class":40},[34,8877,8878],{"class":36,"line":231},[34,8879,2187],{"class":40},[34,8881,8882],{"class":36,"line":236},[34,8883,192],{"emptyLinePlaceholder":191},[34,8885,8886,8888,8890],{"class":36,"line":243},[34,8887,2443],{"class":48},[34,8889,2446],{"class":158},[34,8891,2449],{"class":40},[34,8893,8894,8896,8898],{"class":36,"line":282},[34,8895,2454],{"class":48},[34,8897,2457],{"class":2152},[34,8899,443],{"class":40},[34,8901,8902,8904,8906,8908,8910,8912,8914,8916,8918,8920,8922,8924,8926,8928],{"class":36,"line":287},[34,8903,2464],{"class":44},[34,8905,537],{"class":40},[34,8907,2469],{"class":40},[34,8909,2472],{"class":2138},[34,8911,537],{"class":40},[34,8913,2417],{"class":2152},[34,8915,526],{"class":40},[34,8917,2481],{"class":2138},[34,8919,2484],{"class":40},[34,8921,2487],{"class":2152},[34,8923,495],{"class":40},[34,8925,2492],{"class":48},[34,8927,2495],{"class":2152},[34,8929,498],{"class":40},[34,8931,8932],{"class":36,"line":322},[34,8933,2502],{"class":40},[34,8935,8936],{"class":36,"line":327},[34,8937,2187],{"class":40},[34,8939,8940],{"class":36,"line":333},[34,8941,192],{"emptyLinePlaceholder":191},[34,8943,8944,8946,8948,8950,8952],{"class":36,"line":341},[34,8945,2124],{"class":2099},[34,8947,438],{"class":48},[34,8949,4379],{"class":302},[34,8951,306],{"class":40},[34,8953,443],{"class":40},[34,8955,8956,8958,8960,8962,8964,8966,8968,8970,8972,8974],{"class":36,"line":357},[34,8957,2547],{"class":48},[34,8959,4390],{"class":158},[34,8961,465],{"class":40},[34,8963,2469],{"class":40},[34,8965,4397],{"class":2138},[34,8967,537],{"class":40},[34,8969,4246],{"class":2152},[34,8971,495],{"class":40},[34,8973,2492],{"class":48},[34,8975,443],{"class":40},[34,8977,8978,8980,8982,8984,8986,8988,8990,8992,8994,8996,8998],{"class":36,"line":372},[34,8979,417],{"class":158},[34,8981,420],{"class":40},[34,8983,457],{"class":302},[34,8985,489],{"class":44},[34,8987,518],{"class":40},[34,8989,610],{"class":72},[34,8991,518],{"class":40},[34,8993,526],{"class":40},[34,8995,2481],{"class":158},[34,8997,495],{"class":44},[34,8999,498],{"class":40},[34,9001,9002],{"class":36,"line":383},[34,9003,1698],{"class":40},[34,9005,9006],{"class":36,"line":388},[34,9007,192],{"emptyLinePlaceholder":191},[34,9009,9010,9012,9014,9016,9018,9020],{"class":36,"line":394},[34,9011,2547],{"class":48},[34,9013,4446],{"class":158},[34,9015,465],{"class":40},[34,9017,2555],{"class":40},[34,9019,2492],{"class":48},[34,9021,443],{"class":40},[34,9023,9024,9026,9028,9030,9032,9034,9036,9038,9040],{"class":36,"line":414},[34,9025,417],{"class":158},[34,9027,420],{"class":40},[34,9029,457],{"class":302},[34,9031,489],{"class":44},[34,9033,518],{"class":40},[34,9035,4469],{"class":72},[34,9037,518],{"class":40},[34,9039,495],{"class":44},[34,9041,498],{"class":40},[34,9043,9044],{"class":36,"line":446},[34,9045,1698],{"class":40},[34,9047,9048],{"class":36,"line":501},[34,9049,192],{"emptyLinePlaceholder":191},[34,9051,9052,9054,9056,9058,9060,9062],{"class":36,"line":507},[34,9053,2168],{"class":2099},[34,9055,2145],{"class":40},[34,9057,4390],{"class":158},[34,9059,526],{"class":40},[34,9061,4446],{"class":158},[34,9063,4498],{"class":40},[34,9065,9066],{"class":36,"line":531},[34,9067,2187],{"class":40},[19,9069,9071],{"id":9070},"_3-использование-в-компоненте","3. Использование в компоненте",[24,9073,9075],{"className":2090,"code":9074,"language":2092,"meta":29,"style":29},"\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",[31,9076,9077,9081,9101,9105,9113,9123,9133,9137,9141,9165,9183,9187,9193,9201,9207,9219,9257,9261,9267,9275,9283,9297,9311,9337,9343,9347,9351,9356,9364,9372,9378],{"__ignoreMap":29},[34,9078,9079],{"class":36,"line":37},[34,9080,4516],{"class":239},[34,9082,9083,9085,9087,9089,9091,9093,9095,9097,9099],{"class":36,"line":55},[34,9084,2100],{"class":2099},[34,9086,2145],{"class":40},[34,9088,4379],{"class":158},[34,9090,2768],{"class":40},[34,9092,2771],{"class":2099},[34,9094,540],{"class":40},[34,9096,4533],{"class":72},[34,9098,518],{"class":40},[34,9100,498],{"class":40},[34,9102,9103],{"class":36,"line":80},[34,9104,192],{"emptyLinePlaceholder":191},[34,9106,9107,9109,9111],{"class":36,"line":90},[34,9108,2402],{"class":48},[34,9110,4548],{"class":2152},[34,9112,443],{"class":40},[34,9114,9115,9117,9119,9121],{"class":36,"line":114},[34,9116,2412],{"class":44},[34,9118,537],{"class":40},[34,9120,2417],{"class":2152},[34,9122,498],{"class":40},[34,9124,9125,9127,9129,9131],{"class":36,"line":147},[34,9126,3764],{"class":44},[34,9128,537],{"class":40},[34,9130,2417],{"class":2152},[34,9132,498],{"class":40},[34,9134,9135],{"class":36,"line":169},[34,9136,2187],{"class":40},[34,9138,9139],{"class":36,"line":178},[34,9140,192],{"emptyLinePlaceholder":191},[34,9142,9143,9145,9147,9149,9151,9153,9155,9157,9159,9161,9163],{"class":36,"line":188},[34,9144,2124],{"class":2099},[34,9146,438],{"class":48},[34,9148,4587],{"class":302},[34,9150,2135],{"class":40},[34,9152,4592],{"class":2138},[34,9154,526],{"class":40},[34,9156,4597],{"class":2138},[34,9158,2142],{"class":40},[34,9160,4548],{"class":2152},[34,9162,495],{"class":40},[34,9164,443],{"class":40},[34,9166,9167,9169,9171,9173,9175,9177,9179,9181],{"class":36,"line":195},[34,9168,2547],{"class":48},[34,9170,2145],{"class":40},[34,9172,4390],{"class":158},[34,9174,2768],{"class":40},[34,9176,465],{"class":40},[34,9178,4379],{"class":302},[34,9180,306],{"class":44},[34,9182,498],{"class":40},[34,9184,9185],{"class":36,"line":213},[34,9186,192],{"emptyLinePlaceholder":191},[34,9188,9189,9191],{"class":36,"line":231},[34,9190,2168],{"class":2099},[34,9192,2171],{"class":44},[34,9194,9195,9197,9199],{"class":36,"line":236},[34,9196,2870],{"class":40},[34,9198,248],{"class":44},[34,9200,52],{"class":40},[34,9202,9203,9205],{"class":36,"line":243},[34,9204,2196],{"class":40},[34,9206,4648],{"class":44},[34,9208,9209,9211,9213,9215,9217],{"class":36,"line":282},[34,9210,2231],{"class":48},[34,9212,66],{"class":40},[34,9214,69],{"class":40},[34,9216,258],{"class":72},[34,9218,354],{"class":40},[34,9220,9221,9223,9225,9227,9229,9231,9233,9235,9237,9239,9241,9243,9245,9247,9249,9251,9253,9255],{"class":36,"line":287},[34,9222,4665],{"class":48},[34,9224,2667],{"class":40},[34,9226,2670],{"class":44},[34,9228,537],{"class":40},[34,9230,540],{"class":40},[34,9232,2677],{"class":72},[34,9234,518],{"class":40},[34,9236,526],{"class":40},[34,9238,2684],{"class":44},[34,9240,537],{"class":40},[34,9242,2690],{"class":2689},[34,9244,526],{"class":40},[34,9246,2695],{"class":44},[34,9248,537],{"class":40},[34,9250,540],{"class":40},[34,9252,2702],{"class":72},[34,9254,518],{"class":40},[34,9256,4700],{"class":40},[34,9258,9259],{"class":36,"line":322},[34,9260,2244],{"class":40},[34,9262,9263,9265],{"class":36,"line":327},[34,9264,2196],{"class":40},[34,9266,4711],{"class":44},[34,9268,9269,9271,9273],{"class":36,"line":333},[34,9270,4716],{"class":48},[34,9272,4719],{"class":40},[34,9274,4722],{"class":48},[34,9276,9277,9279,9281],{"class":36,"line":341},[34,9278,4727],{"class":302},[34,9280,489],{"class":158},[34,9282,2449],{"class":40},[34,9284,9285,9287,9289,9291,9293,9295],{"class":36,"line":357},[34,9286,4736],{"class":44},[34,9288,537],{"class":40},[34,9290,540],{"class":40},[34,9292,258],{"class":72},[34,9294,518],{"class":40},[34,9296,633],{"class":40},[34,9298,9299,9301,9303,9305,9307,9309],{"class":36,"line":372},[34,9300,4751],{"class":44},[34,9302,537],{"class":40},[34,9304,540],{"class":40},[34,9306,646],{"class":72},[34,9308,518],{"class":40},[34,9310,633],{"class":40},[34,9312,9313,9315,9317,9319,9321,9323,9325,9327,9329,9331,9333,9335],{"class":36,"line":383},[34,9314,4766],{"class":44},[34,9316,537],{"class":40},[34,9318,4771],{"class":158},[34,9320,4774],{"class":40},[34,9322,4592],{"class":158},[34,9324,526],{"class":40},[34,9326,4781],{"class":44},[34,9328,537],{"class":40},[34,9330,4786],{"class":158},[34,9332,908],{"class":40},[34,9334,4791],{"class":158},[34,9336,633],{"class":40},[34,9338,9339,9341],{"class":36,"line":388},[34,9340,4798],{"class":40},[34,9342,3396],{"class":158},[34,9344,9345],{"class":36,"line":394},[34,9346,4805],{"class":40},[34,9348,9349],{"class":36,"line":414},[34,9350,2283],{"class":40},[34,9352,9353],{"class":36,"line":446},[34,9354,9355],{"class":158},"        Примерка\n",[34,9357,9358,9360,9362],{"class":36,"line":501},[34,9359,2353],{"class":40},[34,9361,292],{"class":44},[34,9363,52],{"class":40},[34,9365,9366,9368,9370],{"class":36,"line":507},[34,9367,3002],{"class":40},[34,9369,248],{"class":44},[34,9371,52],{"class":40},[34,9373,9374,9376],{"class":36,"line":531},[34,9375,2367],{"class":44},[34,9377,498],{"class":40},[34,9379,9380],{"class":36,"line":549},[34,9381,2187],{"class":40},[785,9383,4843],{},{"title":29,"searchDepth":55,"depth":55,"links":9385},[9386,9387,9388],{"id":8559,"depth":55,"text":8560},{"id":8760,"depth":55,"text":8761},{"id":9070,"depth":55,"text":9071},"Интеграция с React-приложением (Vite \u002F CRA)",{},"\u002Fintegrations\u002Freact",{"title":3964,"description":9389},"integrations\u002Freact","F7mSDoVd1RiVLbrCGyquPOzGkvCalo0IeQdlhW6YYUs",{"id":4,"title":5,"body":9396,"description":792,"extension":793,"icon":794,"meta":9998,"navigation":191,"path":796,"seo":9999,"stem":798,"__hash__":799},{"type":7,"value":9397,"toc":9994},[9398,9400,9402,9404,9976,9978,9992],[10,9399,13],{"id":12},[15,9401,17],{},[19,9403,22],{"id":21},[24,9405,9406],{"className":26,"code":27,"language":28,"meta":29,"style":29},[31,9407,9408,9418,9436,9444,9462,9490,9506,9514,9522,9526,9542,9558,9562,9566,9598,9602,9630,9634,9638,9644,9656,9668,9676,9680,9684,9702,9726,9768,9772,9792,9804,9812,9820,9824,9832,9842,9862,9876,9890,9898,9902,9916,9930,9934,9940,9948,9952,9960,9968],{"__ignoreMap":29},[34,9409,9410,9412,9414,9416],{"class":36,"line":37},[34,9411,41],{"class":40},[34,9413,45],{"class":44},[34,9415,49],{"class":48},[34,9417,52],{"class":40},[34,9419,9420,9422,9424,9426,9428,9430,9432,9434],{"class":36,"line":55},[34,9421,58],{"class":40},[34,9423,28],{"class":44},[34,9425,63],{"class":48},[34,9427,66],{"class":40},[34,9429,69],{"class":40},[34,9431,73],{"class":72},[34,9433,69],{"class":40},[34,9435,52],{"class":40},[34,9437,9438,9440,9442],{"class":36,"line":80},[34,9439,58],{"class":40},[34,9441,85],{"class":44},[34,9443,52],{"class":40},[34,9445,9446,9448,9450,9452,9454,9456,9458,9460],{"class":36,"line":90},[34,9447,93],{"class":40},[34,9449,96],{"class":44},[34,9451,99],{"class":48},[34,9453,66],{"class":40},[34,9455,69],{"class":40},[34,9457,106],{"class":72},[34,9459,69],{"class":40},[34,9461,111],{"class":40},[34,9463,9464,9466,9468,9470,9472,9474,9476,9478,9480,9482,9484,9486,9488],{"class":36,"line":114},[34,9465,93],{"class":40},[34,9467,96],{"class":44},[34,9469,121],{"class":48},[34,9471,66],{"class":40},[34,9473,69],{"class":40},[34,9475,128],{"class":72},[34,9477,69],{"class":40},[34,9479,133],{"class":48},[34,9481,66],{"class":40},[34,9483,69],{"class":40},[34,9485,140],{"class":72},[34,9487,69],{"class":40},[34,9489,111],{"class":40},[34,9491,9492,9494,9496,9498,9500,9502,9504],{"class":36,"line":147},[34,9493,93],{"class":40},[34,9495,152],{"class":44},[34,9497,155],{"class":40},[34,9499,159],{"class":158},[34,9501,162],{"class":40},[34,9503,152],{"class":44},[34,9505,52],{"class":40},[34,9507,9508,9510,9512],{"class":36,"line":169},[34,9509,162],{"class":40},[34,9511,85],{"class":44},[34,9513,52],{"class":40},[34,9515,9516,9518,9520],{"class":36,"line":178},[34,9517,58],{"class":40},[34,9519,183],{"class":44},[34,9521,52],{"class":40},[34,9523,9524],{"class":36,"line":188},[34,9525,192],{"emptyLinePlaceholder":191},[34,9527,9528,9530,9532,9534,9536,9538,9540],{"class":36,"line":195},[34,9529,93],{"class":40},[34,9531,10],{"class":44},[34,9533,155],{"class":40},[34,9535,204],{"class":158},[34,9537,162],{"class":40},[34,9539,10],{"class":44},[34,9541,52],{"class":40},[34,9543,9544,9546,9548,9550,9552,9554,9556],{"class":36,"line":213},[34,9545,93],{"class":40},[34,9547,15],{"class":44},[34,9549,155],{"class":40},[34,9551,222],{"class":158},[34,9553,162],{"class":40},[34,9555,15],{"class":44},[34,9557,52],{"class":40},[34,9559,9560],{"class":36,"line":231},[34,9561,192],{"emptyLinePlaceholder":191},[34,9563,9564],{"class":36,"line":236},[34,9565,240],{"class":239},[34,9567,9568,9570,9572,9574,9576,9578,9580,9582,9584,9586,9588,9590,9592,9594,9596],{"class":36,"line":243},[34,9569,93],{"class":40},[34,9571,248],{"class":44},[34,9573,251],{"class":48},[34,9575,66],{"class":40},[34,9577,69],{"class":40},[34,9579,258],{"class":72},[34,9581,69],{"class":40},[34,9583,263],{"class":48},[34,9585,66],{"class":40},[34,9587,69],{"class":40},[34,9589,270],{"class":72},[34,9591,69],{"class":40},[34,9593,275],{"class":40},[34,9595,248],{"class":44},[34,9597,52],{"class":40},[34,9599,9600],{"class":36,"line":282},[34,9601,192],{"emptyLinePlaceholder":191},[34,9603,9604,9606,9608,9610,9612,9614,9616,9618,9620,9622,9624,9626,9628],{"class":36,"line":287},[34,9605,93],{"class":40},[34,9607,292],{"class":44},[34,9609,295],{"class":48},[34,9611,66],{"class":40},[34,9613,69],{"class":40},[34,9615,303],{"class":302},[34,9617,306],{"class":72},[34,9619,69],{"class":40},[34,9621,155],{"class":40},[34,9623,313],{"class":158},[34,9625,162],{"class":40},[34,9627,292],{"class":44},[34,9629,52],{"class":40},[34,9631,9632],{"class":36,"line":322},[34,9633,192],{"emptyLinePlaceholder":191},[34,9635,9636],{"class":36,"line":327},[34,9637,330],{"class":239},[34,9639,9640,9642],{"class":36,"line":333},[34,9641,93],{"class":40},[34,9643,338],{"class":44},[34,9645,9646,9648,9650,9652,9654],{"class":36,"line":341},[34,9647,344],{"class":48},[34,9649,66],{"class":40},[34,9651,69],{"class":40},[34,9653,351],{"class":72},[34,9655,354],{"class":40},[34,9657,9658,9660,9662,9664,9666],{"class":36,"line":357},[34,9659,360],{"class":48},[34,9661,66],{"class":40},[34,9663,69],{"class":40},[34,9665,367],{"class":72},[34,9667,354],{"class":40},[34,9669,9670,9672,9674],{"class":36,"line":372},[34,9671,375],{"class":40},[34,9673,378],{"class":44},[34,9675,52],{"class":40},[34,9677,9678],{"class":36,"line":383},[34,9679,192],{"emptyLinePlaceholder":191},[34,9681,9682],{"class":36,"line":388},[34,9683,391],{"class":239},[34,9685,9686,9688,9690,9692,9694,9696,9698,9700],{"class":36,"line":394},[34,9687,93],{"class":40},[34,9689,378],{"class":44},[34,9691,251],{"class":48},[34,9693,66],{"class":40},[34,9695,69],{"class":40},[34,9697,407],{"class":72},[34,9699,69],{"class":40},[34,9701,52],{"class":40},[34,9703,9704,9706,9708,9710,9712,9714,9716,9718,9720,9722,9724],{"class":36,"line":414},[34,9705,417],{"class":158},[34,9707,420],{"class":40},[34,9709,423],{"class":158},[34,9711,66],{"class":40},[34,9713,428],{"class":158},[34,9715,420],{"class":40},[34,9717,423],{"class":158},[34,9719,435],{"class":40},[34,9721,438],{"class":48},[34,9723,306],{"class":40},[34,9725,443],{"class":40},[34,9727,9728,9730,9732,9734,9736,9738,9740,9742,9744,9746,9748,9750,9752,9754,9756,9758,9760,9762,9764,9766],{"class":36,"line":446},[34,9729,449],{"class":44},[34,9731,452],{"class":158},[34,9733,420],{"class":40},[34,9735,457],{"class":158},[34,9737,420],{"class":40},[34,9739,462],{"class":158},[34,9741,465],{"class":40},[34,9743,428],{"class":158},[34,9745,420],{"class":40},[34,9747,457],{"class":158},[34,9749,420],{"class":40},[34,9751,462],{"class":158},[34,9753,478],{"class":40},[34,9755,481],{"class":44},[34,9757,420],{"class":40},[34,9759,486],{"class":302},[34,9761,489],{"class":44},[34,9763,492],{"class":158},[34,9765,495],{"class":44},[34,9767,498],{"class":40},[34,9769,9770],{"class":36,"line":501},[34,9771,504],{"class":40},[34,9773,9774,9776,9778,9780,9782,9784,9786,9788,9790],{"class":36,"line":507},[34,9775,417],{"class":158},[34,9777,420],{"class":40},[34,9779,457],{"class":302},[34,9781,489],{"class":158},[34,9783,518],{"class":40},[34,9785,521],{"class":72},[34,9787,518],{"class":40},[34,9789,526],{"class":40},[34,9791,443],{"class":40},[34,9793,9794,9796,9798,9800,9802],{"class":36,"line":531},[34,9795,534],{"class":44},[34,9797,537],{"class":40},[34,9799,540],{"class":40},[34,9801,543],{"class":72},[34,9803,546],{"class":40},[34,9805,9806,9808,9810],{"class":36,"line":549},[34,9807,552],{"class":40},[34,9809,495],{"class":158},[34,9811,498],{"class":40},[34,9813,9814,9816,9818],{"class":36,"line":559},[34,9815,562],{"class":40},[34,9817,378],{"class":44},[34,9819,52],{"class":40},[34,9821,9822],{"class":36,"line":569},[34,9823,192],{"emptyLinePlaceholder":191},[34,9825,9826,9828,9830],{"class":36,"line":574},[34,9827,93],{"class":40},[34,9829,378],{"class":44},[34,9831,52],{"class":40},[34,9833,9834,9836,9838,9840],{"class":36,"line":583},[34,9835,586],{"class":48},[34,9837,589],{"class":302},[34,9839,306],{"class":40},[34,9841,443],{"class":40},[34,9843,9844,9846,9848,9850,9852,9854,9856,9858,9860],{"class":36,"line":596},[34,9845,599],{"class":158},[34,9847,420],{"class":40},[34,9849,457],{"class":302},[34,9851,489],{"class":44},[34,9853,518],{"class":40},[34,9855,610],{"class":72},[34,9857,518],{"class":40},[34,9859,526],{"class":40},[34,9861,443],{"class":40},[34,9863,9864,9866,9868,9870,9872,9874],{"class":36,"line":619},[34,9865,622],{"class":44},[34,9867,537],{"class":40},[34,9869,540],{"class":40},[34,9871,258],{"class":72},[34,9873,518],{"class":40},[34,9875,633],{"class":40},[34,9877,9878,9880,9882,9884,9886,9888],{"class":36,"line":636},[34,9879,639],{"class":44},[34,9881,537],{"class":40},[34,9883,540],{"class":40},[34,9885,646],{"class":72},[34,9887,518],{"class":40},[34,9889,633],{"class":40},[34,9891,9892,9894,9896],{"class":36,"line":653},[34,9893,656],{"class":44},[34,9895,537],{"class":40},[34,9897,661],{"class":44},[34,9899,9900],{"class":36,"line":664},[34,9901,667],{"class":40},[34,9903,9904,9906,9908,9910,9912,9914],{"class":36,"line":670},[34,9905,673],{"class":44},[34,9907,537],{"class":40},[34,9909,540],{"class":40},[34,9911,204],{"class":72},[34,9913,518],{"class":40},[34,9915,633],{"class":40},[34,9917,9918,9920,9922,9924,9926,9928],{"class":36,"line":686},[34,9919,689],{"class":44},[34,9921,537],{"class":40},[34,9923,540],{"class":40},[34,9925,696],{"class":72},[34,9927,518],{"class":40},[34,9929,633],{"class":40},[34,9931,9932],{"class":36,"line":703},[34,9933,706],{"class":40},[34,9935,9936,9938],{"class":36,"line":709},[34,9937,712],{"class":44},[34,9939,633],{"class":40},[34,9941,9942,9944,9946],{"class":36,"line":717},[34,9943,720],{"class":40},[34,9945,495],{"class":44},[34,9947,498],{"class":40},[34,9949,9950],{"class":36,"line":727},[34,9951,730],{"class":40},[34,9953,9954,9956,9958],{"class":36,"line":733},[34,9955,562],{"class":40},[34,9957,378],{"class":44},[34,9959,52],{"class":40},[34,9961,9962,9964,9966],{"class":36,"line":742},[34,9963,162],{"class":40},[34,9965,183],{"class":44},[34,9967,52],{"class":40},[34,9969,9970,9972,9974],{"class":36,"line":751},[34,9971,162],{"class":40},[34,9973,28],{"class":44},[34,9975,52],{"class":40},[19,9977,761],{"id":760},[763,9979,9980,9982,9988],{},[766,9981,768],{},[766,9983,771,9984,775,9986,420],{},[31,9985,774],{},[31,9987,610],{},[766,9989,9990,783],{},[31,9991,782],{},[785,9993,787],{},{"title":29,"searchDepth":55,"depth":55,"links":9995},[9996,9997],{"id":21,"depth":55,"text":22},{"id":760,"depth":55,"text":761},{},{"title":5,"description":792},{"id":10001,"title":5486,"body":10002,"description":10832,"extension":793,"icon":6333,"meta":10833,"navigation":191,"path":10834,"seo":10835,"stem":10836,"__hash__":10837},"content\u002Fintegrations\u002Fvue.md",{"type":7,"value":10003,"toc":10827},[10004,10008,10011,10013,10018,10196,10200,10492,10496,10825],[10,10005,10007],{"id":10006},"интеграция-с-vue-3","Интеграция с Vue 3",[15,10009,10010],{},"Работает с Vue 3 + Vite или любым другим окружением Vue 3.",[19,10012,8560],{"id":8559},[15,10014,10015,10016,537],{},"В ",[31,10017,3983],{},[24,10019,10020],{"className":26,"code":5505,"language":28,"meta":29,"style":29},[31,10021,10022,10028,10040,10052,10060,10078,10102,10144,10148,10168,10180,10188],{"__ignoreMap":29},[34,10023,10024,10026],{"class":36,"line":37},[34,10025,58],{"class":40},[34,10027,338],{"class":44},[34,10029,10030,10032,10034,10036,10038],{"class":36,"line":55},[34,10031,1569],{"class":48},[34,10033,66],{"class":40},[34,10035,69],{"class":40},[34,10037,351],{"class":72},[34,10039,354],{"class":40},[34,10041,10042,10044,10046,10048,10050],{"class":36,"line":80},[34,10043,1582],{"class":48},[34,10045,66],{"class":40},[34,10047,69],{"class":40},[34,10049,367],{"class":72},[34,10051,354],{"class":40},[34,10053,10054,10056,10058],{"class":36,"line":90},[34,10055,275],{"class":40},[34,10057,378],{"class":44},[34,10059,52],{"class":40},[34,10061,10062,10064,10066,10068,10070,10072,10074,10076],{"class":36,"line":114},[34,10063,58],{"class":40},[34,10065,378],{"class":44},[34,10067,251],{"class":48},[34,10069,66],{"class":40},[34,10071,69],{"class":40},[34,10073,407],{"class":72},[34,10075,69],{"class":40},[34,10077,52],{"class":40},[34,10079,10080,10082,10084,10086,10088,10090,10092,10094,10096,10098,10100],{"class":36,"line":147},[34,10081,1630],{"class":158},[34,10083,420],{"class":40},[34,10085,423],{"class":158},[34,10087,66],{"class":40},[34,10089,428],{"class":158},[34,10091,420],{"class":40},[34,10093,423],{"class":158},[34,10095,435],{"class":40},[34,10097,438],{"class":48},[34,10099,306],{"class":40},[34,10101,443],{"class":40},[34,10103,10104,10106,10108,10110,10112,10114,10116,10118,10120,10122,10124,10126,10128,10130,10132,10134,10136,10138,10140,10142],{"class":36,"line":169},[34,10105,1655],{"class":44},[34,10107,452],{"class":158},[34,10109,420],{"class":40},[34,10111,457],{"class":158},[34,10113,420],{"class":40},[34,10115,462],{"class":158},[34,10117,465],{"class":40},[34,10119,428],{"class":158},[34,10121,420],{"class":40},[34,10123,457],{"class":158},[34,10125,420],{"class":40},[34,10127,462],{"class":158},[34,10129,478],{"class":40},[34,10131,481],{"class":44},[34,10133,420],{"class":40},[34,10135,486],{"class":302},[34,10137,489],{"class":44},[34,10139,492],{"class":158},[34,10141,495],{"class":44},[34,10143,498],{"class":40},[34,10145,10146],{"class":36,"line":178},[34,10147,1698],{"class":40},[34,10149,10150,10152,10154,10156,10158,10160,10162,10164,10166],{"class":36,"line":188},[34,10151,1630],{"class":158},[34,10153,420],{"class":40},[34,10155,457],{"class":302},[34,10157,489],{"class":158},[34,10159,518],{"class":40},[34,10161,521],{"class":72},[34,10163,518],{"class":40},[34,10165,526],{"class":40},[34,10167,443],{"class":40},[34,10169,10170,10172,10174,10176,10178],{"class":36,"line":195},[34,10171,1723],{"class":44},[34,10173,537],{"class":40},[34,10175,540],{"class":40},[34,10177,543],{"class":72},[34,10179,546],{"class":40},[34,10181,10182,10184,10186],{"class":36,"line":213},[34,10183,1736],{"class":40},[34,10185,495],{"class":158},[34,10187,498],{"class":40},[34,10189,10190,10192,10194],{"class":36,"line":231},[34,10191,162],{"class":40},[34,10193,378],{"class":44},[34,10195,52],{"class":40},[19,10197,10199],{"id":10198},"_2-создайте-composable","2. Создайте composable",[24,10201,10202],{"className":3413,"code":5688,"language":3210,"meta":29,"style":29},[31,10203,10204,10208,10218,10226,10234,10242,10246,10250,10260,10268,10296,10306,10310,10314,10322,10330,10358,10362,10366,10370,10382,10404,10426,10430,10434,10448,10466,10470,10474,10488],{"__ignoreMap":29},[34,10205,10206],{"class":36,"line":37},[34,10207,5695],{"class":239},[34,10209,10210,10212,10214,10216],{"class":36,"line":55},[34,10211,2124],{"class":2099},[34,10213,5702],{"class":48},[34,10215,2405],{"class":2152},[34,10217,443],{"class":40},[34,10219,10220,10222,10224],{"class":36,"line":80},[34,10221,2412],{"class":44},[34,10223,537],{"class":40},[34,10225,3759],{"class":2152},[34,10227,10228,10230,10232],{"class":36,"line":90},[34,10229,2424],{"class":44},[34,10231,537],{"class":40},[34,10233,3759],{"class":2152},[34,10235,10236,10238,10240],{"class":36,"line":114},[34,10237,4225],{"class":44},[34,10239,2484],{"class":40},[34,10241,3759],{"class":2152},[34,10243,10244],{"class":36,"line":147},[34,10245,2187],{"class":40},[34,10247,10248],{"class":36,"line":169},[34,10249,192],{"emptyLinePlaceholder":191},[34,10251,10252,10254,10256,10258],{"class":36,"line":178},[34,10253,2124],{"class":2099},[34,10255,5702],{"class":48},[34,10257,4246],{"class":2152},[34,10259,443],{"class":40},[34,10261,10262,10264,10266],{"class":36,"line":188},[34,10263,1069],{"class":44},[34,10265,537],{"class":40},[34,10267,3759],{"class":2152},[34,10269,10270,10272,10274,10276,10278,10280,10282,10284,10286,10288,10290,10292,10294],{"class":36,"line":195},[34,10271,1084],{"class":44},[34,10273,2484],{"class":40},[34,10275,540],{"class":40},[34,10277,646],{"class":72},[34,10279,518],{"class":40},[34,10281,4273],{"class":40},[34,10283,540],{"class":40},[34,10285,4278],{"class":72},[34,10287,518],{"class":40},[34,10289,4273],{"class":40},[34,10291,540],{"class":40},[34,10293,4287],{"class":72},[34,10295,546],{"class":40},[34,10297,10298,10300,10302,10304],{"class":36,"line":213},[34,10299,1099],{"class":44},[34,10301,537],{"class":40},[34,10303,2405],{"class":2152},[34,10305,5795],{"class":158},[34,10307,10308],{"class":36,"line":231},[34,10309,2187],{"class":40},[34,10311,10312],{"class":36,"line":236},[34,10313,192],{"emptyLinePlaceholder":191},[34,10315,10316,10318,10320],{"class":36,"line":243},[34,10317,2443],{"class":48},[34,10319,2446],{"class":158},[34,10321,2449],{"class":40},[34,10323,10324,10326,10328],{"class":36,"line":282},[34,10325,2454],{"class":48},[34,10327,2457],{"class":2152},[34,10329,443],{"class":40},[34,10331,10332,10334,10336,10338,10340,10342,10344,10346,10348,10350,10352,10354,10356],{"class":36,"line":287},[34,10333,2464],{"class":44},[34,10335,537],{"class":40},[34,10337,2469],{"class":40},[34,10339,2472],{"class":2138},[34,10341,537],{"class":40},[34,10343,2417],{"class":2152},[34,10345,526],{"class":40},[34,10347,2481],{"class":2138},[34,10349,2484],{"class":40},[34,10351,2487],{"class":2152},[34,10353,495],{"class":40},[34,10355,2492],{"class":48},[34,10357,5848],{"class":2152},[34,10359,10360],{"class":36,"line":322},[34,10361,2502],{"class":40},[34,10363,10364],{"class":36,"line":327},[34,10365,2187],{"class":40},[34,10367,10368],{"class":36,"line":333},[34,10369,192],{"emptyLinePlaceholder":191},[34,10371,10372,10374,10376,10378,10380],{"class":36,"line":341},[34,10373,2124],{"class":2099},[34,10375,438],{"class":48},[34,10377,4379],{"class":302},[34,10379,306],{"class":40},[34,10381,443],{"class":40},[34,10383,10384,10386,10388,10390,10392,10394,10396,10398,10400,10402],{"class":36,"line":357},[34,10385,2547],{"class":48},[34,10387,4390],{"class":158},[34,10389,465],{"class":40},[34,10391,2469],{"class":40},[34,10393,4397],{"class":2138},[34,10395,537],{"class":40},[34,10397,4246],{"class":2152},[34,10399,495],{"class":40},[34,10401,2492],{"class":48},[34,10403,443],{"class":40},[34,10405,10406,10408,10410,10412,10414,10416,10418,10420,10422,10424],{"class":36,"line":372},[34,10407,417],{"class":158},[34,10409,420],{"class":40},[34,10411,457],{"class":302},[34,10413,489],{"class":44},[34,10415,518],{"class":40},[34,10417,610],{"class":72},[34,10419,518],{"class":40},[34,10421,526],{"class":40},[34,10423,2481],{"class":158},[34,10425,3396],{"class":44},[34,10427,10428],{"class":36,"line":383},[34,10429,2502],{"class":40},[34,10431,10432],{"class":36,"line":388},[34,10433,192],{"emptyLinePlaceholder":191},[34,10435,10436,10438,10440,10442,10444,10446],{"class":36,"line":394},[34,10437,2547],{"class":48},[34,10439,4446],{"class":158},[34,10441,465],{"class":40},[34,10443,2555],{"class":40},[34,10445,2492],{"class":48},[34,10447,443],{"class":40},[34,10449,10450,10452,10454,10456,10458,10460,10462,10464],{"class":36,"line":414},[34,10451,417],{"class":158},[34,10453,420],{"class":40},[34,10455,457],{"class":302},[34,10457,489],{"class":44},[34,10459,518],{"class":40},[34,10461,4469],{"class":72},[34,10463,518],{"class":40},[34,10465,3396],{"class":44},[34,10467,10468],{"class":36,"line":446},[34,10469,2502],{"class":40},[34,10471,10472],{"class":36,"line":501},[34,10473,192],{"emptyLinePlaceholder":191},[34,10475,10476,10478,10480,10482,10484,10486],{"class":36,"line":507},[34,10477,2168],{"class":2099},[34,10479,2145],{"class":40},[34,10481,4390],{"class":158},[34,10483,526],{"class":40},[34,10485,4446],{"class":158},[34,10487,5979],{"class":40},[34,10489,10490],{"class":36,"line":531},[34,10491,2187],{"class":40},[19,10493,10495],{"id":10494},"_3-создайте-компонент-виджета","3. Создайте компонент виджета",[24,10497,10499],{"className":3096,"code":10498,"language":3098,"meta":29,"style":29},"\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",[31,10500,10501,10505,10513,10521,10527,10539,10551,10555,10581,10589,10597,10601,10621,10645,10649,10661,10669,10677,10683,10687,10703,10707,10721,10729,10743,10757,10765,10769,10783,10797,10801,10807,10813,10817],{"__ignoreMap":29},[34,10502,10503],{"class":36,"line":37},[34,10504,3620],{"class":239},[34,10506,10507,10509,10511],{"class":36,"line":55},[34,10508,58],{"class":40},[34,10510,3112],{"class":44},[34,10512,52],{"class":40},[34,10514,10515,10517,10519],{"class":36,"line":80},[34,10516,93],{"class":40},[34,10518,248],{"class":44},[34,10520,52],{"class":40},[34,10522,10523,10525],{"class":36,"line":90},[34,10524,2870],{"class":40},[34,10526,4648],{"class":44},[34,10528,10529,10531,10533,10535,10537],{"class":36,"line":114},[34,10530,3279],{"class":48},[34,10532,66],{"class":40},[34,10534,69],{"class":40},[34,10536,258],{"class":72},[34,10538,354],{"class":40},[34,10540,10541,10543,10545,10547,10549],{"class":36,"line":147},[34,10542,6035],{"class":48},[34,10544,66],{"class":40},[34,10546,69],{"class":40},[34,10548,6042],{"class":72},[34,10550,354],{"class":40},[34,10552,10553],{"class":36,"line":169},[34,10554,6049],{"class":40},[34,10556,10557,10559,10561,10563,10565,10567,10569,10571,10573,10575,10577,10579],{"class":36,"line":178},[34,10558,2870],{"class":40},[34,10560,292],{"class":44},[34,10562,3675],{"class":48},[34,10564,66],{"class":40},[34,10566,69],{"class":40},[34,10568,3682],{"class":72},[34,10570,69],{"class":40},[34,10572,155],{"class":40},[34,10574,313],{"class":158},[34,10576,162],{"class":40},[34,10578,292],{"class":44},[34,10580,52],{"class":40},[34,10582,10583,10585,10587],{"class":36,"line":188},[34,10584,562],{"class":40},[34,10586,248],{"class":44},[34,10588,52],{"class":40},[34,10590,10591,10593,10595],{"class":36,"line":195},[34,10592,162],{"class":40},[34,10594,3112],{"class":44},[34,10596,52],{"class":40},[34,10598,10599],{"class":36,"line":213},[34,10600,192],{"emptyLinePlaceholder":191},[34,10602,10603,10605,10607,10609,10611,10613,10615,10617,10619],{"class":36,"line":231},[34,10604,58],{"class":40},[34,10606,378],{"class":44},[34,10608,3201],{"class":48},[34,10610,63],{"class":48},[34,10612,66],{"class":40},[34,10614,69],{"class":40},[34,10616,3210],{"class":72},[34,10618,69],{"class":40},[34,10620,52],{"class":40},[34,10622,10623,10625,10627,10629,10631,10633,10635,10637,10639,10641,10643],{"class":36,"line":236},[34,10624,2100],{"class":2099},[34,10626,2145],{"class":40},[34,10628,4379],{"class":158},[34,10630,526],{"class":40},[34,10632,6128],{"class":2099},[34,10634,2405],{"class":158},[34,10636,2768],{"class":40},[34,10638,2771],{"class":2099},[34,10640,540],{"class":40},[34,10642,6139],{"class":72},[34,10644,546],{"class":40},[34,10646,10647],{"class":36,"line":243},[34,10648,192],{"emptyLinePlaceholder":191},[34,10650,10651,10653,10655,10657,10659],{"class":36,"line":282},[34,10652,3739],{"class":48},[34,10654,3742],{"class":158},[34,10656,66],{"class":40},[34,10658,3747],{"class":302},[34,10660,3750],{"class":40},[34,10662,10663,10665,10667],{"class":36,"line":287},[34,10664,2412],{"class":44},[34,10666,537],{"class":40},[34,10668,3759],{"class":2152},[34,10670,10671,10673,10675],{"class":36,"line":322},[34,10672,3764],{"class":44},[34,10674,537],{"class":40},[34,10676,3759],{"class":2152},[34,10678,10679,10681],{"class":36,"line":327},[34,10680,2725],{"class":40},[34,10682,3775],{"class":158},[34,10684,10685],{"class":36,"line":333},[34,10686,192],{"emptyLinePlaceholder":191},[34,10688,10689,10691,10693,10695,10697,10699,10701],{"class":36,"line":341},[34,10690,3739],{"class":48},[34,10692,2145],{"class":40},[34,10694,6192],{"class":158},[34,10696,908],{"class":40},[34,10698,465],{"class":40},[34,10700,4379],{"class":302},[34,10702,3775],{"class":158},[34,10704,10705],{"class":36,"line":357},[34,10706,192],{"emptyLinePlaceholder":191},[34,10708,10709,10711,10713,10715,10717,10719],{"class":36,"line":372},[34,10710,3739],{"class":48},[34,10712,3786],{"class":158},[34,10714,66],{"class":40},[34,10716,2555],{"class":40},[34,10718,2492],{"class":48},[34,10720,443],{"class":40},[34,10722,10723,10725,10727],{"class":36,"line":383},[34,10724,6223],{"class":302},[34,10726,489],{"class":44},[34,10728,2449],{"class":40},[34,10730,10731,10733,10735,10737,10739,10741],{"class":36,"line":388},[34,10732,3819],{"class":44},[34,10734,537],{"class":40},[34,10736,540],{"class":40},[34,10738,258],{"class":72},[34,10740,518],{"class":40},[34,10742,633],{"class":40},[34,10744,10745,10747,10749,10751,10753,10755],{"class":36,"line":394},[34,10746,3834],{"class":44},[34,10748,537],{"class":40},[34,10750,540],{"class":40},[34,10752,646],{"class":72},[34,10754,518],{"class":40},[34,10756,633],{"class":40},[34,10758,10759,10761,10763],{"class":36,"line":414},[34,10760,3849],{"class":44},[34,10762,537],{"class":40},[34,10764,661],{"class":44},[34,10766,10767],{"class":36,"line":446},[34,10768,3858],{"class":40},[34,10770,10771,10773,10775,10777,10779,10781],{"class":36,"line":501},[34,10772,3863],{"class":44},[34,10774,537],{"class":40},[34,10776,3868],{"class":158},[34,10778,420],{"class":40},[34,10780,1018],{"class":158},[34,10782,633],{"class":40},[34,10784,10785,10787,10789,10791,10793,10795],{"class":36,"line":507},[34,10786,3879],{"class":44},[34,10788,537],{"class":40},[34,10790,3868],{"class":158},[34,10792,420],{"class":40},[34,10794,3888],{"class":158},[34,10796,633],{"class":40},[34,10798,10799],{"class":36,"line":531},[34,10800,3895],{"class":40},[34,10802,10803,10805],{"class":36,"line":549},[34,10804,3900],{"class":44},[34,10806,633],{"class":40},[34,10808,10809,10811],{"class":36,"line":559},[34,10810,1736],{"class":40},[34,10812,3396],{"class":44},[34,10814,10815],{"class":36,"line":569},[34,10816,2187],{"class":40},[34,10818,10819,10821,10823],{"class":36,"line":574},[34,10820,162],{"class":40},[34,10822,378],{"class":44},[34,10824,52],{"class":40},[785,10826,6326],{},{"title":29,"searchDepth":55,"depth":55,"links":10828},[10829,10830,10831],{"id":8559,"depth":55,"text":8560},{"id":10198,"depth":55,"text":10199},{"id":10494,"depth":55,"text":10495},"Интеграция с Vue 3 приложением",{},"\u002Fintegrations\u002Fvue",{"title":5486,"description":10832},"integrations\u002Fvue","940Q7exH9C3y9bXr_sW6skJzNNxxGlNzOBpnASqYjFU",1779283220737]