[{"data":1,"prerenderedAt":11061},["ShallowReactive",2],{"\u002Fintegrations\u002Freact":3,"all-pages-\u002Fintegrations\u002Freact":1059},{"id":4,"title":5,"body":6,"description":1051,"extension":1052,"icon":1053,"meta":1054,"navigation":366,"path":1055,"seo":1056,"stem":1057,"__hash__":1058},"content\u002Fintegrations\u002Freact.md","React",{"type":7,"value":8,"toc":1046},"minimark",[9,14,18,23,31,285,295,299,674,678,1042],[10,11,13],"h1",{"id":12},"интеграция-с-react","Интеграция с React",[15,16,17],"p",{},"Работает с любым React-окружением — Vite, Create React App или своим решением.",[19,20,22],"h2",{"id":21},"_1-загрузка-скрипта-виджета","1. Загрузка скрипта виджета",[15,24,25,26,30],{},"Добавьте скрипт в ваш ",[27,28,29],"code",{},"index.html",":",[32,33,38],"pre",{"className":34,"code":35,"language":36,"meta":37,"style":37},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\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","html","",[27,39,40,49,60,80,95,107,128,162,218,224,248,265,275],{"__ignoreMap":37},[41,42,45],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sHwdD","\u003C!-- В public\u002Findex.html или index.html (Vite) -->\n",[41,50,52,56],{"class":43,"line":51},2,[41,53,55],{"class":54},"sMK4o","\u003C",[41,57,59],{"class":58},"swJcz","script\n",[41,61,63,67,70,73,77],{"class":43,"line":62},3,[41,64,66],{"class":65},"spNyl","  src",[41,68,69],{"class":54},"=",[41,71,72],{"class":54},"\"",[41,74,76],{"class":75},"sfazB","https:\u002F\u002Fwidget.try-on.ru\u002Ffitting-widget-bundle.js",[41,78,79],{"class":54},"\"\n",[41,81,83,86,88,90,93],{"class":43,"line":82},4,[41,84,85],{"class":65},"  id",[41,87,69],{"class":54},[41,89,72],{"class":54},[41,91,92],{"class":75},"fitting-widget-bundle",[41,94,79],{"class":54},[41,96,98,101,104],{"class":43,"line":97},5,[41,99,100],{"class":54},">\u003C\u002F",[41,102,103],{"class":58},"script",[41,105,106],{"class":54},">\n",[41,108,110,112,114,117,119,121,124,126],{"class":43,"line":109},6,[41,111,55],{"class":54},[41,113,103],{"class":58},[41,115,116],{"class":65}," id",[41,118,69],{"class":54},[41,120,72],{"class":54},[41,122,123],{"class":75},"fitting-init",[41,125,72],{"class":54},[41,127,106],{"class":54},[41,129,131,135,138,141,143,146,148,150,153,156,159],{"class":43,"line":130},7,[41,132,134],{"class":133},"sTEyZ","  window",[41,136,137],{"class":54},".",[41,139,140],{"class":133},"fitting ",[41,142,69],{"class":54},[41,144,145],{"class":133}," window",[41,147,137],{"class":54},[41,149,140],{"class":133},[41,151,152],{"class":54},"||",[41,154,155],{"class":65}," function",[41,157,158],{"class":54},"()",[41,160,161],{"class":54}," {\n",[41,163,165,168,171,173,176,178,181,184,186,188,190,192,194,197,200,202,206,209,212,215],{"class":43,"line":164},8,[41,166,167],{"class":58},"    (",[41,169,170],{"class":133},"window",[41,172,137],{"class":54},[41,174,175],{"class":133},"fitting",[41,177,137],{"class":54},[41,179,180],{"class":133},"q",[41,182,183],{"class":54}," =",[41,185,145],{"class":133},[41,187,137],{"class":54},[41,189,175],{"class":133},[41,191,137],{"class":54},[41,193,180],{"class":133},[41,195,196],{"class":54}," ||",[41,198,199],{"class":58}," [])",[41,201,137],{"class":54},[41,203,205],{"class":204},"s2Zo4","push",[41,207,208],{"class":58},"(",[41,210,211],{"class":133},"arguments",[41,213,214],{"class":58},")",[41,216,217],{"class":54},";\n",[41,219,221],{"class":43,"line":220},9,[41,222,223],{"class":54},"  };\n",[41,225,227,229,231,233,235,238,241,243,246],{"class":43,"line":226},10,[41,228,134],{"class":133},[41,230,137],{"class":54},[41,232,175],{"class":204},[41,234,208],{"class":133},[41,236,237],{"class":54},"'",[41,239,240],{"class":75},"init",[41,242,237],{"class":54},[41,244,245],{"class":54},",",[41,247,161],{"class":54},[41,249,251,254,256,259,262],{"class":43,"line":250},11,[41,252,253],{"class":58},"    apiKey",[41,255,30],{"class":54},[41,257,258],{"class":54}," '",[41,260,261],{"class":75},"%VITE_TRY_ON_API_KEY%",[41,263,264],{"class":54},"'\n",[41,266,268,271,273],{"class":43,"line":267},12,[41,269,270],{"class":54},"  }",[41,272,214],{"class":133},[41,274,217],{"class":54},[41,276,278,281,283],{"class":43,"line":277},13,[41,279,280],{"class":54},"\u003C\u002F",[41,282,103],{"class":58},[41,284,106],{"class":54},[286,287,289],"callout",{"icon":288},"i-lucide-lightbulb",[15,290,291,292,294],{},"Замените ",[27,293,261],{}," на ваш реальный ключ во время сборки, или используйте инъекцию во время выполнения.",[19,296,298],{"id":297},"_2-создайте-свой-хук","2. Создайте свой хук",[32,300,304],{"className":301,"code":302,"language":303,"meta":37,"style":37},"language-tsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\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","tsx",[27,305,306,311,322,334,345,357,362,368,377,388,423,437,441,445,457,468,507,513,518,523,539,565,592,597,602,619,641,646,651,669],{"__ignoreMap":37},[41,307,308],{"class":43,"line":44},[41,309,310],{"class":47},"\u002F\u002F hooks\u002FuseFittingWidget.ts\n",[41,312,313,316,320],{"class":43,"line":51},[41,314,315],{"class":65},"interface",[41,317,319],{"class":318},"sBMFI"," TryonItem",[41,321,161],{"class":54},[41,323,324,327,329,332],{"class":43,"line":62},[41,325,326],{"class":58},"  productName",[41,328,30],{"class":54},[41,330,331],{"class":318}," string",[41,333,217],{"class":54},[41,335,336,339,341,343],{"class":43,"line":82},[41,337,338],{"class":58},"  url",[41,340,30],{"class":54},[41,342,331],{"class":318},[41,344,217],{"class":54},[41,346,347,350,353,355],{"class":43,"line":97},[41,348,349],{"class":58},"  productId",[41,351,352],{"class":54},"?:",[41,354,331],{"class":318},[41,356,217],{"class":54},[41,358,359],{"class":43,"line":109},[41,360,361],{"class":54},"}\n",[41,363,364],{"class":43,"line":130},[41,365,367],{"emptyLinePlaceholder":366},true,"\n",[41,369,370,372,375],{"class":43,"line":164},[41,371,315],{"class":65},[41,373,374],{"class":318}," CreateOptions",[41,376,161],{"class":54},[41,378,379,382,384,386],{"class":43,"line":220},[41,380,381],{"class":58},"  targetElementId",[41,383,30],{"class":54},[41,385,331],{"class":318},[41,387,217],{"class":54},[41,389,390,393,395,397,400,402,405,407,410,412,414,416,419,421],{"class":43,"line":226},[41,391,392],{"class":58},"  model",[41,394,352],{"class":54},[41,396,258],{"class":54},[41,398,399],{"class":75},"balanced",[41,401,237],{"class":54},[41,403,404],{"class":54}," |",[41,406,258],{"class":54},[41,408,409],{"class":75},"quality",[41,411,237],{"class":54},[41,413,404],{"class":54},[41,415,258],{"class":54},[41,417,418],{"class":75},"speed",[41,420,237],{"class":54},[41,422,217],{"class":54},[41,424,425,428,430,432,435],{"class":43,"line":250},[41,426,427],{"class":58},"  tryonItems",[41,429,30],{"class":54},[41,431,319],{"class":318},[41,433,434],{"class":133},"[]",[41,436,217],{"class":54},[41,438,439],{"class":43,"line":267},[41,440,361],{"class":54},[41,442,443],{"class":43,"line":277},[41,444,367],{"emptyLinePlaceholder":366},[41,446,448,451,454],{"class":43,"line":447},14,[41,449,450],{"class":65},"declare",[41,452,453],{"class":133}," global ",[41,455,456],{"class":54},"{\n",[41,458,460,463,466],{"class":43,"line":459},15,[41,461,462],{"class":65},"  interface",[41,464,465],{"class":318}," Window",[41,467,161],{"class":54},[41,469,471,474,476,479,483,485,487,489,492,494,497,499,502,505],{"class":43,"line":470},16,[41,472,473],{"class":58},"    fitting",[41,475,30],{"class":54},[41,477,478],{"class":54}," (",[41,480,482],{"class":481},"sHdIc","command",[41,484,30],{"class":54},[41,486,331],{"class":318},[41,488,245],{"class":54},[41,490,491],{"class":481}," options",[41,493,352],{"class":54},[41,495,496],{"class":318}," unknown",[41,498,214],{"class":54},[41,500,501],{"class":65}," =>",[41,503,504],{"class":318}," void",[41,506,217],{"class":54},[41,508,510],{"class":43,"line":509},17,[41,511,512],{"class":54},"  }\n",[41,514,516],{"class":43,"line":515},18,[41,517,361],{"class":54},[41,519,521],{"class":43,"line":520},19,[41,522,367],{"emptyLinePlaceholder":366},[41,524,526,530,532,535,537],{"class":43,"line":525},20,[41,527,529],{"class":528},"s7zQu","export",[41,531,155],{"class":65},[41,533,534],{"class":204}," useFittingWidget",[41,536,158],{"class":54},[41,538,161],{"class":54},[41,540,542,545,548,550,552,555,557,559,561,563],{"class":43,"line":541},21,[41,543,544],{"class":65},"  const",[41,546,547],{"class":133}," open",[41,549,183],{"class":54},[41,551,478],{"class":54},[41,553,554],{"class":481},"options",[41,556,30],{"class":54},[41,558,374],{"class":318},[41,560,214],{"class":54},[41,562,501],{"class":65},[41,564,161],{"class":54},[41,566,568,571,573,575,577,579,582,584,586,588,590],{"class":43,"line":567},22,[41,569,570],{"class":133},"    window",[41,572,137],{"class":54},[41,574,175],{"class":204},[41,576,208],{"class":58},[41,578,237],{"class":54},[41,580,581],{"class":75},"create",[41,583,237],{"class":54},[41,585,245],{"class":54},[41,587,491],{"class":133},[41,589,214],{"class":58},[41,591,217],{"class":54},[41,593,595],{"class":43,"line":594},23,[41,596,223],{"class":54},[41,598,600],{"class":43,"line":599},24,[41,601,367],{"emptyLinePlaceholder":366},[41,603,605,607,610,612,615,617],{"class":43,"line":604},25,[41,606,544],{"class":65},[41,608,609],{"class":133}," close",[41,611,183],{"class":54},[41,613,614],{"class":54}," ()",[41,616,501],{"class":65},[41,618,161],{"class":54},[41,620,622,624,626,628,630,632,635,637,639],{"class":43,"line":621},26,[41,623,570],{"class":133},[41,625,137],{"class":54},[41,627,175],{"class":204},[41,629,208],{"class":58},[41,631,237],{"class":54},[41,633,634],{"class":75},"close",[41,636,237],{"class":54},[41,638,214],{"class":58},[41,640,217],{"class":54},[41,642,644],{"class":43,"line":643},27,[41,645,223],{"class":54},[41,647,649],{"class":43,"line":648},28,[41,650,367],{"emptyLinePlaceholder":366},[41,652,654,657,660,662,664,666],{"class":43,"line":653},29,[41,655,656],{"class":528},"  return",[41,658,659],{"class":54}," {",[41,661,547],{"class":133},[41,663,245],{"class":54},[41,665,609],{"class":133},[41,667,668],{"class":54}," };\n",[41,670,672],{"class":43,"line":671},30,[41,673,361],{"class":54},[19,675,677],{"id":676},"_3-использование-в-компоненте","3. Использование в компоненте",[32,679,681],{"className":301,"code":680,"language":303,"meta":37,"style":37},"\u002F\u002F components\u002FTryOnWidget.tsx\nimport { useFittingWidget } from '..\u002Fhooks\u002FuseFittingWidget';\n\ninterface Props {\n  productName: string;\n  imageUrl: string;\n}\n\nexport function TryOnWidget({ productName, imageUrl }: Props) {\n  const { open } = useFittingWidget();\n\n  return (\n    \u003Cdiv>\n      \u003Cdiv\n        id=\"widget-container\"\n        style={{ width: '100%', maxWidth: 600, aspectRatio: '3\u002F4' }}\n      \u002F>\n      \u003Cbutton\n        onClick={() =>\n          open({\n            targetElementId: 'widget-container',\n            model: 'balanced',\n            tryonItems: [{ productName, url: imageUrl }],\n          })\n        }\n      >\n        Примерка\n      \u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  );\n}\n",[27,682,683,688,712,716,725,735,746,750,754,783,801,805,812,822,830,844,892,897,904,915,924,940,955,988,996,1001,1006,1011,1021,1030,1037],{"__ignoreMap":37},[41,684,685],{"class":43,"line":44},[41,686,687],{"class":47},"\u002F\u002F components\u002FTryOnWidget.tsx\n",[41,689,690,693,695,697,700,703,705,708,710],{"class":43,"line":51},[41,691,692],{"class":528},"import",[41,694,659],{"class":54},[41,696,534],{"class":133},[41,698,699],{"class":54}," }",[41,701,702],{"class":528}," from",[41,704,258],{"class":54},[41,706,707],{"class":75},"..\u002Fhooks\u002FuseFittingWidget",[41,709,237],{"class":54},[41,711,217],{"class":54},[41,713,714],{"class":43,"line":62},[41,715,367],{"emptyLinePlaceholder":366},[41,717,718,720,723],{"class":43,"line":82},[41,719,315],{"class":65},[41,721,722],{"class":318}," Props",[41,724,161],{"class":54},[41,726,727,729,731,733],{"class":43,"line":97},[41,728,326],{"class":58},[41,730,30],{"class":54},[41,732,331],{"class":318},[41,734,217],{"class":54},[41,736,737,740,742,744],{"class":43,"line":109},[41,738,739],{"class":58},"  imageUrl",[41,741,30],{"class":54},[41,743,331],{"class":318},[41,745,217],{"class":54},[41,747,748],{"class":43,"line":130},[41,749,361],{"class":54},[41,751,752],{"class":43,"line":164},[41,753,367],{"emptyLinePlaceholder":366},[41,755,756,758,760,763,766,769,771,774,777,779,781],{"class":43,"line":220},[41,757,529],{"class":528},[41,759,155],{"class":65},[41,761,762],{"class":204}," TryOnWidget",[41,764,765],{"class":54},"({",[41,767,768],{"class":481}," productName",[41,770,245],{"class":54},[41,772,773],{"class":481}," imageUrl",[41,775,776],{"class":54}," }:",[41,778,722],{"class":318},[41,780,214],{"class":54},[41,782,161],{"class":54},[41,784,785,787,789,791,793,795,797,799],{"class":43,"line":226},[41,786,544],{"class":65},[41,788,659],{"class":54},[41,790,547],{"class":133},[41,792,699],{"class":54},[41,794,183],{"class":54},[41,796,534],{"class":204},[41,798,158],{"class":58},[41,800,217],{"class":54},[41,802,803],{"class":43,"line":250},[41,804,367],{"emptyLinePlaceholder":366},[41,806,807,809],{"class":43,"line":267},[41,808,656],{"class":528},[41,810,811],{"class":58}," (\n",[41,813,814,817,820],{"class":43,"line":277},[41,815,816],{"class":54},"    \u003C",[41,818,819],{"class":58},"div",[41,821,106],{"class":54},[41,823,824,827],{"class":43,"line":447},[41,825,826],{"class":54},"      \u003C",[41,828,829],{"class":58},"div\n",[41,831,832,835,837,839,842],{"class":43,"line":459},[41,833,834],{"class":65},"        id",[41,836,69],{"class":54},[41,838,72],{"class":54},[41,840,841],{"class":75},"widget-container",[41,843,79],{"class":54},[41,845,846,849,852,855,857,859,862,864,866,869,871,875,877,880,882,884,887,889],{"class":43,"line":470},[41,847,848],{"class":65},"        style",[41,850,851],{"class":54},"={{",[41,853,854],{"class":58}," width",[41,856,30],{"class":54},[41,858,258],{"class":54},[41,860,861],{"class":75},"100%",[41,863,237],{"class":54},[41,865,245],{"class":54},[41,867,868],{"class":58}," maxWidth",[41,870,30],{"class":54},[41,872,874],{"class":873},"sbssI"," 600",[41,876,245],{"class":54},[41,878,879],{"class":58}," aspectRatio",[41,881,30],{"class":54},[41,883,258],{"class":54},[41,885,886],{"class":75},"3\u002F4",[41,888,237],{"class":54},[41,890,891],{"class":54}," }}\n",[41,893,894],{"class":43,"line":509},[41,895,896],{"class":54},"      \u002F>\n",[41,898,899,901],{"class":43,"line":515},[41,900,826],{"class":54},[41,902,903],{"class":58},"button\n",[41,905,906,909,912],{"class":43,"line":520},[41,907,908],{"class":65},"        onClick",[41,910,911],{"class":54},"={()",[41,913,914],{"class":65}," =>\n",[41,916,917,920,922],{"class":43,"line":525},[41,918,919],{"class":204},"          open",[41,921,208],{"class":133},[41,923,456],{"class":54},[41,925,926,929,931,933,935,937],{"class":43,"line":541},[41,927,928],{"class":58},"            targetElementId",[41,930,30],{"class":54},[41,932,258],{"class":54},[41,934,841],{"class":75},[41,936,237],{"class":54},[41,938,939],{"class":54},",\n",[41,941,942,945,947,949,951,953],{"class":43,"line":567},[41,943,944],{"class":58},"            model",[41,946,30],{"class":54},[41,948,258],{"class":54},[41,950,399],{"class":75},[41,952,237],{"class":54},[41,954,939],{"class":54},[41,956,957,960,962,965,968,970,972,975,977,980,983,986],{"class":43,"line":594},[41,958,959],{"class":58},"            tryonItems",[41,961,30],{"class":54},[41,963,964],{"class":133}," [",[41,966,967],{"class":54},"{",[41,969,768],{"class":133},[41,971,245],{"class":54},[41,973,974],{"class":58}," url",[41,976,30],{"class":54},[41,978,979],{"class":133}," imageUrl ",[41,981,982],{"class":54},"}",[41,984,985],{"class":133},"]",[41,987,939],{"class":54},[41,989,990,993],{"class":43,"line":599},[41,991,992],{"class":54},"          }",[41,994,995],{"class":133},")\n",[41,997,998],{"class":43,"line":604},[41,999,1000],{"class":54},"        }\n",[41,1002,1003],{"class":43,"line":621},[41,1004,1005],{"class":54},"      >\n",[41,1007,1008],{"class":43,"line":643},[41,1009,1010],{"class":133},"        Примерка\n",[41,1012,1013,1016,1019],{"class":43,"line":648},[41,1014,1015],{"class":54},"      \u003C\u002F",[41,1017,1018],{"class":58},"button",[41,1020,106],{"class":54},[41,1022,1023,1026,1028],{"class":43,"line":653},[41,1024,1025],{"class":54},"    \u003C\u002F",[41,1027,819],{"class":58},[41,1029,106],{"class":54},[41,1031,1032,1035],{"class":43,"line":671},[41,1033,1034],{"class":58},"  )",[41,1036,217],{"class":54},[41,1038,1040],{"class":43,"line":1039},31,[41,1041,361],{"class":54},[1043,1044,1045],"style",{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .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":37,"searchDepth":51,"depth":51,"links":1047},[1048,1049,1050],{"id":21,"depth":51,"text":22},{"id":297,"depth":51,"text":298},{"id":676,"depth":51,"text":677},"Интеграция с React-приложением (Vite \u002F CRA)","md","i-lucide-react",{},"\u002Fintegrations\u002Freact",{"title":5,"description":1051},"integrations\u002Freact","F7mSDoVd1RiVLbrCGyquPOzGkvCalo0IeQdlhW6YYUs",[1060,1434,1770,2207,2298,3271,4175,5024,5704,6559,6976,7063,7946,8767,9595,10223],{"id":1061,"title":1062,"body":1063,"description":1427,"extension":1052,"icon":1428,"meta":1429,"navigation":366,"path":1430,"seo":1431,"stem":1432,"__hash__":1433},"content\u002Fapi\u002Findex.md","Справочник API",{"type":7,"value":1064,"toc":1421},[1065,1068,1072,1075,1120,1171,1174,1178,1181,1251,1256,1299,1418],[10,1066,1062],{"id":1067},"справочник-api",[19,1069,1071],{"id":1070},"windowfittinginit-options","window.fitting('init', options)",[15,1073,1074],{},"Инициализирует виджет. Вызывается один раз, до всех остальных методов.",[1076,1077,1078,1098],"table",{},[1079,1080,1081],"thead",{},[1082,1083,1084,1088,1091,1095],"tr",{},[1085,1086,1087],"th",{},"Параметр",[1085,1089,1090],{},"Тип",[1085,1092,1094],{"align":1093},"center","Обязателен",[1085,1096,1097],{},"Описание",[1099,1100,1101],"tbody",{},[1082,1102,1103,1109,1114,1117],{},[1104,1105,1106],"td",{},[27,1107,1108],{},"apiKey",[1104,1110,1111],{},[27,1112,1113],{},"string",[1104,1115,1116],{"align":1093},"Да",[1104,1118,1119],{},"Ваш API-ключ виджета",[32,1121,1125],{"className":1122,"code":1123,"language":1124,"meta":37,"style":37},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","window.fitting('init', {\n  apiKey: 'pk_live_xxx',\n});\n","js",[27,1126,1127,1147,1163],{"__ignoreMap":37},[41,1128,1129,1131,1133,1135,1137,1139,1141,1143,1145],{"class":43,"line":44},[41,1130,170],{"class":133},[41,1132,137],{"class":54},[41,1134,175],{"class":204},[41,1136,208],{"class":133},[41,1138,237],{"class":54},[41,1140,240],{"class":75},[41,1142,237],{"class":54},[41,1144,245],{"class":54},[41,1146,161],{"class":54},[41,1148,1149,1152,1154,1156,1159,1161],{"class":43,"line":51},[41,1150,1151],{"class":58},"  apiKey",[41,1153,30],{"class":54},[41,1155,258],{"class":54},[41,1157,1158],{"class":75},"pk_live_xxx",[41,1160,237],{"class":54},[41,1162,939],{"class":54},[41,1164,1165,1167,1169],{"class":43,"line":62},[41,1166,982],{"class":54},[41,1168,214],{"class":133},[41,1170,217],{"class":54},[1172,1173],"hr",{},[19,1175,1177],{"id":1176},"windowfittingcreate-options","window.fitting('create', options)",[15,1179,1180],{},"Запускает виртуальную примерку.",[1076,1182,1183,1195],{},[1079,1184,1185],{},[1082,1186,1187,1189,1191,1193],{},[1085,1188,1087],{},[1085,1190,1090],{},[1085,1192,1094],{"align":1093},[1085,1194,1097],{},[1099,1196,1197,1213,1230],{},[1082,1198,1199,1204,1208,1210],{},[1104,1200,1201],{},[27,1202,1203],{},"targetElementId",[1104,1205,1206],{},[27,1207,1113],{},[1104,1209,1116],{"align":1093},[1104,1211,1212],{},"ID контейнера, в котором отображается виджет",[1082,1214,1215,1220,1225,1227],{},[1104,1216,1217],{},[27,1218,1219],{},"tryonItems",[1104,1221,1222],{},[27,1223,1224],{},"TryonItem[]",[1104,1226,1116],{"align":1093},[1104,1228,1229],{},"Массив товаров, доступных для примерки",[1082,1231,1232,1237,1242,1245],{},[1104,1233,1234],{},[27,1235,1236],{},"model",[1104,1238,1239],{},[27,1240,1241],{},"'balanced' | 'quality' | 'performance'",[1104,1243,1244],{"align":1093},"Нет",[1104,1246,1247,1248,214],{},"Режим отрисовки (по умолчанию: ",[27,1249,1250],{},"'balanced'",[1252,1253,1255],"h3",{"id":1254},"tryonitem","TryonItem",[1076,1257,1258,1269],{},[1079,1259,1260],{},[1082,1261,1262,1265,1267],{},[1085,1263,1264],{},"Поле",[1085,1266,1090],{},[1085,1268,1097],{},[1099,1270,1271,1285],{},[1082,1272,1273,1278,1282],{},[1104,1274,1275],{},[27,1276,1277],{},"productName",[1104,1279,1280],{},[27,1281,1113],{},[1104,1283,1284],{},"Отображаемое название товара",[1082,1286,1287,1292,1296],{},[1104,1288,1289],{},[27,1290,1291],{},"url",[1104,1293,1294],{},[27,1295,1113],{},[1104,1297,1298],{},"Полный URL изображения товара",[32,1300,1302],{"className":1122,"code":1301,"language":1124,"meta":37,"style":37},"window.fitting('create', {\n  targetElementId: 'widget-container',\n  model: 'balanced',\n  tryonItems: [\n    {\n      productName: 'Джинсовая куртка',\n      url: 'https:\u002F\u002Fexample.com\u002Fjacket.png',\n    },\n  ],\n});\n",[27,1303,1304,1324,1338,1352,1361,1366,1382,1398,1403,1410],{"__ignoreMap":37},[41,1305,1306,1308,1310,1312,1314,1316,1318,1320,1322],{"class":43,"line":44},[41,1307,170],{"class":133},[41,1309,137],{"class":54},[41,1311,175],{"class":204},[41,1313,208],{"class":133},[41,1315,237],{"class":54},[41,1317,581],{"class":75},[41,1319,237],{"class":54},[41,1321,245],{"class":54},[41,1323,161],{"class":54},[41,1325,1326,1328,1330,1332,1334,1336],{"class":43,"line":51},[41,1327,381],{"class":58},[41,1329,30],{"class":54},[41,1331,258],{"class":54},[41,1333,841],{"class":75},[41,1335,237],{"class":54},[41,1337,939],{"class":54},[41,1339,1340,1342,1344,1346,1348,1350],{"class":43,"line":62},[41,1341,392],{"class":58},[41,1343,30],{"class":54},[41,1345,258],{"class":54},[41,1347,399],{"class":75},[41,1349,237],{"class":54},[41,1351,939],{"class":54},[41,1353,1354,1356,1358],{"class":43,"line":82},[41,1355,427],{"class":58},[41,1357,30],{"class":54},[41,1359,1360],{"class":133}," [\n",[41,1362,1363],{"class":43,"line":97},[41,1364,1365],{"class":54},"    {\n",[41,1367,1368,1371,1373,1375,1378,1380],{"class":43,"line":109},[41,1369,1370],{"class":58},"      productName",[41,1372,30],{"class":54},[41,1374,258],{"class":54},[41,1376,1377],{"class":75},"Джинсовая куртка",[41,1379,237],{"class":54},[41,1381,939],{"class":54},[41,1383,1384,1387,1389,1391,1394,1396],{"class":43,"line":130},[41,1385,1386],{"class":58},"      url",[41,1388,30],{"class":54},[41,1390,258],{"class":54},[41,1392,1393],{"class":75},"https:\u002F\u002Fexample.com\u002Fjacket.png",[41,1395,237],{"class":54},[41,1397,939],{"class":54},[41,1399,1400],{"class":43,"line":164},[41,1401,1402],{"class":54},"    },\n",[41,1404,1405,1408],{"class":43,"line":220},[41,1406,1407],{"class":133},"  ]",[41,1409,939],{"class":54},[41,1411,1412,1414,1416],{"class":43,"line":226},[41,1413,982],{"class":54},[41,1415,214],{"class":133},[41,1417,217],{"class":54},[1043,1419,1420],{},"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":37,"searchDepth":51,"depth":51,"links":1422},[1423,1424],{"id":1070,"depth":51,"text":1071},{"id":1176,"depth":51,"text":1177,"children":1425},[1426],{"id":1254,"depth":62,"text":1255},"Полный справочник по API Fitting Widget","i-lucide-code",{},"\u002Fapi",{"title":1062,"description":1427},"api\u002Findex","nBz9Z0BX1B-BPJzD-HVF5oHrejoQd0__hLi-_PGCmvk",{"id":1435,"title":1436,"body":1437,"description":1764,"extension":1052,"icon":1428,"meta":1765,"navigation":366,"path":1766,"seo":1767,"stem":1768,"__hash__":1769},"content\u002Fen\u002Fapi\u002Findex.md","API Reference",{"type":7,"value":1438,"toc":1758},[1439,1442,1444,1447,1483,1529,1531,1533,1536,1601,1603,1644,1756],[10,1440,1436],{"id":1441},"api-reference",[19,1443,1071],{"id":1070},[15,1445,1446],{},"Initializes the widget. Call this once, before any other methods.",[1076,1448,1449,1465],{},[1079,1450,1451],{},[1082,1452,1453,1456,1459,1462],{},[1085,1454,1455],{},"Parameter",[1085,1457,1458],{},"Type",[1085,1460,1461],{"align":1093},"Required",[1085,1463,1464],{},"Description",[1099,1466,1467],{},[1082,1468,1469,1473,1477,1480],{},[1104,1470,1471],{},[27,1472,1108],{},[1104,1474,1475],{},[27,1476,1113],{},[1104,1478,1479],{"align":1093},"Yes",[1104,1481,1482],{},"Your widget API key",[32,1484,1485],{"className":1122,"code":1123,"language":1124,"meta":37,"style":37},[27,1486,1487,1507,1521],{"__ignoreMap":37},[41,1488,1489,1491,1493,1495,1497,1499,1501,1503,1505],{"class":43,"line":44},[41,1490,170],{"class":133},[41,1492,137],{"class":54},[41,1494,175],{"class":204},[41,1496,208],{"class":133},[41,1498,237],{"class":54},[41,1500,240],{"class":75},[41,1502,237],{"class":54},[41,1504,245],{"class":54},[41,1506,161],{"class":54},[41,1508,1509,1511,1513,1515,1517,1519],{"class":43,"line":51},[41,1510,1151],{"class":58},[41,1512,30],{"class":54},[41,1514,258],{"class":54},[41,1516,1158],{"class":75},[41,1518,237],{"class":54},[41,1520,939],{"class":54},[41,1522,1523,1525,1527],{"class":43,"line":62},[41,1524,982],{"class":54},[41,1526,214],{"class":133},[41,1528,217],{"class":54},[1172,1530],{},[19,1532,1177],{"id":1176},[15,1534,1535],{},"Opens the virtual try-on experience.",[1076,1537,1538,1550],{},[1079,1539,1540],{},[1082,1541,1542,1544,1546,1548],{},[1085,1543,1455],{},[1085,1545,1458],{},[1085,1547,1461],{"align":1093},[1085,1549,1464],{},[1099,1551,1552,1567,1582],{},[1082,1553,1554,1558,1562,1564],{},[1104,1555,1556],{},[27,1557,1203],{},[1104,1559,1560],{},[27,1561,1113],{},[1104,1563,1479],{"align":1093},[1104,1565,1566],{},"ID of the container element where the widget renders",[1082,1568,1569,1573,1577,1579],{},[1104,1570,1571],{},[27,1572,1219],{},[1104,1574,1575],{},[27,1576,1224],{},[1104,1578,1479],{"align":1093},[1104,1580,1581],{},"Array of items available for try-on",[1082,1583,1584,1588,1593,1596],{},[1104,1585,1586],{},[27,1587,1236],{},[1104,1589,1590],{},[27,1591,1592],{},"'balanced' | 'quality' | 'speed'",[1104,1594,1595],{"align":1093},"No",[1104,1597,1598,1599,214],{},"Rendering model (default: ",[27,1600,1250],{},[1252,1602,1255],{"id":1254},[1076,1604,1605,1616],{},[1079,1606,1607],{},[1082,1608,1609,1612,1614],{},[1085,1610,1611],{},"Field",[1085,1613,1458],{},[1085,1615,1464],{},[1099,1617,1618,1631],{},[1082,1619,1620,1624,1628],{},[1104,1621,1622],{},[27,1623,1277],{},[1104,1625,1626],{},[27,1627,1113],{},[1104,1629,1630],{},"Display name of the garment",[1082,1632,1633,1637,1641],{},[1104,1634,1635],{},[27,1636,1291],{},[1104,1638,1639],{},[27,1640,1113],{},[1104,1642,1643],{},"Full URL to the garment image",[32,1645,1647],{"className":1122,"code":1646,"language":1124,"meta":37,"style":37},"window.fitting('create', {\n  targetElementId: 'widget-container',\n  model: 'balanced',\n  tryonItems: [\n    {\n      productName: 'Denim Jacket',\n      url: 'https:\u002F\u002Fexample.com\u002Fjacket.png',\n    },\n  ],\n});\n",[27,1648,1649,1669,1683,1697,1705,1709,1724,1738,1742,1748],{"__ignoreMap":37},[41,1650,1651,1653,1655,1657,1659,1661,1663,1665,1667],{"class":43,"line":44},[41,1652,170],{"class":133},[41,1654,137],{"class":54},[41,1656,175],{"class":204},[41,1658,208],{"class":133},[41,1660,237],{"class":54},[41,1662,581],{"class":75},[41,1664,237],{"class":54},[41,1666,245],{"class":54},[41,1668,161],{"class":54},[41,1670,1671,1673,1675,1677,1679,1681],{"class":43,"line":51},[41,1672,381],{"class":58},[41,1674,30],{"class":54},[41,1676,258],{"class":54},[41,1678,841],{"class":75},[41,1680,237],{"class":54},[41,1682,939],{"class":54},[41,1684,1685,1687,1689,1691,1693,1695],{"class":43,"line":62},[41,1686,392],{"class":58},[41,1688,30],{"class":54},[41,1690,258],{"class":54},[41,1692,399],{"class":75},[41,1694,237],{"class":54},[41,1696,939],{"class":54},[41,1698,1699,1701,1703],{"class":43,"line":82},[41,1700,427],{"class":58},[41,1702,30],{"class":54},[41,1704,1360],{"class":133},[41,1706,1707],{"class":43,"line":97},[41,1708,1365],{"class":54},[41,1710,1711,1713,1715,1717,1720,1722],{"class":43,"line":109},[41,1712,1370],{"class":58},[41,1714,30],{"class":54},[41,1716,258],{"class":54},[41,1718,1719],{"class":75},"Denim Jacket",[41,1721,237],{"class":54},[41,1723,939],{"class":54},[41,1725,1726,1728,1730,1732,1734,1736],{"class":43,"line":130},[41,1727,1386],{"class":58},[41,1729,30],{"class":54},[41,1731,258],{"class":54},[41,1733,1393],{"class":75},[41,1735,237],{"class":54},[41,1737,939],{"class":54},[41,1739,1740],{"class":43,"line":164},[41,1741,1402],{"class":54},[41,1743,1744,1746],{"class":43,"line":220},[41,1745,1407],{"class":133},[41,1747,939],{"class":54},[41,1749,1750,1752,1754],{"class":43,"line":226},[41,1751,982],{"class":54},[41,1753,214],{"class":133},[41,1755,217],{"class":54},[1043,1757,1420],{},{"title":37,"searchDepth":51,"depth":51,"links":1759},[1760,1761],{"id":1070,"depth":51,"text":1071},{"id":1176,"depth":51,"text":1177,"children":1762},[1763],{"id":1254,"depth":62,"text":1255},"Complete reference for the Fitting Widget API",{},"\u002Fen\u002Fapi",{"title":1436,"description":1764},"en\u002Fapi\u002Findex","5vrf4TtfB7Sr4MpfgLzStW-oF0xDBiShwkqA4UFzgA0",{"id":1771,"title":1772,"body":1773,"description":2200,"extension":1052,"icon":2201,"meta":2202,"navigation":366,"path":2203,"seo":2204,"stem":2205,"__hash__":2206},"content\u002Fen\u002Fgetting-started\u002Fquick-start.md","Quick Start",{"type":7,"value":1774,"toc":2191},[1775,1778,1781,1785,1796,1800,1811,1854,1858,2000,2004,2011,2038,2042,2048,2161,2165,2168,2172,2188],[10,1776,1772],{"id":1777},"quick-start",[15,1779,1780],{},"Follow these steps to add virtual try-on to your e-commerce site.",[19,1782,1784],{"id":1783},"_1-get-your-api-key","1. Get Your API Key",[15,1786,1787,1788,1795],{},"Sign up at ",[1789,1790,1794],"a",{"href":1791,"rel":1792},"https:\u002F\u002Fwidget.try-on.ru",[1793],"nofollow","widget.try-on.ru"," to obtain your free API key.",[19,1797,1799],{"id":1798},"_2-load-the-widget-script","2. Load the Widget Script",[15,1801,1802,1803,1806,1807,1810],{},"Add the following ",[27,1804,1805],{},"\u003Cscript>"," tag to your page, ideally right before the closing ",[27,1808,1809],{},"\u003C\u002Fbody>"," tag:",[32,1812,1814],{"className":34,"code":1813,"language":36,"meta":37,"style":37},"\u003Cscript\n  src=\"https:\u002F\u002Fwidget.try-on.ru\u002Ffitting-widget-bundle.js\"\n  id=\"fitting-widget-bundle\"\n>\u003C\u002Fscript>\n",[27,1815,1816,1822,1834,1846],{"__ignoreMap":37},[41,1817,1818,1820],{"class":43,"line":44},[41,1819,55],{"class":54},[41,1821,59],{"class":58},[41,1823,1824,1826,1828,1830,1832],{"class":43,"line":51},[41,1825,66],{"class":65},[41,1827,69],{"class":54},[41,1829,72],{"class":54},[41,1831,76],{"class":75},[41,1833,79],{"class":54},[41,1835,1836,1838,1840,1842,1844],{"class":43,"line":62},[41,1837,85],{"class":65},[41,1839,69],{"class":54},[41,1841,72],{"class":54},[41,1843,92],{"class":75},[41,1845,79],{"class":54},[41,1847,1848,1850,1852],{"class":43,"line":82},[41,1849,100],{"class":54},[41,1851,103],{"class":58},[41,1853,106],{"class":54},[19,1855,1857],{"id":1856},"_3-initialize-the-widget","3. Initialize the Widget",[32,1859,1861],{"className":34,"code":1860,"language":36,"meta":37,"style":37},"\u003Cscript id=\"fitting-init\">\n  window.fitting = window.fitting || function() {\n    (window.fitting.q = window.fitting.q || []).push(arguments);\n  };\n  window.fitting('init', {\n    apiKey: 'YOUR_API_KEY'\n  });\n\u003C\u002Fscript>\n",[27,1862,1863,1881,1905,1947,1951,1971,1984,1992],{"__ignoreMap":37},[41,1864,1865,1867,1869,1871,1873,1875,1877,1879],{"class":43,"line":44},[41,1866,55],{"class":54},[41,1868,103],{"class":58},[41,1870,116],{"class":65},[41,1872,69],{"class":54},[41,1874,72],{"class":54},[41,1876,123],{"class":75},[41,1878,72],{"class":54},[41,1880,106],{"class":54},[41,1882,1883,1885,1887,1889,1891,1893,1895,1897,1899,1901,1903],{"class":43,"line":51},[41,1884,134],{"class":133},[41,1886,137],{"class":54},[41,1888,140],{"class":133},[41,1890,69],{"class":54},[41,1892,145],{"class":133},[41,1894,137],{"class":54},[41,1896,140],{"class":133},[41,1898,152],{"class":54},[41,1900,155],{"class":65},[41,1902,158],{"class":54},[41,1904,161],{"class":54},[41,1906,1907,1909,1911,1913,1915,1917,1919,1921,1923,1925,1927,1929,1931,1933,1935,1937,1939,1941,1943,1945],{"class":43,"line":62},[41,1908,167],{"class":58},[41,1910,170],{"class":133},[41,1912,137],{"class":54},[41,1914,175],{"class":133},[41,1916,137],{"class":54},[41,1918,180],{"class":133},[41,1920,183],{"class":54},[41,1922,145],{"class":133},[41,1924,137],{"class":54},[41,1926,175],{"class":133},[41,1928,137],{"class":54},[41,1930,180],{"class":133},[41,1932,196],{"class":54},[41,1934,199],{"class":58},[41,1936,137],{"class":54},[41,1938,205],{"class":204},[41,1940,208],{"class":58},[41,1942,211],{"class":133},[41,1944,214],{"class":58},[41,1946,217],{"class":54},[41,1948,1949],{"class":43,"line":82},[41,1950,223],{"class":54},[41,1952,1953,1955,1957,1959,1961,1963,1965,1967,1969],{"class":43,"line":97},[41,1954,134],{"class":133},[41,1956,137],{"class":54},[41,1958,175],{"class":204},[41,1960,208],{"class":133},[41,1962,237],{"class":54},[41,1964,240],{"class":75},[41,1966,237],{"class":54},[41,1968,245],{"class":54},[41,1970,161],{"class":54},[41,1972,1973,1975,1977,1979,1982],{"class":43,"line":109},[41,1974,253],{"class":58},[41,1976,30],{"class":54},[41,1978,258],{"class":54},[41,1980,1981],{"class":75},"YOUR_API_KEY",[41,1983,264],{"class":54},[41,1985,1986,1988,1990],{"class":43,"line":130},[41,1987,270],{"class":54},[41,1989,214],{"class":133},[41,1991,217],{"class":54},[41,1993,1994,1996,1998],{"class":43,"line":164},[41,1995,280],{"class":54},[41,1997,103],{"class":58},[41,1999,106],{"class":54},[19,2001,2003],{"id":2002},"_4-add-a-container","4. Add a Container",[15,2005,2006,2007,2010],{},"Place a ",[27,2008,2009],{},"\u003Cdiv>"," wherever you want the widget to appear:",[32,2012,2014],{"className":34,"code":2013,"language":36,"meta":37,"style":37},"\u003Cdiv id=\"widget-container\">\u003C\u002Fdiv>\n",[27,2015,2016],{"__ignoreMap":37},[41,2017,2018,2020,2022,2024,2026,2028,2030,2032,2034,2036],{"class":43,"line":44},[41,2019,55],{"class":54},[41,2021,819],{"class":58},[41,2023,116],{"class":65},[41,2025,69],{"class":54},[41,2027,72],{"class":54},[41,2029,841],{"class":75},[41,2031,72],{"class":54},[41,2033,100],{"class":54},[41,2035,819],{"class":58},[41,2037,106],{"class":54},[19,2039,2041],{"id":2040},"_5-launch-the-widget","5. Launch the Widget",[15,2043,2044,2045,2047],{},"Call the ",[27,2046,581],{}," method when the user clicks a button:",[32,2049,2051],{"className":1122,"code":2050,"language":1124,"meta":37,"style":37},"window.fitting('create', {\n  targetElementId: 'widget-container',\n  model: 'balanced',\n  tryonItems: [\n    {\n      productName: 'Classic Denim Jacket',\n      url: 'https:\u002F\u002Fyour-store.com\u002Fimages\u002Fjacket.jpg',\n    },\n  ],\n});\n",[27,2052,2053,2073,2087,2101,2109,2113,2128,2143,2147,2153],{"__ignoreMap":37},[41,2054,2055,2057,2059,2061,2063,2065,2067,2069,2071],{"class":43,"line":44},[41,2056,170],{"class":133},[41,2058,137],{"class":54},[41,2060,175],{"class":204},[41,2062,208],{"class":133},[41,2064,237],{"class":54},[41,2066,581],{"class":75},[41,2068,237],{"class":54},[41,2070,245],{"class":54},[41,2072,161],{"class":54},[41,2074,2075,2077,2079,2081,2083,2085],{"class":43,"line":51},[41,2076,381],{"class":58},[41,2078,30],{"class":54},[41,2080,258],{"class":54},[41,2082,841],{"class":75},[41,2084,237],{"class":54},[41,2086,939],{"class":54},[41,2088,2089,2091,2093,2095,2097,2099],{"class":43,"line":62},[41,2090,392],{"class":58},[41,2092,30],{"class":54},[41,2094,258],{"class":54},[41,2096,399],{"class":75},[41,2098,237],{"class":54},[41,2100,939],{"class":54},[41,2102,2103,2105,2107],{"class":43,"line":82},[41,2104,427],{"class":58},[41,2106,30],{"class":54},[41,2108,1360],{"class":133},[41,2110,2111],{"class":43,"line":97},[41,2112,1365],{"class":54},[41,2114,2115,2117,2119,2121,2124,2126],{"class":43,"line":109},[41,2116,1370],{"class":58},[41,2118,30],{"class":54},[41,2120,258],{"class":54},[41,2122,2123],{"class":75},"Classic Denim Jacket",[41,2125,237],{"class":54},[41,2127,939],{"class":54},[41,2129,2130,2132,2134,2136,2139,2141],{"class":43,"line":130},[41,2131,1386],{"class":58},[41,2133,30],{"class":54},[41,2135,258],{"class":54},[41,2137,2138],{"class":75},"https:\u002F\u002Fyour-store.com\u002Fimages\u002Fjacket.jpg",[41,2140,237],{"class":54},[41,2142,939],{"class":54},[41,2144,2145],{"class":43,"line":164},[41,2146,1402],{"class":54},[41,2148,2149,2151],{"class":43,"line":220},[41,2150,1407],{"class":133},[41,2152,939],{"class":54},[41,2154,2155,2157,2159],{"class":43,"line":226},[41,2156,982],{"class":54},[41,2158,214],{"class":133},[41,2160,217],{"class":54},[19,2162,2164],{"id":2163},"result","Result",[15,2166,2167],{},"Your customers can now upload a photo and see the garment on them instantly.",[19,2169,2171],{"id":2170},"next-steps","Next Steps",[2173,2174,2175,2183],"ul",{},[2176,2177,2178,2179,137],"li",{},"See framework-specific guides under ",[1789,2180,2182],{"href":2181},"\u002Fintegrations\u002Fvanilla-js","Integrations",[2176,2184,2185,2186,137],{},"Explore the full ",[1789,2187,1436],{"href":1430},[1043,2189,2190],{},"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":37,"searchDepth":51,"depth":51,"links":2192},[2193,2194,2195,2196,2197,2198,2199],{"id":1783,"depth":51,"text":1784},{"id":1798,"depth":51,"text":1799},{"id":1856,"depth":51,"text":1857},{"id":2002,"depth":51,"text":2003},{"id":2040,"depth":51,"text":2041},{"id":2163,"depth":51,"text":2164},{"id":2170,"depth":51,"text":2171},"Get the Fitting Widget running in minutes","i-lucide-rocket",{},"\u002Fen\u002Fgetting-started\u002Fquick-start",{"title":1772,"description":2200},"en\u002Fgetting-started\u002Fquick-start","Cy6rzr6z6R2nhbEqOeB18fbbe2pOjXOk0inGXqhKfHg",{"id":2208,"title":2209,"body":2210,"description":2291,"extension":1052,"icon":2292,"meta":2293,"navigation":366,"path":2294,"seo":2295,"stem":2296,"__hash__":2297},"content\u002Fen\u002Findex.md","Introduction",{"type":7,"value":2211,"toc":2286},[2212,2216,2224,2228,2254,2258,2277,2279],[10,2213,2215],{"id":2214},"fitting-widget-virtual-try-on","Fitting Widget — Virtual Try-On",[15,2217,2218,2219,2223],{},"The ",[2220,2221,2222],"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,2225,2227],{"id":2226},"key-features","Key Features",[2173,2229,2230,2236,2242,2248],{},[2176,2231,2232,2235],{},[2220,2233,2234],{},"Quick Integration"," — Add one script tag and a few lines of code.",[2176,2237,2238,2241],{},[2220,2239,2240],{},"Framework-Agnostic"," — Works with Vanilla JS, React, Vue, Next.js, Nuxt, and more.",[2176,2243,2244,2247],{},[2220,2245,2246],{},"Customizable"," — Style the widget to match your brand.",[2176,2249,2250,2253],{},[2220,2251,2252],{},"Lightweight"," — Optimized loading; won't slow down your store.",[19,2255,2257],{"id":2256},"how-it-works","How It Works",[2259,2260,2261,2264,2267,2274],"ol",{},[2176,2262,2263],{},"Load the widget script on your page.",[2176,2265,2266],{},"Initialize with your API key.",[2176,2268,2269,2270,2273],{},"Call ",[27,2271,2272],{},"window.fitting('create', { ... })"," with product image URLs.",[2176,2275,2276],{},"The widget renders inside a container element of your choice.",[19,2278,1772],{"id":1777},[15,2280,2281,2282,2285],{},"Head over to the ",[1789,2283,1772],{"href":2284},"\u002Fgetting-started\u002Fquick-start"," guide to get up and running in under 5 minutes.",{"title":37,"searchDepth":51,"depth":51,"links":2287},[2288,2289,2290],{"id":2226,"depth":51,"text":2227},{"id":2256,"depth":51,"text":2257},{"id":1777,"depth":51,"text":1772},"What is the Fitting Widget and why use it?","i-lucide-sparkles",{},"\u002Fen",{"title":2209,"description":2291},"en\u002Findex","zjI3aBTZ8Y2iRdmkieXP4q0o6PKbIjE5hUkB6Y1ledA",{"id":2299,"title":2300,"body":2301,"description":3264,"extension":1052,"icon":3265,"meta":3266,"navigation":366,"path":3267,"seo":3268,"stem":3269,"__hash__":3270},"content\u002Fen\u002Fintegrations\u002Fnextjs.md","Next.js",{"type":7,"value":2302,"toc":3255},[2303,2307,2317,2321,2331,2342,2609,2613,2957,2961,3226,3230,3236,3252],[10,2304,2306],{"id":2305},"nextjs-integration","Next.js Integration",[15,2308,2309,2310,2313,2314,137],{},"The Fitting Widget works with both the ",[2220,2311,2312],{},"Pages Router"," and ",[2220,2315,2316],{},"App Router",[19,2318,2320],{"id":2319},"app-router-recommended","App Router (Recommended)",[15,2322,2323,2324,2327,2328,137],{},"Use the Next.js ",[27,2325,2326],{},"Script"," component with ",[27,2329,2330],{},"strategy=\"afterInteractive\"",[1252,2332,2334,2335,2338,2339],{"id":2333},"step-1-load-scripts-in-layouttsx-or-pagetsx","Step 1 — Load Scripts in ",[27,2336,2337],{},"layout.tsx"," or ",[27,2340,2341],{},"page.tsx",[32,2343,2345],{"className":301,"code":2344,"language":303,"meta":37,"style":37},"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",[27,2346,2347,2366,2370,2408,2414,2419,2429,2433,2440,2453,2467,2479,2483,2487,2493,2505,2517,2521,2529,2534,2539,2544,2549,2574,2579,2586,2594,2599,2605],{"__ignoreMap":37},[41,2348,2349,2351,2354,2357,2359,2362,2364],{"class":43,"line":44},[41,2350,692],{"class":528},[41,2352,2353],{"class":133}," Script ",[41,2355,2356],{"class":528},"from",[41,2358,258],{"class":54},[41,2360,2361],{"class":75},"next\u002Fscript",[41,2363,237],{"class":54},[41,2365,217],{"class":54},[41,2367,2368],{"class":43,"line":51},[41,2369,367],{"emptyLinePlaceholder":366},[41,2371,2372,2374,2377,2379,2382,2384,2387,2389,2391,2393,2395,2398,2400,2403,2406],{"class":43,"line":62},[41,2373,529],{"class":528},[41,2375,2376],{"class":528}," default",[41,2378,155],{"class":65},[41,2380,2381],{"class":204}," ProductLayout",[41,2383,765],{"class":54},[41,2385,2386],{"class":481}," children",[41,2388,776],{"class":54},[41,2390,659],{"class":54},[41,2392,2386],{"class":58},[41,2394,30],{"class":54},[41,2396,2397],{"class":318}," React",[41,2399,137],{"class":54},[41,2401,2402],{"class":318},"ReactNode",[41,2404,2405],{"class":54}," })",[41,2407,161],{"class":54},[41,2409,2410,2412],{"class":43,"line":82},[41,2411,656],{"class":528},[41,2413,811],{"class":58},[41,2415,2416],{"class":43,"line":97},[41,2417,2418],{"class":54},"    \u003C>\n",[41,2420,2421,2424,2427],{"class":43,"line":109},[41,2422,2423],{"class":54},"      {",[41,2425,2426],{"class":133},"children",[41,2428,361],{"class":54},[41,2430,2431],{"class":43,"line":130},[41,2432,367],{"emptyLinePlaceholder":366},[41,2434,2435,2437],{"class":43,"line":164},[41,2436,826],{"class":54},[41,2438,2439],{"class":318},"Script\n",[41,2441,2442,2445,2447,2449,2451],{"class":43,"line":220},[41,2443,2444],{"class":65},"        src",[41,2446,69],{"class":54},[41,2448,72],{"class":54},[41,2450,76],{"class":75},[41,2452,79],{"class":54},[41,2454,2455,2458,2460,2462,2465],{"class":43,"line":226},[41,2456,2457],{"class":65},"        strategy",[41,2459,69],{"class":54},[41,2461,72],{"class":54},[41,2463,2464],{"class":75},"afterInteractive",[41,2466,79],{"class":54},[41,2468,2469,2471,2473,2475,2477],{"class":43,"line":250},[41,2470,834],{"class":65},[41,2472,69],{"class":54},[41,2474,72],{"class":54},[41,2476,92],{"class":75},[41,2478,79],{"class":54},[41,2480,2481],{"class":43,"line":267},[41,2482,896],{"class":54},[41,2484,2485],{"class":43,"line":277},[41,2486,367],{"emptyLinePlaceholder":366},[41,2488,2489,2491],{"class":43,"line":447},[41,2490,826],{"class":54},[41,2492,2439],{"class":318},[41,2494,2495,2497,2499,2501,2503],{"class":43,"line":459},[41,2496,2457],{"class":65},[41,2498,69],{"class":54},[41,2500,72],{"class":54},[41,2502,2464],{"class":75},[41,2504,79],{"class":54},[41,2506,2507,2509,2511,2513,2515],{"class":43,"line":470},[41,2508,834],{"class":65},[41,2510,69],{"class":54},[41,2512,72],{"class":54},[41,2514,123],{"class":75},[41,2516,79],{"class":54},[41,2518,2519],{"class":43,"line":509},[41,2520,1005],{"class":54},[41,2522,2523,2526],{"class":43,"line":515},[41,2524,2525],{"class":54},"        {",[41,2527,2528],{"class":54},"`\n",[41,2530,2531],{"class":43,"line":520},[41,2532,2533],{"class":75},"          window.fitting = window.fitting || function() {\n",[41,2535,2536],{"class":43,"line":525},[41,2537,2538],{"class":75},"            (window.fitting.q = window.fitting.q || []).push(arguments);\n",[41,2540,2541],{"class":43,"line":541},[41,2542,2543],{"class":75},"          };\n",[41,2545,2546],{"class":43,"line":567},[41,2547,2548],{"class":75},"          window.fitting('init', {\n",[41,2550,2551,2554,2557,2560,2562,2565,2567,2570,2572],{"class":43,"line":594},[41,2552,2553],{"class":75},"            apiKey: '",[41,2555,2556],{"class":54},"${",[41,2558,2559],{"class":133},"process",[41,2561,137],{"class":54},[41,2563,2564],{"class":133},"env",[41,2566,137],{"class":54},[41,2568,2569],{"class":133},"NEXT_PUBLIC_TRY_ON_API_KEY",[41,2571,982],{"class":54},[41,2573,264],{"class":75},[41,2575,2576],{"class":43,"line":599},[41,2577,2578],{"class":75},"          });\n",[41,2580,2581,2584],{"class":43,"line":604},[41,2582,2583],{"class":54},"        `",[41,2585,361],{"class":54},[41,2587,2588,2590,2592],{"class":43,"line":621},[41,2589,1015],{"class":54},[41,2591,2326],{"class":318},[41,2593,106],{"class":54},[41,2595,2596],{"class":43,"line":643},[41,2597,2598],{"class":54},"    \u003C\u002F>\n",[41,2600,2601,2603],{"class":43,"line":648},[41,2602,1034],{"class":58},[41,2604,217],{"class":54},[41,2606,2607],{"class":43,"line":653},[41,2608,361],{"class":54},[1252,2610,2612],{"id":2611},"step-2-create-the-widget-button","Step 2 — Create the Widget Button",[32,2614,2616],{"className":301,"code":2615,"language":303,"meta":37,"style":37},"'use client';\n\ninterface TryonItem {\n  productName: string;\n  url: string;\n}\n\ndeclare global {\n  interface Window {\n    fitting: (command: string, options?: unknown) => void;\n  }\n}\n\nexport function TryOnButton({ items }: { items: TryonItem[] }) {\n  const handleClick = () => {\n    window.fitting('create', {\n      targetElementId: 'widget-container',\n      model: 'balanced',\n      tryonItems: items,\n    });\n  };\n\n  return (\n    \u003C>\n      \u003Cdiv id=\"widget-container\" style={{ width: '100%', maxWidth: 600, aspectRatio: '3\u002F4' }} \u002F>\n      \u003Cbutton onClick={handleClick}>Try On\u003C\u002Fbutton>\n    \u003C\u002F>\n  );\n}\n",[27,2617,2618,2629,2633,2641,2651,2661,2665,2669,2677,2685,2715,2719,2723,2727,2759,2774,2794,2809,2824,2835,2844,2848,2852,2858,2862,2916,2943,2947,2953],{"__ignoreMap":37},[41,2619,2620,2622,2625,2627],{"class":43,"line":44},[41,2621,237],{"class":54},[41,2623,2624],{"class":75},"use client",[41,2626,237],{"class":54},[41,2628,217],{"class":54},[41,2630,2631],{"class":43,"line":51},[41,2632,367],{"emptyLinePlaceholder":366},[41,2634,2635,2637,2639],{"class":43,"line":62},[41,2636,315],{"class":65},[41,2638,319],{"class":318},[41,2640,161],{"class":54},[41,2642,2643,2645,2647,2649],{"class":43,"line":82},[41,2644,326],{"class":58},[41,2646,30],{"class":54},[41,2648,331],{"class":318},[41,2650,217],{"class":54},[41,2652,2653,2655,2657,2659],{"class":43,"line":97},[41,2654,338],{"class":58},[41,2656,30],{"class":54},[41,2658,331],{"class":318},[41,2660,217],{"class":54},[41,2662,2663],{"class":43,"line":109},[41,2664,361],{"class":54},[41,2666,2667],{"class":43,"line":130},[41,2668,367],{"emptyLinePlaceholder":366},[41,2670,2671,2673,2675],{"class":43,"line":164},[41,2672,450],{"class":65},[41,2674,453],{"class":133},[41,2676,456],{"class":54},[41,2678,2679,2681,2683],{"class":43,"line":220},[41,2680,462],{"class":65},[41,2682,465],{"class":318},[41,2684,161],{"class":54},[41,2686,2687,2689,2691,2693,2695,2697,2699,2701,2703,2705,2707,2709,2711,2713],{"class":43,"line":226},[41,2688,473],{"class":58},[41,2690,30],{"class":54},[41,2692,478],{"class":54},[41,2694,482],{"class":481},[41,2696,30],{"class":54},[41,2698,331],{"class":318},[41,2700,245],{"class":54},[41,2702,491],{"class":481},[41,2704,352],{"class":54},[41,2706,496],{"class":318},[41,2708,214],{"class":54},[41,2710,501],{"class":65},[41,2712,504],{"class":318},[41,2714,217],{"class":54},[41,2716,2717],{"class":43,"line":250},[41,2718,512],{"class":54},[41,2720,2721],{"class":43,"line":267},[41,2722,361],{"class":54},[41,2724,2725],{"class":43,"line":277},[41,2726,367],{"emptyLinePlaceholder":366},[41,2728,2729,2731,2733,2736,2738,2741,2743,2745,2747,2749,2751,2754,2757],{"class":43,"line":447},[41,2730,529],{"class":528},[41,2732,155],{"class":65},[41,2734,2735],{"class":204}," TryOnButton",[41,2737,765],{"class":54},[41,2739,2740],{"class":481}," items",[41,2742,776],{"class":54},[41,2744,659],{"class":54},[41,2746,2740],{"class":58},[41,2748,30],{"class":54},[41,2750,319],{"class":318},[41,2752,2753],{"class":133},"[] ",[41,2755,2756],{"class":54},"})",[41,2758,161],{"class":54},[41,2760,2761,2763,2766,2768,2770,2772],{"class":43,"line":459},[41,2762,544],{"class":65},[41,2764,2765],{"class":133}," handleClick",[41,2767,183],{"class":54},[41,2769,614],{"class":54},[41,2771,501],{"class":65},[41,2773,161],{"class":54},[41,2775,2776,2778,2780,2782,2784,2786,2788,2790,2792],{"class":43,"line":470},[41,2777,570],{"class":133},[41,2779,137],{"class":54},[41,2781,175],{"class":204},[41,2783,208],{"class":58},[41,2785,237],{"class":54},[41,2787,581],{"class":75},[41,2789,237],{"class":54},[41,2791,245],{"class":54},[41,2793,161],{"class":54},[41,2795,2796,2799,2801,2803,2805,2807],{"class":43,"line":509},[41,2797,2798],{"class":58},"      targetElementId",[41,2800,30],{"class":54},[41,2802,258],{"class":54},[41,2804,841],{"class":75},[41,2806,237],{"class":54},[41,2808,939],{"class":54},[41,2810,2811,2814,2816,2818,2820,2822],{"class":43,"line":515},[41,2812,2813],{"class":58},"      model",[41,2815,30],{"class":54},[41,2817,258],{"class":54},[41,2819,399],{"class":75},[41,2821,237],{"class":54},[41,2823,939],{"class":54},[41,2825,2826,2829,2831,2833],{"class":43,"line":520},[41,2827,2828],{"class":58},"      tryonItems",[41,2830,30],{"class":54},[41,2832,2740],{"class":133},[41,2834,939],{"class":54},[41,2836,2837,2840,2842],{"class":43,"line":525},[41,2838,2839],{"class":54},"    }",[41,2841,214],{"class":58},[41,2843,217],{"class":54},[41,2845,2846],{"class":43,"line":541},[41,2847,223],{"class":54},[41,2849,2850],{"class":43,"line":567},[41,2851,367],{"emptyLinePlaceholder":366},[41,2853,2854,2856],{"class":43,"line":594},[41,2855,656],{"class":528},[41,2857,811],{"class":58},[41,2859,2860],{"class":43,"line":599},[41,2861,2418],{"class":54},[41,2863,2864,2866,2868,2870,2872,2874,2876,2878,2881,2883,2885,2887,2889,2891,2893,2895,2897,2899,2901,2903,2905,2907,2909,2911,2913],{"class":43,"line":604},[41,2865,826],{"class":54},[41,2867,819],{"class":58},[41,2869,116],{"class":65},[41,2871,69],{"class":54},[41,2873,72],{"class":54},[41,2875,841],{"class":75},[41,2877,72],{"class":54},[41,2879,2880],{"class":65}," style",[41,2882,851],{"class":54},[41,2884,854],{"class":58},[41,2886,30],{"class":54},[41,2888,258],{"class":54},[41,2890,861],{"class":75},[41,2892,237],{"class":54},[41,2894,245],{"class":54},[41,2896,868],{"class":58},[41,2898,30],{"class":54},[41,2900,874],{"class":873},[41,2902,245],{"class":54},[41,2904,879],{"class":58},[41,2906,30],{"class":54},[41,2908,258],{"class":54},[41,2910,886],{"class":75},[41,2912,237],{"class":54},[41,2914,2915],{"class":54}," }} \u002F>\n",[41,2917,2918,2920,2922,2925,2928,2931,2934,2937,2939,2941],{"class":43,"line":621},[41,2919,826],{"class":54},[41,2921,1018],{"class":58},[41,2923,2924],{"class":65}," onClick",[41,2926,2927],{"class":54},"={",[41,2929,2930],{"class":133},"handleClick",[41,2932,2933],{"class":54},"}>",[41,2935,2936],{"class":133},"Try On",[41,2938,280],{"class":54},[41,2940,1018],{"class":58},[41,2942,106],{"class":54},[41,2944,2945],{"class":43,"line":643},[41,2946,2598],{"class":54},[41,2948,2949,2951],{"class":43,"line":648},[41,2950,1034],{"class":58},[41,2952,217],{"class":54},[41,2954,2955],{"class":43,"line":653},[41,2956,361],{"class":54},[1252,2958,2960],{"id":2959},"step-3-use-in-a-product-page","Step 3 — Use in a Product Page",[32,2962,2964],{"className":301,"code":2963,"language":303,"meta":37,"style":37},"import { TryOnButton } from '@\u002Fcomponents\u002FTryOnButton';\n\nexport default async function ProductPage({ params }: { params: { slug: string } }) {\n  const product = await getProduct(params.slug);\n\n  return (\n    \u003Cdiv>\n      \u003Ch1>{product.name}\u003C\u002Fh1>\n      \u003Cimg src={product.image} alt={product.name} \u002F>\n      \u003CTryOnButton\n        items={[\n          {\n            productName: product.name,\n            url: product.image,\n          },\n        ]}\n      \u002F>\n    \u003C\u002Fdiv>\n  );\n}\n",[27,2965,2966,2987,2991,3033,3062,3066,3072,3080,3104,3140,3147,3157,3162,3177,3192,3197,3204,3208,3216,3222],{"__ignoreMap":37},[41,2967,2968,2970,2972,2974,2976,2978,2980,2983,2985],{"class":43,"line":44},[41,2969,692],{"class":528},[41,2971,659],{"class":54},[41,2973,2735],{"class":133},[41,2975,699],{"class":54},[41,2977,702],{"class":528},[41,2979,258],{"class":54},[41,2981,2982],{"class":75},"@\u002Fcomponents\u002FTryOnButton",[41,2984,237],{"class":54},[41,2986,217],{"class":54},[41,2988,2989],{"class":43,"line":51},[41,2990,367],{"emptyLinePlaceholder":366},[41,2992,2993,2995,2997,3000,3002,3005,3007,3010,3012,3014,3016,3018,3020,3023,3025,3027,3029,3031],{"class":43,"line":62},[41,2994,529],{"class":528},[41,2996,2376],{"class":528},[41,2998,2999],{"class":65}," async",[41,3001,155],{"class":65},[41,3003,3004],{"class":204}," ProductPage",[41,3006,765],{"class":54},[41,3008,3009],{"class":481}," params",[41,3011,776],{"class":54},[41,3013,659],{"class":54},[41,3015,3009],{"class":58},[41,3017,30],{"class":54},[41,3019,659],{"class":54},[41,3021,3022],{"class":58}," slug",[41,3024,30],{"class":54},[41,3026,331],{"class":318},[41,3028,699],{"class":54},[41,3030,2405],{"class":54},[41,3032,161],{"class":54},[41,3034,3035,3037,3040,3042,3045,3048,3050,3053,3055,3058,3060],{"class":43,"line":82},[41,3036,544],{"class":65},[41,3038,3039],{"class":133}," product",[41,3041,183],{"class":54},[41,3043,3044],{"class":528}," await",[41,3046,3047],{"class":204}," getProduct",[41,3049,208],{"class":58},[41,3051,3052],{"class":133},"params",[41,3054,137],{"class":54},[41,3056,3057],{"class":133},"slug",[41,3059,214],{"class":58},[41,3061,217],{"class":54},[41,3063,3064],{"class":43,"line":97},[41,3065,367],{"emptyLinePlaceholder":366},[41,3067,3068,3070],{"class":43,"line":109},[41,3069,656],{"class":528},[41,3071,811],{"class":58},[41,3073,3074,3076,3078],{"class":43,"line":130},[41,3075,816],{"class":54},[41,3077,819],{"class":58},[41,3079,106],{"class":54},[41,3081,3082,3084,3086,3089,3092,3094,3097,3100,3102],{"class":43,"line":164},[41,3083,826],{"class":54},[41,3085,10],{"class":58},[41,3087,3088],{"class":54},">{",[41,3090,3091],{"class":133},"product",[41,3093,137],{"class":54},[41,3095,3096],{"class":133},"name",[41,3098,3099],{"class":54},"}\u003C\u002F",[41,3101,10],{"class":58},[41,3103,106],{"class":54},[41,3105,3106,3108,3111,3114,3116,3118,3120,3123,3126,3129,3131,3133,3135,3137],{"class":43,"line":220},[41,3107,826],{"class":54},[41,3109,3110],{"class":58},"img",[41,3112,3113],{"class":65}," src",[41,3115,2927],{"class":54},[41,3117,3091],{"class":133},[41,3119,137],{"class":54},[41,3121,3122],{"class":133},"image",[41,3124,3125],{"class":54},"} ",[41,3127,3128],{"class":65},"alt",[41,3130,2927],{"class":54},[41,3132,3091],{"class":133},[41,3134,137],{"class":54},[41,3136,3096],{"class":133},[41,3138,3139],{"class":54},"} \u002F>\n",[41,3141,3142,3144],{"class":43,"line":226},[41,3143,826],{"class":54},[41,3145,3146],{"class":318},"TryOnButton\n",[41,3148,3149,3152,3154],{"class":43,"line":250},[41,3150,3151],{"class":65},"        items",[41,3153,2927],{"class":54},[41,3155,3156],{"class":133},"[\n",[41,3158,3159],{"class":43,"line":267},[41,3160,3161],{"class":54},"          {\n",[41,3163,3164,3167,3169,3171,3173,3175],{"class":43,"line":277},[41,3165,3166],{"class":58},"            productName",[41,3168,30],{"class":54},[41,3170,3039],{"class":133},[41,3172,137],{"class":54},[41,3174,3096],{"class":133},[41,3176,939],{"class":54},[41,3178,3179,3182,3184,3186,3188,3190],{"class":43,"line":447},[41,3180,3181],{"class":58},"            url",[41,3183,30],{"class":54},[41,3185,3039],{"class":133},[41,3187,137],{"class":54},[41,3189,3122],{"class":133},[41,3191,939],{"class":54},[41,3193,3194],{"class":43,"line":459},[41,3195,3196],{"class":54},"          },\n",[41,3198,3199,3202],{"class":43,"line":470},[41,3200,3201],{"class":133},"        ]",[41,3203,361],{"class":54},[41,3205,3206],{"class":43,"line":509},[41,3207,896],{"class":54},[41,3209,3210,3212,3214],{"class":43,"line":515},[41,3211,1025],{"class":54},[41,3213,819],{"class":58},[41,3215,106],{"class":54},[41,3217,3218,3220],{"class":43,"line":520},[41,3219,1034],{"class":58},[41,3221,217],{"class":54},[41,3223,3224],{"class":43,"line":525},[41,3225,361],{"class":54},[19,3227,3229],{"id":3228},"environment-variable","Environment Variable",[15,3231,3232,3233,30],{},"Add your API key to ",[27,3234,3235],{},".env.local",[32,3237,3241],{"className":3238,"code":3239,"language":3240,"meta":37,"style":37},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","NEXT_PUBLIC_TRY_ON_API_KEY=pk_live_xxx\n","bash",[27,3242,3243],{"__ignoreMap":37},[41,3244,3245,3247,3249],{"class":43,"line":44},[41,3246,2569],{"class":133},[41,3248,69],{"class":54},[41,3250,3251],{"class":75},"pk_live_xxx\n",[1043,3253,3254],{},"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":37,"searchDepth":51,"depth":51,"links":3256},[3257,3263],{"id":2319,"depth":51,"text":2320,"children":3258},[3259,3261,3262],{"id":2333,"depth":62,"text":3260},"Step 1 — Load Scripts in layout.tsx or page.tsx",{"id":2611,"depth":62,"text":2612},{"id":2959,"depth":62,"text":2960},{"id":3228,"depth":51,"text":3229},"Integrate with Next.js (Pages Router & App Router)","i-lucide-triangle",{},"\u002Fen\u002Fintegrations\u002Fnextjs",{"title":2300,"description":3264},"en\u002Fintegrations\u002Fnextjs","JdA3Sttp8qaffNRKpcg9b3i_J2nMxDOCfnya8RjA3yU",{"id":3272,"title":3273,"body":3274,"description":4168,"extension":1052,"icon":4169,"meta":4170,"navigation":366,"path":4171,"seo":4172,"stem":4173,"__hash__":4174},"content\u002Fen\u002Fintegrations\u002Fnuxt.md","Nuxt",{"type":7,"value":3275,"toc":4158},[3276,3280,3283,3287,3297,3303,3619,3625,3821,3825,4134,4136,4142,4155],[10,3277,3279],{"id":3278},"nuxt-integration","Nuxt Integration",[15,3281,3282],{},"The Fitting Widget integrates seamlessly with Nuxt 3 and Nuxt 4.",[19,3284,3286],{"id":3285},"_1-load-the-script","1. Load the Script",[15,3288,3289,3290,3293,3294,137],{},"Use the ",[27,3291,3292],{},"useHead"," composable, or add scripts to your ",[27,3295,3296],{},"nuxt.config.ts",[1252,3298,3300,3301],{"id":3299},"option-a-per-page-with-usehead","Option A — Per Page with ",[27,3302,3292],{},[32,3304,3308],{"className":3305,"code":3306,"language":3307,"meta":37,"style":37},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!-- pages\u002Fproduct\u002F[slug].vue -->\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Ch1>{{ product.name }}\u003C\u002Fh1>\n    \u003CTryOnWidget :product-name=\"product.name\" :image-url=\"product.image\" \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nimport { useHead } from '#app'\n\nuseHead({\n  script: [\n    {\n      src: 'https:\u002F\u002Fwidget.try-on.ru\u002Ffitting-widget-bundle.js',\n      id: 'fitting-widget-bundle',\n    },\n    {\n      id: 'fitting-init',\n      innerHTML: `\n        window.fitting = window.fitting || function() {\n          (window.fitting.q = window.fitting.q || []).push(arguments);\n        };\n        window.fitting('init', {\n          apiKey: '${import.meta.env.VITE_TRY_ON_API_KEY}'\n        });\n      `,\n    },\n  ],\n})\n\u003C\u002Fscript>\n","vue",[27,3309,3310,3315,3324,3333,3351,3385,3394,3402,3406,3429,3449,3453,3461,3470,3474,3489,3504,3508,3512,3526,3536,3541,3546,3551,3556,3583,3588,3595,3599,3605,3611],{"__ignoreMap":37},[41,3311,3312],{"class":43,"line":44},[41,3313,3314],{"class":47},"\u003C!-- pages\u002Fproduct\u002F[slug].vue -->\n",[41,3316,3317,3319,3322],{"class":43,"line":51},[41,3318,55],{"class":54},[41,3320,3321],{"class":58},"template",[41,3323,106],{"class":54},[41,3325,3326,3329,3331],{"class":43,"line":62},[41,3327,3328],{"class":54},"  \u003C",[41,3330,819],{"class":58},[41,3332,106],{"class":54},[41,3334,3335,3337,3339,3342,3345,3347,3349],{"class":43,"line":82},[41,3336,816],{"class":54},[41,3338,10],{"class":58},[41,3340,3341],{"class":54},">",[41,3343,3344],{"class":133},"{{ product.name }}",[41,3346,280],{"class":54},[41,3348,10],{"class":58},[41,3350,106],{"class":54},[41,3352,3353,3355,3358,3361,3363,3365,3368,3370,3373,3375,3377,3380,3382],{"class":43,"line":97},[41,3354,816],{"class":54},[41,3356,3357],{"class":58},"TryOnWidget",[41,3359,3360],{"class":65}," :product-name",[41,3362,69],{"class":54},[41,3364,72],{"class":54},[41,3366,3367],{"class":75},"product.name",[41,3369,72],{"class":54},[41,3371,3372],{"class":65}," :image-url",[41,3374,69],{"class":54},[41,3376,72],{"class":54},[41,3378,3379],{"class":75},"product.image",[41,3381,72],{"class":54},[41,3383,3384],{"class":54}," \u002F>\n",[41,3386,3387,3390,3392],{"class":43,"line":109},[41,3388,3389],{"class":54},"  \u003C\u002F",[41,3391,819],{"class":58},[41,3393,106],{"class":54},[41,3395,3396,3398,3400],{"class":43,"line":130},[41,3397,280],{"class":54},[41,3399,3321],{"class":58},[41,3401,106],{"class":54},[41,3403,3404],{"class":43,"line":164},[41,3405,367],{"emptyLinePlaceholder":366},[41,3407,3408,3410,3412,3415,3418,3420,3422,3425,3427],{"class":43,"line":220},[41,3409,55],{"class":54},[41,3411,103],{"class":58},[41,3413,3414],{"class":65}," setup",[41,3416,3417],{"class":65}," lang",[41,3419,69],{"class":54},[41,3421,72],{"class":54},[41,3423,3424],{"class":75},"ts",[41,3426,72],{"class":54},[41,3428,106],{"class":54},[41,3430,3431,3433,3435,3438,3440,3442,3444,3447],{"class":43,"line":226},[41,3432,692],{"class":528},[41,3434,659],{"class":54},[41,3436,3437],{"class":133}," useHead",[41,3439,699],{"class":54},[41,3441,702],{"class":528},[41,3443,258],{"class":54},[41,3445,3446],{"class":75},"#app",[41,3448,264],{"class":54},[41,3450,3451],{"class":43,"line":250},[41,3452,367],{"emptyLinePlaceholder":366},[41,3454,3455,3457,3459],{"class":43,"line":267},[41,3456,3292],{"class":204},[41,3458,208],{"class":133},[41,3460,456],{"class":54},[41,3462,3463,3466,3468],{"class":43,"line":277},[41,3464,3465],{"class":58},"  script",[41,3467,30],{"class":54},[41,3469,1360],{"class":133},[41,3471,3472],{"class":43,"line":447},[41,3473,1365],{"class":54},[41,3475,3476,3479,3481,3483,3485,3487],{"class":43,"line":459},[41,3477,3478],{"class":58},"      src",[41,3480,30],{"class":54},[41,3482,258],{"class":54},[41,3484,76],{"class":75},[41,3486,237],{"class":54},[41,3488,939],{"class":54},[41,3490,3491,3494,3496,3498,3500,3502],{"class":43,"line":470},[41,3492,3493],{"class":58},"      id",[41,3495,30],{"class":54},[41,3497,258],{"class":54},[41,3499,92],{"class":75},[41,3501,237],{"class":54},[41,3503,939],{"class":54},[41,3505,3506],{"class":43,"line":509},[41,3507,1402],{"class":54},[41,3509,3510],{"class":43,"line":515},[41,3511,1365],{"class":54},[41,3513,3514,3516,3518,3520,3522,3524],{"class":43,"line":520},[41,3515,3493],{"class":58},[41,3517,30],{"class":54},[41,3519,258],{"class":54},[41,3521,123],{"class":75},[41,3523,237],{"class":54},[41,3525,939],{"class":54},[41,3527,3528,3531,3533],{"class":43,"line":525},[41,3529,3530],{"class":58},"      innerHTML",[41,3532,30],{"class":54},[41,3534,3535],{"class":54}," `\n",[41,3537,3538],{"class":43,"line":541},[41,3539,3540],{"class":75},"        window.fitting = window.fitting || function() {\n",[41,3542,3543],{"class":43,"line":567},[41,3544,3545],{"class":75},"          (window.fitting.q = window.fitting.q || []).push(arguments);\n",[41,3547,3548],{"class":43,"line":594},[41,3549,3550],{"class":75},"        };\n",[41,3552,3553],{"class":43,"line":599},[41,3554,3555],{"class":75},"        window.fitting('init', {\n",[41,3557,3558,3561,3563,3565,3567,3570,3572,3574,3576,3579,3581],{"class":43,"line":604},[41,3559,3560],{"class":75},"          apiKey: '",[41,3562,2556],{"class":54},[41,3564,692],{"class":528},[41,3566,137],{"class":54},[41,3568,3569],{"class":133},"meta",[41,3571,137],{"class":54},[41,3573,2564],{"class":133},[41,3575,137],{"class":54},[41,3577,3578],{"class":133},"VITE_TRY_ON_API_KEY",[41,3580,982],{"class":54},[41,3582,264],{"class":75},[41,3584,3585],{"class":43,"line":621},[41,3586,3587],{"class":75},"        });\n",[41,3589,3590,3593],{"class":43,"line":643},[41,3591,3592],{"class":54},"      `",[41,3594,939],{"class":54},[41,3596,3597],{"class":43,"line":648},[41,3598,1402],{"class":54},[41,3600,3601,3603],{"class":43,"line":653},[41,3602,1407],{"class":133},[41,3604,939],{"class":54},[41,3606,3607,3609],{"class":43,"line":671},[41,3608,982],{"class":54},[41,3610,995],{"class":133},[41,3612,3613,3615,3617],{"class":43,"line":1039},[41,3614,280],{"class":54},[41,3616,103],{"class":58},[41,3618,106],{"class":54},[1252,3620,3622,3623],{"id":3621},"option-b-global-in-nuxtconfigts","Option B — Global in ",[27,3624,3296],{},[32,3626,3629],{"className":3627,"code":3628,"language":3424,"meta":37,"style":37},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineNuxtConfig({\n  app: {\n    head: {\n      script: [\n        {\n          src: 'https:\u002F\u002Fwidget.try-on.ru\u002Ffitting-widget-bundle.js',\n          id: 'fitting-widget-bundle',\n        },\n        {\n          id: 'fitting-init',\n          innerHTML: `\n            window.fitting = window.fitting || function() {\n              (window.fitting.q = window.fitting.q || []).push(arguments);\n            };\n            window.fitting('init', {\n              apiKey: '${import.meta.env.VITE_TRY_ON_API_KEY}'\n            });\n          `,\n        },\n      ],\n    },\n  },\n})\n",[27,3630,3631,3644,3653,3662,3671,3676,3691,3706,3711,3715,3729,3738,3743,3748,3753,3758,3783,3788,3795,3799,3806,3810,3815],{"__ignoreMap":37},[41,3632,3633,3635,3637,3640,3642],{"class":43,"line":44},[41,3634,529],{"class":528},[41,3636,2376],{"class":528},[41,3638,3639],{"class":204}," defineNuxtConfig",[41,3641,208],{"class":133},[41,3643,456],{"class":54},[41,3645,3646,3649,3651],{"class":43,"line":51},[41,3647,3648],{"class":58},"  app",[41,3650,30],{"class":54},[41,3652,161],{"class":54},[41,3654,3655,3658,3660],{"class":43,"line":62},[41,3656,3657],{"class":58},"    head",[41,3659,30],{"class":54},[41,3661,161],{"class":54},[41,3663,3664,3667,3669],{"class":43,"line":82},[41,3665,3666],{"class":58},"      script",[41,3668,30],{"class":54},[41,3670,1360],{"class":133},[41,3672,3673],{"class":43,"line":97},[41,3674,3675],{"class":54},"        {\n",[41,3677,3678,3681,3683,3685,3687,3689],{"class":43,"line":109},[41,3679,3680],{"class":58},"          src",[41,3682,30],{"class":54},[41,3684,258],{"class":54},[41,3686,76],{"class":75},[41,3688,237],{"class":54},[41,3690,939],{"class":54},[41,3692,3693,3696,3698,3700,3702,3704],{"class":43,"line":130},[41,3694,3695],{"class":58},"          id",[41,3697,30],{"class":54},[41,3699,258],{"class":54},[41,3701,92],{"class":75},[41,3703,237],{"class":54},[41,3705,939],{"class":54},[41,3707,3708],{"class":43,"line":164},[41,3709,3710],{"class":54},"        },\n",[41,3712,3713],{"class":43,"line":220},[41,3714,3675],{"class":54},[41,3716,3717,3719,3721,3723,3725,3727],{"class":43,"line":226},[41,3718,3695],{"class":58},[41,3720,30],{"class":54},[41,3722,258],{"class":54},[41,3724,123],{"class":75},[41,3726,237],{"class":54},[41,3728,939],{"class":54},[41,3730,3731,3734,3736],{"class":43,"line":250},[41,3732,3733],{"class":58},"          innerHTML",[41,3735,30],{"class":54},[41,3737,3535],{"class":54},[41,3739,3740],{"class":43,"line":267},[41,3741,3742],{"class":75},"            window.fitting = window.fitting || function() {\n",[41,3744,3745],{"class":43,"line":277},[41,3746,3747],{"class":75},"              (window.fitting.q = window.fitting.q || []).push(arguments);\n",[41,3749,3750],{"class":43,"line":447},[41,3751,3752],{"class":75},"            };\n",[41,3754,3755],{"class":43,"line":459},[41,3756,3757],{"class":75},"            window.fitting('init', {\n",[41,3759,3760,3763,3765,3767,3769,3771,3773,3775,3777,3779,3781],{"class":43,"line":470},[41,3761,3762],{"class":75},"              apiKey: '",[41,3764,2556],{"class":54},[41,3766,692],{"class":528},[41,3768,137],{"class":54},[41,3770,3569],{"class":133},[41,3772,137],{"class":54},[41,3774,2564],{"class":133},[41,3776,137],{"class":54},[41,3778,3578],{"class":133},[41,3780,982],{"class":54},[41,3782,264],{"class":75},[41,3784,3785],{"class":43,"line":509},[41,3786,3787],{"class":75},"            });\n",[41,3789,3790,3793],{"class":43,"line":515},[41,3791,3792],{"class":54},"          `",[41,3794,939],{"class":54},[41,3796,3797],{"class":43,"line":520},[41,3798,3710],{"class":54},[41,3800,3801,3804],{"class":43,"line":525},[41,3802,3803],{"class":133},"      ]",[41,3805,939],{"class":54},[41,3807,3808],{"class":43,"line":541},[41,3809,1402],{"class":54},[41,3811,3812],{"class":43,"line":567},[41,3813,3814],{"class":54},"  },\n",[41,3816,3817,3819],{"class":43,"line":594},[41,3818,982],{"class":54},[41,3820,995],{"class":133},[19,3822,3824],{"id":3823},"_2-create-the-wrapper-component","2. Create the Wrapper Component",[32,3826,3828],{"className":3305,"code":3827,"language":3307,"meta":37,"style":37},"\u003C!-- components\u002FTryOnWidget.vue -->\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cdiv id=\"widget-container\" class=\"aspect-[3\u002F4] w-full max-w-[600px]\" \u002F>\n    \u003Cbutton @click=\"handleTryOn\">Try On\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nconst props = defineProps\u003C{\n  productName: string\n  imageUrl: string\n}>()\n\nconst handleTryOn = () => {\n  window.fitting('create', {\n    targetElementId: 'widget-container',\n    model: 'balanced',\n    tryonItems: [\n      {\n        productName: props.productName,\n        url: props.imageUrl,\n      },\n    ],\n  })\n}\n\u003C\u002Fscript>\n",[27,3829,3830,3835,3843,3851,3881,3909,3917,3925,3929,3949,3965,3974,3982,3989,3993,4008,4028,4043,4058,4067,4072,4088,4104,4109,4116,4122,4126],{"__ignoreMap":37},[41,3831,3832],{"class":43,"line":44},[41,3833,3834],{"class":47},"\u003C!-- components\u002FTryOnWidget.vue -->\n",[41,3836,3837,3839,3841],{"class":43,"line":51},[41,3838,55],{"class":54},[41,3840,3321],{"class":58},[41,3842,106],{"class":54},[41,3844,3845,3847,3849],{"class":43,"line":62},[41,3846,3328],{"class":54},[41,3848,819],{"class":58},[41,3850,106],{"class":54},[41,3852,3853,3855,3857,3859,3861,3863,3865,3867,3870,3872,3874,3877,3879],{"class":43,"line":82},[41,3854,816],{"class":54},[41,3856,819],{"class":58},[41,3858,116],{"class":65},[41,3860,69],{"class":54},[41,3862,72],{"class":54},[41,3864,841],{"class":75},[41,3866,72],{"class":54},[41,3868,3869],{"class":65}," class",[41,3871,69],{"class":54},[41,3873,72],{"class":54},[41,3875,3876],{"class":75},"aspect-[3\u002F4] w-full max-w-[600px]",[41,3878,72],{"class":54},[41,3880,3384],{"class":54},[41,3882,3883,3885,3887,3890,3892,3894,3897,3899,3901,3903,3905,3907],{"class":43,"line":97},[41,3884,816],{"class":54},[41,3886,1018],{"class":58},[41,3888,3889],{"class":65}," @click",[41,3891,69],{"class":54},[41,3893,72],{"class":54},[41,3895,3896],{"class":75},"handleTryOn",[41,3898,72],{"class":54},[41,3900,3341],{"class":54},[41,3902,2936],{"class":133},[41,3904,280],{"class":54},[41,3906,1018],{"class":58},[41,3908,106],{"class":54},[41,3910,3911,3913,3915],{"class":43,"line":109},[41,3912,3389],{"class":54},[41,3914,819],{"class":58},[41,3916,106],{"class":54},[41,3918,3919,3921,3923],{"class":43,"line":130},[41,3920,280],{"class":54},[41,3922,3321],{"class":58},[41,3924,106],{"class":54},[41,3926,3927],{"class":43,"line":164},[41,3928,367],{"emptyLinePlaceholder":366},[41,3930,3931,3933,3935,3937,3939,3941,3943,3945,3947],{"class":43,"line":220},[41,3932,55],{"class":54},[41,3934,103],{"class":58},[41,3936,3414],{"class":65},[41,3938,3417],{"class":65},[41,3940,69],{"class":54},[41,3942,72],{"class":54},[41,3944,3424],{"class":75},[41,3946,72],{"class":54},[41,3948,106],{"class":54},[41,3950,3951,3954,3957,3959,3962],{"class":43,"line":226},[41,3952,3953],{"class":65},"const",[41,3955,3956],{"class":133}," props ",[41,3958,69],{"class":54},[41,3960,3961],{"class":204}," defineProps",[41,3963,3964],{"class":54},"\u003C{\n",[41,3966,3967,3969,3971],{"class":43,"line":250},[41,3968,326],{"class":58},[41,3970,30],{"class":54},[41,3972,3973],{"class":318}," string\n",[41,3975,3976,3978,3980],{"class":43,"line":267},[41,3977,739],{"class":58},[41,3979,30],{"class":54},[41,3981,3973],{"class":318},[41,3983,3984,3986],{"class":43,"line":277},[41,3985,2933],{"class":54},[41,3987,3988],{"class":133},"()\n",[41,3990,3991],{"class":43,"line":447},[41,3992,367],{"emptyLinePlaceholder":366},[41,3994,3995,3997,4000,4002,4004,4006],{"class":43,"line":459},[41,3996,3953],{"class":65},[41,3998,3999],{"class":133}," handleTryOn ",[41,4001,69],{"class":54},[41,4003,614],{"class":54},[41,4005,501],{"class":65},[41,4007,161],{"class":54},[41,4009,4010,4012,4014,4016,4018,4020,4022,4024,4026],{"class":43,"line":470},[41,4011,134],{"class":133},[41,4013,137],{"class":54},[41,4015,175],{"class":204},[41,4017,208],{"class":58},[41,4019,237],{"class":54},[41,4021,581],{"class":75},[41,4023,237],{"class":54},[41,4025,245],{"class":54},[41,4027,161],{"class":54},[41,4029,4030,4033,4035,4037,4039,4041],{"class":43,"line":509},[41,4031,4032],{"class":58},"    targetElementId",[41,4034,30],{"class":54},[41,4036,258],{"class":54},[41,4038,841],{"class":75},[41,4040,237],{"class":54},[41,4042,939],{"class":54},[41,4044,4045,4048,4050,4052,4054,4056],{"class":43,"line":515},[41,4046,4047],{"class":58},"    model",[41,4049,30],{"class":54},[41,4051,258],{"class":54},[41,4053,399],{"class":75},[41,4055,237],{"class":54},[41,4057,939],{"class":54},[41,4059,4060,4063,4065],{"class":43,"line":520},[41,4061,4062],{"class":58},"    tryonItems",[41,4064,30],{"class":54},[41,4066,1360],{"class":58},[41,4068,4069],{"class":43,"line":525},[41,4070,4071],{"class":54},"      {\n",[41,4073,4074,4077,4079,4082,4084,4086],{"class":43,"line":541},[41,4075,4076],{"class":58},"        productName",[41,4078,30],{"class":54},[41,4080,4081],{"class":133}," props",[41,4083,137],{"class":54},[41,4085,1277],{"class":133},[41,4087,939],{"class":54},[41,4089,4090,4093,4095,4097,4099,4102],{"class":43,"line":567},[41,4091,4092],{"class":58},"        url",[41,4094,30],{"class":54},[41,4096,4081],{"class":133},[41,4098,137],{"class":54},[41,4100,4101],{"class":133},"imageUrl",[41,4103,939],{"class":54},[41,4105,4106],{"class":43,"line":594},[41,4107,4108],{"class":54},"      },\n",[41,4110,4111,4114],{"class":43,"line":599},[41,4112,4113],{"class":58},"    ]",[41,4115,939],{"class":54},[41,4117,4118,4120],{"class":43,"line":604},[41,4119,270],{"class":54},[41,4121,995],{"class":58},[41,4123,4124],{"class":43,"line":621},[41,4125,361],{"class":54},[41,4127,4128,4130,4132],{"class":43,"line":643},[41,4129,280],{"class":54},[41,4131,103],{"class":58},[41,4133,106],{"class":54},[19,4135,3229],{"id":3228},[15,4137,4138,4139,30],{},"Add to ",[27,4140,4141],{},".env",[32,4143,4145],{"className":3238,"code":4144,"language":3240,"meta":37,"style":37},"VITE_TRY_ON_API_KEY=pk_live_xxx\n",[27,4146,4147],{"__ignoreMap":37},[41,4148,4149,4151,4153],{"class":43,"line":44},[41,4150,3578],{"class":133},[41,4152,69],{"class":54},[41,4154,3251],{"class":75},[1043,4156,4157],{},"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":37,"searchDepth":51,"depth":51,"links":4159},[4160,4166,4167],{"id":3285,"depth":51,"text":3286,"children":4161},[4162,4164],{"id":3299,"depth":62,"text":4163},"Option A — Per Page with useHead",{"id":3621,"depth":62,"text":4165},"Option B — Global in nuxt.config.ts",{"id":3823,"depth":51,"text":3824},{"id":3228,"depth":51,"text":3229},"Integrate with a Nuxt 3 \u002F Nuxt 4 app","i-lucide-nut",{},"\u002Fen\u002Fintegrations\u002Fnuxt",{"title":3273,"description":4168},"en\u002Fintegrations\u002Fnuxt","3xlJgokLPj3qTkGk4XWJ2RH_Ar2hK0jHeC6j3_o9shE",{"id":4176,"title":5,"body":4177,"description":5018,"extension":1052,"icon":1053,"meta":5019,"navigation":366,"path":5020,"seo":5021,"stem":5022,"__hash__":5023},"content\u002Fen\u002Fintegrations\u002Freact.md",{"type":7,"value":4178,"toc":5013},[4179,4183,4186,4190,4195,4379,4387,4391,4697,4701,5011],[10,4180,4182],{"id":4181},"react-integration","React Integration",[15,4184,4185],{},"Works with any React setup — Vite, Create React App, or custom.",[19,4187,4189],{"id":4188},"_1-load-the-widget-script","1. Load the Widget Script",[15,4191,4192,4193,30],{},"Add the script to your ",[27,4194,29],{},[32,4196,4198],{"className":34,"code":4197,"language":36,"meta":37,"style":37},"\u003C!-- In public\u002Findex.html or index.html (Vite) -->\n\u003Cscript\n  src=\"https:\u002F\u002Fwidget.try-on.ru\u002Ffitting-widget-bundle.js\"\n  id=\"fitting-widget-bundle\"\n>\u003C\u002Fscript>\n\u003Cscript id=\"fitting-init\">\n  window.fitting = window.fitting || function() {\n    (window.fitting.q = window.fitting.q || []).push(arguments);\n  };\n  window.fitting('init', {\n    apiKey: '%VITE_TRY_ON_API_KEY%'\n  });\n\u003C\u002Fscript>\n",[27,4199,4200,4205,4211,4223,4235,4243,4261,4285,4327,4331,4351,4363,4371],{"__ignoreMap":37},[41,4201,4202],{"class":43,"line":44},[41,4203,4204],{"class":47},"\u003C!-- In public\u002Findex.html or index.html (Vite) -->\n",[41,4206,4207,4209],{"class":43,"line":51},[41,4208,55],{"class":54},[41,4210,59],{"class":58},[41,4212,4213,4215,4217,4219,4221],{"class":43,"line":62},[41,4214,66],{"class":65},[41,4216,69],{"class":54},[41,4218,72],{"class":54},[41,4220,76],{"class":75},[41,4222,79],{"class":54},[41,4224,4225,4227,4229,4231,4233],{"class":43,"line":82},[41,4226,85],{"class":65},[41,4228,69],{"class":54},[41,4230,72],{"class":54},[41,4232,92],{"class":75},[41,4234,79],{"class":54},[41,4236,4237,4239,4241],{"class":43,"line":97},[41,4238,100],{"class":54},[41,4240,103],{"class":58},[41,4242,106],{"class":54},[41,4244,4245,4247,4249,4251,4253,4255,4257,4259],{"class":43,"line":109},[41,4246,55],{"class":54},[41,4248,103],{"class":58},[41,4250,116],{"class":65},[41,4252,69],{"class":54},[41,4254,72],{"class":54},[41,4256,123],{"class":75},[41,4258,72],{"class":54},[41,4260,106],{"class":54},[41,4262,4263,4265,4267,4269,4271,4273,4275,4277,4279,4281,4283],{"class":43,"line":130},[41,4264,134],{"class":133},[41,4266,137],{"class":54},[41,4268,140],{"class":133},[41,4270,69],{"class":54},[41,4272,145],{"class":133},[41,4274,137],{"class":54},[41,4276,140],{"class":133},[41,4278,152],{"class":54},[41,4280,155],{"class":65},[41,4282,158],{"class":54},[41,4284,161],{"class":54},[41,4286,4287,4289,4291,4293,4295,4297,4299,4301,4303,4305,4307,4309,4311,4313,4315,4317,4319,4321,4323,4325],{"class":43,"line":164},[41,4288,167],{"class":58},[41,4290,170],{"class":133},[41,4292,137],{"class":54},[41,4294,175],{"class":133},[41,4296,137],{"class":54},[41,4298,180],{"class":133},[41,4300,183],{"class":54},[41,4302,145],{"class":133},[41,4304,137],{"class":54},[41,4306,175],{"class":133},[41,4308,137],{"class":54},[41,4310,180],{"class":133},[41,4312,196],{"class":54},[41,4314,199],{"class":58},[41,4316,137],{"class":54},[41,4318,205],{"class":204},[41,4320,208],{"class":58},[41,4322,211],{"class":133},[41,4324,214],{"class":58},[41,4326,217],{"class":54},[41,4328,4329],{"class":43,"line":220},[41,4330,223],{"class":54},[41,4332,4333,4335,4337,4339,4341,4343,4345,4347,4349],{"class":43,"line":226},[41,4334,134],{"class":133},[41,4336,137],{"class":54},[41,4338,175],{"class":204},[41,4340,208],{"class":133},[41,4342,237],{"class":54},[41,4344,240],{"class":75},[41,4346,237],{"class":54},[41,4348,245],{"class":54},[41,4350,161],{"class":54},[41,4352,4353,4355,4357,4359,4361],{"class":43,"line":250},[41,4354,253],{"class":58},[41,4356,30],{"class":54},[41,4358,258],{"class":54},[41,4360,261],{"class":75},[41,4362,264],{"class":54},[41,4364,4365,4367,4369],{"class":43,"line":267},[41,4366,270],{"class":54},[41,4368,214],{"class":133},[41,4370,217],{"class":54},[41,4372,4373,4375,4377],{"class":43,"line":277},[41,4374,280],{"class":54},[41,4376,103],{"class":58},[41,4378,106],{"class":54},[286,4380,4381],{"icon":288},[15,4382,4383,4384,4386],{},"Replace ",[27,4385,261],{}," at build time with your actual key, or use a runtime injection approach.",[19,4388,4390],{"id":4389},"_2-create-a-custom-hook","2. Create a Custom Hook",[32,4392,4393],{"className":301,"code":302,"language":303,"meta":37,"style":37},[27,4394,4395,4399,4407,4417,4427,4437,4441,4445,4453,4463,4493,4505,4509,4513,4521,4529,4559,4563,4567,4571,4583,4605,4629,4633,4637,4651,4671,4675,4679,4693],{"__ignoreMap":37},[41,4396,4397],{"class":43,"line":44},[41,4398,310],{"class":47},[41,4400,4401,4403,4405],{"class":43,"line":51},[41,4402,315],{"class":65},[41,4404,319],{"class":318},[41,4406,161],{"class":54},[41,4408,4409,4411,4413,4415],{"class":43,"line":62},[41,4410,326],{"class":58},[41,4412,30],{"class":54},[41,4414,331],{"class":318},[41,4416,217],{"class":54},[41,4418,4419,4421,4423,4425],{"class":43,"line":82},[41,4420,338],{"class":58},[41,4422,30],{"class":54},[41,4424,331],{"class":318},[41,4426,217],{"class":54},[41,4428,4429,4431,4433,4435],{"class":43,"line":97},[41,4430,349],{"class":58},[41,4432,352],{"class":54},[41,4434,331],{"class":318},[41,4436,217],{"class":54},[41,4438,4439],{"class":43,"line":109},[41,4440,361],{"class":54},[41,4442,4443],{"class":43,"line":130},[41,4444,367],{"emptyLinePlaceholder":366},[41,4446,4447,4449,4451],{"class":43,"line":164},[41,4448,315],{"class":65},[41,4450,374],{"class":318},[41,4452,161],{"class":54},[41,4454,4455,4457,4459,4461],{"class":43,"line":220},[41,4456,381],{"class":58},[41,4458,30],{"class":54},[41,4460,331],{"class":318},[41,4462,217],{"class":54},[41,4464,4465,4467,4469,4471,4473,4475,4477,4479,4481,4483,4485,4487,4489,4491],{"class":43,"line":226},[41,4466,392],{"class":58},[41,4468,352],{"class":54},[41,4470,258],{"class":54},[41,4472,399],{"class":75},[41,4474,237],{"class":54},[41,4476,404],{"class":54},[41,4478,258],{"class":54},[41,4480,409],{"class":75},[41,4482,237],{"class":54},[41,4484,404],{"class":54},[41,4486,258],{"class":54},[41,4488,418],{"class":75},[41,4490,237],{"class":54},[41,4492,217],{"class":54},[41,4494,4495,4497,4499,4501,4503],{"class":43,"line":250},[41,4496,427],{"class":58},[41,4498,30],{"class":54},[41,4500,319],{"class":318},[41,4502,434],{"class":133},[41,4504,217],{"class":54},[41,4506,4507],{"class":43,"line":267},[41,4508,361],{"class":54},[41,4510,4511],{"class":43,"line":277},[41,4512,367],{"emptyLinePlaceholder":366},[41,4514,4515,4517,4519],{"class":43,"line":447},[41,4516,450],{"class":65},[41,4518,453],{"class":133},[41,4520,456],{"class":54},[41,4522,4523,4525,4527],{"class":43,"line":459},[41,4524,462],{"class":65},[41,4526,465],{"class":318},[41,4528,161],{"class":54},[41,4530,4531,4533,4535,4537,4539,4541,4543,4545,4547,4549,4551,4553,4555,4557],{"class":43,"line":470},[41,4532,473],{"class":58},[41,4534,30],{"class":54},[41,4536,478],{"class":54},[41,4538,482],{"class":481},[41,4540,30],{"class":54},[41,4542,331],{"class":318},[41,4544,245],{"class":54},[41,4546,491],{"class":481},[41,4548,352],{"class":54},[41,4550,496],{"class":318},[41,4552,214],{"class":54},[41,4554,501],{"class":65},[41,4556,504],{"class":318},[41,4558,217],{"class":54},[41,4560,4561],{"class":43,"line":509},[41,4562,512],{"class":54},[41,4564,4565],{"class":43,"line":515},[41,4566,361],{"class":54},[41,4568,4569],{"class":43,"line":520},[41,4570,367],{"emptyLinePlaceholder":366},[41,4572,4573,4575,4577,4579,4581],{"class":43,"line":525},[41,4574,529],{"class":528},[41,4576,155],{"class":65},[41,4578,534],{"class":204},[41,4580,158],{"class":54},[41,4582,161],{"class":54},[41,4584,4585,4587,4589,4591,4593,4595,4597,4599,4601,4603],{"class":43,"line":541},[41,4586,544],{"class":65},[41,4588,547],{"class":133},[41,4590,183],{"class":54},[41,4592,478],{"class":54},[41,4594,554],{"class":481},[41,4596,30],{"class":54},[41,4598,374],{"class":318},[41,4600,214],{"class":54},[41,4602,501],{"class":65},[41,4604,161],{"class":54},[41,4606,4607,4609,4611,4613,4615,4617,4619,4621,4623,4625,4627],{"class":43,"line":567},[41,4608,570],{"class":133},[41,4610,137],{"class":54},[41,4612,175],{"class":204},[41,4614,208],{"class":58},[41,4616,237],{"class":54},[41,4618,581],{"class":75},[41,4620,237],{"class":54},[41,4622,245],{"class":54},[41,4624,491],{"class":133},[41,4626,214],{"class":58},[41,4628,217],{"class":54},[41,4630,4631],{"class":43,"line":594},[41,4632,223],{"class":54},[41,4634,4635],{"class":43,"line":599},[41,4636,367],{"emptyLinePlaceholder":366},[41,4638,4639,4641,4643,4645,4647,4649],{"class":43,"line":604},[41,4640,544],{"class":65},[41,4642,609],{"class":133},[41,4644,183],{"class":54},[41,4646,614],{"class":54},[41,4648,501],{"class":65},[41,4650,161],{"class":54},[41,4652,4653,4655,4657,4659,4661,4663,4665,4667,4669],{"class":43,"line":621},[41,4654,570],{"class":133},[41,4656,137],{"class":54},[41,4658,175],{"class":204},[41,4660,208],{"class":58},[41,4662,237],{"class":54},[41,4664,634],{"class":75},[41,4666,237],{"class":54},[41,4668,214],{"class":58},[41,4670,217],{"class":54},[41,4672,4673],{"class":43,"line":643},[41,4674,223],{"class":54},[41,4676,4677],{"class":43,"line":648},[41,4678,367],{"emptyLinePlaceholder":366},[41,4680,4681,4683,4685,4687,4689,4691],{"class":43,"line":653},[41,4682,656],{"class":528},[41,4684,659],{"class":54},[41,4686,547],{"class":133},[41,4688,245],{"class":54},[41,4690,609],{"class":133},[41,4692,668],{"class":54},[41,4694,4695],{"class":43,"line":671},[41,4696,361],{"class":54},[19,4698,4700],{"id":4699},"_3-use-in-a-component","3. Use in a Component",[32,4702,4704],{"className":301,"code":4703,"language":303,"meta":37,"style":37},"\u002F\u002F components\u002FTryOnWidget.tsx\nimport { useFittingWidget } from '..\u002Fhooks\u002FuseFittingWidget';\n\ninterface Props {\n  productName: string;\n  imageUrl: string;\n}\n\nexport function TryOnWidget({ productName, imageUrl }: Props) {\n  const { open } = useFittingWidget();\n\n  return (\n    \u003Cdiv>\n      \u003Cdiv\n        id=\"widget-container\"\n        style={{ width: '100%', maxWidth: 600, aspectRatio: '3\u002F4' }}\n      \u002F>\n      \u003Cbutton\n        onClick={() =>\n          open({\n            targetElementId: 'widget-container',\n            model: 'balanced',\n            tryonItems: [{ productName, url: imageUrl }],\n          })\n        }\n      >\n        Try On\n      \u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  );\n}\n",[27,4705,4706,4710,4730,4734,4742,4752,4762,4766,4770,4794,4812,4816,4822,4830,4836,4848,4886,4890,4896,4904,4912,4926,4940,4966,4972,4976,4980,4985,4993,5001,5007],{"__ignoreMap":37},[41,4707,4708],{"class":43,"line":44},[41,4709,687],{"class":47},[41,4711,4712,4714,4716,4718,4720,4722,4724,4726,4728],{"class":43,"line":51},[41,4713,692],{"class":528},[41,4715,659],{"class":54},[41,4717,534],{"class":133},[41,4719,699],{"class":54},[41,4721,702],{"class":528},[41,4723,258],{"class":54},[41,4725,707],{"class":75},[41,4727,237],{"class":54},[41,4729,217],{"class":54},[41,4731,4732],{"class":43,"line":62},[41,4733,367],{"emptyLinePlaceholder":366},[41,4735,4736,4738,4740],{"class":43,"line":82},[41,4737,315],{"class":65},[41,4739,722],{"class":318},[41,4741,161],{"class":54},[41,4743,4744,4746,4748,4750],{"class":43,"line":97},[41,4745,326],{"class":58},[41,4747,30],{"class":54},[41,4749,331],{"class":318},[41,4751,217],{"class":54},[41,4753,4754,4756,4758,4760],{"class":43,"line":109},[41,4755,739],{"class":58},[41,4757,30],{"class":54},[41,4759,331],{"class":318},[41,4761,217],{"class":54},[41,4763,4764],{"class":43,"line":130},[41,4765,361],{"class":54},[41,4767,4768],{"class":43,"line":164},[41,4769,367],{"emptyLinePlaceholder":366},[41,4771,4772,4774,4776,4778,4780,4782,4784,4786,4788,4790,4792],{"class":43,"line":220},[41,4773,529],{"class":528},[41,4775,155],{"class":65},[41,4777,762],{"class":204},[41,4779,765],{"class":54},[41,4781,768],{"class":481},[41,4783,245],{"class":54},[41,4785,773],{"class":481},[41,4787,776],{"class":54},[41,4789,722],{"class":318},[41,4791,214],{"class":54},[41,4793,161],{"class":54},[41,4795,4796,4798,4800,4802,4804,4806,4808,4810],{"class":43,"line":226},[41,4797,544],{"class":65},[41,4799,659],{"class":54},[41,4801,547],{"class":133},[41,4803,699],{"class":54},[41,4805,183],{"class":54},[41,4807,534],{"class":204},[41,4809,158],{"class":58},[41,4811,217],{"class":54},[41,4813,4814],{"class":43,"line":250},[41,4815,367],{"emptyLinePlaceholder":366},[41,4817,4818,4820],{"class":43,"line":267},[41,4819,656],{"class":528},[41,4821,811],{"class":58},[41,4823,4824,4826,4828],{"class":43,"line":277},[41,4825,816],{"class":54},[41,4827,819],{"class":58},[41,4829,106],{"class":54},[41,4831,4832,4834],{"class":43,"line":447},[41,4833,826],{"class":54},[41,4835,829],{"class":58},[41,4837,4838,4840,4842,4844,4846],{"class":43,"line":459},[41,4839,834],{"class":65},[41,4841,69],{"class":54},[41,4843,72],{"class":54},[41,4845,841],{"class":75},[41,4847,79],{"class":54},[41,4849,4850,4852,4854,4856,4858,4860,4862,4864,4866,4868,4870,4872,4874,4876,4878,4880,4882,4884],{"class":43,"line":470},[41,4851,848],{"class":65},[41,4853,851],{"class":54},[41,4855,854],{"class":58},[41,4857,30],{"class":54},[41,4859,258],{"class":54},[41,4861,861],{"class":75},[41,4863,237],{"class":54},[41,4865,245],{"class":54},[41,4867,868],{"class":58},[41,4869,30],{"class":54},[41,4871,874],{"class":873},[41,4873,245],{"class":54},[41,4875,879],{"class":58},[41,4877,30],{"class":54},[41,4879,258],{"class":54},[41,4881,886],{"class":75},[41,4883,237],{"class":54},[41,4885,891],{"class":54},[41,4887,4888],{"class":43,"line":509},[41,4889,896],{"class":54},[41,4891,4892,4894],{"class":43,"line":515},[41,4893,826],{"class":54},[41,4895,903],{"class":58},[41,4897,4898,4900,4902],{"class":43,"line":520},[41,4899,908],{"class":65},[41,4901,911],{"class":54},[41,4903,914],{"class":65},[41,4905,4906,4908,4910],{"class":43,"line":525},[41,4907,919],{"class":204},[41,4909,208],{"class":133},[41,4911,456],{"class":54},[41,4913,4914,4916,4918,4920,4922,4924],{"class":43,"line":541},[41,4915,928],{"class":58},[41,4917,30],{"class":54},[41,4919,258],{"class":54},[41,4921,841],{"class":75},[41,4923,237],{"class":54},[41,4925,939],{"class":54},[41,4927,4928,4930,4932,4934,4936,4938],{"class":43,"line":567},[41,4929,944],{"class":58},[41,4931,30],{"class":54},[41,4933,258],{"class":54},[41,4935,399],{"class":75},[41,4937,237],{"class":54},[41,4939,939],{"class":54},[41,4941,4942,4944,4946,4948,4950,4952,4954,4956,4958,4960,4962,4964],{"class":43,"line":594},[41,4943,959],{"class":58},[41,4945,30],{"class":54},[41,4947,964],{"class":133},[41,4949,967],{"class":54},[41,4951,768],{"class":133},[41,4953,245],{"class":54},[41,4955,974],{"class":58},[41,4957,30],{"class":54},[41,4959,979],{"class":133},[41,4961,982],{"class":54},[41,4963,985],{"class":133},[41,4965,939],{"class":54},[41,4967,4968,4970],{"class":43,"line":599},[41,4969,992],{"class":54},[41,4971,995],{"class":133},[41,4973,4974],{"class":43,"line":604},[41,4975,1000],{"class":54},[41,4977,4978],{"class":43,"line":621},[41,4979,1005],{"class":54},[41,4981,4982],{"class":43,"line":643},[41,4983,4984],{"class":133},"        Try On\n",[41,4986,4987,4989,4991],{"class":43,"line":648},[41,4988,1015],{"class":54},[41,4990,1018],{"class":58},[41,4992,106],{"class":54},[41,4994,4995,4997,4999],{"class":43,"line":653},[41,4996,1025],{"class":54},[41,4998,819],{"class":58},[41,5000,106],{"class":54},[41,5002,5003,5005],{"class":43,"line":671},[41,5004,1034],{"class":58},[41,5006,217],{"class":54},[41,5008,5009],{"class":43,"line":1039},[41,5010,361],{"class":54},[1043,5012,1045],{},{"title":37,"searchDepth":51,"depth":51,"links":5014},[5015,5016,5017],{"id":4188,"depth":51,"text":4189},{"id":4389,"depth":51,"text":4390},{"id":4699,"depth":51,"text":4700},"Integrate with a React (Vite \u002F CRA) app",{},"\u002Fen\u002Fintegrations\u002Freact",{"title":5,"description":5018},"en\u002Fintegrations\u002Freact","pb3AGE_nU_OjJFKOaRsB1vUMbyzjRuGZlTgplr5i71Q",{"id":5025,"title":5026,"body":5027,"description":5697,"extension":1052,"icon":5698,"meta":5699,"navigation":366,"path":5700,"seo":5701,"stem":5702,"__hash__":5703},"content\u002Fen\u002Fintegrations\u002Fvanilla-js.md","Vanilla JS",{"type":7,"value":5028,"toc":5693},[5029,5033,5036,5040,5667,5671,5690],[10,5030,5032],{"id":5031},"vanilla-js-integration","Vanilla JS Integration",[15,5034,5035],{},"No framework needed — just HTML and JavaScript.",[19,5037,5039],{"id":5038},"full-example","Full Example",[32,5041,5043],{"className":34,"code":5042,"language":36,"meta":37,"style":37},"\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n  \u003Cmeta charset=\"UTF-8\" \u002F>\n  \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \u002F>\n  \u003Ctitle>Product Page — Virtual Try-On\u003C\u002Ftitle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n  \u003Ch1>Classic Denim Jacket\u003C\u002Fh1>\n  \u003Cp>$89.00\u003C\u002Fp>\n\n  \u003C!-- Widget container -->\n  \u003Cdiv id=\"widget-container\" style=\"width: 100%; max-width: 600px; aspect-ratio: 3 \u002F 4;\">\u003C\u002Fdiv>\n\n  \u003Cbutton onclick=\"openWidget()\">Try On\u003C\u002Fbutton>\n\n  \u003C!-- 1. Load the widget bundle -->\n  \u003Cscript\n    src=\"https:\u002F\u002Fwidget.try-on.ru\u002Ffitting-widget-bundle.js\"\n    id=\"fitting-widget-bundle\"\n  >\u003C\u002Fscript>\n\n  \u003C!-- 2. Initialize -->\n  \u003Cscript id=\"fitting-init\">\n    window.fitting = window.fitting || function() {\n      (window.fitting.q = window.fitting.q || []).push(arguments);\n    };\n    window.fitting('init', {\n      apiKey: 'YOUR_API_KEY'\n    });\n  \u003C\u002Fscript>\n\n  \u003Cscript>\n    function openWidget() {\n      window.fitting('create', {\n        targetElementId: 'widget-container',\n        model: 'balanced',\n        tryonItems: [\n          {\n            productName: 'Classic Denim Jacket',\n            url: 'https:\u002F\u002Fexample.com\u002Fimages\u002Fjacket.jpg',\n          },\n        ],\n      });\n    }\n  \u003C\u002Fscript>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[27,5044,5045,5058,5077,5086,5106,5138,5156,5164,5173,5177,5193,5210,5214,5219,5252,5256,5286,5290,5295,5301,5314,5327,5336,5340,5345,5363,5387,5430,5435,5455,5468,5476,5485,5490,5499,5512,5534,5550,5566,5576,5581,5596,5612,5617,5624,5634,5640,5649,5658],{"__ignoreMap":37},[41,5046,5047,5050,5053,5056],{"class":43,"line":44},[41,5048,5049],{"class":54},"\u003C!",[41,5051,5052],{"class":58},"DOCTYPE",[41,5054,5055],{"class":65}," html",[41,5057,106],{"class":54},[41,5059,5060,5062,5064,5066,5068,5070,5073,5075],{"class":43,"line":51},[41,5061,55],{"class":54},[41,5063,36],{"class":58},[41,5065,3417],{"class":65},[41,5067,69],{"class":54},[41,5069,72],{"class":54},[41,5071,5072],{"class":75},"en",[41,5074,72],{"class":54},[41,5076,106],{"class":54},[41,5078,5079,5081,5084],{"class":43,"line":62},[41,5080,55],{"class":54},[41,5082,5083],{"class":58},"head",[41,5085,106],{"class":54},[41,5087,5088,5090,5092,5095,5097,5099,5102,5104],{"class":43,"line":82},[41,5089,3328],{"class":54},[41,5091,3569],{"class":58},[41,5093,5094],{"class":65}," charset",[41,5096,69],{"class":54},[41,5098,72],{"class":54},[41,5100,5101],{"class":75},"UTF-8",[41,5103,72],{"class":54},[41,5105,3384],{"class":54},[41,5107,5108,5110,5112,5115,5117,5119,5122,5124,5127,5129,5131,5134,5136],{"class":43,"line":97},[41,5109,3328],{"class":54},[41,5111,3569],{"class":58},[41,5113,5114],{"class":65}," name",[41,5116,69],{"class":54},[41,5118,72],{"class":54},[41,5120,5121],{"class":75},"viewport",[41,5123,72],{"class":54},[41,5125,5126],{"class":65}," content",[41,5128,69],{"class":54},[41,5130,72],{"class":54},[41,5132,5133],{"class":75},"width=device-width, initial-scale=1.0",[41,5135,72],{"class":54},[41,5137,3384],{"class":54},[41,5139,5140,5142,5145,5147,5150,5152,5154],{"class":43,"line":109},[41,5141,3328],{"class":54},[41,5143,5144],{"class":58},"title",[41,5146,3341],{"class":54},[41,5148,5149],{"class":133},"Product Page — Virtual Try-On",[41,5151,280],{"class":54},[41,5153,5144],{"class":58},[41,5155,106],{"class":54},[41,5157,5158,5160,5162],{"class":43,"line":130},[41,5159,280],{"class":54},[41,5161,5083],{"class":58},[41,5163,106],{"class":54},[41,5165,5166,5168,5171],{"class":43,"line":164},[41,5167,55],{"class":54},[41,5169,5170],{"class":58},"body",[41,5172,106],{"class":54},[41,5174,5175],{"class":43,"line":220},[41,5176,367],{"emptyLinePlaceholder":366},[41,5178,5179,5181,5183,5185,5187,5189,5191],{"class":43,"line":226},[41,5180,3328],{"class":54},[41,5182,10],{"class":58},[41,5184,3341],{"class":54},[41,5186,2123],{"class":133},[41,5188,280],{"class":54},[41,5190,10],{"class":58},[41,5192,106],{"class":54},[41,5194,5195,5197,5199,5201,5204,5206,5208],{"class":43,"line":250},[41,5196,3328],{"class":54},[41,5198,15],{"class":58},[41,5200,3341],{"class":54},[41,5202,5203],{"class":133},"$89.00",[41,5205,280],{"class":54},[41,5207,15],{"class":58},[41,5209,106],{"class":54},[41,5211,5212],{"class":43,"line":267},[41,5213,367],{"emptyLinePlaceholder":366},[41,5215,5216],{"class":43,"line":277},[41,5217,5218],{"class":47},"  \u003C!-- Widget container -->\n",[41,5220,5221,5223,5225,5227,5229,5231,5233,5235,5237,5239,5241,5244,5246,5248,5250],{"class":43,"line":447},[41,5222,3328],{"class":54},[41,5224,819],{"class":58},[41,5226,116],{"class":65},[41,5228,69],{"class":54},[41,5230,72],{"class":54},[41,5232,841],{"class":75},[41,5234,72],{"class":54},[41,5236,2880],{"class":65},[41,5238,69],{"class":54},[41,5240,72],{"class":54},[41,5242,5243],{"class":75},"width: 100%; max-width: 600px; aspect-ratio: 3 \u002F 4;",[41,5245,72],{"class":54},[41,5247,100],{"class":54},[41,5249,819],{"class":58},[41,5251,106],{"class":54},[41,5253,5254],{"class":43,"line":459},[41,5255,367],{"emptyLinePlaceholder":366},[41,5257,5258,5260,5262,5265,5267,5269,5272,5274,5276,5278,5280,5282,5284],{"class":43,"line":470},[41,5259,3328],{"class":54},[41,5261,1018],{"class":58},[41,5263,5264],{"class":65}," onclick",[41,5266,69],{"class":54},[41,5268,72],{"class":54},[41,5270,5271],{"class":204},"openWidget",[41,5273,158],{"class":75},[41,5275,72],{"class":54},[41,5277,3341],{"class":54},[41,5279,2936],{"class":133},[41,5281,280],{"class":54},[41,5283,1018],{"class":58},[41,5285,106],{"class":54},[41,5287,5288],{"class":43,"line":509},[41,5289,367],{"emptyLinePlaceholder":366},[41,5291,5292],{"class":43,"line":515},[41,5293,5294],{"class":47},"  \u003C!-- 1. Load the widget bundle -->\n",[41,5296,5297,5299],{"class":43,"line":520},[41,5298,3328],{"class":54},[41,5300,59],{"class":58},[41,5302,5303,5306,5308,5310,5312],{"class":43,"line":525},[41,5304,5305],{"class":65},"    src",[41,5307,69],{"class":54},[41,5309,72],{"class":54},[41,5311,76],{"class":75},[41,5313,79],{"class":54},[41,5315,5316,5319,5321,5323,5325],{"class":43,"line":541},[41,5317,5318],{"class":65},"    id",[41,5320,69],{"class":54},[41,5322,72],{"class":54},[41,5324,92],{"class":75},[41,5326,79],{"class":54},[41,5328,5329,5332,5334],{"class":43,"line":567},[41,5330,5331],{"class":54},"  >\u003C\u002F",[41,5333,103],{"class":58},[41,5335,106],{"class":54},[41,5337,5338],{"class":43,"line":594},[41,5339,367],{"emptyLinePlaceholder":366},[41,5341,5342],{"class":43,"line":599},[41,5343,5344],{"class":47},"  \u003C!-- 2. Initialize -->\n",[41,5346,5347,5349,5351,5353,5355,5357,5359,5361],{"class":43,"line":604},[41,5348,3328],{"class":54},[41,5350,103],{"class":58},[41,5352,116],{"class":65},[41,5354,69],{"class":54},[41,5356,72],{"class":54},[41,5358,123],{"class":75},[41,5360,72],{"class":54},[41,5362,106],{"class":54},[41,5364,5365,5367,5369,5371,5373,5375,5377,5379,5381,5383,5385],{"class":43,"line":621},[41,5366,570],{"class":133},[41,5368,137],{"class":54},[41,5370,140],{"class":133},[41,5372,69],{"class":54},[41,5374,145],{"class":133},[41,5376,137],{"class":54},[41,5378,140],{"class":133},[41,5380,152],{"class":54},[41,5382,155],{"class":65},[41,5384,158],{"class":54},[41,5386,161],{"class":54},[41,5388,5389,5392,5394,5396,5398,5400,5402,5404,5406,5408,5410,5412,5414,5416,5418,5420,5422,5424,5426,5428],{"class":43,"line":643},[41,5390,5391],{"class":58},"      (",[41,5393,170],{"class":133},[41,5395,137],{"class":54},[41,5397,175],{"class":133},[41,5399,137],{"class":54},[41,5401,180],{"class":133},[41,5403,183],{"class":54},[41,5405,145],{"class":133},[41,5407,137],{"class":54},[41,5409,175],{"class":133},[41,5411,137],{"class":54},[41,5413,180],{"class":133},[41,5415,196],{"class":54},[41,5417,199],{"class":58},[41,5419,137],{"class":54},[41,5421,205],{"class":204},[41,5423,208],{"class":58},[41,5425,211],{"class":133},[41,5427,214],{"class":58},[41,5429,217],{"class":54},[41,5431,5432],{"class":43,"line":648},[41,5433,5434],{"class":54},"    };\n",[41,5436,5437,5439,5441,5443,5445,5447,5449,5451,5453],{"class":43,"line":653},[41,5438,570],{"class":133},[41,5440,137],{"class":54},[41,5442,175],{"class":204},[41,5444,208],{"class":133},[41,5446,237],{"class":54},[41,5448,240],{"class":75},[41,5450,237],{"class":54},[41,5452,245],{"class":54},[41,5454,161],{"class":54},[41,5456,5457,5460,5462,5464,5466],{"class":43,"line":671},[41,5458,5459],{"class":58},"      apiKey",[41,5461,30],{"class":54},[41,5463,258],{"class":54},[41,5465,1981],{"class":75},[41,5467,264],{"class":54},[41,5469,5470,5472,5474],{"class":43,"line":1039},[41,5471,2839],{"class":54},[41,5473,214],{"class":133},[41,5475,217],{"class":54},[41,5477,5479,5481,5483],{"class":43,"line":5478},32,[41,5480,3389],{"class":54},[41,5482,103],{"class":58},[41,5484,106],{"class":54},[41,5486,5488],{"class":43,"line":5487},33,[41,5489,367],{"emptyLinePlaceholder":366},[41,5491,5493,5495,5497],{"class":43,"line":5492},34,[41,5494,3328],{"class":54},[41,5496,103],{"class":58},[41,5498,106],{"class":54},[41,5500,5502,5505,5508,5510],{"class":43,"line":5501},35,[41,5503,5504],{"class":65},"    function",[41,5506,5507],{"class":204}," openWidget",[41,5509,158],{"class":54},[41,5511,161],{"class":54},[41,5513,5515,5518,5520,5522,5524,5526,5528,5530,5532],{"class":43,"line":5514},36,[41,5516,5517],{"class":133},"      window",[41,5519,137],{"class":54},[41,5521,175],{"class":204},[41,5523,208],{"class":58},[41,5525,237],{"class":54},[41,5527,581],{"class":75},[41,5529,237],{"class":54},[41,5531,245],{"class":54},[41,5533,161],{"class":54},[41,5535,5537,5540,5542,5544,5546,5548],{"class":43,"line":5536},37,[41,5538,5539],{"class":58},"        targetElementId",[41,5541,30],{"class":54},[41,5543,258],{"class":54},[41,5545,841],{"class":75},[41,5547,237],{"class":54},[41,5549,939],{"class":54},[41,5551,5553,5556,5558,5560,5562,5564],{"class":43,"line":5552},38,[41,5554,5555],{"class":58},"        model",[41,5557,30],{"class":54},[41,5559,258],{"class":54},[41,5561,399],{"class":75},[41,5563,237],{"class":54},[41,5565,939],{"class":54},[41,5567,5569,5572,5574],{"class":43,"line":5568},39,[41,5570,5571],{"class":58},"        tryonItems",[41,5573,30],{"class":54},[41,5575,1360],{"class":58},[41,5577,5579],{"class":43,"line":5578},40,[41,5580,3161],{"class":54},[41,5582,5584,5586,5588,5590,5592,5594],{"class":43,"line":5583},41,[41,5585,3166],{"class":58},[41,5587,30],{"class":54},[41,5589,258],{"class":54},[41,5591,2123],{"class":75},[41,5593,237],{"class":54},[41,5595,939],{"class":54},[41,5597,5599,5601,5603,5605,5608,5610],{"class":43,"line":5598},42,[41,5600,3181],{"class":58},[41,5602,30],{"class":54},[41,5604,258],{"class":54},[41,5606,5607],{"class":75},"https:\u002F\u002Fexample.com\u002Fimages\u002Fjacket.jpg",[41,5609,237],{"class":54},[41,5611,939],{"class":54},[41,5613,5615],{"class":43,"line":5614},43,[41,5616,3196],{"class":54},[41,5618,5620,5622],{"class":43,"line":5619},44,[41,5621,3201],{"class":58},[41,5623,939],{"class":54},[41,5625,5627,5630,5632],{"class":43,"line":5626},45,[41,5628,5629],{"class":54},"      }",[41,5631,214],{"class":58},[41,5633,217],{"class":54},[41,5635,5637],{"class":43,"line":5636},46,[41,5638,5639],{"class":54},"    }\n",[41,5641,5643,5645,5647],{"class":43,"line":5642},47,[41,5644,3389],{"class":54},[41,5646,103],{"class":58},[41,5648,106],{"class":54},[41,5650,5652,5654,5656],{"class":43,"line":5651},48,[41,5653,280],{"class":54},[41,5655,5170],{"class":58},[41,5657,106],{"class":54},[41,5659,5661,5663,5665],{"class":43,"line":5660},49,[41,5662,280],{"class":54},[41,5664,36],{"class":58},[41,5666,106],{"class":54},[19,5668,5670],{"id":5669},"key-points","Key Points",[2173,5672,5673,5676,5685],{},[2176,5674,5675],{},"Load the bundle script first.",[2176,5677,5678,5679,5682,5683,137],{},"Initialize with ",[27,5680,5681],{},"window.fitting('init', { apiKey })"," before calling ",[27,5684,581],{},[2176,5686,2218,5687,5689],{},[27,5688,1203],{}," must match an existing element on the page.",[1043,5691,5692],{},"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":37,"searchDepth":51,"depth":51,"links":5694},[5695,5696],{"id":5038,"depth":51,"text":5039},{"id":5669,"depth":51,"text":5670},"Integrate with plain HTML\u002FJavaScript","i-lucide-file-code",{},"\u002Fen\u002Fintegrations\u002Fvanilla-js",{"title":5026,"description":5697},"en\u002Fintegrations\u002Fvanilla-js","Ts8msIFer-tIlPDRwRbkNZSpWu0JrTJP8uMKqB57tJQ",{"id":5705,"title":5706,"body":5707,"description":6552,"extension":1052,"icon":6553,"meta":6554,"navigation":366,"path":6555,"seo":6556,"stem":6557,"__hash__":6558},"content\u002Fen\u002Fintegrations\u002Fvue.md","Vue 3",{"type":7,"value":5708,"toc":6547},[5709,5713,5716,5718,5723,5902,5906,6204,6208,6544],[10,5710,5712],{"id":5711},"vue-3-integration","Vue 3 Integration",[15,5714,5715],{},"Works with Vue 3 + Vite or any Vue 3 setup.",[19,5717,4189],{"id":4188},[15,5719,5720,5721,30],{},"In ",[27,5722,29],{},[32,5724,5726],{"className":34,"code":5725,"language":36,"meta":37,"style":37},"\u003Cscript\n  src=\"https:\u002F\u002Fwidget.try-on.ru\u002Ffitting-widget-bundle.js\"\n  id=\"fitting-widget-bundle\"\n>\u003C\u002Fscript>\n\u003Cscript id=\"fitting-init\">\n  window.fitting = window.fitting || function() {\n    (window.fitting.q = window.fitting.q || []).push(arguments);\n  };\n  window.fitting('init', {\n    apiKey: 'YOUR_API_KEY'\n  });\n\u003C\u002Fscript>\n",[27,5727,5728,5734,5746,5758,5766,5784,5808,5850,5854,5874,5886,5894],{"__ignoreMap":37},[41,5729,5730,5732],{"class":43,"line":44},[41,5731,55],{"class":54},[41,5733,59],{"class":58},[41,5735,5736,5738,5740,5742,5744],{"class":43,"line":51},[41,5737,66],{"class":65},[41,5739,69],{"class":54},[41,5741,72],{"class":54},[41,5743,76],{"class":75},[41,5745,79],{"class":54},[41,5747,5748,5750,5752,5754,5756],{"class":43,"line":62},[41,5749,85],{"class":65},[41,5751,69],{"class":54},[41,5753,72],{"class":54},[41,5755,92],{"class":75},[41,5757,79],{"class":54},[41,5759,5760,5762,5764],{"class":43,"line":82},[41,5761,100],{"class":54},[41,5763,103],{"class":58},[41,5765,106],{"class":54},[41,5767,5768,5770,5772,5774,5776,5778,5780,5782],{"class":43,"line":97},[41,5769,55],{"class":54},[41,5771,103],{"class":58},[41,5773,116],{"class":65},[41,5775,69],{"class":54},[41,5777,72],{"class":54},[41,5779,123],{"class":75},[41,5781,72],{"class":54},[41,5783,106],{"class":54},[41,5785,5786,5788,5790,5792,5794,5796,5798,5800,5802,5804,5806],{"class":43,"line":109},[41,5787,134],{"class":133},[41,5789,137],{"class":54},[41,5791,140],{"class":133},[41,5793,69],{"class":54},[41,5795,145],{"class":133},[41,5797,137],{"class":54},[41,5799,140],{"class":133},[41,5801,152],{"class":54},[41,5803,155],{"class":65},[41,5805,158],{"class":54},[41,5807,161],{"class":54},[41,5809,5810,5812,5814,5816,5818,5820,5822,5824,5826,5828,5830,5832,5834,5836,5838,5840,5842,5844,5846,5848],{"class":43,"line":130},[41,5811,167],{"class":58},[41,5813,170],{"class":133},[41,5815,137],{"class":54},[41,5817,175],{"class":133},[41,5819,137],{"class":54},[41,5821,180],{"class":133},[41,5823,183],{"class":54},[41,5825,145],{"class":133},[41,5827,137],{"class":54},[41,5829,175],{"class":133},[41,5831,137],{"class":54},[41,5833,180],{"class":133},[41,5835,196],{"class":54},[41,5837,199],{"class":58},[41,5839,137],{"class":54},[41,5841,205],{"class":204},[41,5843,208],{"class":58},[41,5845,211],{"class":133},[41,5847,214],{"class":58},[41,5849,217],{"class":54},[41,5851,5852],{"class":43,"line":164},[41,5853,223],{"class":54},[41,5855,5856,5858,5860,5862,5864,5866,5868,5870,5872],{"class":43,"line":220},[41,5857,134],{"class":133},[41,5859,137],{"class":54},[41,5861,175],{"class":204},[41,5863,208],{"class":133},[41,5865,237],{"class":54},[41,5867,240],{"class":75},[41,5869,237],{"class":54},[41,5871,245],{"class":54},[41,5873,161],{"class":54},[41,5875,5876,5878,5880,5882,5884],{"class":43,"line":226},[41,5877,253],{"class":58},[41,5879,30],{"class":54},[41,5881,258],{"class":54},[41,5883,1981],{"class":75},[41,5885,264],{"class":54},[41,5887,5888,5890,5892],{"class":43,"line":250},[41,5889,270],{"class":54},[41,5891,214],{"class":133},[41,5893,217],{"class":54},[41,5895,5896,5898,5900],{"class":43,"line":267},[41,5897,280],{"class":54},[41,5899,103],{"class":58},[41,5901,106],{"class":54},[19,5903,5905],{"id":5904},"_2-create-a-composable","2. Create a Composable",[32,5907,5909],{"className":3627,"code":5908,"language":3424,"meta":37,"style":37},"\u002F\u002F composables\u002FuseFittingWidget.ts\nexport interface TryonItem {\n  productName: string\n  url: string\n  productId?: string\n}\n\nexport interface CreateOptions {\n  targetElementId: string\n  model?: 'balanced' | 'quality' | 'speed'\n  tryonItems: TryonItem[]\n}\n\ndeclare global {\n  interface Window {\n    fitting: (command: string, options?: unknown) => void\n  }\n}\n\nexport function useFittingWidget() {\n  const open = (options: CreateOptions) => {\n    window.fitting('create', options)\n  }\n\n  const close = () => {\n    window.fitting('close')\n  }\n\n  return { open, close }\n}\n",[27,5910,5911,5916,5927,5935,5943,5951,5955,5959,5969,5977,6005,6016,6020,6024,6032,6040,6069,6073,6077,6081,6093,6115,6137,6141,6145,6159,6177,6181,6185,6200],{"__ignoreMap":37},[41,5912,5913],{"class":43,"line":44},[41,5914,5915],{"class":47},"\u002F\u002F composables\u002FuseFittingWidget.ts\n",[41,5917,5918,5920,5923,5925],{"class":43,"line":51},[41,5919,529],{"class":528},[41,5921,5922],{"class":65}," interface",[41,5924,319],{"class":318},[41,5926,161],{"class":54},[41,5928,5929,5931,5933],{"class":43,"line":62},[41,5930,326],{"class":58},[41,5932,30],{"class":54},[41,5934,3973],{"class":318},[41,5936,5937,5939,5941],{"class":43,"line":82},[41,5938,338],{"class":58},[41,5940,30],{"class":54},[41,5942,3973],{"class":318},[41,5944,5945,5947,5949],{"class":43,"line":97},[41,5946,349],{"class":58},[41,5948,352],{"class":54},[41,5950,3973],{"class":318},[41,5952,5953],{"class":43,"line":109},[41,5954,361],{"class":54},[41,5956,5957],{"class":43,"line":130},[41,5958,367],{"emptyLinePlaceholder":366},[41,5960,5961,5963,5965,5967],{"class":43,"line":164},[41,5962,529],{"class":528},[41,5964,5922],{"class":65},[41,5966,374],{"class":318},[41,5968,161],{"class":54},[41,5970,5971,5973,5975],{"class":43,"line":220},[41,5972,381],{"class":58},[41,5974,30],{"class":54},[41,5976,3973],{"class":318},[41,5978,5979,5981,5983,5985,5987,5989,5991,5993,5995,5997,5999,6001,6003],{"class":43,"line":226},[41,5980,392],{"class":58},[41,5982,352],{"class":54},[41,5984,258],{"class":54},[41,5986,399],{"class":75},[41,5988,237],{"class":54},[41,5990,404],{"class":54},[41,5992,258],{"class":54},[41,5994,409],{"class":75},[41,5996,237],{"class":54},[41,5998,404],{"class":54},[41,6000,258],{"class":54},[41,6002,418],{"class":75},[41,6004,264],{"class":54},[41,6006,6007,6009,6011,6013],{"class":43,"line":250},[41,6008,427],{"class":58},[41,6010,30],{"class":54},[41,6012,319],{"class":318},[41,6014,6015],{"class":133},"[]\n",[41,6017,6018],{"class":43,"line":267},[41,6019,361],{"class":54},[41,6021,6022],{"class":43,"line":277},[41,6023,367],{"emptyLinePlaceholder":366},[41,6025,6026,6028,6030],{"class":43,"line":447},[41,6027,450],{"class":65},[41,6029,453],{"class":133},[41,6031,456],{"class":54},[41,6033,6034,6036,6038],{"class":43,"line":459},[41,6035,462],{"class":65},[41,6037,465],{"class":318},[41,6039,161],{"class":54},[41,6041,6042,6044,6046,6048,6050,6052,6054,6056,6058,6060,6062,6064,6066],{"class":43,"line":470},[41,6043,473],{"class":58},[41,6045,30],{"class":54},[41,6047,478],{"class":54},[41,6049,482],{"class":481},[41,6051,30],{"class":54},[41,6053,331],{"class":318},[41,6055,245],{"class":54},[41,6057,491],{"class":481},[41,6059,352],{"class":54},[41,6061,496],{"class":318},[41,6063,214],{"class":54},[41,6065,501],{"class":65},[41,6067,6068],{"class":318}," void\n",[41,6070,6071],{"class":43,"line":509},[41,6072,512],{"class":54},[41,6074,6075],{"class":43,"line":515},[41,6076,361],{"class":54},[41,6078,6079],{"class":43,"line":520},[41,6080,367],{"emptyLinePlaceholder":366},[41,6082,6083,6085,6087,6089,6091],{"class":43,"line":525},[41,6084,529],{"class":528},[41,6086,155],{"class":65},[41,6088,534],{"class":204},[41,6090,158],{"class":54},[41,6092,161],{"class":54},[41,6094,6095,6097,6099,6101,6103,6105,6107,6109,6111,6113],{"class":43,"line":541},[41,6096,544],{"class":65},[41,6098,547],{"class":133},[41,6100,183],{"class":54},[41,6102,478],{"class":54},[41,6104,554],{"class":481},[41,6106,30],{"class":54},[41,6108,374],{"class":318},[41,6110,214],{"class":54},[41,6112,501],{"class":65},[41,6114,161],{"class":54},[41,6116,6117,6119,6121,6123,6125,6127,6129,6131,6133,6135],{"class":43,"line":567},[41,6118,570],{"class":133},[41,6120,137],{"class":54},[41,6122,175],{"class":204},[41,6124,208],{"class":58},[41,6126,237],{"class":54},[41,6128,581],{"class":75},[41,6130,237],{"class":54},[41,6132,245],{"class":54},[41,6134,491],{"class":133},[41,6136,995],{"class":58},[41,6138,6139],{"class":43,"line":594},[41,6140,512],{"class":54},[41,6142,6143],{"class":43,"line":599},[41,6144,367],{"emptyLinePlaceholder":366},[41,6146,6147,6149,6151,6153,6155,6157],{"class":43,"line":604},[41,6148,544],{"class":65},[41,6150,609],{"class":133},[41,6152,183],{"class":54},[41,6154,614],{"class":54},[41,6156,501],{"class":65},[41,6158,161],{"class":54},[41,6160,6161,6163,6165,6167,6169,6171,6173,6175],{"class":43,"line":621},[41,6162,570],{"class":133},[41,6164,137],{"class":54},[41,6166,175],{"class":204},[41,6168,208],{"class":58},[41,6170,237],{"class":54},[41,6172,634],{"class":75},[41,6174,237],{"class":54},[41,6176,995],{"class":58},[41,6178,6179],{"class":43,"line":643},[41,6180,512],{"class":54},[41,6182,6183],{"class":43,"line":648},[41,6184,367],{"emptyLinePlaceholder":366},[41,6186,6187,6189,6191,6193,6195,6197],{"class":43,"line":653},[41,6188,656],{"class":528},[41,6190,659],{"class":54},[41,6192,547],{"class":133},[41,6194,245],{"class":54},[41,6196,609],{"class":133},[41,6198,6199],{"class":54}," }\n",[41,6201,6202],{"class":43,"line":671},[41,6203,361],{"class":54},[19,6205,6207],{"id":6206},"_3-create-the-widget-component","3. Create the Widget Component",[32,6209,6211],{"className":3305,"code":6210,"language":3307,"meta":37,"style":37},"\u003C!-- components\u002FTryOnWidget.vue -->\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cdiv\n      id=\"widget-container\"\n      style=\"width: 100%; max-width: 600px; aspect-ratio: 3\u002F4\"\n    \u002F>\n    \u003Cbutton @click=\"handleTryOn\">Try On\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nimport { useFittingWidget, type TryonItem } from '~\u002Fcomposables\u002FuseFittingWidget'\n\nconst props = defineProps\u003C{\n  productName: string\n  imageUrl: string\n}>()\n\nconst { open } = useFittingWidget()\n\nconst handleTryOn = () => {\n  open({\n    targetElementId: 'widget-container',\n    model: 'balanced',\n    tryonItems: [\n      {\n        productName: props.productName,\n        url: props.imageUrl,\n      },\n    ],\n  })\n}\n\u003C\u002Fscript>\n",[27,6212,6213,6217,6225,6233,6239,6251,6265,6270,6296,6304,6312,6316,6336,6362,6366,6378,6386,6394,6400,6404,6421,6425,6439,6448,6462,6476,6484,6488,6502,6516,6520,6526,6532,6536],{"__ignoreMap":37},[41,6214,6215],{"class":43,"line":44},[41,6216,3834],{"class":47},[41,6218,6219,6221,6223],{"class":43,"line":51},[41,6220,55],{"class":54},[41,6222,3321],{"class":58},[41,6224,106],{"class":54},[41,6226,6227,6229,6231],{"class":43,"line":62},[41,6228,3328],{"class":54},[41,6230,819],{"class":58},[41,6232,106],{"class":54},[41,6234,6235,6237],{"class":43,"line":82},[41,6236,816],{"class":54},[41,6238,829],{"class":58},[41,6240,6241,6243,6245,6247,6249],{"class":43,"line":97},[41,6242,3493],{"class":65},[41,6244,69],{"class":54},[41,6246,72],{"class":54},[41,6248,841],{"class":75},[41,6250,79],{"class":54},[41,6252,6253,6256,6258,6260,6263],{"class":43,"line":109},[41,6254,6255],{"class":65},"      style",[41,6257,69],{"class":54},[41,6259,72],{"class":54},[41,6261,6262],{"class":75},"width: 100%; max-width: 600px; aspect-ratio: 3\u002F4",[41,6264,79],{"class":54},[41,6266,6267],{"class":43,"line":130},[41,6268,6269],{"class":54},"    \u002F>\n",[41,6271,6272,6274,6276,6278,6280,6282,6284,6286,6288,6290,6292,6294],{"class":43,"line":164},[41,6273,816],{"class":54},[41,6275,1018],{"class":58},[41,6277,3889],{"class":65},[41,6279,69],{"class":54},[41,6281,72],{"class":54},[41,6283,3896],{"class":75},[41,6285,72],{"class":54},[41,6287,3341],{"class":54},[41,6289,2936],{"class":133},[41,6291,280],{"class":54},[41,6293,1018],{"class":58},[41,6295,106],{"class":54},[41,6297,6298,6300,6302],{"class":43,"line":220},[41,6299,3389],{"class":54},[41,6301,819],{"class":58},[41,6303,106],{"class":54},[41,6305,6306,6308,6310],{"class":43,"line":226},[41,6307,280],{"class":54},[41,6309,3321],{"class":58},[41,6311,106],{"class":54},[41,6313,6314],{"class":43,"line":250},[41,6315,367],{"emptyLinePlaceholder":366},[41,6317,6318,6320,6322,6324,6326,6328,6330,6332,6334],{"class":43,"line":267},[41,6319,55],{"class":54},[41,6321,103],{"class":58},[41,6323,3414],{"class":65},[41,6325,3417],{"class":65},[41,6327,69],{"class":54},[41,6329,72],{"class":54},[41,6331,3424],{"class":75},[41,6333,72],{"class":54},[41,6335,106],{"class":54},[41,6337,6338,6340,6342,6344,6346,6349,6351,6353,6355,6357,6360],{"class":43,"line":277},[41,6339,692],{"class":528},[41,6341,659],{"class":54},[41,6343,534],{"class":133},[41,6345,245],{"class":54},[41,6347,6348],{"class":528}," type",[41,6350,319],{"class":133},[41,6352,699],{"class":54},[41,6354,702],{"class":528},[41,6356,258],{"class":54},[41,6358,6359],{"class":75},"~\u002Fcomposables\u002FuseFittingWidget",[41,6361,264],{"class":54},[41,6363,6364],{"class":43,"line":447},[41,6365,367],{"emptyLinePlaceholder":366},[41,6367,6368,6370,6372,6374,6376],{"class":43,"line":459},[41,6369,3953],{"class":65},[41,6371,3956],{"class":133},[41,6373,69],{"class":54},[41,6375,3961],{"class":204},[41,6377,3964],{"class":54},[41,6379,6380,6382,6384],{"class":43,"line":470},[41,6381,326],{"class":58},[41,6383,30],{"class":54},[41,6385,3973],{"class":318},[41,6387,6388,6390,6392],{"class":43,"line":509},[41,6389,739],{"class":58},[41,6391,30],{"class":54},[41,6393,3973],{"class":318},[41,6395,6396,6398],{"class":43,"line":515},[41,6397,2933],{"class":54},[41,6399,3988],{"class":133},[41,6401,6402],{"class":43,"line":520},[41,6403,367],{"emptyLinePlaceholder":366},[41,6405,6406,6408,6410,6413,6415,6417,6419],{"class":43,"line":525},[41,6407,3953],{"class":65},[41,6409,659],{"class":54},[41,6411,6412],{"class":133}," open ",[41,6414,982],{"class":54},[41,6416,183],{"class":54},[41,6418,534],{"class":204},[41,6420,3988],{"class":133},[41,6422,6423],{"class":43,"line":541},[41,6424,367],{"emptyLinePlaceholder":366},[41,6426,6427,6429,6431,6433,6435,6437],{"class":43,"line":567},[41,6428,3953],{"class":65},[41,6430,3999],{"class":133},[41,6432,69],{"class":54},[41,6434,614],{"class":54},[41,6436,501],{"class":65},[41,6438,161],{"class":54},[41,6440,6441,6444,6446],{"class":43,"line":594},[41,6442,6443],{"class":204},"  open",[41,6445,208],{"class":58},[41,6447,456],{"class":54},[41,6449,6450,6452,6454,6456,6458,6460],{"class":43,"line":599},[41,6451,4032],{"class":58},[41,6453,30],{"class":54},[41,6455,258],{"class":54},[41,6457,841],{"class":75},[41,6459,237],{"class":54},[41,6461,939],{"class":54},[41,6463,6464,6466,6468,6470,6472,6474],{"class":43,"line":604},[41,6465,4047],{"class":58},[41,6467,30],{"class":54},[41,6469,258],{"class":54},[41,6471,399],{"class":75},[41,6473,237],{"class":54},[41,6475,939],{"class":54},[41,6477,6478,6480,6482],{"class":43,"line":621},[41,6479,4062],{"class":58},[41,6481,30],{"class":54},[41,6483,1360],{"class":58},[41,6485,6486],{"class":43,"line":643},[41,6487,4071],{"class":54},[41,6489,6490,6492,6494,6496,6498,6500],{"class":43,"line":648},[41,6491,4076],{"class":58},[41,6493,30],{"class":54},[41,6495,4081],{"class":133},[41,6497,137],{"class":54},[41,6499,1277],{"class":133},[41,6501,939],{"class":54},[41,6503,6504,6506,6508,6510,6512,6514],{"class":43,"line":653},[41,6505,4092],{"class":58},[41,6507,30],{"class":54},[41,6509,4081],{"class":133},[41,6511,137],{"class":54},[41,6513,4101],{"class":133},[41,6515,939],{"class":54},[41,6517,6518],{"class":43,"line":671},[41,6519,4108],{"class":54},[41,6521,6522,6524],{"class":43,"line":1039},[41,6523,4113],{"class":58},[41,6525,939],{"class":54},[41,6527,6528,6530],{"class":43,"line":5478},[41,6529,270],{"class":54},[41,6531,995],{"class":58},[41,6533,6534],{"class":43,"line":5487},[41,6535,361],{"class":54},[41,6537,6538,6540,6542],{"class":43,"line":5492},[41,6539,280],{"class":54},[41,6541,103],{"class":58},[41,6543,106],{"class":54},[1043,6545,6546],{},"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":37,"searchDepth":51,"depth":51,"links":6548},[6549,6550,6551],{"id":4188,"depth":51,"text":4189},{"id":5904,"depth":51,"text":5905},{"id":6206,"depth":51,"text":6207},"Integrate with a Vue 3 application","i-lucide-venetian-mask",{},"\u002Fen\u002Fintegrations\u002Fvue",{"title":5706,"description":6552},"en\u002Fintegrations\u002Fvue","GShiJEM5AAOgyg7U0MXXp-Lqn_Y-1BooZA_uvPnVwT0",{"id":6560,"title":6561,"body":6562,"description":6971,"extension":1052,"icon":2201,"meta":6972,"navigation":366,"path":2284,"seo":6973,"stem":6974,"__hash__":6975},"content\u002Fgetting-started\u002Fquick-start.md","Быстрый старт",{"type":7,"value":6563,"toc":6962},[6564,6567,6570,6574,6581,6585,6593,6635,6639,6779,6783,6789,6815,6819,6825,6935,6939,6942,6946,6959],[10,6565,6561],{"id":6566},"быстрый-старт",[15,6568,6569],{},"Следуйте этим шагам, чтобы добавить виртуальную примерку на ваш сайт.",[19,6571,6573],{"id":6572},"_1-получите-api-ключ","1. Получите API-ключ",[15,6575,6576,6577,6580],{},"Зарегистрируйтесь на ",[1789,6578,1794],{"href":1791,"rel":6579},[1793],", чтобы получить бесплатный API-ключ.",[19,6582,6584],{"id":6583},"_2-загрузите-скрипт-виджета","2. Загрузите скрипт виджета",[15,6586,6587,6588,6590,6591,30],{},"Добавьте следующий тег ",[27,6589,1805],{}," на страницу, желательно перед закрывающим тегом ",[27,6592,1809],{},[32,6594,6595],{"className":34,"code":1813,"language":36,"meta":37,"style":37},[27,6596,6597,6603,6615,6627],{"__ignoreMap":37},[41,6598,6599,6601],{"class":43,"line":44},[41,6600,55],{"class":54},[41,6602,59],{"class":58},[41,6604,6605,6607,6609,6611,6613],{"class":43,"line":51},[41,6606,66],{"class":65},[41,6608,69],{"class":54},[41,6610,72],{"class":54},[41,6612,76],{"class":75},[41,6614,79],{"class":54},[41,6616,6617,6619,6621,6623,6625],{"class":43,"line":62},[41,6618,85],{"class":65},[41,6620,69],{"class":54},[41,6622,72],{"class":54},[41,6624,92],{"class":75},[41,6626,79],{"class":54},[41,6628,6629,6631,6633],{"class":43,"line":82},[41,6630,100],{"class":54},[41,6632,103],{"class":58},[41,6634,106],{"class":54},[19,6636,6638],{"id":6637},"_3-инициализируйте-виджет","3. Инициализируйте виджет",[32,6640,6641],{"className":34,"code":1860,"language":36,"meta":37,"style":37},[27,6642,6643,6661,6685,6727,6731,6751,6763,6771],{"__ignoreMap":37},[41,6644,6645,6647,6649,6651,6653,6655,6657,6659],{"class":43,"line":44},[41,6646,55],{"class":54},[41,6648,103],{"class":58},[41,6650,116],{"class":65},[41,6652,69],{"class":54},[41,6654,72],{"class":54},[41,6656,123],{"class":75},[41,6658,72],{"class":54},[41,6660,106],{"class":54},[41,6662,6663,6665,6667,6669,6671,6673,6675,6677,6679,6681,6683],{"class":43,"line":51},[41,6664,134],{"class":133},[41,6666,137],{"class":54},[41,6668,140],{"class":133},[41,6670,69],{"class":54},[41,6672,145],{"class":133},[41,6674,137],{"class":54},[41,6676,140],{"class":133},[41,6678,152],{"class":54},[41,6680,155],{"class":65},[41,6682,158],{"class":54},[41,6684,161],{"class":54},[41,6686,6687,6689,6691,6693,6695,6697,6699,6701,6703,6705,6707,6709,6711,6713,6715,6717,6719,6721,6723,6725],{"class":43,"line":62},[41,6688,167],{"class":58},[41,6690,170],{"class":133},[41,6692,137],{"class":54},[41,6694,175],{"class":133},[41,6696,137],{"class":54},[41,6698,180],{"class":133},[41,6700,183],{"class":54},[41,6702,145],{"class":133},[41,6704,137],{"class":54},[41,6706,175],{"class":133},[41,6708,137],{"class":54},[41,6710,180],{"class":133},[41,6712,196],{"class":54},[41,6714,199],{"class":58},[41,6716,137],{"class":54},[41,6718,205],{"class":204},[41,6720,208],{"class":58},[41,6722,211],{"class":133},[41,6724,214],{"class":58},[41,6726,217],{"class":54},[41,6728,6729],{"class":43,"line":82},[41,6730,223],{"class":54},[41,6732,6733,6735,6737,6739,6741,6743,6745,6747,6749],{"class":43,"line":97},[41,6734,134],{"class":133},[41,6736,137],{"class":54},[41,6738,175],{"class":204},[41,6740,208],{"class":133},[41,6742,237],{"class":54},[41,6744,240],{"class":75},[41,6746,237],{"class":54},[41,6748,245],{"class":54},[41,6750,161],{"class":54},[41,6752,6753,6755,6757,6759,6761],{"class":43,"line":109},[41,6754,253],{"class":58},[41,6756,30],{"class":54},[41,6758,258],{"class":54},[41,6760,1981],{"class":75},[41,6762,264],{"class":54},[41,6764,6765,6767,6769],{"class":43,"line":130},[41,6766,270],{"class":54},[41,6768,214],{"class":133},[41,6770,217],{"class":54},[41,6772,6773,6775,6777],{"class":43,"line":164},[41,6774,280],{"class":54},[41,6776,103],{"class":58},[41,6778,106],{"class":54},[19,6780,6782],{"id":6781},"_4-добавьте-контейнер","4. Добавьте контейнер",[15,6784,6785,6786,6788],{},"Разместите ",[27,6787,2009],{}," там, где должен отображаться виджет:",[32,6790,6791],{"className":34,"code":2013,"language":36,"meta":37,"style":37},[27,6792,6793],{"__ignoreMap":37},[41,6794,6795,6797,6799,6801,6803,6805,6807,6809,6811,6813],{"class":43,"line":44},[41,6796,55],{"class":54},[41,6798,819],{"class":58},[41,6800,116],{"class":65},[41,6802,69],{"class":54},[41,6804,72],{"class":54},[41,6806,841],{"class":75},[41,6808,72],{"class":54},[41,6810,100],{"class":54},[41,6812,819],{"class":58},[41,6814,106],{"class":54},[19,6816,6818],{"id":6817},"_5-запустите-виджет","5. Запустите виджет",[15,6820,6821,6822,6824],{},"Вызовите метод ",[27,6823,581],{}," при нажатии пользователем кнопки:",[32,6826,6827],{"className":1122,"code":2050,"language":1124,"meta":37,"style":37},[27,6828,6829,6849,6863,6877,6885,6889,6903,6917,6921,6927],{"__ignoreMap":37},[41,6830,6831,6833,6835,6837,6839,6841,6843,6845,6847],{"class":43,"line":44},[41,6832,170],{"class":133},[41,6834,137],{"class":54},[41,6836,175],{"class":204},[41,6838,208],{"class":133},[41,6840,237],{"class":54},[41,6842,581],{"class":75},[41,6844,237],{"class":54},[41,6846,245],{"class":54},[41,6848,161],{"class":54},[41,6850,6851,6853,6855,6857,6859,6861],{"class":43,"line":51},[41,6852,381],{"class":58},[41,6854,30],{"class":54},[41,6856,258],{"class":54},[41,6858,841],{"class":75},[41,6860,237],{"class":54},[41,6862,939],{"class":54},[41,6864,6865,6867,6869,6871,6873,6875],{"class":43,"line":62},[41,6866,392],{"class":58},[41,6868,30],{"class":54},[41,6870,258],{"class":54},[41,6872,399],{"class":75},[41,6874,237],{"class":54},[41,6876,939],{"class":54},[41,6878,6879,6881,6883],{"class":43,"line":82},[41,6880,427],{"class":58},[41,6882,30],{"class":54},[41,6884,1360],{"class":133},[41,6886,6887],{"class":43,"line":97},[41,6888,1365],{"class":54},[41,6890,6891,6893,6895,6897,6899,6901],{"class":43,"line":109},[41,6892,1370],{"class":58},[41,6894,30],{"class":54},[41,6896,258],{"class":54},[41,6898,2123],{"class":75},[41,6900,237],{"class":54},[41,6902,939],{"class":54},[41,6904,6905,6907,6909,6911,6913,6915],{"class":43,"line":130},[41,6906,1386],{"class":58},[41,6908,30],{"class":54},[41,6910,258],{"class":54},[41,6912,2138],{"class":75},[41,6914,237],{"class":54},[41,6916,939],{"class":54},[41,6918,6919],{"class":43,"line":164},[41,6920,1402],{"class":54},[41,6922,6923,6925],{"class":43,"line":220},[41,6924,1407],{"class":133},[41,6926,939],{"class":54},[41,6928,6929,6931,6933],{"class":43,"line":226},[41,6930,982],{"class":54},[41,6932,214],{"class":133},[41,6934,217],{"class":54},[19,6936,6938],{"id":6937},"результат","Результат",[15,6940,6941],{},"Теперь ваши покупатели могут загрузить фотографию и мгновенно увидеть, как на них сидит одежда.",[19,6943,6945],{"id":6944},"дальнейшие-шаги","Дальнейшие шаги",[2173,6947,6948,6954],{},[2176,6949,6950,6951,137],{},"Ознакомьтесь с руководствами для конкретных фреймворков в разделе ",[1789,6952,6953],{"href":2181},"Интеграции",[2176,6955,6956,6957,137],{},"Изучите полный ",[1789,6958,1062],{"href":1430},[1043,6960,6961],{},"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":37,"searchDepth":51,"depth":51,"links":6963},[6964,6965,6966,6967,6968,6969,6970],{"id":6572,"depth":51,"text":6573},{"id":6583,"depth":51,"text":6584},{"id":6637,"depth":51,"text":6638},{"id":6781,"depth":51,"text":6782},{"id":6817,"depth":51,"text":6818},{"id":6937,"depth":51,"text":6938},{"id":6944,"depth":51,"text":6945},"Запустите Fitting Widget за считанные минуты",{},{"title":6561,"description":6971},"getting-started\u002Fquick-start","4USnYxFPZA1hrOvVApcSHMt9oQc0aZ6Ct8ohgcj8WJ8",{"id":6977,"title":6978,"body":6979,"description":7057,"extension":1052,"icon":2292,"meta":7058,"navigation":366,"path":7059,"seo":7060,"stem":7061,"__hash__":7062},"content\u002Findex.md","Введение",{"type":7,"value":6980,"toc":7052},[6981,6985,6990,6994,7023,7027,7044,7046],[10,6982,6984],{"id":6983},"fitting-widget-виртуальная-примерка","Fitting Widget — Виртуальная примерка",[15,6986,6987,6989],{},[2220,6988,2222],{}," — это готовое решение для виртуальной примерки одежды в интернет-магазинах. Он позволяет вашим покупателям загрузить фотографию и мгновенно увидеть, как на них выглядит любой предмет одежды — прямо на странице товара.",[19,6991,6993],{"id":6992},"ключевые-возможности","Ключевые возможности",[2173,6995,6996,7005,7011,7017],{},[2176,6997,6998,7001,7002,7004],{},[2220,6999,7000],{},"Быстрая интеграция"," — Один тег ",[27,7003,1805],{}," и несколько строк кода.",[2176,7006,7007,7010],{},[2220,7008,7009],{},"Не зависит от фреймворков"," — Работает с Vanilla JS, React, Vue, Next.js, Nuxt и другими.",[2176,7012,7013,7016],{},[2220,7014,7015],{},"Настраиваемый"," — Стилизуйте виджет под ваш бренд.",[2176,7018,7019,7022],{},[2220,7020,7021],{},"Лёгкий"," — Оптимизированная загрузка, которая не замедляет магазин.",[19,7024,7026],{"id":7025},"как-это-работает","Как это работает",[2259,7028,7029,7032,7035,7041],{},[2176,7030,7031],{},"Загрузите скрипт виджета на страницу.",[2176,7033,7034],{},"Инициализируйте его с вашим API-ключом.",[2176,7036,7037,7038,7040],{},"Вызовите ",[27,7039,2272],{}," с URL-адресами изображений товаров.",[2176,7042,7043],{},"Виджет отображается внутри выбранного вами контейнера.",[19,7045,6561],{"id":6566},[15,7047,7048,7049,7051],{},"Перейдите к руководству ",[1789,7050,6561],{"href":2284},", чтобы начать работу менее чем за 5 минут.",{"title":37,"searchDepth":51,"depth":51,"links":7053},[7054,7055,7056],{"id":6992,"depth":51,"text":6993},{"id":7025,"depth":51,"text":7026},{"id":6566,"depth":51,"text":6561},"Что такое Fitting Widget и зачем его использовать?",{},"\u002F",{"title":6978,"description":7057},"index","kGT91Bb-Wx88tMoHoRu65KMhDKtcehaBgnLzJYfeCWE",{"id":7064,"title":2300,"body":7065,"description":7940,"extension":1052,"icon":3265,"meta":7941,"navigation":366,"path":7942,"seo":7943,"stem":7944,"__hash__":7945},"content\u002Fintegrations\u002Fnextjs.md",{"type":7,"value":7066,"toc":7931},[7067,7071,7079,7083,7091,7100,7336,7340,7668,7672,7908,7912,7917,7929],[10,7068,7070],{"id":7069},"интеграция-с-nextjs","Интеграция с Next.js",[15,7072,7073,7074,7076,7077,137],{},"Fitting Widget работает как с ",[2220,7075,2312],{},", так и с ",[2220,7078,2316],{},[19,7080,7082],{"id":7081},"app-router-рекомендуется","App Router (рекомендуется)",[15,7084,7085,7086,7088,7089,137],{},"Используйте компонент Next.js ",[27,7087,2326],{}," с ",[27,7090,2330],{},[1252,7092,7094,7095,7097,7098],{"id":7093},"шаг-1-загрузка-скриптов-в-layouttsx-или-pagetsx","Шаг 1 — Загрузка скриптов в ",[27,7096,2337],{}," или ",[27,7099,2341],{},[32,7101,7102],{"className":301,"code":2344,"language":303,"meta":37,"style":37},[27,7103,7104,7120,7124,7156,7162,7166,7174,7178,7184,7196,7208,7220,7224,7228,7234,7246,7258,7262,7268,7272,7276,7280,7284,7304,7308,7314,7322,7326,7332],{"__ignoreMap":37},[41,7105,7106,7108,7110,7112,7114,7116,7118],{"class":43,"line":44},[41,7107,692],{"class":528},[41,7109,2353],{"class":133},[41,7111,2356],{"class":528},[41,7113,258],{"class":54},[41,7115,2361],{"class":75},[41,7117,237],{"class":54},[41,7119,217],{"class":54},[41,7121,7122],{"class":43,"line":51},[41,7123,367],{"emptyLinePlaceholder":366},[41,7125,7126,7128,7130,7132,7134,7136,7138,7140,7142,7144,7146,7148,7150,7152,7154],{"class":43,"line":62},[41,7127,529],{"class":528},[41,7129,2376],{"class":528},[41,7131,155],{"class":65},[41,7133,2381],{"class":204},[41,7135,765],{"class":54},[41,7137,2386],{"class":481},[41,7139,776],{"class":54},[41,7141,659],{"class":54},[41,7143,2386],{"class":58},[41,7145,30],{"class":54},[41,7147,2397],{"class":318},[41,7149,137],{"class":54},[41,7151,2402],{"class":318},[41,7153,2405],{"class":54},[41,7155,161],{"class":54},[41,7157,7158,7160],{"class":43,"line":82},[41,7159,656],{"class":528},[41,7161,811],{"class":58},[41,7163,7164],{"class":43,"line":97},[41,7165,2418],{"class":54},[41,7167,7168,7170,7172],{"class":43,"line":109},[41,7169,2423],{"class":54},[41,7171,2426],{"class":133},[41,7173,361],{"class":54},[41,7175,7176],{"class":43,"line":130},[41,7177,367],{"emptyLinePlaceholder":366},[41,7179,7180,7182],{"class":43,"line":164},[41,7181,826],{"class":54},[41,7183,2439],{"class":318},[41,7185,7186,7188,7190,7192,7194],{"class":43,"line":220},[41,7187,2444],{"class":65},[41,7189,69],{"class":54},[41,7191,72],{"class":54},[41,7193,76],{"class":75},[41,7195,79],{"class":54},[41,7197,7198,7200,7202,7204,7206],{"class":43,"line":226},[41,7199,2457],{"class":65},[41,7201,69],{"class":54},[41,7203,72],{"class":54},[41,7205,2464],{"class":75},[41,7207,79],{"class":54},[41,7209,7210,7212,7214,7216,7218],{"class":43,"line":250},[41,7211,834],{"class":65},[41,7213,69],{"class":54},[41,7215,72],{"class":54},[41,7217,92],{"class":75},[41,7219,79],{"class":54},[41,7221,7222],{"class":43,"line":267},[41,7223,896],{"class":54},[41,7225,7226],{"class":43,"line":277},[41,7227,367],{"emptyLinePlaceholder":366},[41,7229,7230,7232],{"class":43,"line":447},[41,7231,826],{"class":54},[41,7233,2439],{"class":318},[41,7235,7236,7238,7240,7242,7244],{"class":43,"line":459},[41,7237,2457],{"class":65},[41,7239,69],{"class":54},[41,7241,72],{"class":54},[41,7243,2464],{"class":75},[41,7245,79],{"class":54},[41,7247,7248,7250,7252,7254,7256],{"class":43,"line":470},[41,7249,834],{"class":65},[41,7251,69],{"class":54},[41,7253,72],{"class":54},[41,7255,123],{"class":75},[41,7257,79],{"class":54},[41,7259,7260],{"class":43,"line":509},[41,7261,1005],{"class":54},[41,7263,7264,7266],{"class":43,"line":515},[41,7265,2525],{"class":54},[41,7267,2528],{"class":54},[41,7269,7270],{"class":43,"line":520},[41,7271,2533],{"class":75},[41,7273,7274],{"class":43,"line":525},[41,7275,2538],{"class":75},[41,7277,7278],{"class":43,"line":541},[41,7279,2543],{"class":75},[41,7281,7282],{"class":43,"line":567},[41,7283,2548],{"class":75},[41,7285,7286,7288,7290,7292,7294,7296,7298,7300,7302],{"class":43,"line":594},[41,7287,2553],{"class":75},[41,7289,2556],{"class":54},[41,7291,2559],{"class":133},[41,7293,137],{"class":54},[41,7295,2564],{"class":133},[41,7297,137],{"class":54},[41,7299,2569],{"class":133},[41,7301,982],{"class":54},[41,7303,264],{"class":75},[41,7305,7306],{"class":43,"line":599},[41,7307,2578],{"class":75},[41,7309,7310,7312],{"class":43,"line":604},[41,7311,2583],{"class":54},[41,7313,361],{"class":54},[41,7315,7316,7318,7320],{"class":43,"line":621},[41,7317,1015],{"class":54},[41,7319,2326],{"class":318},[41,7321,106],{"class":54},[41,7323,7324],{"class":43,"line":643},[41,7325,2598],{"class":54},[41,7327,7328,7330],{"class":43,"line":648},[41,7329,1034],{"class":58},[41,7331,217],{"class":54},[41,7333,7334],{"class":43,"line":653},[41,7335,361],{"class":54},[1252,7337,7339],{"id":7338},"шаг-2-создание-кнопки-виджета","Шаг 2 — Создание кнопки виджета",[32,7341,7343],{"className":301,"code":7342,"language":303,"meta":37,"style":37},"'use client';\n\ninterface TryonItem {\n  productName: string;\n  url: string;\n}\n\ndeclare global {\n  interface Window {\n    fitting: (command: string, options?: unknown) => void;\n  }\n}\n\nexport function TryOnButton({ items }: { items: TryonItem[] }) {\n  const handleClick = () => {\n    window.fitting('create', {\n      targetElementId: 'widget-container',\n      model: 'balanced',\n      tryonItems: items,\n    });\n  };\n\n  return (\n    \u003C>\n      \u003Cdiv id=\"widget-container\" style={{ width: '100%', maxWidth: 600, aspectRatio: '3\u002F4' }} \u002F>\n      \u003Cbutton onClick={handleClick}>Примерка\u003C\u002Fbutton>\n    \u003C\u002F>\n  );\n}\n",[27,7344,7345,7355,7359,7367,7377,7387,7391,7395,7403,7411,7441,7445,7449,7453,7481,7495,7515,7529,7543,7553,7561,7565,7569,7575,7579,7631,7654,7658,7664],{"__ignoreMap":37},[41,7346,7347,7349,7351,7353],{"class":43,"line":44},[41,7348,237],{"class":54},[41,7350,2624],{"class":75},[41,7352,237],{"class":54},[41,7354,217],{"class":54},[41,7356,7357],{"class":43,"line":51},[41,7358,367],{"emptyLinePlaceholder":366},[41,7360,7361,7363,7365],{"class":43,"line":62},[41,7362,315],{"class":65},[41,7364,319],{"class":318},[41,7366,161],{"class":54},[41,7368,7369,7371,7373,7375],{"class":43,"line":82},[41,7370,326],{"class":58},[41,7372,30],{"class":54},[41,7374,331],{"class":318},[41,7376,217],{"class":54},[41,7378,7379,7381,7383,7385],{"class":43,"line":97},[41,7380,338],{"class":58},[41,7382,30],{"class":54},[41,7384,331],{"class":318},[41,7386,217],{"class":54},[41,7388,7389],{"class":43,"line":109},[41,7390,361],{"class":54},[41,7392,7393],{"class":43,"line":130},[41,7394,367],{"emptyLinePlaceholder":366},[41,7396,7397,7399,7401],{"class":43,"line":164},[41,7398,450],{"class":65},[41,7400,453],{"class":133},[41,7402,456],{"class":54},[41,7404,7405,7407,7409],{"class":43,"line":220},[41,7406,462],{"class":65},[41,7408,465],{"class":318},[41,7410,161],{"class":54},[41,7412,7413,7415,7417,7419,7421,7423,7425,7427,7429,7431,7433,7435,7437,7439],{"class":43,"line":226},[41,7414,473],{"class":58},[41,7416,30],{"class":54},[41,7418,478],{"class":54},[41,7420,482],{"class":481},[41,7422,30],{"class":54},[41,7424,331],{"class":318},[41,7426,245],{"class":54},[41,7428,491],{"class":481},[41,7430,352],{"class":54},[41,7432,496],{"class":318},[41,7434,214],{"class":54},[41,7436,501],{"class":65},[41,7438,504],{"class":318},[41,7440,217],{"class":54},[41,7442,7443],{"class":43,"line":250},[41,7444,512],{"class":54},[41,7446,7447],{"class":43,"line":267},[41,7448,361],{"class":54},[41,7450,7451],{"class":43,"line":277},[41,7452,367],{"emptyLinePlaceholder":366},[41,7454,7455,7457,7459,7461,7463,7465,7467,7469,7471,7473,7475,7477,7479],{"class":43,"line":447},[41,7456,529],{"class":528},[41,7458,155],{"class":65},[41,7460,2735],{"class":204},[41,7462,765],{"class":54},[41,7464,2740],{"class":481},[41,7466,776],{"class":54},[41,7468,659],{"class":54},[41,7470,2740],{"class":58},[41,7472,30],{"class":54},[41,7474,319],{"class":318},[41,7476,2753],{"class":133},[41,7478,2756],{"class":54},[41,7480,161],{"class":54},[41,7482,7483,7485,7487,7489,7491,7493],{"class":43,"line":459},[41,7484,544],{"class":65},[41,7486,2765],{"class":133},[41,7488,183],{"class":54},[41,7490,614],{"class":54},[41,7492,501],{"class":65},[41,7494,161],{"class":54},[41,7496,7497,7499,7501,7503,7505,7507,7509,7511,7513],{"class":43,"line":470},[41,7498,570],{"class":133},[41,7500,137],{"class":54},[41,7502,175],{"class":204},[41,7504,208],{"class":58},[41,7506,237],{"class":54},[41,7508,581],{"class":75},[41,7510,237],{"class":54},[41,7512,245],{"class":54},[41,7514,161],{"class":54},[41,7516,7517,7519,7521,7523,7525,7527],{"class":43,"line":509},[41,7518,2798],{"class":58},[41,7520,30],{"class":54},[41,7522,258],{"class":54},[41,7524,841],{"class":75},[41,7526,237],{"class":54},[41,7528,939],{"class":54},[41,7530,7531,7533,7535,7537,7539,7541],{"class":43,"line":515},[41,7532,2813],{"class":58},[41,7534,30],{"class":54},[41,7536,258],{"class":54},[41,7538,399],{"class":75},[41,7540,237],{"class":54},[41,7542,939],{"class":54},[41,7544,7545,7547,7549,7551],{"class":43,"line":520},[41,7546,2828],{"class":58},[41,7548,30],{"class":54},[41,7550,2740],{"class":133},[41,7552,939],{"class":54},[41,7554,7555,7557,7559],{"class":43,"line":525},[41,7556,2839],{"class":54},[41,7558,214],{"class":58},[41,7560,217],{"class":54},[41,7562,7563],{"class":43,"line":541},[41,7564,223],{"class":54},[41,7566,7567],{"class":43,"line":567},[41,7568,367],{"emptyLinePlaceholder":366},[41,7570,7571,7573],{"class":43,"line":594},[41,7572,656],{"class":528},[41,7574,811],{"class":58},[41,7576,7577],{"class":43,"line":599},[41,7578,2418],{"class":54},[41,7580,7581,7583,7585,7587,7589,7591,7593,7595,7597,7599,7601,7603,7605,7607,7609,7611,7613,7615,7617,7619,7621,7623,7625,7627,7629],{"class":43,"line":604},[41,7582,826],{"class":54},[41,7584,819],{"class":58},[41,7586,116],{"class":65},[41,7588,69],{"class":54},[41,7590,72],{"class":54},[41,7592,841],{"class":75},[41,7594,72],{"class":54},[41,7596,2880],{"class":65},[41,7598,851],{"class":54},[41,7600,854],{"class":58},[41,7602,30],{"class":54},[41,7604,258],{"class":54},[41,7606,861],{"class":75},[41,7608,237],{"class":54},[41,7610,245],{"class":54},[41,7612,868],{"class":58},[41,7614,30],{"class":54},[41,7616,874],{"class":873},[41,7618,245],{"class":54},[41,7620,879],{"class":58},[41,7622,30],{"class":54},[41,7624,258],{"class":54},[41,7626,886],{"class":75},[41,7628,237],{"class":54},[41,7630,2915],{"class":54},[41,7632,7633,7635,7637,7639,7641,7643,7645,7648,7650,7652],{"class":43,"line":621},[41,7634,826],{"class":54},[41,7636,1018],{"class":58},[41,7638,2924],{"class":65},[41,7640,2927],{"class":54},[41,7642,2930],{"class":133},[41,7644,2933],{"class":54},[41,7646,7647],{"class":133},"Примерка",[41,7649,280],{"class":54},[41,7651,1018],{"class":58},[41,7653,106],{"class":54},[41,7655,7656],{"class":43,"line":643},[41,7657,2598],{"class":54},[41,7659,7660,7662],{"class":43,"line":648},[41,7661,1034],{"class":58},[41,7663,217],{"class":54},[41,7665,7666],{"class":43,"line":653},[41,7667,361],{"class":54},[1252,7669,7671],{"id":7670},"шаг-3-использование-на-странице-товара","Шаг 3 — Использование на странице товара",[32,7673,7674],{"className":301,"code":2963,"language":303,"meta":37,"style":37},[27,7675,7676,7696,7700,7738,7762,7766,7772,7780,7800,7830,7836,7844,7848,7862,7876,7880,7886,7890,7898,7904],{"__ignoreMap":37},[41,7677,7678,7680,7682,7684,7686,7688,7690,7692,7694],{"class":43,"line":44},[41,7679,692],{"class":528},[41,7681,659],{"class":54},[41,7683,2735],{"class":133},[41,7685,699],{"class":54},[41,7687,702],{"class":528},[41,7689,258],{"class":54},[41,7691,2982],{"class":75},[41,7693,237],{"class":54},[41,7695,217],{"class":54},[41,7697,7698],{"class":43,"line":51},[41,7699,367],{"emptyLinePlaceholder":366},[41,7701,7702,7704,7706,7708,7710,7712,7714,7716,7718,7720,7722,7724,7726,7728,7730,7732,7734,7736],{"class":43,"line":62},[41,7703,529],{"class":528},[41,7705,2376],{"class":528},[41,7707,2999],{"class":65},[41,7709,155],{"class":65},[41,7711,3004],{"class":204},[41,7713,765],{"class":54},[41,7715,3009],{"class":481},[41,7717,776],{"class":54},[41,7719,659],{"class":54},[41,7721,3009],{"class":58},[41,7723,30],{"class":54},[41,7725,659],{"class":54},[41,7727,3022],{"class":58},[41,7729,30],{"class":54},[41,7731,331],{"class":318},[41,7733,699],{"class":54},[41,7735,2405],{"class":54},[41,7737,161],{"class":54},[41,7739,7740,7742,7744,7746,7748,7750,7752,7754,7756,7758,7760],{"class":43,"line":82},[41,7741,544],{"class":65},[41,7743,3039],{"class":133},[41,7745,183],{"class":54},[41,7747,3044],{"class":528},[41,7749,3047],{"class":204},[41,7751,208],{"class":58},[41,7753,3052],{"class":133},[41,7755,137],{"class":54},[41,7757,3057],{"class":133},[41,7759,214],{"class":58},[41,7761,217],{"class":54},[41,7763,7764],{"class":43,"line":97},[41,7765,367],{"emptyLinePlaceholder":366},[41,7767,7768,7770],{"class":43,"line":109},[41,7769,656],{"class":528},[41,7771,811],{"class":58},[41,7773,7774,7776,7778],{"class":43,"line":130},[41,7775,816],{"class":54},[41,7777,819],{"class":58},[41,7779,106],{"class":54},[41,7781,7782,7784,7786,7788,7790,7792,7794,7796,7798],{"class":43,"line":164},[41,7783,826],{"class":54},[41,7785,10],{"class":58},[41,7787,3088],{"class":54},[41,7789,3091],{"class":133},[41,7791,137],{"class":54},[41,7793,3096],{"class":133},[41,7795,3099],{"class":54},[41,7797,10],{"class":58},[41,7799,106],{"class":54},[41,7801,7802,7804,7806,7808,7810,7812,7814,7816,7818,7820,7822,7824,7826,7828],{"class":43,"line":220},[41,7803,826],{"class":54},[41,7805,3110],{"class":58},[41,7807,3113],{"class":65},[41,7809,2927],{"class":54},[41,7811,3091],{"class":133},[41,7813,137],{"class":54},[41,7815,3122],{"class":133},[41,7817,3125],{"class":54},[41,7819,3128],{"class":65},[41,7821,2927],{"class":54},[41,7823,3091],{"class":133},[41,7825,137],{"class":54},[41,7827,3096],{"class":133},[41,7829,3139],{"class":54},[41,7831,7832,7834],{"class":43,"line":226},[41,7833,826],{"class":54},[41,7835,3146],{"class":318},[41,7837,7838,7840,7842],{"class":43,"line":250},[41,7839,3151],{"class":65},[41,7841,2927],{"class":54},[41,7843,3156],{"class":133},[41,7845,7846],{"class":43,"line":267},[41,7847,3161],{"class":54},[41,7849,7850,7852,7854,7856,7858,7860],{"class":43,"line":277},[41,7851,3166],{"class":58},[41,7853,30],{"class":54},[41,7855,3039],{"class":133},[41,7857,137],{"class":54},[41,7859,3096],{"class":133},[41,7861,939],{"class":54},[41,7863,7864,7866,7868,7870,7872,7874],{"class":43,"line":447},[41,7865,3181],{"class":58},[41,7867,30],{"class":54},[41,7869,3039],{"class":133},[41,7871,137],{"class":54},[41,7873,3122],{"class":133},[41,7875,939],{"class":54},[41,7877,7878],{"class":43,"line":459},[41,7879,3196],{"class":54},[41,7881,7882,7884],{"class":43,"line":470},[41,7883,3201],{"class":133},[41,7885,361],{"class":54},[41,7887,7888],{"class":43,"line":509},[41,7889,896],{"class":54},[41,7891,7892,7894,7896],{"class":43,"line":515},[41,7893,1025],{"class":54},[41,7895,819],{"class":58},[41,7897,106],{"class":54},[41,7899,7900,7902],{"class":43,"line":520},[41,7901,1034],{"class":58},[41,7903,217],{"class":54},[41,7905,7906],{"class":43,"line":525},[41,7907,361],{"class":54},[19,7909,7911],{"id":7910},"переменная-окружения","Переменная окружения",[15,7913,7914,7915,30],{},"Добавьте ваш API-ключ в ",[27,7916,3235],{},[32,7918,7919],{"className":3238,"code":3239,"language":3240,"meta":37,"style":37},[27,7920,7921],{"__ignoreMap":37},[41,7922,7923,7925,7927],{"class":43,"line":44},[41,7924,2569],{"class":133},[41,7926,69],{"class":54},[41,7928,3251],{"class":75},[1043,7930,3254],{},{"title":37,"searchDepth":51,"depth":51,"links":7932},[7933,7939],{"id":7081,"depth":51,"text":7082,"children":7934},[7935,7937,7938],{"id":7093,"depth":62,"text":7936},"Шаг 1 — Загрузка скриптов в layout.tsx или page.tsx",{"id":7338,"depth":62,"text":7339},{"id":7670,"depth":62,"text":7671},{"id":7910,"depth":51,"text":7911},"Интеграция с Next.js (Pages Router и App Router)",{},"\u002Fintegrations\u002Fnextjs",{"title":2300,"description":7940},"integrations\u002Fnextjs","KS6JTPT1XrolEU5h4YdImeGYebYne3YB0eM4G4u-UlY",{"id":7947,"title":3273,"body":7948,"description":8761,"extension":1052,"icon":4169,"meta":8762,"navigation":366,"path":8763,"seo":8764,"stem":8765,"__hash__":8766},"content\u002Fintegrations\u002Fnuxt.md",{"type":7,"value":7949,"toc":8751},[7950,7954,7957,7961,7969,7975,8257,8263,8439,8443,8730,8732,8737,8749],[10,7951,7953],{"id":7952},"интеграция-с-nuxt","Интеграция с Nuxt",[15,7955,7956],{},"Fitting Widget легко интегрируется с Nuxt 3 и Nuxt 4.",[19,7958,7960],{"id":7959},"_1-загрузка-скрипта","1. Загрузка скрипта",[15,7962,7963,7964,7966,7967,137],{},"Используйте composable ",[27,7965,3292],{}," или добавьте скрипты в ",[27,7968,3296],{},[1252,7970,7972,7973],{"id":7971},"вариант-а-на-страницу-через-usehead","Вариант А — На страницу через ",[27,7974,3292],{},[32,7976,7977],{"className":3305,"code":3306,"language":3307,"meta":37,"style":37},[27,7978,7979,7983,7991,7999,8015,8043,8051,8059,8063,8083,8101,8105,8113,8121,8125,8139,8153,8157,8161,8175,8183,8187,8191,8195,8199,8223,8227,8233,8237,8243,8249],{"__ignoreMap":37},[41,7980,7981],{"class":43,"line":44},[41,7982,3314],{"class":47},[41,7984,7985,7987,7989],{"class":43,"line":51},[41,7986,55],{"class":54},[41,7988,3321],{"class":58},[41,7990,106],{"class":54},[41,7992,7993,7995,7997],{"class":43,"line":62},[41,7994,3328],{"class":54},[41,7996,819],{"class":58},[41,7998,106],{"class":54},[41,8000,8001,8003,8005,8007,8009,8011,8013],{"class":43,"line":82},[41,8002,816],{"class":54},[41,8004,10],{"class":58},[41,8006,3341],{"class":54},[41,8008,3344],{"class":133},[41,8010,280],{"class":54},[41,8012,10],{"class":58},[41,8014,106],{"class":54},[41,8016,8017,8019,8021,8023,8025,8027,8029,8031,8033,8035,8037,8039,8041],{"class":43,"line":97},[41,8018,816],{"class":54},[41,8020,3357],{"class":58},[41,8022,3360],{"class":65},[41,8024,69],{"class":54},[41,8026,72],{"class":54},[41,8028,3367],{"class":75},[41,8030,72],{"class":54},[41,8032,3372],{"class":65},[41,8034,69],{"class":54},[41,8036,72],{"class":54},[41,8038,3379],{"class":75},[41,8040,72],{"class":54},[41,8042,3384],{"class":54},[41,8044,8045,8047,8049],{"class":43,"line":109},[41,8046,3389],{"class":54},[41,8048,819],{"class":58},[41,8050,106],{"class":54},[41,8052,8053,8055,8057],{"class":43,"line":130},[41,8054,280],{"class":54},[41,8056,3321],{"class":58},[41,8058,106],{"class":54},[41,8060,8061],{"class":43,"line":164},[41,8062,367],{"emptyLinePlaceholder":366},[41,8064,8065,8067,8069,8071,8073,8075,8077,8079,8081],{"class":43,"line":220},[41,8066,55],{"class":54},[41,8068,103],{"class":58},[41,8070,3414],{"class":65},[41,8072,3417],{"class":65},[41,8074,69],{"class":54},[41,8076,72],{"class":54},[41,8078,3424],{"class":75},[41,8080,72],{"class":54},[41,8082,106],{"class":54},[41,8084,8085,8087,8089,8091,8093,8095,8097,8099],{"class":43,"line":226},[41,8086,692],{"class":528},[41,8088,659],{"class":54},[41,8090,3437],{"class":133},[41,8092,699],{"class":54},[41,8094,702],{"class":528},[41,8096,258],{"class":54},[41,8098,3446],{"class":75},[41,8100,264],{"class":54},[41,8102,8103],{"class":43,"line":250},[41,8104,367],{"emptyLinePlaceholder":366},[41,8106,8107,8109,8111],{"class":43,"line":267},[41,8108,3292],{"class":204},[41,8110,208],{"class":133},[41,8112,456],{"class":54},[41,8114,8115,8117,8119],{"class":43,"line":277},[41,8116,3465],{"class":58},[41,8118,30],{"class":54},[41,8120,1360],{"class":133},[41,8122,8123],{"class":43,"line":447},[41,8124,1365],{"class":54},[41,8126,8127,8129,8131,8133,8135,8137],{"class":43,"line":459},[41,8128,3478],{"class":58},[41,8130,30],{"class":54},[41,8132,258],{"class":54},[41,8134,76],{"class":75},[41,8136,237],{"class":54},[41,8138,939],{"class":54},[41,8140,8141,8143,8145,8147,8149,8151],{"class":43,"line":470},[41,8142,3493],{"class":58},[41,8144,30],{"class":54},[41,8146,258],{"class":54},[41,8148,92],{"class":75},[41,8150,237],{"class":54},[41,8152,939],{"class":54},[41,8154,8155],{"class":43,"line":509},[41,8156,1402],{"class":54},[41,8158,8159],{"class":43,"line":515},[41,8160,1365],{"class":54},[41,8162,8163,8165,8167,8169,8171,8173],{"class":43,"line":520},[41,8164,3493],{"class":58},[41,8166,30],{"class":54},[41,8168,258],{"class":54},[41,8170,123],{"class":75},[41,8172,237],{"class":54},[41,8174,939],{"class":54},[41,8176,8177,8179,8181],{"class":43,"line":525},[41,8178,3530],{"class":58},[41,8180,30],{"class":54},[41,8182,3535],{"class":54},[41,8184,8185],{"class":43,"line":541},[41,8186,3540],{"class":75},[41,8188,8189],{"class":43,"line":567},[41,8190,3545],{"class":75},[41,8192,8193],{"class":43,"line":594},[41,8194,3550],{"class":75},[41,8196,8197],{"class":43,"line":599},[41,8198,3555],{"class":75},[41,8200,8201,8203,8205,8207,8209,8211,8213,8215,8217,8219,8221],{"class":43,"line":604},[41,8202,3560],{"class":75},[41,8204,2556],{"class":54},[41,8206,692],{"class":528},[41,8208,137],{"class":54},[41,8210,3569],{"class":133},[41,8212,137],{"class":54},[41,8214,2564],{"class":133},[41,8216,137],{"class":54},[41,8218,3578],{"class":133},[41,8220,982],{"class":54},[41,8222,264],{"class":75},[41,8224,8225],{"class":43,"line":621},[41,8226,3587],{"class":75},[41,8228,8229,8231],{"class":43,"line":643},[41,8230,3592],{"class":54},[41,8232,939],{"class":54},[41,8234,8235],{"class":43,"line":648},[41,8236,1402],{"class":54},[41,8238,8239,8241],{"class":43,"line":653},[41,8240,1407],{"class":133},[41,8242,939],{"class":54},[41,8244,8245,8247],{"class":43,"line":671},[41,8246,982],{"class":54},[41,8248,995],{"class":133},[41,8250,8251,8253,8255],{"class":43,"line":1039},[41,8252,280],{"class":54},[41,8254,103],{"class":58},[41,8256,106],{"class":54},[1252,8258,8260,8261],{"id":8259},"вариант-б-глобально-в-nuxtconfigts","Вариант Б — Глобально в ",[27,8262,3296],{},[32,8264,8265],{"className":3627,"code":3628,"language":3424,"meta":37,"style":37},[27,8266,8267,8279,8287,8295,8303,8307,8321,8335,8339,8343,8357,8365,8369,8373,8377,8381,8405,8409,8415,8419,8425,8429,8433],{"__ignoreMap":37},[41,8268,8269,8271,8273,8275,8277],{"class":43,"line":44},[41,8270,529],{"class":528},[41,8272,2376],{"class":528},[41,8274,3639],{"class":204},[41,8276,208],{"class":133},[41,8278,456],{"class":54},[41,8280,8281,8283,8285],{"class":43,"line":51},[41,8282,3648],{"class":58},[41,8284,30],{"class":54},[41,8286,161],{"class":54},[41,8288,8289,8291,8293],{"class":43,"line":62},[41,8290,3657],{"class":58},[41,8292,30],{"class":54},[41,8294,161],{"class":54},[41,8296,8297,8299,8301],{"class":43,"line":82},[41,8298,3666],{"class":58},[41,8300,30],{"class":54},[41,8302,1360],{"class":133},[41,8304,8305],{"class":43,"line":97},[41,8306,3675],{"class":54},[41,8308,8309,8311,8313,8315,8317,8319],{"class":43,"line":109},[41,8310,3680],{"class":58},[41,8312,30],{"class":54},[41,8314,258],{"class":54},[41,8316,76],{"class":75},[41,8318,237],{"class":54},[41,8320,939],{"class":54},[41,8322,8323,8325,8327,8329,8331,8333],{"class":43,"line":130},[41,8324,3695],{"class":58},[41,8326,30],{"class":54},[41,8328,258],{"class":54},[41,8330,92],{"class":75},[41,8332,237],{"class":54},[41,8334,939],{"class":54},[41,8336,8337],{"class":43,"line":164},[41,8338,3710],{"class":54},[41,8340,8341],{"class":43,"line":220},[41,8342,3675],{"class":54},[41,8344,8345,8347,8349,8351,8353,8355],{"class":43,"line":226},[41,8346,3695],{"class":58},[41,8348,30],{"class":54},[41,8350,258],{"class":54},[41,8352,123],{"class":75},[41,8354,237],{"class":54},[41,8356,939],{"class":54},[41,8358,8359,8361,8363],{"class":43,"line":250},[41,8360,3733],{"class":58},[41,8362,30],{"class":54},[41,8364,3535],{"class":54},[41,8366,8367],{"class":43,"line":267},[41,8368,3742],{"class":75},[41,8370,8371],{"class":43,"line":277},[41,8372,3747],{"class":75},[41,8374,8375],{"class":43,"line":447},[41,8376,3752],{"class":75},[41,8378,8379],{"class":43,"line":459},[41,8380,3757],{"class":75},[41,8382,8383,8385,8387,8389,8391,8393,8395,8397,8399,8401,8403],{"class":43,"line":470},[41,8384,3762],{"class":75},[41,8386,2556],{"class":54},[41,8388,692],{"class":528},[41,8390,137],{"class":54},[41,8392,3569],{"class":133},[41,8394,137],{"class":54},[41,8396,2564],{"class":133},[41,8398,137],{"class":54},[41,8400,3578],{"class":133},[41,8402,982],{"class":54},[41,8404,264],{"class":75},[41,8406,8407],{"class":43,"line":509},[41,8408,3787],{"class":75},[41,8410,8411,8413],{"class":43,"line":515},[41,8412,3792],{"class":54},[41,8414,939],{"class":54},[41,8416,8417],{"class":43,"line":520},[41,8418,3710],{"class":54},[41,8420,8421,8423],{"class":43,"line":525},[41,8422,3803],{"class":133},[41,8424,939],{"class":54},[41,8426,8427],{"class":43,"line":541},[41,8428,1402],{"class":54},[41,8430,8431],{"class":43,"line":567},[41,8432,3814],{"class":54},[41,8434,8435,8437],{"class":43,"line":594},[41,8436,982],{"class":54},[41,8438,995],{"class":133},[19,8440,8442],{"id":8441},"_2-создание-компонента-обёртки","2. Создание компонента-обёртки",[32,8444,8446],{"className":3305,"code":8445,"language":3307,"meta":37,"style":37},"\u003C!-- components\u002FTryOnWidget.vue -->\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cdiv id=\"widget-container\" class=\"aspect-[3\u002F4] w-full max-w-[600px]\" \u002F>\n    \u003Cbutton @click=\"handleTryOn\">Примерка\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nconst props = defineProps\u003C{\n  productName: string\n  imageUrl: string\n}>()\n\nconst handleTryOn = () => {\n  window.fitting('create', {\n    targetElementId: 'widget-container',\n    model: 'balanced',\n    tryonItems: [\n      {\n        productName: props.productName,\n        url: props.imageUrl,\n      },\n    ],\n  })\n}\n\u003C\u002Fscript>\n",[27,8447,8448,8452,8460,8468,8496,8522,8530,8538,8542,8562,8574,8582,8590,8596,8600,8614,8634,8648,8662,8670,8674,8688,8702,8706,8712,8718,8722],{"__ignoreMap":37},[41,8449,8450],{"class":43,"line":44},[41,8451,3834],{"class":47},[41,8453,8454,8456,8458],{"class":43,"line":51},[41,8455,55],{"class":54},[41,8457,3321],{"class":58},[41,8459,106],{"class":54},[41,8461,8462,8464,8466],{"class":43,"line":62},[41,8463,3328],{"class":54},[41,8465,819],{"class":58},[41,8467,106],{"class":54},[41,8469,8470,8472,8474,8476,8478,8480,8482,8484,8486,8488,8490,8492,8494],{"class":43,"line":82},[41,8471,816],{"class":54},[41,8473,819],{"class":58},[41,8475,116],{"class":65},[41,8477,69],{"class":54},[41,8479,72],{"class":54},[41,8481,841],{"class":75},[41,8483,72],{"class":54},[41,8485,3869],{"class":65},[41,8487,69],{"class":54},[41,8489,72],{"class":54},[41,8491,3876],{"class":75},[41,8493,72],{"class":54},[41,8495,3384],{"class":54},[41,8497,8498,8500,8502,8504,8506,8508,8510,8512,8514,8516,8518,8520],{"class":43,"line":97},[41,8499,816],{"class":54},[41,8501,1018],{"class":58},[41,8503,3889],{"class":65},[41,8505,69],{"class":54},[41,8507,72],{"class":54},[41,8509,3896],{"class":75},[41,8511,72],{"class":54},[41,8513,3341],{"class":54},[41,8515,7647],{"class":133},[41,8517,280],{"class":54},[41,8519,1018],{"class":58},[41,8521,106],{"class":54},[41,8523,8524,8526,8528],{"class":43,"line":109},[41,8525,3389],{"class":54},[41,8527,819],{"class":58},[41,8529,106],{"class":54},[41,8531,8532,8534,8536],{"class":43,"line":130},[41,8533,280],{"class":54},[41,8535,3321],{"class":58},[41,8537,106],{"class":54},[41,8539,8540],{"class":43,"line":164},[41,8541,367],{"emptyLinePlaceholder":366},[41,8543,8544,8546,8548,8550,8552,8554,8556,8558,8560],{"class":43,"line":220},[41,8545,55],{"class":54},[41,8547,103],{"class":58},[41,8549,3414],{"class":65},[41,8551,3417],{"class":65},[41,8553,69],{"class":54},[41,8555,72],{"class":54},[41,8557,3424],{"class":75},[41,8559,72],{"class":54},[41,8561,106],{"class":54},[41,8563,8564,8566,8568,8570,8572],{"class":43,"line":226},[41,8565,3953],{"class":65},[41,8567,3956],{"class":133},[41,8569,69],{"class":54},[41,8571,3961],{"class":204},[41,8573,3964],{"class":54},[41,8575,8576,8578,8580],{"class":43,"line":250},[41,8577,326],{"class":58},[41,8579,30],{"class":54},[41,8581,3973],{"class":318},[41,8583,8584,8586,8588],{"class":43,"line":267},[41,8585,739],{"class":58},[41,8587,30],{"class":54},[41,8589,3973],{"class":318},[41,8591,8592,8594],{"class":43,"line":277},[41,8593,2933],{"class":54},[41,8595,3988],{"class":133},[41,8597,8598],{"class":43,"line":447},[41,8599,367],{"emptyLinePlaceholder":366},[41,8601,8602,8604,8606,8608,8610,8612],{"class":43,"line":459},[41,8603,3953],{"class":65},[41,8605,3999],{"class":133},[41,8607,69],{"class":54},[41,8609,614],{"class":54},[41,8611,501],{"class":65},[41,8613,161],{"class":54},[41,8615,8616,8618,8620,8622,8624,8626,8628,8630,8632],{"class":43,"line":470},[41,8617,134],{"class":133},[41,8619,137],{"class":54},[41,8621,175],{"class":204},[41,8623,208],{"class":58},[41,8625,237],{"class":54},[41,8627,581],{"class":75},[41,8629,237],{"class":54},[41,8631,245],{"class":54},[41,8633,161],{"class":54},[41,8635,8636,8638,8640,8642,8644,8646],{"class":43,"line":509},[41,8637,4032],{"class":58},[41,8639,30],{"class":54},[41,8641,258],{"class":54},[41,8643,841],{"class":75},[41,8645,237],{"class":54},[41,8647,939],{"class":54},[41,8649,8650,8652,8654,8656,8658,8660],{"class":43,"line":515},[41,8651,4047],{"class":58},[41,8653,30],{"class":54},[41,8655,258],{"class":54},[41,8657,399],{"class":75},[41,8659,237],{"class":54},[41,8661,939],{"class":54},[41,8663,8664,8666,8668],{"class":43,"line":520},[41,8665,4062],{"class":58},[41,8667,30],{"class":54},[41,8669,1360],{"class":58},[41,8671,8672],{"class":43,"line":525},[41,8673,4071],{"class":54},[41,8675,8676,8678,8680,8682,8684,8686],{"class":43,"line":541},[41,8677,4076],{"class":58},[41,8679,30],{"class":54},[41,8681,4081],{"class":133},[41,8683,137],{"class":54},[41,8685,1277],{"class":133},[41,8687,939],{"class":54},[41,8689,8690,8692,8694,8696,8698,8700],{"class":43,"line":567},[41,8691,4092],{"class":58},[41,8693,30],{"class":54},[41,8695,4081],{"class":133},[41,8697,137],{"class":54},[41,8699,4101],{"class":133},[41,8701,939],{"class":54},[41,8703,8704],{"class":43,"line":594},[41,8705,4108],{"class":54},[41,8707,8708,8710],{"class":43,"line":599},[41,8709,4113],{"class":58},[41,8711,939],{"class":54},[41,8713,8714,8716],{"class":43,"line":604},[41,8715,270],{"class":54},[41,8717,995],{"class":58},[41,8719,8720],{"class":43,"line":621},[41,8721,361],{"class":54},[41,8723,8724,8726,8728],{"class":43,"line":643},[41,8725,280],{"class":54},[41,8727,103],{"class":58},[41,8729,106],{"class":54},[19,8731,7911],{"id":7910},[15,8733,8734,8735,30],{},"Добавьте в ",[27,8736,4141],{},[32,8738,8739],{"className":3238,"code":4144,"language":3240,"meta":37,"style":37},[27,8740,8741],{"__ignoreMap":37},[41,8742,8743,8745,8747],{"class":43,"line":44},[41,8744,3578],{"class":133},[41,8746,69],{"class":54},[41,8748,3251],{"class":75},[1043,8750,4157],{},{"title":37,"searchDepth":51,"depth":51,"links":8752},[8753,8759,8760],{"id":7959,"depth":51,"text":7960,"children":8754},[8755,8757],{"id":7971,"depth":62,"text":8756},"Вариант А — На страницу через useHead",{"id":8259,"depth":62,"text":8758},"Вариант Б — Глобально в nuxt.config.ts",{"id":8441,"depth":51,"text":8442},{"id":7910,"depth":51,"text":7911},"Интеграция с Nuxt 3 \u002F Nuxt 4 приложением",{},"\u002Fintegrations\u002Fnuxt",{"title":3273,"description":8761},"integrations\u002Fnuxt","mSERafXf_JPUG4rn6ZlSU_qJnLNa0suHinF4LwLrASI",{"id":4,"title":5,"body":8768,"description":1051,"extension":1052,"icon":1053,"meta":9593,"navigation":366,"path":1055,"seo":9594,"stem":1057,"__hash__":1058},{"type":7,"value":8769,"toc":9588},[8770,8772,8774,8776,8780,8962,8968,8970,9276,9278,9586],[10,8771,13],{"id":12},[15,8773,17],{},[19,8775,22],{"id":21},[15,8777,25,8778,30],{},[27,8779,29],{},[32,8781,8782],{"className":34,"code":35,"language":36,"meta":37,"style":37},[27,8783,8784,8788,8794,8806,8818,8826,8844,8868,8910,8914,8934,8946,8954],{"__ignoreMap":37},[41,8785,8786],{"class":43,"line":44},[41,8787,48],{"class":47},[41,8789,8790,8792],{"class":43,"line":51},[41,8791,55],{"class":54},[41,8793,59],{"class":58},[41,8795,8796,8798,8800,8802,8804],{"class":43,"line":62},[41,8797,66],{"class":65},[41,8799,69],{"class":54},[41,8801,72],{"class":54},[41,8803,76],{"class":75},[41,8805,79],{"class":54},[41,8807,8808,8810,8812,8814,8816],{"class":43,"line":82},[41,8809,85],{"class":65},[41,8811,69],{"class":54},[41,8813,72],{"class":54},[41,8815,92],{"class":75},[41,8817,79],{"class":54},[41,8819,8820,8822,8824],{"class":43,"line":97},[41,8821,100],{"class":54},[41,8823,103],{"class":58},[41,8825,106],{"class":54},[41,8827,8828,8830,8832,8834,8836,8838,8840,8842],{"class":43,"line":109},[41,8829,55],{"class":54},[41,8831,103],{"class":58},[41,8833,116],{"class":65},[41,8835,69],{"class":54},[41,8837,72],{"class":54},[41,8839,123],{"class":75},[41,8841,72],{"class":54},[41,8843,106],{"class":54},[41,8845,8846,8848,8850,8852,8854,8856,8858,8860,8862,8864,8866],{"class":43,"line":130},[41,8847,134],{"class":133},[41,8849,137],{"class":54},[41,8851,140],{"class":133},[41,8853,69],{"class":54},[41,8855,145],{"class":133},[41,8857,137],{"class":54},[41,8859,140],{"class":133},[41,8861,152],{"class":54},[41,8863,155],{"class":65},[41,8865,158],{"class":54},[41,8867,161],{"class":54},[41,8869,8870,8872,8874,8876,8878,8880,8882,8884,8886,8888,8890,8892,8894,8896,8898,8900,8902,8904,8906,8908],{"class":43,"line":164},[41,8871,167],{"class":58},[41,8873,170],{"class":133},[41,8875,137],{"class":54},[41,8877,175],{"class":133},[41,8879,137],{"class":54},[41,8881,180],{"class":133},[41,8883,183],{"class":54},[41,8885,145],{"class":133},[41,8887,137],{"class":54},[41,8889,175],{"class":133},[41,8891,137],{"class":54},[41,8893,180],{"class":133},[41,8895,196],{"class":54},[41,8897,199],{"class":58},[41,8899,137],{"class":54},[41,8901,205],{"class":204},[41,8903,208],{"class":58},[41,8905,211],{"class":133},[41,8907,214],{"class":58},[41,8909,217],{"class":54},[41,8911,8912],{"class":43,"line":220},[41,8913,223],{"class":54},[41,8915,8916,8918,8920,8922,8924,8926,8928,8930,8932],{"class":43,"line":226},[41,8917,134],{"class":133},[41,8919,137],{"class":54},[41,8921,175],{"class":204},[41,8923,208],{"class":133},[41,8925,237],{"class":54},[41,8927,240],{"class":75},[41,8929,237],{"class":54},[41,8931,245],{"class":54},[41,8933,161],{"class":54},[41,8935,8936,8938,8940,8942,8944],{"class":43,"line":250},[41,8937,253],{"class":58},[41,8939,30],{"class":54},[41,8941,258],{"class":54},[41,8943,261],{"class":75},[41,8945,264],{"class":54},[41,8947,8948,8950,8952],{"class":43,"line":267},[41,8949,270],{"class":54},[41,8951,214],{"class":133},[41,8953,217],{"class":54},[41,8955,8956,8958,8960],{"class":43,"line":277},[41,8957,280],{"class":54},[41,8959,103],{"class":58},[41,8961,106],{"class":54},[286,8963,8964],{"icon":288},[15,8965,291,8966,294],{},[27,8967,261],{},[19,8969,298],{"id":297},[32,8971,8972],{"className":301,"code":302,"language":303,"meta":37,"style":37},[27,8973,8974,8978,8986,8996,9006,9016,9020,9024,9032,9042,9072,9084,9088,9092,9100,9108,9138,9142,9146,9150,9162,9184,9208,9212,9216,9230,9250,9254,9258,9272],{"__ignoreMap":37},[41,8975,8976],{"class":43,"line":44},[41,8977,310],{"class":47},[41,8979,8980,8982,8984],{"class":43,"line":51},[41,8981,315],{"class":65},[41,8983,319],{"class":318},[41,8985,161],{"class":54},[41,8987,8988,8990,8992,8994],{"class":43,"line":62},[41,8989,326],{"class":58},[41,8991,30],{"class":54},[41,8993,331],{"class":318},[41,8995,217],{"class":54},[41,8997,8998,9000,9002,9004],{"class":43,"line":82},[41,8999,338],{"class":58},[41,9001,30],{"class":54},[41,9003,331],{"class":318},[41,9005,217],{"class":54},[41,9007,9008,9010,9012,9014],{"class":43,"line":97},[41,9009,349],{"class":58},[41,9011,352],{"class":54},[41,9013,331],{"class":318},[41,9015,217],{"class":54},[41,9017,9018],{"class":43,"line":109},[41,9019,361],{"class":54},[41,9021,9022],{"class":43,"line":130},[41,9023,367],{"emptyLinePlaceholder":366},[41,9025,9026,9028,9030],{"class":43,"line":164},[41,9027,315],{"class":65},[41,9029,374],{"class":318},[41,9031,161],{"class":54},[41,9033,9034,9036,9038,9040],{"class":43,"line":220},[41,9035,381],{"class":58},[41,9037,30],{"class":54},[41,9039,331],{"class":318},[41,9041,217],{"class":54},[41,9043,9044,9046,9048,9050,9052,9054,9056,9058,9060,9062,9064,9066,9068,9070],{"class":43,"line":226},[41,9045,392],{"class":58},[41,9047,352],{"class":54},[41,9049,258],{"class":54},[41,9051,399],{"class":75},[41,9053,237],{"class":54},[41,9055,404],{"class":54},[41,9057,258],{"class":54},[41,9059,409],{"class":75},[41,9061,237],{"class":54},[41,9063,404],{"class":54},[41,9065,258],{"class":54},[41,9067,418],{"class":75},[41,9069,237],{"class":54},[41,9071,217],{"class":54},[41,9073,9074,9076,9078,9080,9082],{"class":43,"line":250},[41,9075,427],{"class":58},[41,9077,30],{"class":54},[41,9079,319],{"class":318},[41,9081,434],{"class":133},[41,9083,217],{"class":54},[41,9085,9086],{"class":43,"line":267},[41,9087,361],{"class":54},[41,9089,9090],{"class":43,"line":277},[41,9091,367],{"emptyLinePlaceholder":366},[41,9093,9094,9096,9098],{"class":43,"line":447},[41,9095,450],{"class":65},[41,9097,453],{"class":133},[41,9099,456],{"class":54},[41,9101,9102,9104,9106],{"class":43,"line":459},[41,9103,462],{"class":65},[41,9105,465],{"class":318},[41,9107,161],{"class":54},[41,9109,9110,9112,9114,9116,9118,9120,9122,9124,9126,9128,9130,9132,9134,9136],{"class":43,"line":470},[41,9111,473],{"class":58},[41,9113,30],{"class":54},[41,9115,478],{"class":54},[41,9117,482],{"class":481},[41,9119,30],{"class":54},[41,9121,331],{"class":318},[41,9123,245],{"class":54},[41,9125,491],{"class":481},[41,9127,352],{"class":54},[41,9129,496],{"class":318},[41,9131,214],{"class":54},[41,9133,501],{"class":65},[41,9135,504],{"class":318},[41,9137,217],{"class":54},[41,9139,9140],{"class":43,"line":509},[41,9141,512],{"class":54},[41,9143,9144],{"class":43,"line":515},[41,9145,361],{"class":54},[41,9147,9148],{"class":43,"line":520},[41,9149,367],{"emptyLinePlaceholder":366},[41,9151,9152,9154,9156,9158,9160],{"class":43,"line":525},[41,9153,529],{"class":528},[41,9155,155],{"class":65},[41,9157,534],{"class":204},[41,9159,158],{"class":54},[41,9161,161],{"class":54},[41,9163,9164,9166,9168,9170,9172,9174,9176,9178,9180,9182],{"class":43,"line":541},[41,9165,544],{"class":65},[41,9167,547],{"class":133},[41,9169,183],{"class":54},[41,9171,478],{"class":54},[41,9173,554],{"class":481},[41,9175,30],{"class":54},[41,9177,374],{"class":318},[41,9179,214],{"class":54},[41,9181,501],{"class":65},[41,9183,161],{"class":54},[41,9185,9186,9188,9190,9192,9194,9196,9198,9200,9202,9204,9206],{"class":43,"line":567},[41,9187,570],{"class":133},[41,9189,137],{"class":54},[41,9191,175],{"class":204},[41,9193,208],{"class":58},[41,9195,237],{"class":54},[41,9197,581],{"class":75},[41,9199,237],{"class":54},[41,9201,245],{"class":54},[41,9203,491],{"class":133},[41,9205,214],{"class":58},[41,9207,217],{"class":54},[41,9209,9210],{"class":43,"line":594},[41,9211,223],{"class":54},[41,9213,9214],{"class":43,"line":599},[41,9215,367],{"emptyLinePlaceholder":366},[41,9217,9218,9220,9222,9224,9226,9228],{"class":43,"line":604},[41,9219,544],{"class":65},[41,9221,609],{"class":133},[41,9223,183],{"class":54},[41,9225,614],{"class":54},[41,9227,501],{"class":65},[41,9229,161],{"class":54},[41,9231,9232,9234,9236,9238,9240,9242,9244,9246,9248],{"class":43,"line":621},[41,9233,570],{"class":133},[41,9235,137],{"class":54},[41,9237,175],{"class":204},[41,9239,208],{"class":58},[41,9241,237],{"class":54},[41,9243,634],{"class":75},[41,9245,237],{"class":54},[41,9247,214],{"class":58},[41,9249,217],{"class":54},[41,9251,9252],{"class":43,"line":643},[41,9253,223],{"class":54},[41,9255,9256],{"class":43,"line":648},[41,9257,367],{"emptyLinePlaceholder":366},[41,9259,9260,9262,9264,9266,9268,9270],{"class":43,"line":653},[41,9261,656],{"class":528},[41,9263,659],{"class":54},[41,9265,547],{"class":133},[41,9267,245],{"class":54},[41,9269,609],{"class":133},[41,9271,668],{"class":54},[41,9273,9274],{"class":43,"line":671},[41,9275,361],{"class":54},[19,9277,677],{"id":676},[32,9279,9280],{"className":301,"code":680,"language":303,"meta":37,"style":37},[27,9281,9282,9286,9306,9310,9318,9328,9338,9342,9346,9370,9388,9392,9398,9406,9412,9424,9462,9466,9472,9480,9488,9502,9516,9542,9548,9552,9556,9560,9568,9576,9582],{"__ignoreMap":37},[41,9283,9284],{"class":43,"line":44},[41,9285,687],{"class":47},[41,9287,9288,9290,9292,9294,9296,9298,9300,9302,9304],{"class":43,"line":51},[41,9289,692],{"class":528},[41,9291,659],{"class":54},[41,9293,534],{"class":133},[41,9295,699],{"class":54},[41,9297,702],{"class":528},[41,9299,258],{"class":54},[41,9301,707],{"class":75},[41,9303,237],{"class":54},[41,9305,217],{"class":54},[41,9307,9308],{"class":43,"line":62},[41,9309,367],{"emptyLinePlaceholder":366},[41,9311,9312,9314,9316],{"class":43,"line":82},[41,9313,315],{"class":65},[41,9315,722],{"class":318},[41,9317,161],{"class":54},[41,9319,9320,9322,9324,9326],{"class":43,"line":97},[41,9321,326],{"class":58},[41,9323,30],{"class":54},[41,9325,331],{"class":318},[41,9327,217],{"class":54},[41,9329,9330,9332,9334,9336],{"class":43,"line":109},[41,9331,739],{"class":58},[41,9333,30],{"class":54},[41,9335,331],{"class":318},[41,9337,217],{"class":54},[41,9339,9340],{"class":43,"line":130},[41,9341,361],{"class":54},[41,9343,9344],{"class":43,"line":164},[41,9345,367],{"emptyLinePlaceholder":366},[41,9347,9348,9350,9352,9354,9356,9358,9360,9362,9364,9366,9368],{"class":43,"line":220},[41,9349,529],{"class":528},[41,9351,155],{"class":65},[41,9353,762],{"class":204},[41,9355,765],{"class":54},[41,9357,768],{"class":481},[41,9359,245],{"class":54},[41,9361,773],{"class":481},[41,9363,776],{"class":54},[41,9365,722],{"class":318},[41,9367,214],{"class":54},[41,9369,161],{"class":54},[41,9371,9372,9374,9376,9378,9380,9382,9384,9386],{"class":43,"line":226},[41,9373,544],{"class":65},[41,9375,659],{"class":54},[41,9377,547],{"class":133},[41,9379,699],{"class":54},[41,9381,183],{"class":54},[41,9383,534],{"class":204},[41,9385,158],{"class":58},[41,9387,217],{"class":54},[41,9389,9390],{"class":43,"line":250},[41,9391,367],{"emptyLinePlaceholder":366},[41,9393,9394,9396],{"class":43,"line":267},[41,9395,656],{"class":528},[41,9397,811],{"class":58},[41,9399,9400,9402,9404],{"class":43,"line":277},[41,9401,816],{"class":54},[41,9403,819],{"class":58},[41,9405,106],{"class":54},[41,9407,9408,9410],{"class":43,"line":447},[41,9409,826],{"class":54},[41,9411,829],{"class":58},[41,9413,9414,9416,9418,9420,9422],{"class":43,"line":459},[41,9415,834],{"class":65},[41,9417,69],{"class":54},[41,9419,72],{"class":54},[41,9421,841],{"class":75},[41,9423,79],{"class":54},[41,9425,9426,9428,9430,9432,9434,9436,9438,9440,9442,9444,9446,9448,9450,9452,9454,9456,9458,9460],{"class":43,"line":470},[41,9427,848],{"class":65},[41,9429,851],{"class":54},[41,9431,854],{"class":58},[41,9433,30],{"class":54},[41,9435,258],{"class":54},[41,9437,861],{"class":75},[41,9439,237],{"class":54},[41,9441,245],{"class":54},[41,9443,868],{"class":58},[41,9445,30],{"class":54},[41,9447,874],{"class":873},[41,9449,245],{"class":54},[41,9451,879],{"class":58},[41,9453,30],{"class":54},[41,9455,258],{"class":54},[41,9457,886],{"class":75},[41,9459,237],{"class":54},[41,9461,891],{"class":54},[41,9463,9464],{"class":43,"line":509},[41,9465,896],{"class":54},[41,9467,9468,9470],{"class":43,"line":515},[41,9469,826],{"class":54},[41,9471,903],{"class":58},[41,9473,9474,9476,9478],{"class":43,"line":520},[41,9475,908],{"class":65},[41,9477,911],{"class":54},[41,9479,914],{"class":65},[41,9481,9482,9484,9486],{"class":43,"line":525},[41,9483,919],{"class":204},[41,9485,208],{"class":133},[41,9487,456],{"class":54},[41,9489,9490,9492,9494,9496,9498,9500],{"class":43,"line":541},[41,9491,928],{"class":58},[41,9493,30],{"class":54},[41,9495,258],{"class":54},[41,9497,841],{"class":75},[41,9499,237],{"class":54},[41,9501,939],{"class":54},[41,9503,9504,9506,9508,9510,9512,9514],{"class":43,"line":567},[41,9505,944],{"class":58},[41,9507,30],{"class":54},[41,9509,258],{"class":54},[41,9511,399],{"class":75},[41,9513,237],{"class":54},[41,9515,939],{"class":54},[41,9517,9518,9520,9522,9524,9526,9528,9530,9532,9534,9536,9538,9540],{"class":43,"line":594},[41,9519,959],{"class":58},[41,9521,30],{"class":54},[41,9523,964],{"class":133},[41,9525,967],{"class":54},[41,9527,768],{"class":133},[41,9529,245],{"class":54},[41,9531,974],{"class":58},[41,9533,30],{"class":54},[41,9535,979],{"class":133},[41,9537,982],{"class":54},[41,9539,985],{"class":133},[41,9541,939],{"class":54},[41,9543,9544,9546],{"class":43,"line":599},[41,9545,992],{"class":54},[41,9547,995],{"class":133},[41,9549,9550],{"class":43,"line":604},[41,9551,1000],{"class":54},[41,9553,9554],{"class":43,"line":621},[41,9555,1005],{"class":54},[41,9557,9558],{"class":43,"line":643},[41,9559,1010],{"class":133},[41,9561,9562,9564,9566],{"class":43,"line":648},[41,9563,1015],{"class":54},[41,9565,1018],{"class":58},[41,9567,106],{"class":54},[41,9569,9570,9572,9574],{"class":43,"line":653},[41,9571,1025],{"class":54},[41,9573,819],{"class":58},[41,9575,106],{"class":54},[41,9577,9578,9580],{"class":43,"line":671},[41,9579,1034],{"class":58},[41,9581,217],{"class":54},[41,9583,9584],{"class":43,"line":1039},[41,9585,361],{"class":54},[1043,9587,1045],{},{"title":37,"searchDepth":51,"depth":51,"links":9589},[9590,9591,9592],{"id":21,"depth":51,"text":22},{"id":297,"depth":51,"text":298},{"id":676,"depth":51,"text":677},{},{"title":5,"description":1051},{"id":9596,"title":5026,"body":9597,"description":10218,"extension":1052,"icon":5698,"meta":10219,"navigation":366,"path":2181,"seo":10220,"stem":10221,"__hash__":10222},"content\u002Fintegrations\u002Fvanilla-js.md",{"type":7,"value":9598,"toc":10214},[9599,9603,9606,9610,10190,10194,10212],[10,9600,9602],{"id":9601},"интеграция-с-vanilla-js","Интеграция с Vanilla JS",[15,9604,9605],{},"Без фреймворков — только HTML и JavaScript.",[19,9607,9609],{"id":9608},"полный-пример","Полный пример",[32,9611,9613],{"className":34,"code":9612,"language":36,"meta":37,"style":37},"\u003C!DOCTYPE html>\n\u003Chtml lang=\"ru\">\n\u003Chead>\n  \u003Cmeta charset=\"UTF-8\" \u002F>\n  \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \u002F>\n  \u003Ctitle>Страница товара — Виртуальная примерка\u003C\u002Ftitle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n  \u003Ch1>Классическая джинсовая куртка\u003C\u002Fh1>\n  \u003Cp>7 500 ₽\u003C\u002Fp>\n\n  \u003C!-- Контейнер виджета -->\n  \u003Cdiv id=\"widget-container\" style=\"width: 100%; max-width: 600px; aspect-ratio: 3 \u002F 4;\">\u003C\u002Fdiv>\n\n  \u003Cbutton onclick=\"openWidget()\">Примерка\u003C\u002Fbutton>\n\n  \u003C!-- 1. Загрузка пакета виджета -->\n  \u003Cscript\n    src=\"https:\u002F\u002Fwidget.try-on.ru\u002Ffitting-widget-bundle.js\"\n    id=\"fitting-widget-bundle\"\n  >\u003C\u002Fscript>\n\n  \u003C!-- 2. Инициализация -->\n  \u003Cscript id=\"fitting-init\">\n    window.fitting = window.fitting || function() {\n      (window.fitting.q = window.fitting.q || []).push(arguments);\n    };\n    window.fitting('init', {\n      apiKey: 'YOUR_API_KEY'\n    });\n  \u003C\u002Fscript>\n\n  \u003Cscript>\n    function openWidget() {\n      window.fitting('create', {\n        targetElementId: 'widget-container',\n        model: 'balanced',\n        tryonItems: [\n          {\n            productName: 'Классическая джинсовая куртка',\n            url: 'https:\u002F\u002Fexample.com\u002Fimages\u002Fjacket.jpg',\n          },\n        ],\n      });\n    }\n  \u003C\u002Fscript>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[27,9614,9615,9625,9644,9652,9670,9698,9715,9723,9731,9735,9752,9769,9773,9778,9810,9814,9842,9846,9851,9857,9869,9881,9889,9893,9898,9916,9940,9982,9986,10006,10018,10026,10034,10038,10046,10056,10076,10090,10104,10112,10116,10130,10144,10148,10154,10162,10166,10174,10182],{"__ignoreMap":37},[41,9616,9617,9619,9621,9623],{"class":43,"line":44},[41,9618,5049],{"class":54},[41,9620,5052],{"class":58},[41,9622,5055],{"class":65},[41,9624,106],{"class":54},[41,9626,9627,9629,9631,9633,9635,9637,9640,9642],{"class":43,"line":51},[41,9628,55],{"class":54},[41,9630,36],{"class":58},[41,9632,3417],{"class":65},[41,9634,69],{"class":54},[41,9636,72],{"class":54},[41,9638,9639],{"class":75},"ru",[41,9641,72],{"class":54},[41,9643,106],{"class":54},[41,9645,9646,9648,9650],{"class":43,"line":62},[41,9647,55],{"class":54},[41,9649,5083],{"class":58},[41,9651,106],{"class":54},[41,9653,9654,9656,9658,9660,9662,9664,9666,9668],{"class":43,"line":82},[41,9655,3328],{"class":54},[41,9657,3569],{"class":58},[41,9659,5094],{"class":65},[41,9661,69],{"class":54},[41,9663,72],{"class":54},[41,9665,5101],{"class":75},[41,9667,72],{"class":54},[41,9669,3384],{"class":54},[41,9671,9672,9674,9676,9678,9680,9682,9684,9686,9688,9690,9692,9694,9696],{"class":43,"line":97},[41,9673,3328],{"class":54},[41,9675,3569],{"class":58},[41,9677,5114],{"class":65},[41,9679,69],{"class":54},[41,9681,72],{"class":54},[41,9683,5121],{"class":75},[41,9685,72],{"class":54},[41,9687,5126],{"class":65},[41,9689,69],{"class":54},[41,9691,72],{"class":54},[41,9693,5133],{"class":75},[41,9695,72],{"class":54},[41,9697,3384],{"class":54},[41,9699,9700,9702,9704,9706,9709,9711,9713],{"class":43,"line":109},[41,9701,3328],{"class":54},[41,9703,5144],{"class":58},[41,9705,3341],{"class":54},[41,9707,9708],{"class":133},"Страница товара — Виртуальная примерка",[41,9710,280],{"class":54},[41,9712,5144],{"class":58},[41,9714,106],{"class":54},[41,9716,9717,9719,9721],{"class":43,"line":130},[41,9718,280],{"class":54},[41,9720,5083],{"class":58},[41,9722,106],{"class":54},[41,9724,9725,9727,9729],{"class":43,"line":164},[41,9726,55],{"class":54},[41,9728,5170],{"class":58},[41,9730,106],{"class":54},[41,9732,9733],{"class":43,"line":220},[41,9734,367],{"emptyLinePlaceholder":366},[41,9736,9737,9739,9741,9743,9746,9748,9750],{"class":43,"line":226},[41,9738,3328],{"class":54},[41,9740,10],{"class":58},[41,9742,3341],{"class":54},[41,9744,9745],{"class":133},"Классическая джинсовая куртка",[41,9747,280],{"class":54},[41,9749,10],{"class":58},[41,9751,106],{"class":54},[41,9753,9754,9756,9758,9760,9763,9765,9767],{"class":43,"line":250},[41,9755,3328],{"class":54},[41,9757,15],{"class":58},[41,9759,3341],{"class":54},[41,9761,9762],{"class":133},"7 500 ₽",[41,9764,280],{"class":54},[41,9766,15],{"class":58},[41,9768,106],{"class":54},[41,9770,9771],{"class":43,"line":267},[41,9772,367],{"emptyLinePlaceholder":366},[41,9774,9775],{"class":43,"line":277},[41,9776,9777],{"class":47},"  \u003C!-- Контейнер виджета -->\n",[41,9779,9780,9782,9784,9786,9788,9790,9792,9794,9796,9798,9800,9802,9804,9806,9808],{"class":43,"line":447},[41,9781,3328],{"class":54},[41,9783,819],{"class":58},[41,9785,116],{"class":65},[41,9787,69],{"class":54},[41,9789,72],{"class":54},[41,9791,841],{"class":75},[41,9793,72],{"class":54},[41,9795,2880],{"class":65},[41,9797,69],{"class":54},[41,9799,72],{"class":54},[41,9801,5243],{"class":75},[41,9803,72],{"class":54},[41,9805,100],{"class":54},[41,9807,819],{"class":58},[41,9809,106],{"class":54},[41,9811,9812],{"class":43,"line":459},[41,9813,367],{"emptyLinePlaceholder":366},[41,9815,9816,9818,9820,9822,9824,9826,9828,9830,9832,9834,9836,9838,9840],{"class":43,"line":470},[41,9817,3328],{"class":54},[41,9819,1018],{"class":58},[41,9821,5264],{"class":65},[41,9823,69],{"class":54},[41,9825,72],{"class":54},[41,9827,5271],{"class":204},[41,9829,158],{"class":75},[41,9831,72],{"class":54},[41,9833,3341],{"class":54},[41,9835,7647],{"class":133},[41,9837,280],{"class":54},[41,9839,1018],{"class":58},[41,9841,106],{"class":54},[41,9843,9844],{"class":43,"line":509},[41,9845,367],{"emptyLinePlaceholder":366},[41,9847,9848],{"class":43,"line":515},[41,9849,9850],{"class":47},"  \u003C!-- 1. Загрузка пакета виджета -->\n",[41,9852,9853,9855],{"class":43,"line":520},[41,9854,3328],{"class":54},[41,9856,59],{"class":58},[41,9858,9859,9861,9863,9865,9867],{"class":43,"line":525},[41,9860,5305],{"class":65},[41,9862,69],{"class":54},[41,9864,72],{"class":54},[41,9866,76],{"class":75},[41,9868,79],{"class":54},[41,9870,9871,9873,9875,9877,9879],{"class":43,"line":541},[41,9872,5318],{"class":65},[41,9874,69],{"class":54},[41,9876,72],{"class":54},[41,9878,92],{"class":75},[41,9880,79],{"class":54},[41,9882,9883,9885,9887],{"class":43,"line":567},[41,9884,5331],{"class":54},[41,9886,103],{"class":58},[41,9888,106],{"class":54},[41,9890,9891],{"class":43,"line":594},[41,9892,367],{"emptyLinePlaceholder":366},[41,9894,9895],{"class":43,"line":599},[41,9896,9897],{"class":47},"  \u003C!-- 2. Инициализация -->\n",[41,9899,9900,9902,9904,9906,9908,9910,9912,9914],{"class":43,"line":604},[41,9901,3328],{"class":54},[41,9903,103],{"class":58},[41,9905,116],{"class":65},[41,9907,69],{"class":54},[41,9909,72],{"class":54},[41,9911,123],{"class":75},[41,9913,72],{"class":54},[41,9915,106],{"class":54},[41,9917,9918,9920,9922,9924,9926,9928,9930,9932,9934,9936,9938],{"class":43,"line":621},[41,9919,570],{"class":133},[41,9921,137],{"class":54},[41,9923,140],{"class":133},[41,9925,69],{"class":54},[41,9927,145],{"class":133},[41,9929,137],{"class":54},[41,9931,140],{"class":133},[41,9933,152],{"class":54},[41,9935,155],{"class":65},[41,9937,158],{"class":54},[41,9939,161],{"class":54},[41,9941,9942,9944,9946,9948,9950,9952,9954,9956,9958,9960,9962,9964,9966,9968,9970,9972,9974,9976,9978,9980],{"class":43,"line":643},[41,9943,5391],{"class":58},[41,9945,170],{"class":133},[41,9947,137],{"class":54},[41,9949,175],{"class":133},[41,9951,137],{"class":54},[41,9953,180],{"class":133},[41,9955,183],{"class":54},[41,9957,145],{"class":133},[41,9959,137],{"class":54},[41,9961,175],{"class":133},[41,9963,137],{"class":54},[41,9965,180],{"class":133},[41,9967,196],{"class":54},[41,9969,199],{"class":58},[41,9971,137],{"class":54},[41,9973,205],{"class":204},[41,9975,208],{"class":58},[41,9977,211],{"class":133},[41,9979,214],{"class":58},[41,9981,217],{"class":54},[41,9983,9984],{"class":43,"line":648},[41,9985,5434],{"class":54},[41,9987,9988,9990,9992,9994,9996,9998,10000,10002,10004],{"class":43,"line":653},[41,9989,570],{"class":133},[41,9991,137],{"class":54},[41,9993,175],{"class":204},[41,9995,208],{"class":133},[41,9997,237],{"class":54},[41,9999,240],{"class":75},[41,10001,237],{"class":54},[41,10003,245],{"class":54},[41,10005,161],{"class":54},[41,10007,10008,10010,10012,10014,10016],{"class":43,"line":671},[41,10009,5459],{"class":58},[41,10011,30],{"class":54},[41,10013,258],{"class":54},[41,10015,1981],{"class":75},[41,10017,264],{"class":54},[41,10019,10020,10022,10024],{"class":43,"line":1039},[41,10021,2839],{"class":54},[41,10023,214],{"class":133},[41,10025,217],{"class":54},[41,10027,10028,10030,10032],{"class":43,"line":5478},[41,10029,3389],{"class":54},[41,10031,103],{"class":58},[41,10033,106],{"class":54},[41,10035,10036],{"class":43,"line":5487},[41,10037,367],{"emptyLinePlaceholder":366},[41,10039,10040,10042,10044],{"class":43,"line":5492},[41,10041,3328],{"class":54},[41,10043,103],{"class":58},[41,10045,106],{"class":54},[41,10047,10048,10050,10052,10054],{"class":43,"line":5501},[41,10049,5504],{"class":65},[41,10051,5507],{"class":204},[41,10053,158],{"class":54},[41,10055,161],{"class":54},[41,10057,10058,10060,10062,10064,10066,10068,10070,10072,10074],{"class":43,"line":5514},[41,10059,5517],{"class":133},[41,10061,137],{"class":54},[41,10063,175],{"class":204},[41,10065,208],{"class":58},[41,10067,237],{"class":54},[41,10069,581],{"class":75},[41,10071,237],{"class":54},[41,10073,245],{"class":54},[41,10075,161],{"class":54},[41,10077,10078,10080,10082,10084,10086,10088],{"class":43,"line":5536},[41,10079,5539],{"class":58},[41,10081,30],{"class":54},[41,10083,258],{"class":54},[41,10085,841],{"class":75},[41,10087,237],{"class":54},[41,10089,939],{"class":54},[41,10091,10092,10094,10096,10098,10100,10102],{"class":43,"line":5552},[41,10093,5555],{"class":58},[41,10095,30],{"class":54},[41,10097,258],{"class":54},[41,10099,399],{"class":75},[41,10101,237],{"class":54},[41,10103,939],{"class":54},[41,10105,10106,10108,10110],{"class":43,"line":5568},[41,10107,5571],{"class":58},[41,10109,30],{"class":54},[41,10111,1360],{"class":58},[41,10113,10114],{"class":43,"line":5578},[41,10115,3161],{"class":54},[41,10117,10118,10120,10122,10124,10126,10128],{"class":43,"line":5583},[41,10119,3166],{"class":58},[41,10121,30],{"class":54},[41,10123,258],{"class":54},[41,10125,9745],{"class":75},[41,10127,237],{"class":54},[41,10129,939],{"class":54},[41,10131,10132,10134,10136,10138,10140,10142],{"class":43,"line":5598},[41,10133,3181],{"class":58},[41,10135,30],{"class":54},[41,10137,258],{"class":54},[41,10139,5607],{"class":75},[41,10141,237],{"class":54},[41,10143,939],{"class":54},[41,10145,10146],{"class":43,"line":5614},[41,10147,3196],{"class":54},[41,10149,10150,10152],{"class":43,"line":5619},[41,10151,3201],{"class":58},[41,10153,939],{"class":54},[41,10155,10156,10158,10160],{"class":43,"line":5626},[41,10157,5629],{"class":54},[41,10159,214],{"class":58},[41,10161,217],{"class":54},[41,10163,10164],{"class":43,"line":5636},[41,10165,5639],{"class":54},[41,10167,10168,10170,10172],{"class":43,"line":5642},[41,10169,3389],{"class":54},[41,10171,103],{"class":58},[41,10173,106],{"class":54},[41,10175,10176,10178,10180],{"class":43,"line":5651},[41,10177,280],{"class":54},[41,10179,5170],{"class":58},[41,10181,106],{"class":54},[41,10183,10184,10186,10188],{"class":43,"line":5660},[41,10185,280],{"class":54},[41,10187,36],{"class":58},[41,10189,106],{"class":54},[19,10191,10193],{"id":10192},"ключевые-моменты","Ключевые моменты",[2173,10195,10196,10199,10207],{},[2176,10197,10198],{},"Сначала загружается пакетный скрипт.",[2176,10200,10201,10202,10204,10205,137],{},"Инициализируйте с помощью ",[27,10203,5681],{}," перед вызовом ",[27,10206,581],{},[2176,10208,10209,10211],{},[27,10210,1203],{}," должен совпадать с существующим элементом на странице.",[1043,10213,5692],{},{"title":37,"searchDepth":51,"depth":51,"links":10215},[10216,10217],{"id":9608,"depth":51,"text":9609},{"id":10192,"depth":51,"text":10193},"Интеграция с обычным HTML\u002FJavaScript",{},{"title":5026,"description":10218},"integrations\u002Fvanilla-js","TOVOFdq4t72IBSUKHoJgLGlQk10I_zCs_rea9Sj9PGA",{"id":10224,"title":5706,"body":10225,"description":11055,"extension":1052,"icon":6553,"meta":11056,"navigation":366,"path":11057,"seo":11058,"stem":11059,"__hash__":11060},"content\u002Fintegrations\u002Fvue.md",{"type":7,"value":10226,"toc":11050},[10227,10231,10234,10236,10241,10419,10423,10715,10719,11048],[10,10228,10230],{"id":10229},"интеграция-с-vue-3","Интеграция с Vue 3",[15,10232,10233],{},"Работает с Vue 3 + Vite или любым другим окружением Vue 3.",[19,10235,22],{"id":21},[15,10237,10238,10239,30],{},"В ",[27,10240,29],{},[32,10242,10243],{"className":34,"code":5725,"language":36,"meta":37,"style":37},[27,10244,10245,10251,10263,10275,10283,10301,10325,10367,10371,10391,10403,10411],{"__ignoreMap":37},[41,10246,10247,10249],{"class":43,"line":44},[41,10248,55],{"class":54},[41,10250,59],{"class":58},[41,10252,10253,10255,10257,10259,10261],{"class":43,"line":51},[41,10254,66],{"class":65},[41,10256,69],{"class":54},[41,10258,72],{"class":54},[41,10260,76],{"class":75},[41,10262,79],{"class":54},[41,10264,10265,10267,10269,10271,10273],{"class":43,"line":62},[41,10266,85],{"class":65},[41,10268,69],{"class":54},[41,10270,72],{"class":54},[41,10272,92],{"class":75},[41,10274,79],{"class":54},[41,10276,10277,10279,10281],{"class":43,"line":82},[41,10278,100],{"class":54},[41,10280,103],{"class":58},[41,10282,106],{"class":54},[41,10284,10285,10287,10289,10291,10293,10295,10297,10299],{"class":43,"line":97},[41,10286,55],{"class":54},[41,10288,103],{"class":58},[41,10290,116],{"class":65},[41,10292,69],{"class":54},[41,10294,72],{"class":54},[41,10296,123],{"class":75},[41,10298,72],{"class":54},[41,10300,106],{"class":54},[41,10302,10303,10305,10307,10309,10311,10313,10315,10317,10319,10321,10323],{"class":43,"line":109},[41,10304,134],{"class":133},[41,10306,137],{"class":54},[41,10308,140],{"class":133},[41,10310,69],{"class":54},[41,10312,145],{"class":133},[41,10314,137],{"class":54},[41,10316,140],{"class":133},[41,10318,152],{"class":54},[41,10320,155],{"class":65},[41,10322,158],{"class":54},[41,10324,161],{"class":54},[41,10326,10327,10329,10331,10333,10335,10337,10339,10341,10343,10345,10347,10349,10351,10353,10355,10357,10359,10361,10363,10365],{"class":43,"line":130},[41,10328,167],{"class":58},[41,10330,170],{"class":133},[41,10332,137],{"class":54},[41,10334,175],{"class":133},[41,10336,137],{"class":54},[41,10338,180],{"class":133},[41,10340,183],{"class":54},[41,10342,145],{"class":133},[41,10344,137],{"class":54},[41,10346,175],{"class":133},[41,10348,137],{"class":54},[41,10350,180],{"class":133},[41,10352,196],{"class":54},[41,10354,199],{"class":58},[41,10356,137],{"class":54},[41,10358,205],{"class":204},[41,10360,208],{"class":58},[41,10362,211],{"class":133},[41,10364,214],{"class":58},[41,10366,217],{"class":54},[41,10368,10369],{"class":43,"line":164},[41,10370,223],{"class":54},[41,10372,10373,10375,10377,10379,10381,10383,10385,10387,10389],{"class":43,"line":220},[41,10374,134],{"class":133},[41,10376,137],{"class":54},[41,10378,175],{"class":204},[41,10380,208],{"class":133},[41,10382,237],{"class":54},[41,10384,240],{"class":75},[41,10386,237],{"class":54},[41,10388,245],{"class":54},[41,10390,161],{"class":54},[41,10392,10393,10395,10397,10399,10401],{"class":43,"line":226},[41,10394,253],{"class":58},[41,10396,30],{"class":54},[41,10398,258],{"class":54},[41,10400,1981],{"class":75},[41,10402,264],{"class":54},[41,10404,10405,10407,10409],{"class":43,"line":250},[41,10406,270],{"class":54},[41,10408,214],{"class":133},[41,10410,217],{"class":54},[41,10412,10413,10415,10417],{"class":43,"line":267},[41,10414,280],{"class":54},[41,10416,103],{"class":58},[41,10418,106],{"class":54},[19,10420,10422],{"id":10421},"_2-создайте-composable","2. Создайте composable",[32,10424,10425],{"className":3627,"code":5908,"language":3424,"meta":37,"style":37},[27,10426,10427,10431,10441,10449,10457,10465,10469,10473,10483,10491,10519,10529,10533,10537,10545,10553,10581,10585,10589,10593,10605,10627,10649,10653,10657,10671,10689,10693,10697,10711],{"__ignoreMap":37},[41,10428,10429],{"class":43,"line":44},[41,10430,5915],{"class":47},[41,10432,10433,10435,10437,10439],{"class":43,"line":51},[41,10434,529],{"class":528},[41,10436,5922],{"class":65},[41,10438,319],{"class":318},[41,10440,161],{"class":54},[41,10442,10443,10445,10447],{"class":43,"line":62},[41,10444,326],{"class":58},[41,10446,30],{"class":54},[41,10448,3973],{"class":318},[41,10450,10451,10453,10455],{"class":43,"line":82},[41,10452,338],{"class":58},[41,10454,30],{"class":54},[41,10456,3973],{"class":318},[41,10458,10459,10461,10463],{"class":43,"line":97},[41,10460,349],{"class":58},[41,10462,352],{"class":54},[41,10464,3973],{"class":318},[41,10466,10467],{"class":43,"line":109},[41,10468,361],{"class":54},[41,10470,10471],{"class":43,"line":130},[41,10472,367],{"emptyLinePlaceholder":366},[41,10474,10475,10477,10479,10481],{"class":43,"line":164},[41,10476,529],{"class":528},[41,10478,5922],{"class":65},[41,10480,374],{"class":318},[41,10482,161],{"class":54},[41,10484,10485,10487,10489],{"class":43,"line":220},[41,10486,381],{"class":58},[41,10488,30],{"class":54},[41,10490,3973],{"class":318},[41,10492,10493,10495,10497,10499,10501,10503,10505,10507,10509,10511,10513,10515,10517],{"class":43,"line":226},[41,10494,392],{"class":58},[41,10496,352],{"class":54},[41,10498,258],{"class":54},[41,10500,399],{"class":75},[41,10502,237],{"class":54},[41,10504,404],{"class":54},[41,10506,258],{"class":54},[41,10508,409],{"class":75},[41,10510,237],{"class":54},[41,10512,404],{"class":54},[41,10514,258],{"class":54},[41,10516,418],{"class":75},[41,10518,264],{"class":54},[41,10520,10521,10523,10525,10527],{"class":43,"line":250},[41,10522,427],{"class":58},[41,10524,30],{"class":54},[41,10526,319],{"class":318},[41,10528,6015],{"class":133},[41,10530,10531],{"class":43,"line":267},[41,10532,361],{"class":54},[41,10534,10535],{"class":43,"line":277},[41,10536,367],{"emptyLinePlaceholder":366},[41,10538,10539,10541,10543],{"class":43,"line":447},[41,10540,450],{"class":65},[41,10542,453],{"class":133},[41,10544,456],{"class":54},[41,10546,10547,10549,10551],{"class":43,"line":459},[41,10548,462],{"class":65},[41,10550,465],{"class":318},[41,10552,161],{"class":54},[41,10554,10555,10557,10559,10561,10563,10565,10567,10569,10571,10573,10575,10577,10579],{"class":43,"line":470},[41,10556,473],{"class":58},[41,10558,30],{"class":54},[41,10560,478],{"class":54},[41,10562,482],{"class":481},[41,10564,30],{"class":54},[41,10566,331],{"class":318},[41,10568,245],{"class":54},[41,10570,491],{"class":481},[41,10572,352],{"class":54},[41,10574,496],{"class":318},[41,10576,214],{"class":54},[41,10578,501],{"class":65},[41,10580,6068],{"class":318},[41,10582,10583],{"class":43,"line":509},[41,10584,512],{"class":54},[41,10586,10587],{"class":43,"line":515},[41,10588,361],{"class":54},[41,10590,10591],{"class":43,"line":520},[41,10592,367],{"emptyLinePlaceholder":366},[41,10594,10595,10597,10599,10601,10603],{"class":43,"line":525},[41,10596,529],{"class":528},[41,10598,155],{"class":65},[41,10600,534],{"class":204},[41,10602,158],{"class":54},[41,10604,161],{"class":54},[41,10606,10607,10609,10611,10613,10615,10617,10619,10621,10623,10625],{"class":43,"line":541},[41,10608,544],{"class":65},[41,10610,547],{"class":133},[41,10612,183],{"class":54},[41,10614,478],{"class":54},[41,10616,554],{"class":481},[41,10618,30],{"class":54},[41,10620,374],{"class":318},[41,10622,214],{"class":54},[41,10624,501],{"class":65},[41,10626,161],{"class":54},[41,10628,10629,10631,10633,10635,10637,10639,10641,10643,10645,10647],{"class":43,"line":567},[41,10630,570],{"class":133},[41,10632,137],{"class":54},[41,10634,175],{"class":204},[41,10636,208],{"class":58},[41,10638,237],{"class":54},[41,10640,581],{"class":75},[41,10642,237],{"class":54},[41,10644,245],{"class":54},[41,10646,491],{"class":133},[41,10648,995],{"class":58},[41,10650,10651],{"class":43,"line":594},[41,10652,512],{"class":54},[41,10654,10655],{"class":43,"line":599},[41,10656,367],{"emptyLinePlaceholder":366},[41,10658,10659,10661,10663,10665,10667,10669],{"class":43,"line":604},[41,10660,544],{"class":65},[41,10662,609],{"class":133},[41,10664,183],{"class":54},[41,10666,614],{"class":54},[41,10668,501],{"class":65},[41,10670,161],{"class":54},[41,10672,10673,10675,10677,10679,10681,10683,10685,10687],{"class":43,"line":621},[41,10674,570],{"class":133},[41,10676,137],{"class":54},[41,10678,175],{"class":204},[41,10680,208],{"class":58},[41,10682,237],{"class":54},[41,10684,634],{"class":75},[41,10686,237],{"class":54},[41,10688,995],{"class":58},[41,10690,10691],{"class":43,"line":643},[41,10692,512],{"class":54},[41,10694,10695],{"class":43,"line":648},[41,10696,367],{"emptyLinePlaceholder":366},[41,10698,10699,10701,10703,10705,10707,10709],{"class":43,"line":653},[41,10700,656],{"class":528},[41,10702,659],{"class":54},[41,10704,547],{"class":133},[41,10706,245],{"class":54},[41,10708,609],{"class":133},[41,10710,6199],{"class":54},[41,10712,10713],{"class":43,"line":671},[41,10714,361],{"class":54},[19,10716,10718],{"id":10717},"_3-создайте-компонент-виджета","3. Создайте компонент виджета",[32,10720,10722],{"className":3305,"code":10721,"language":3307,"meta":37,"style":37},"\u003C!-- components\u002FTryOnWidget.vue -->\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cdiv\n      id=\"widget-container\"\n      style=\"width: 100%; max-width: 600px; aspect-ratio: 3\u002F4\"\n    \u002F>\n    \u003Cbutton @click=\"handleTryOn\">Примерка\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nimport { useFittingWidget, type TryonItem } from '~\u002Fcomposables\u002FuseFittingWidget'\n\nconst props = defineProps\u003C{\n  productName: string\n  imageUrl: string\n}>()\n\nconst { open } = useFittingWidget()\n\nconst handleTryOn = () => {\n  open({\n    targetElementId: 'widget-container',\n    model: 'balanced',\n    tryonItems: [\n      {\n        productName: props.productName,\n        url: props.imageUrl,\n      },\n    ],\n  })\n}\n\u003C\u002Fscript>\n",[27,10723,10724,10728,10736,10744,10750,10762,10774,10778,10804,10812,10820,10824,10844,10868,10872,10884,10892,10900,10906,10910,10926,10930,10944,10952,10966,10980,10988,10992,11006,11020,11024,11030,11036,11040],{"__ignoreMap":37},[41,10725,10726],{"class":43,"line":44},[41,10727,3834],{"class":47},[41,10729,10730,10732,10734],{"class":43,"line":51},[41,10731,55],{"class":54},[41,10733,3321],{"class":58},[41,10735,106],{"class":54},[41,10737,10738,10740,10742],{"class":43,"line":62},[41,10739,3328],{"class":54},[41,10741,819],{"class":58},[41,10743,106],{"class":54},[41,10745,10746,10748],{"class":43,"line":82},[41,10747,816],{"class":54},[41,10749,829],{"class":58},[41,10751,10752,10754,10756,10758,10760],{"class":43,"line":97},[41,10753,3493],{"class":65},[41,10755,69],{"class":54},[41,10757,72],{"class":54},[41,10759,841],{"class":75},[41,10761,79],{"class":54},[41,10763,10764,10766,10768,10770,10772],{"class":43,"line":109},[41,10765,6255],{"class":65},[41,10767,69],{"class":54},[41,10769,72],{"class":54},[41,10771,6262],{"class":75},[41,10773,79],{"class":54},[41,10775,10776],{"class":43,"line":130},[41,10777,6269],{"class":54},[41,10779,10780,10782,10784,10786,10788,10790,10792,10794,10796,10798,10800,10802],{"class":43,"line":164},[41,10781,816],{"class":54},[41,10783,1018],{"class":58},[41,10785,3889],{"class":65},[41,10787,69],{"class":54},[41,10789,72],{"class":54},[41,10791,3896],{"class":75},[41,10793,72],{"class":54},[41,10795,3341],{"class":54},[41,10797,7647],{"class":133},[41,10799,280],{"class":54},[41,10801,1018],{"class":58},[41,10803,106],{"class":54},[41,10805,10806,10808,10810],{"class":43,"line":220},[41,10807,3389],{"class":54},[41,10809,819],{"class":58},[41,10811,106],{"class":54},[41,10813,10814,10816,10818],{"class":43,"line":226},[41,10815,280],{"class":54},[41,10817,3321],{"class":58},[41,10819,106],{"class":54},[41,10821,10822],{"class":43,"line":250},[41,10823,367],{"emptyLinePlaceholder":366},[41,10825,10826,10828,10830,10832,10834,10836,10838,10840,10842],{"class":43,"line":267},[41,10827,55],{"class":54},[41,10829,103],{"class":58},[41,10831,3414],{"class":65},[41,10833,3417],{"class":65},[41,10835,69],{"class":54},[41,10837,72],{"class":54},[41,10839,3424],{"class":75},[41,10841,72],{"class":54},[41,10843,106],{"class":54},[41,10845,10846,10848,10850,10852,10854,10856,10858,10860,10862,10864,10866],{"class":43,"line":277},[41,10847,692],{"class":528},[41,10849,659],{"class":54},[41,10851,534],{"class":133},[41,10853,245],{"class":54},[41,10855,6348],{"class":528},[41,10857,319],{"class":133},[41,10859,699],{"class":54},[41,10861,702],{"class":528},[41,10863,258],{"class":54},[41,10865,6359],{"class":75},[41,10867,264],{"class":54},[41,10869,10870],{"class":43,"line":447},[41,10871,367],{"emptyLinePlaceholder":366},[41,10873,10874,10876,10878,10880,10882],{"class":43,"line":459},[41,10875,3953],{"class":65},[41,10877,3956],{"class":133},[41,10879,69],{"class":54},[41,10881,3961],{"class":204},[41,10883,3964],{"class":54},[41,10885,10886,10888,10890],{"class":43,"line":470},[41,10887,326],{"class":58},[41,10889,30],{"class":54},[41,10891,3973],{"class":318},[41,10893,10894,10896,10898],{"class":43,"line":509},[41,10895,739],{"class":58},[41,10897,30],{"class":54},[41,10899,3973],{"class":318},[41,10901,10902,10904],{"class":43,"line":515},[41,10903,2933],{"class":54},[41,10905,3988],{"class":133},[41,10907,10908],{"class":43,"line":520},[41,10909,367],{"emptyLinePlaceholder":366},[41,10911,10912,10914,10916,10918,10920,10922,10924],{"class":43,"line":525},[41,10913,3953],{"class":65},[41,10915,659],{"class":54},[41,10917,6412],{"class":133},[41,10919,982],{"class":54},[41,10921,183],{"class":54},[41,10923,534],{"class":204},[41,10925,3988],{"class":133},[41,10927,10928],{"class":43,"line":541},[41,10929,367],{"emptyLinePlaceholder":366},[41,10931,10932,10934,10936,10938,10940,10942],{"class":43,"line":567},[41,10933,3953],{"class":65},[41,10935,3999],{"class":133},[41,10937,69],{"class":54},[41,10939,614],{"class":54},[41,10941,501],{"class":65},[41,10943,161],{"class":54},[41,10945,10946,10948,10950],{"class":43,"line":594},[41,10947,6443],{"class":204},[41,10949,208],{"class":58},[41,10951,456],{"class":54},[41,10953,10954,10956,10958,10960,10962,10964],{"class":43,"line":599},[41,10955,4032],{"class":58},[41,10957,30],{"class":54},[41,10959,258],{"class":54},[41,10961,841],{"class":75},[41,10963,237],{"class":54},[41,10965,939],{"class":54},[41,10967,10968,10970,10972,10974,10976,10978],{"class":43,"line":604},[41,10969,4047],{"class":58},[41,10971,30],{"class":54},[41,10973,258],{"class":54},[41,10975,399],{"class":75},[41,10977,237],{"class":54},[41,10979,939],{"class":54},[41,10981,10982,10984,10986],{"class":43,"line":621},[41,10983,4062],{"class":58},[41,10985,30],{"class":54},[41,10987,1360],{"class":58},[41,10989,10990],{"class":43,"line":643},[41,10991,4071],{"class":54},[41,10993,10994,10996,10998,11000,11002,11004],{"class":43,"line":648},[41,10995,4076],{"class":58},[41,10997,30],{"class":54},[41,10999,4081],{"class":133},[41,11001,137],{"class":54},[41,11003,1277],{"class":133},[41,11005,939],{"class":54},[41,11007,11008,11010,11012,11014,11016,11018],{"class":43,"line":653},[41,11009,4092],{"class":58},[41,11011,30],{"class":54},[41,11013,4081],{"class":133},[41,11015,137],{"class":54},[41,11017,4101],{"class":133},[41,11019,939],{"class":54},[41,11021,11022],{"class":43,"line":671},[41,11023,4108],{"class":54},[41,11025,11026,11028],{"class":43,"line":1039},[41,11027,4113],{"class":58},[41,11029,939],{"class":54},[41,11031,11032,11034],{"class":43,"line":5478},[41,11033,270],{"class":54},[41,11035,995],{"class":58},[41,11037,11038],{"class":43,"line":5487},[41,11039,361],{"class":54},[41,11041,11042,11044,11046],{"class":43,"line":5492},[41,11043,280],{"class":54},[41,11045,103],{"class":58},[41,11047,106],{"class":54},[1043,11049,6546],{},{"title":37,"searchDepth":51,"depth":51,"links":11051},[11052,11053,11054],{"id":21,"depth":51,"text":22},{"id":10421,"depth":51,"text":10422},{"id":10717,"depth":51,"text":10718},"Интеграция с Vue 3 приложением",{},"\u002Fintegrations\u002Fvue",{"title":5706,"description":11055},"integrations\u002Fvue","940Q7exH9C3y9bXr_sW6skJzNNxxGlNzOBpnASqYjFU",1779283220737]