[{"data":1,"prerenderedAt":11061},["ShallowReactive",2],{"\u002Fen\u002Fintegrations\u002Freact":3,"all-pages-\u002Fen\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\u002Fen\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-integration","React Integration",[15,16,17],"p",{},"Works with any React setup — Vite, Create React App, or custom.",[19,20,22],"h2",{"id":21},"_1-load-the-widget-script","1. Load the Widget Script",[15,24,25,26,30],{},"Add the script to your ",[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!-- 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","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!-- In public\u002Findex.html or 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],{},"Replace ",[27,293,261],{}," at build time with your actual key, or use a runtime injection approach.",[19,296,298],{"id":297},"_2-create-a-custom-hook","2. Create a Custom Hook",[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-use-in-a-component","3. Use in a Component",[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 Try On\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}," Try On\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},"Integrate with a React (Vite \u002F CRA) app","md","i-lucide-react",{},"\u002Fen\u002Fintegrations\u002Freact",{"title":5,"description":1051},"en\u002Fintegrations\u002Freact","pb3AGE_nU_OjJFKOaRsB1vUMbyzjRuGZlTgplr5i71Q",[1060,1434,1770,2207,2298,3271,4175,5003,5683,6538,6955,7042,7925,8746,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":4,"title":5,"body":4176,"description":1051,"extension":1052,"icon":1053,"meta":5001,"navigation":366,"path":1055,"seo":5002,"stem":1057,"__hash__":1058},{"type":7,"value":4177,"toc":4996},[4178,4180,4182,4184,4188,4370,4376,4378,4684,4686,4994],[10,4179,13],{"id":12},[15,4181,17],{},[19,4183,22],{"id":21},[15,4185,25,4186,30],{},[27,4187,29],{},[32,4189,4190],{"className":34,"code":35,"language":36,"meta":37,"style":37},[27,4191,4192,4196,4202,4214,4226,4234,4252,4276,4318,4322,4342,4354,4362],{"__ignoreMap":37},[41,4193,4194],{"class":43,"line":44},[41,4195,48],{"class":47},[41,4197,4198,4200],{"class":43,"line":51},[41,4199,55],{"class":54},[41,4201,59],{"class":58},[41,4203,4204,4206,4208,4210,4212],{"class":43,"line":62},[41,4205,66],{"class":65},[41,4207,69],{"class":54},[41,4209,72],{"class":54},[41,4211,76],{"class":75},[41,4213,79],{"class":54},[41,4215,4216,4218,4220,4222,4224],{"class":43,"line":82},[41,4217,85],{"class":65},[41,4219,69],{"class":54},[41,4221,72],{"class":54},[41,4223,92],{"class":75},[41,4225,79],{"class":54},[41,4227,4228,4230,4232],{"class":43,"line":97},[41,4229,100],{"class":54},[41,4231,103],{"class":58},[41,4233,106],{"class":54},[41,4235,4236,4238,4240,4242,4244,4246,4248,4250],{"class":43,"line":109},[41,4237,55],{"class":54},[41,4239,103],{"class":58},[41,4241,116],{"class":65},[41,4243,69],{"class":54},[41,4245,72],{"class":54},[41,4247,123],{"class":75},[41,4249,72],{"class":54},[41,4251,106],{"class":54},[41,4253,4254,4256,4258,4260,4262,4264,4266,4268,4270,4272,4274],{"class":43,"line":130},[41,4255,134],{"class":133},[41,4257,137],{"class":54},[41,4259,140],{"class":133},[41,4261,69],{"class":54},[41,4263,145],{"class":133},[41,4265,137],{"class":54},[41,4267,140],{"class":133},[41,4269,152],{"class":54},[41,4271,155],{"class":65},[41,4273,158],{"class":54},[41,4275,161],{"class":54},[41,4277,4278,4280,4282,4284,4286,4288,4290,4292,4294,4296,4298,4300,4302,4304,4306,4308,4310,4312,4314,4316],{"class":43,"line":164},[41,4279,167],{"class":58},[41,4281,170],{"class":133},[41,4283,137],{"class":54},[41,4285,175],{"class":133},[41,4287,137],{"class":54},[41,4289,180],{"class":133},[41,4291,183],{"class":54},[41,4293,145],{"class":133},[41,4295,137],{"class":54},[41,4297,175],{"class":133},[41,4299,137],{"class":54},[41,4301,180],{"class":133},[41,4303,196],{"class":54},[41,4305,199],{"class":58},[41,4307,137],{"class":54},[41,4309,205],{"class":204},[41,4311,208],{"class":58},[41,4313,211],{"class":133},[41,4315,214],{"class":58},[41,4317,217],{"class":54},[41,4319,4320],{"class":43,"line":220},[41,4321,223],{"class":54},[41,4323,4324,4326,4328,4330,4332,4334,4336,4338,4340],{"class":43,"line":226},[41,4325,134],{"class":133},[41,4327,137],{"class":54},[41,4329,175],{"class":204},[41,4331,208],{"class":133},[41,4333,237],{"class":54},[41,4335,240],{"class":75},[41,4337,237],{"class":54},[41,4339,245],{"class":54},[41,4341,161],{"class":54},[41,4343,4344,4346,4348,4350,4352],{"class":43,"line":250},[41,4345,253],{"class":58},[41,4347,30],{"class":54},[41,4349,258],{"class":54},[41,4351,261],{"class":75},[41,4353,264],{"class":54},[41,4355,4356,4358,4360],{"class":43,"line":267},[41,4357,270],{"class":54},[41,4359,214],{"class":133},[41,4361,217],{"class":54},[41,4363,4364,4366,4368],{"class":43,"line":277},[41,4365,280],{"class":54},[41,4367,103],{"class":58},[41,4369,106],{"class":54},[286,4371,4372],{"icon":288},[15,4373,291,4374,294],{},[27,4375,261],{},[19,4377,298],{"id":297},[32,4379,4380],{"className":301,"code":302,"language":303,"meta":37,"style":37},[27,4381,4382,4386,4394,4404,4414,4424,4428,4432,4440,4450,4480,4492,4496,4500,4508,4516,4546,4550,4554,4558,4570,4592,4616,4620,4624,4638,4658,4662,4666,4680],{"__ignoreMap":37},[41,4383,4384],{"class":43,"line":44},[41,4385,310],{"class":47},[41,4387,4388,4390,4392],{"class":43,"line":51},[41,4389,315],{"class":65},[41,4391,319],{"class":318},[41,4393,161],{"class":54},[41,4395,4396,4398,4400,4402],{"class":43,"line":62},[41,4397,326],{"class":58},[41,4399,30],{"class":54},[41,4401,331],{"class":318},[41,4403,217],{"class":54},[41,4405,4406,4408,4410,4412],{"class":43,"line":82},[41,4407,338],{"class":58},[41,4409,30],{"class":54},[41,4411,331],{"class":318},[41,4413,217],{"class":54},[41,4415,4416,4418,4420,4422],{"class":43,"line":97},[41,4417,349],{"class":58},[41,4419,352],{"class":54},[41,4421,331],{"class":318},[41,4423,217],{"class":54},[41,4425,4426],{"class":43,"line":109},[41,4427,361],{"class":54},[41,4429,4430],{"class":43,"line":130},[41,4431,367],{"emptyLinePlaceholder":366},[41,4433,4434,4436,4438],{"class":43,"line":164},[41,4435,315],{"class":65},[41,4437,374],{"class":318},[41,4439,161],{"class":54},[41,4441,4442,4444,4446,4448],{"class":43,"line":220},[41,4443,381],{"class":58},[41,4445,30],{"class":54},[41,4447,331],{"class":318},[41,4449,217],{"class":54},[41,4451,4452,4454,4456,4458,4460,4462,4464,4466,4468,4470,4472,4474,4476,4478],{"class":43,"line":226},[41,4453,392],{"class":58},[41,4455,352],{"class":54},[41,4457,258],{"class":54},[41,4459,399],{"class":75},[41,4461,237],{"class":54},[41,4463,404],{"class":54},[41,4465,258],{"class":54},[41,4467,409],{"class":75},[41,4469,237],{"class":54},[41,4471,404],{"class":54},[41,4473,258],{"class":54},[41,4475,418],{"class":75},[41,4477,237],{"class":54},[41,4479,217],{"class":54},[41,4481,4482,4484,4486,4488,4490],{"class":43,"line":250},[41,4483,427],{"class":58},[41,4485,30],{"class":54},[41,4487,319],{"class":318},[41,4489,434],{"class":133},[41,4491,217],{"class":54},[41,4493,4494],{"class":43,"line":267},[41,4495,361],{"class":54},[41,4497,4498],{"class":43,"line":277},[41,4499,367],{"emptyLinePlaceholder":366},[41,4501,4502,4504,4506],{"class":43,"line":447},[41,4503,450],{"class":65},[41,4505,453],{"class":133},[41,4507,456],{"class":54},[41,4509,4510,4512,4514],{"class":43,"line":459},[41,4511,462],{"class":65},[41,4513,465],{"class":318},[41,4515,161],{"class":54},[41,4517,4518,4520,4522,4524,4526,4528,4530,4532,4534,4536,4538,4540,4542,4544],{"class":43,"line":470},[41,4519,473],{"class":58},[41,4521,30],{"class":54},[41,4523,478],{"class":54},[41,4525,482],{"class":481},[41,4527,30],{"class":54},[41,4529,331],{"class":318},[41,4531,245],{"class":54},[41,4533,491],{"class":481},[41,4535,352],{"class":54},[41,4537,496],{"class":318},[41,4539,214],{"class":54},[41,4541,501],{"class":65},[41,4543,504],{"class":318},[41,4545,217],{"class":54},[41,4547,4548],{"class":43,"line":509},[41,4549,512],{"class":54},[41,4551,4552],{"class":43,"line":515},[41,4553,361],{"class":54},[41,4555,4556],{"class":43,"line":520},[41,4557,367],{"emptyLinePlaceholder":366},[41,4559,4560,4562,4564,4566,4568],{"class":43,"line":525},[41,4561,529],{"class":528},[41,4563,155],{"class":65},[41,4565,534],{"class":204},[41,4567,158],{"class":54},[41,4569,161],{"class":54},[41,4571,4572,4574,4576,4578,4580,4582,4584,4586,4588,4590],{"class":43,"line":541},[41,4573,544],{"class":65},[41,4575,547],{"class":133},[41,4577,183],{"class":54},[41,4579,478],{"class":54},[41,4581,554],{"class":481},[41,4583,30],{"class":54},[41,4585,374],{"class":318},[41,4587,214],{"class":54},[41,4589,501],{"class":65},[41,4591,161],{"class":54},[41,4593,4594,4596,4598,4600,4602,4604,4606,4608,4610,4612,4614],{"class":43,"line":567},[41,4595,570],{"class":133},[41,4597,137],{"class":54},[41,4599,175],{"class":204},[41,4601,208],{"class":58},[41,4603,237],{"class":54},[41,4605,581],{"class":75},[41,4607,237],{"class":54},[41,4609,245],{"class":54},[41,4611,491],{"class":133},[41,4613,214],{"class":58},[41,4615,217],{"class":54},[41,4617,4618],{"class":43,"line":594},[41,4619,223],{"class":54},[41,4621,4622],{"class":43,"line":599},[41,4623,367],{"emptyLinePlaceholder":366},[41,4625,4626,4628,4630,4632,4634,4636],{"class":43,"line":604},[41,4627,544],{"class":65},[41,4629,609],{"class":133},[41,4631,183],{"class":54},[41,4633,614],{"class":54},[41,4635,501],{"class":65},[41,4637,161],{"class":54},[41,4639,4640,4642,4644,4646,4648,4650,4652,4654,4656],{"class":43,"line":621},[41,4641,570],{"class":133},[41,4643,137],{"class":54},[41,4645,175],{"class":204},[41,4647,208],{"class":58},[41,4649,237],{"class":54},[41,4651,634],{"class":75},[41,4653,237],{"class":54},[41,4655,214],{"class":58},[41,4657,217],{"class":54},[41,4659,4660],{"class":43,"line":643},[41,4661,223],{"class":54},[41,4663,4664],{"class":43,"line":648},[41,4665,367],{"emptyLinePlaceholder":366},[41,4667,4668,4670,4672,4674,4676,4678],{"class":43,"line":653},[41,4669,656],{"class":528},[41,4671,659],{"class":54},[41,4673,547],{"class":133},[41,4675,245],{"class":54},[41,4677,609],{"class":133},[41,4679,668],{"class":54},[41,4681,4682],{"class":43,"line":671},[41,4683,361],{"class":54},[19,4685,677],{"id":676},[32,4687,4688],{"className":301,"code":680,"language":303,"meta":37,"style":37},[27,4689,4690,4694,4714,4718,4726,4736,4746,4750,4754,4778,4796,4800,4806,4814,4820,4832,4870,4874,4880,4888,4896,4910,4924,4950,4956,4960,4964,4968,4976,4984,4990],{"__ignoreMap":37},[41,4691,4692],{"class":43,"line":44},[41,4693,687],{"class":47},[41,4695,4696,4698,4700,4702,4704,4706,4708,4710,4712],{"class":43,"line":51},[41,4697,692],{"class":528},[41,4699,659],{"class":54},[41,4701,534],{"class":133},[41,4703,699],{"class":54},[41,4705,702],{"class":528},[41,4707,258],{"class":54},[41,4709,707],{"class":75},[41,4711,237],{"class":54},[41,4713,217],{"class":54},[41,4715,4716],{"class":43,"line":62},[41,4717,367],{"emptyLinePlaceholder":366},[41,4719,4720,4722,4724],{"class":43,"line":82},[41,4721,315],{"class":65},[41,4723,722],{"class":318},[41,4725,161],{"class":54},[41,4727,4728,4730,4732,4734],{"class":43,"line":97},[41,4729,326],{"class":58},[41,4731,30],{"class":54},[41,4733,331],{"class":318},[41,4735,217],{"class":54},[41,4737,4738,4740,4742,4744],{"class":43,"line":109},[41,4739,739],{"class":58},[41,4741,30],{"class":54},[41,4743,331],{"class":318},[41,4745,217],{"class":54},[41,4747,4748],{"class":43,"line":130},[41,4749,361],{"class":54},[41,4751,4752],{"class":43,"line":164},[41,4753,367],{"emptyLinePlaceholder":366},[41,4755,4756,4758,4760,4762,4764,4766,4768,4770,4772,4774,4776],{"class":43,"line":220},[41,4757,529],{"class":528},[41,4759,155],{"class":65},[41,4761,762],{"class":204},[41,4763,765],{"class":54},[41,4765,768],{"class":481},[41,4767,245],{"class":54},[41,4769,773],{"class":481},[41,4771,776],{"class":54},[41,4773,722],{"class":318},[41,4775,214],{"class":54},[41,4777,161],{"class":54},[41,4779,4780,4782,4784,4786,4788,4790,4792,4794],{"class":43,"line":226},[41,4781,544],{"class":65},[41,4783,659],{"class":54},[41,4785,547],{"class":133},[41,4787,699],{"class":54},[41,4789,183],{"class":54},[41,4791,534],{"class":204},[41,4793,158],{"class":58},[41,4795,217],{"class":54},[41,4797,4798],{"class":43,"line":250},[41,4799,367],{"emptyLinePlaceholder":366},[41,4801,4802,4804],{"class":43,"line":267},[41,4803,656],{"class":528},[41,4805,811],{"class":58},[41,4807,4808,4810,4812],{"class":43,"line":277},[41,4809,816],{"class":54},[41,4811,819],{"class":58},[41,4813,106],{"class":54},[41,4815,4816,4818],{"class":43,"line":447},[41,4817,826],{"class":54},[41,4819,829],{"class":58},[41,4821,4822,4824,4826,4828,4830],{"class":43,"line":459},[41,4823,834],{"class":65},[41,4825,69],{"class":54},[41,4827,72],{"class":54},[41,4829,841],{"class":75},[41,4831,79],{"class":54},[41,4833,4834,4836,4838,4840,4842,4844,4846,4848,4850,4852,4854,4856,4858,4860,4862,4864,4866,4868],{"class":43,"line":470},[41,4835,848],{"class":65},[41,4837,851],{"class":54},[41,4839,854],{"class":58},[41,4841,30],{"class":54},[41,4843,258],{"class":54},[41,4845,861],{"class":75},[41,4847,237],{"class":54},[41,4849,245],{"class":54},[41,4851,868],{"class":58},[41,4853,30],{"class":54},[41,4855,874],{"class":873},[41,4857,245],{"class":54},[41,4859,879],{"class":58},[41,4861,30],{"class":54},[41,4863,258],{"class":54},[41,4865,886],{"class":75},[41,4867,237],{"class":54},[41,4869,891],{"class":54},[41,4871,4872],{"class":43,"line":509},[41,4873,896],{"class":54},[41,4875,4876,4878],{"class":43,"line":515},[41,4877,826],{"class":54},[41,4879,903],{"class":58},[41,4881,4882,4884,4886],{"class":43,"line":520},[41,4883,908],{"class":65},[41,4885,911],{"class":54},[41,4887,914],{"class":65},[41,4889,4890,4892,4894],{"class":43,"line":525},[41,4891,919],{"class":204},[41,4893,208],{"class":133},[41,4895,456],{"class":54},[41,4897,4898,4900,4902,4904,4906,4908],{"class":43,"line":541},[41,4899,928],{"class":58},[41,4901,30],{"class":54},[41,4903,258],{"class":54},[41,4905,841],{"class":75},[41,4907,237],{"class":54},[41,4909,939],{"class":54},[41,4911,4912,4914,4916,4918,4920,4922],{"class":43,"line":567},[41,4913,944],{"class":58},[41,4915,30],{"class":54},[41,4917,258],{"class":54},[41,4919,399],{"class":75},[41,4921,237],{"class":54},[41,4923,939],{"class":54},[41,4925,4926,4928,4930,4932,4934,4936,4938,4940,4942,4944,4946,4948],{"class":43,"line":594},[41,4927,959],{"class":58},[41,4929,30],{"class":54},[41,4931,964],{"class":133},[41,4933,967],{"class":54},[41,4935,768],{"class":133},[41,4937,245],{"class":54},[41,4939,974],{"class":58},[41,4941,30],{"class":54},[41,4943,979],{"class":133},[41,4945,982],{"class":54},[41,4947,985],{"class":133},[41,4949,939],{"class":54},[41,4951,4952,4954],{"class":43,"line":599},[41,4953,992],{"class":54},[41,4955,995],{"class":133},[41,4957,4958],{"class":43,"line":604},[41,4959,1000],{"class":54},[41,4961,4962],{"class":43,"line":621},[41,4963,1005],{"class":54},[41,4965,4966],{"class":43,"line":643},[41,4967,1010],{"class":133},[41,4969,4970,4972,4974],{"class":43,"line":648},[41,4971,1015],{"class":54},[41,4973,1018],{"class":58},[41,4975,106],{"class":54},[41,4977,4978,4980,4982],{"class":43,"line":653},[41,4979,1025],{"class":54},[41,4981,819],{"class":58},[41,4983,106],{"class":54},[41,4985,4986,4988],{"class":43,"line":671},[41,4987,1034],{"class":58},[41,4989,217],{"class":54},[41,4991,4992],{"class":43,"line":1039},[41,4993,361],{"class":54},[1043,4995,1045],{},{"title":37,"searchDepth":51,"depth":51,"links":4997},[4998,4999,5000],{"id":21,"depth":51,"text":22},{"id":297,"depth":51,"text":298},{"id":676,"depth":51,"text":677},{},{"title":5,"description":1051},{"id":5004,"title":5005,"body":5006,"description":5676,"extension":1052,"icon":5677,"meta":5678,"navigation":366,"path":5679,"seo":5680,"stem":5681,"__hash__":5682},"content\u002Fen\u002Fintegrations\u002Fvanilla-js.md","Vanilla JS",{"type":7,"value":5007,"toc":5672},[5008,5012,5015,5019,5646,5650,5669],[10,5009,5011],{"id":5010},"vanilla-js-integration","Vanilla JS Integration",[15,5013,5014],{},"No framework needed — just HTML and JavaScript.",[19,5016,5018],{"id":5017},"full-example","Full Example",[32,5020,5022],{"className":34,"code":5021,"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,5023,5024,5037,5056,5065,5085,5117,5135,5143,5152,5156,5172,5189,5193,5198,5231,5235,5265,5269,5274,5280,5293,5306,5315,5319,5324,5342,5366,5409,5414,5434,5447,5455,5464,5469,5478,5491,5513,5529,5545,5555,5560,5575,5591,5596,5603,5613,5619,5628,5637],{"__ignoreMap":37},[41,5025,5026,5029,5032,5035],{"class":43,"line":44},[41,5027,5028],{"class":54},"\u003C!",[41,5030,5031],{"class":58},"DOCTYPE",[41,5033,5034],{"class":65}," html",[41,5036,106],{"class":54},[41,5038,5039,5041,5043,5045,5047,5049,5052,5054],{"class":43,"line":51},[41,5040,55],{"class":54},[41,5042,36],{"class":58},[41,5044,3417],{"class":65},[41,5046,69],{"class":54},[41,5048,72],{"class":54},[41,5050,5051],{"class":75},"en",[41,5053,72],{"class":54},[41,5055,106],{"class":54},[41,5057,5058,5060,5063],{"class":43,"line":62},[41,5059,55],{"class":54},[41,5061,5062],{"class":58},"head",[41,5064,106],{"class":54},[41,5066,5067,5069,5071,5074,5076,5078,5081,5083],{"class":43,"line":82},[41,5068,3328],{"class":54},[41,5070,3569],{"class":58},[41,5072,5073],{"class":65}," charset",[41,5075,69],{"class":54},[41,5077,72],{"class":54},[41,5079,5080],{"class":75},"UTF-8",[41,5082,72],{"class":54},[41,5084,3384],{"class":54},[41,5086,5087,5089,5091,5094,5096,5098,5101,5103,5106,5108,5110,5113,5115],{"class":43,"line":97},[41,5088,3328],{"class":54},[41,5090,3569],{"class":58},[41,5092,5093],{"class":65}," name",[41,5095,69],{"class":54},[41,5097,72],{"class":54},[41,5099,5100],{"class":75},"viewport",[41,5102,72],{"class":54},[41,5104,5105],{"class":65}," content",[41,5107,69],{"class":54},[41,5109,72],{"class":54},[41,5111,5112],{"class":75},"width=device-width, initial-scale=1.0",[41,5114,72],{"class":54},[41,5116,3384],{"class":54},[41,5118,5119,5121,5124,5126,5129,5131,5133],{"class":43,"line":109},[41,5120,3328],{"class":54},[41,5122,5123],{"class":58},"title",[41,5125,3341],{"class":54},[41,5127,5128],{"class":133},"Product Page — Virtual Try-On",[41,5130,280],{"class":54},[41,5132,5123],{"class":58},[41,5134,106],{"class":54},[41,5136,5137,5139,5141],{"class":43,"line":130},[41,5138,280],{"class":54},[41,5140,5062],{"class":58},[41,5142,106],{"class":54},[41,5144,5145,5147,5150],{"class":43,"line":164},[41,5146,55],{"class":54},[41,5148,5149],{"class":58},"body",[41,5151,106],{"class":54},[41,5153,5154],{"class":43,"line":220},[41,5155,367],{"emptyLinePlaceholder":366},[41,5157,5158,5160,5162,5164,5166,5168,5170],{"class":43,"line":226},[41,5159,3328],{"class":54},[41,5161,10],{"class":58},[41,5163,3341],{"class":54},[41,5165,2123],{"class":133},[41,5167,280],{"class":54},[41,5169,10],{"class":58},[41,5171,106],{"class":54},[41,5173,5174,5176,5178,5180,5183,5185,5187],{"class":43,"line":250},[41,5175,3328],{"class":54},[41,5177,15],{"class":58},[41,5179,3341],{"class":54},[41,5181,5182],{"class":133},"$89.00",[41,5184,280],{"class":54},[41,5186,15],{"class":58},[41,5188,106],{"class":54},[41,5190,5191],{"class":43,"line":267},[41,5192,367],{"emptyLinePlaceholder":366},[41,5194,5195],{"class":43,"line":277},[41,5196,5197],{"class":47}," \u003C!-- Widget container -->\n",[41,5199,5200,5202,5204,5206,5208,5210,5212,5214,5216,5218,5220,5223,5225,5227,5229],{"class":43,"line":447},[41,5201,3328],{"class":54},[41,5203,819],{"class":58},[41,5205,116],{"class":65},[41,5207,69],{"class":54},[41,5209,72],{"class":54},[41,5211,841],{"class":75},[41,5213,72],{"class":54},[41,5215,2880],{"class":65},[41,5217,69],{"class":54},[41,5219,72],{"class":54},[41,5221,5222],{"class":75},"width: 100%; max-width: 600px; aspect-ratio: 3 \u002F 4;",[41,5224,72],{"class":54},[41,5226,100],{"class":54},[41,5228,819],{"class":58},[41,5230,106],{"class":54},[41,5232,5233],{"class":43,"line":459},[41,5234,367],{"emptyLinePlaceholder":366},[41,5236,5237,5239,5241,5244,5246,5248,5251,5253,5255,5257,5259,5261,5263],{"class":43,"line":470},[41,5238,3328],{"class":54},[41,5240,1018],{"class":58},[41,5242,5243],{"class":65}," onclick",[41,5245,69],{"class":54},[41,5247,72],{"class":54},[41,5249,5250],{"class":204},"openWidget",[41,5252,158],{"class":75},[41,5254,72],{"class":54},[41,5256,3341],{"class":54},[41,5258,2936],{"class":133},[41,5260,280],{"class":54},[41,5262,1018],{"class":58},[41,5264,106],{"class":54},[41,5266,5267],{"class":43,"line":509},[41,5268,367],{"emptyLinePlaceholder":366},[41,5270,5271],{"class":43,"line":515},[41,5272,5273],{"class":47}," \u003C!-- 1. Load the widget bundle -->\n",[41,5275,5276,5278],{"class":43,"line":520},[41,5277,3328],{"class":54},[41,5279,59],{"class":58},[41,5281,5282,5285,5287,5289,5291],{"class":43,"line":525},[41,5283,5284],{"class":65}," src",[41,5286,69],{"class":54},[41,5288,72],{"class":54},[41,5290,76],{"class":75},[41,5292,79],{"class":54},[41,5294,5295,5298,5300,5302,5304],{"class":43,"line":541},[41,5296,5297],{"class":65}," id",[41,5299,69],{"class":54},[41,5301,72],{"class":54},[41,5303,92],{"class":75},[41,5305,79],{"class":54},[41,5307,5308,5311,5313],{"class":43,"line":567},[41,5309,5310],{"class":54}," >\u003C\u002F",[41,5312,103],{"class":58},[41,5314,106],{"class":54},[41,5316,5317],{"class":43,"line":594},[41,5318,367],{"emptyLinePlaceholder":366},[41,5320,5321],{"class":43,"line":599},[41,5322,5323],{"class":47}," \u003C!-- 2. Initialize -->\n",[41,5325,5326,5328,5330,5332,5334,5336,5338,5340],{"class":43,"line":604},[41,5327,3328],{"class":54},[41,5329,103],{"class":58},[41,5331,116],{"class":65},[41,5333,69],{"class":54},[41,5335,72],{"class":54},[41,5337,123],{"class":75},[41,5339,72],{"class":54},[41,5341,106],{"class":54},[41,5343,5344,5346,5348,5350,5352,5354,5356,5358,5360,5362,5364],{"class":43,"line":621},[41,5345,570],{"class":133},[41,5347,137],{"class":54},[41,5349,140],{"class":133},[41,5351,69],{"class":54},[41,5353,145],{"class":133},[41,5355,137],{"class":54},[41,5357,140],{"class":133},[41,5359,152],{"class":54},[41,5361,155],{"class":65},[41,5363,158],{"class":54},[41,5365,161],{"class":54},[41,5367,5368,5371,5373,5375,5377,5379,5381,5383,5385,5387,5389,5391,5393,5395,5397,5399,5401,5403,5405,5407],{"class":43,"line":643},[41,5369,5370],{"class":58}," (",[41,5372,170],{"class":133},[41,5374,137],{"class":54},[41,5376,175],{"class":133},[41,5378,137],{"class":54},[41,5380,180],{"class":133},[41,5382,183],{"class":54},[41,5384,145],{"class":133},[41,5386,137],{"class":54},[41,5388,175],{"class":133},[41,5390,137],{"class":54},[41,5392,180],{"class":133},[41,5394,196],{"class":54},[41,5396,199],{"class":58},[41,5398,137],{"class":54},[41,5400,205],{"class":204},[41,5402,208],{"class":58},[41,5404,211],{"class":133},[41,5406,214],{"class":58},[41,5408,217],{"class":54},[41,5410,5411],{"class":43,"line":648},[41,5412,5413],{"class":54}," };\n",[41,5415,5416,5418,5420,5422,5424,5426,5428,5430,5432],{"class":43,"line":653},[41,5417,570],{"class":133},[41,5419,137],{"class":54},[41,5421,175],{"class":204},[41,5423,208],{"class":133},[41,5425,237],{"class":54},[41,5427,240],{"class":75},[41,5429,237],{"class":54},[41,5431,245],{"class":54},[41,5433,161],{"class":54},[41,5435,5436,5439,5441,5443,5445],{"class":43,"line":671},[41,5437,5438],{"class":58}," apiKey",[41,5440,30],{"class":54},[41,5442,258],{"class":54},[41,5444,1981],{"class":75},[41,5446,264],{"class":54},[41,5448,5449,5451,5453],{"class":43,"line":1039},[41,5450,2839],{"class":54},[41,5452,214],{"class":133},[41,5454,217],{"class":54},[41,5456,5458,5460,5462],{"class":43,"line":5457},32,[41,5459,3389],{"class":54},[41,5461,103],{"class":58},[41,5463,106],{"class":54},[41,5465,5467],{"class":43,"line":5466},33,[41,5468,367],{"emptyLinePlaceholder":366},[41,5470,5472,5474,5476],{"class":43,"line":5471},34,[41,5473,3328],{"class":54},[41,5475,103],{"class":58},[41,5477,106],{"class":54},[41,5479,5481,5484,5487,5489],{"class":43,"line":5480},35,[41,5482,5483],{"class":65}," function",[41,5485,5486],{"class":204}," openWidget",[41,5488,158],{"class":54},[41,5490,161],{"class":54},[41,5492,5494,5497,5499,5501,5503,5505,5507,5509,5511],{"class":43,"line":5493},36,[41,5495,5496],{"class":133}," window",[41,5498,137],{"class":54},[41,5500,175],{"class":204},[41,5502,208],{"class":58},[41,5504,237],{"class":54},[41,5506,581],{"class":75},[41,5508,237],{"class":54},[41,5510,245],{"class":54},[41,5512,161],{"class":54},[41,5514,5516,5519,5521,5523,5525,5527],{"class":43,"line":5515},37,[41,5517,5518],{"class":58}," targetElementId",[41,5520,30],{"class":54},[41,5522,258],{"class":54},[41,5524,841],{"class":75},[41,5526,237],{"class":54},[41,5528,939],{"class":54},[41,5530,5532,5535,5537,5539,5541,5543],{"class":43,"line":5531},38,[41,5533,5534],{"class":58}," model",[41,5536,30],{"class":54},[41,5538,258],{"class":54},[41,5540,399],{"class":75},[41,5542,237],{"class":54},[41,5544,939],{"class":54},[41,5546,5548,5551,5553],{"class":43,"line":5547},39,[41,5549,5550],{"class":58}," tryonItems",[41,5552,30],{"class":54},[41,5554,1360],{"class":58},[41,5556,5558],{"class":43,"line":5557},40,[41,5559,3161],{"class":54},[41,5561,5563,5565,5567,5569,5571,5573],{"class":43,"line":5562},41,[41,5564,3166],{"class":58},[41,5566,30],{"class":54},[41,5568,258],{"class":54},[41,5570,2123],{"class":75},[41,5572,237],{"class":54},[41,5574,939],{"class":54},[41,5576,5578,5580,5582,5584,5587,5589],{"class":43,"line":5577},42,[41,5579,3181],{"class":58},[41,5581,30],{"class":54},[41,5583,258],{"class":54},[41,5585,5586],{"class":75},"https:\u002F\u002Fexample.com\u002Fimages\u002Fjacket.jpg",[41,5588,237],{"class":54},[41,5590,939],{"class":54},[41,5592,5594],{"class":43,"line":5593},43,[41,5595,3196],{"class":54},[41,5597,5599,5601],{"class":43,"line":5598},44,[41,5600,3201],{"class":58},[41,5602,939],{"class":54},[41,5604,5606,5609,5611],{"class":43,"line":5605},45,[41,5607,5608],{"class":54}," }",[41,5610,214],{"class":58},[41,5612,217],{"class":54},[41,5614,5616],{"class":43,"line":5615},46,[41,5617,5618],{"class":54}," }\n",[41,5620,5622,5624,5626],{"class":43,"line":5621},47,[41,5623,3389],{"class":54},[41,5625,103],{"class":58},[41,5627,106],{"class":54},[41,5629,5631,5633,5635],{"class":43,"line":5630},48,[41,5632,280],{"class":54},[41,5634,5149],{"class":58},[41,5636,106],{"class":54},[41,5638,5640,5642,5644],{"class":43,"line":5639},49,[41,5641,280],{"class":54},[41,5643,36],{"class":58},[41,5645,106],{"class":54},[19,5647,5649],{"id":5648},"key-points","Key Points",[2173,5651,5652,5655,5664],{},[2176,5653,5654],{},"Load the bundle script first.",[2176,5656,5657,5658,5661,5662,137],{},"Initialize with ",[27,5659,5660],{},"window.fitting('init', { apiKey })"," before calling ",[27,5663,581],{},[2176,5665,2218,5666,5668],{},[27,5667,1203],{}," must match an existing element on the page.",[1043,5670,5671],{},"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":5673},[5674,5675],{"id":5017,"depth":51,"text":5018},{"id":5648,"depth":51,"text":5649},"Integrate with plain HTML\u002FJavaScript","i-lucide-file-code",{},"\u002Fen\u002Fintegrations\u002Fvanilla-js",{"title":5005,"description":5676},"en\u002Fintegrations\u002Fvanilla-js","Ts8msIFer-tIlPDRwRbkNZSpWu0JrTJP8uMKqB57tJQ",{"id":5684,"title":5685,"body":5686,"description":6531,"extension":1052,"icon":6532,"meta":6533,"navigation":366,"path":6534,"seo":6535,"stem":6536,"__hash__":6537},"content\u002Fen\u002Fintegrations\u002Fvue.md","Vue 3",{"type":7,"value":5687,"toc":6526},[5688,5692,5695,5697,5702,5881,5885,6183,6187,6523],[10,5689,5691],{"id":5690},"vue-3-integration","Vue 3 Integration",[15,5693,5694],{},"Works with Vue 3 + Vite or any Vue 3 setup.",[19,5696,22],{"id":21},[15,5698,5699,5700,30],{},"In ",[27,5701,29],{},[32,5703,5705],{"className":34,"code":5704,"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,5706,5707,5713,5725,5737,5745,5763,5787,5829,5833,5853,5865,5873],{"__ignoreMap":37},[41,5708,5709,5711],{"class":43,"line":44},[41,5710,55],{"class":54},[41,5712,59],{"class":58},[41,5714,5715,5717,5719,5721,5723],{"class":43,"line":51},[41,5716,66],{"class":65},[41,5718,69],{"class":54},[41,5720,72],{"class":54},[41,5722,76],{"class":75},[41,5724,79],{"class":54},[41,5726,5727,5729,5731,5733,5735],{"class":43,"line":62},[41,5728,85],{"class":65},[41,5730,69],{"class":54},[41,5732,72],{"class":54},[41,5734,92],{"class":75},[41,5736,79],{"class":54},[41,5738,5739,5741,5743],{"class":43,"line":82},[41,5740,100],{"class":54},[41,5742,103],{"class":58},[41,5744,106],{"class":54},[41,5746,5747,5749,5751,5753,5755,5757,5759,5761],{"class":43,"line":97},[41,5748,55],{"class":54},[41,5750,103],{"class":58},[41,5752,116],{"class":65},[41,5754,69],{"class":54},[41,5756,72],{"class":54},[41,5758,123],{"class":75},[41,5760,72],{"class":54},[41,5762,106],{"class":54},[41,5764,5765,5767,5769,5771,5773,5775,5777,5779,5781,5783,5785],{"class":43,"line":109},[41,5766,134],{"class":133},[41,5768,137],{"class":54},[41,5770,140],{"class":133},[41,5772,69],{"class":54},[41,5774,145],{"class":133},[41,5776,137],{"class":54},[41,5778,140],{"class":133},[41,5780,152],{"class":54},[41,5782,155],{"class":65},[41,5784,158],{"class":54},[41,5786,161],{"class":54},[41,5788,5789,5791,5793,5795,5797,5799,5801,5803,5805,5807,5809,5811,5813,5815,5817,5819,5821,5823,5825,5827],{"class":43,"line":130},[41,5790,167],{"class":58},[41,5792,170],{"class":133},[41,5794,137],{"class":54},[41,5796,175],{"class":133},[41,5798,137],{"class":54},[41,5800,180],{"class":133},[41,5802,183],{"class":54},[41,5804,145],{"class":133},[41,5806,137],{"class":54},[41,5808,175],{"class":133},[41,5810,137],{"class":54},[41,5812,180],{"class":133},[41,5814,196],{"class":54},[41,5816,199],{"class":58},[41,5818,137],{"class":54},[41,5820,205],{"class":204},[41,5822,208],{"class":58},[41,5824,211],{"class":133},[41,5826,214],{"class":58},[41,5828,217],{"class":54},[41,5830,5831],{"class":43,"line":164},[41,5832,223],{"class":54},[41,5834,5835,5837,5839,5841,5843,5845,5847,5849,5851],{"class":43,"line":220},[41,5836,134],{"class":133},[41,5838,137],{"class":54},[41,5840,175],{"class":204},[41,5842,208],{"class":133},[41,5844,237],{"class":54},[41,5846,240],{"class":75},[41,5848,237],{"class":54},[41,5850,245],{"class":54},[41,5852,161],{"class":54},[41,5854,5855,5857,5859,5861,5863],{"class":43,"line":226},[41,5856,253],{"class":58},[41,5858,30],{"class":54},[41,5860,258],{"class":54},[41,5862,1981],{"class":75},[41,5864,264],{"class":54},[41,5866,5867,5869,5871],{"class":43,"line":250},[41,5868,270],{"class":54},[41,5870,214],{"class":133},[41,5872,217],{"class":54},[41,5874,5875,5877,5879],{"class":43,"line":267},[41,5876,280],{"class":54},[41,5878,103],{"class":58},[41,5880,106],{"class":54},[19,5882,5884],{"id":5883},"_2-create-a-composable","2. Create a Composable",[32,5886,5888],{"className":3627,"code":5887,"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,5889,5890,5895,5906,5914,5922,5930,5934,5938,5948,5956,5984,5995,5999,6003,6011,6019,6048,6052,6056,6060,6072,6094,6116,6120,6124,6138,6156,6160,6164,6179],{"__ignoreMap":37},[41,5891,5892],{"class":43,"line":44},[41,5893,5894],{"class":47},"\u002F\u002F composables\u002FuseFittingWidget.ts\n",[41,5896,5897,5899,5902,5904],{"class":43,"line":51},[41,5898,529],{"class":528},[41,5900,5901],{"class":65}," interface",[41,5903,319],{"class":318},[41,5905,161],{"class":54},[41,5907,5908,5910,5912],{"class":43,"line":62},[41,5909,326],{"class":58},[41,5911,30],{"class":54},[41,5913,3973],{"class":318},[41,5915,5916,5918,5920],{"class":43,"line":82},[41,5917,338],{"class":58},[41,5919,30],{"class":54},[41,5921,3973],{"class":318},[41,5923,5924,5926,5928],{"class":43,"line":97},[41,5925,349],{"class":58},[41,5927,352],{"class":54},[41,5929,3973],{"class":318},[41,5931,5932],{"class":43,"line":109},[41,5933,361],{"class":54},[41,5935,5936],{"class":43,"line":130},[41,5937,367],{"emptyLinePlaceholder":366},[41,5939,5940,5942,5944,5946],{"class":43,"line":164},[41,5941,529],{"class":528},[41,5943,5901],{"class":65},[41,5945,374],{"class":318},[41,5947,161],{"class":54},[41,5949,5950,5952,5954],{"class":43,"line":220},[41,5951,381],{"class":58},[41,5953,30],{"class":54},[41,5955,3973],{"class":318},[41,5957,5958,5960,5962,5964,5966,5968,5970,5972,5974,5976,5978,5980,5982],{"class":43,"line":226},[41,5959,392],{"class":58},[41,5961,352],{"class":54},[41,5963,258],{"class":54},[41,5965,399],{"class":75},[41,5967,237],{"class":54},[41,5969,404],{"class":54},[41,5971,258],{"class":54},[41,5973,409],{"class":75},[41,5975,237],{"class":54},[41,5977,404],{"class":54},[41,5979,258],{"class":54},[41,5981,418],{"class":75},[41,5983,264],{"class":54},[41,5985,5986,5988,5990,5992],{"class":43,"line":250},[41,5987,427],{"class":58},[41,5989,30],{"class":54},[41,5991,319],{"class":318},[41,5993,5994],{"class":133},"[]\n",[41,5996,5997],{"class":43,"line":267},[41,5998,361],{"class":54},[41,6000,6001],{"class":43,"line":277},[41,6002,367],{"emptyLinePlaceholder":366},[41,6004,6005,6007,6009],{"class":43,"line":447},[41,6006,450],{"class":65},[41,6008,453],{"class":133},[41,6010,456],{"class":54},[41,6012,6013,6015,6017],{"class":43,"line":459},[41,6014,462],{"class":65},[41,6016,465],{"class":318},[41,6018,161],{"class":54},[41,6020,6021,6023,6025,6027,6029,6031,6033,6035,6037,6039,6041,6043,6045],{"class":43,"line":470},[41,6022,473],{"class":58},[41,6024,30],{"class":54},[41,6026,478],{"class":54},[41,6028,482],{"class":481},[41,6030,30],{"class":54},[41,6032,331],{"class":318},[41,6034,245],{"class":54},[41,6036,491],{"class":481},[41,6038,352],{"class":54},[41,6040,496],{"class":318},[41,6042,214],{"class":54},[41,6044,501],{"class":65},[41,6046,6047],{"class":318}," void\n",[41,6049,6050],{"class":43,"line":509},[41,6051,512],{"class":54},[41,6053,6054],{"class":43,"line":515},[41,6055,361],{"class":54},[41,6057,6058],{"class":43,"line":520},[41,6059,367],{"emptyLinePlaceholder":366},[41,6061,6062,6064,6066,6068,6070],{"class":43,"line":525},[41,6063,529],{"class":528},[41,6065,155],{"class":65},[41,6067,534],{"class":204},[41,6069,158],{"class":54},[41,6071,161],{"class":54},[41,6073,6074,6076,6078,6080,6082,6084,6086,6088,6090,6092],{"class":43,"line":541},[41,6075,544],{"class":65},[41,6077,547],{"class":133},[41,6079,183],{"class":54},[41,6081,478],{"class":54},[41,6083,554],{"class":481},[41,6085,30],{"class":54},[41,6087,374],{"class":318},[41,6089,214],{"class":54},[41,6091,501],{"class":65},[41,6093,161],{"class":54},[41,6095,6096,6098,6100,6102,6104,6106,6108,6110,6112,6114],{"class":43,"line":567},[41,6097,570],{"class":133},[41,6099,137],{"class":54},[41,6101,175],{"class":204},[41,6103,208],{"class":58},[41,6105,237],{"class":54},[41,6107,581],{"class":75},[41,6109,237],{"class":54},[41,6111,245],{"class":54},[41,6113,491],{"class":133},[41,6115,995],{"class":58},[41,6117,6118],{"class":43,"line":594},[41,6119,512],{"class":54},[41,6121,6122],{"class":43,"line":599},[41,6123,367],{"emptyLinePlaceholder":366},[41,6125,6126,6128,6130,6132,6134,6136],{"class":43,"line":604},[41,6127,544],{"class":65},[41,6129,609],{"class":133},[41,6131,183],{"class":54},[41,6133,614],{"class":54},[41,6135,501],{"class":65},[41,6137,161],{"class":54},[41,6139,6140,6142,6144,6146,6148,6150,6152,6154],{"class":43,"line":621},[41,6141,570],{"class":133},[41,6143,137],{"class":54},[41,6145,175],{"class":204},[41,6147,208],{"class":58},[41,6149,237],{"class":54},[41,6151,634],{"class":75},[41,6153,237],{"class":54},[41,6155,995],{"class":58},[41,6157,6158],{"class":43,"line":643},[41,6159,512],{"class":54},[41,6161,6162],{"class":43,"line":648},[41,6163,367],{"emptyLinePlaceholder":366},[41,6165,6166,6168,6170,6172,6174,6176],{"class":43,"line":653},[41,6167,656],{"class":528},[41,6169,659],{"class":54},[41,6171,547],{"class":133},[41,6173,245],{"class":54},[41,6175,609],{"class":133},[41,6177,6178],{"class":54}," }\n",[41,6180,6181],{"class":43,"line":671},[41,6182,361],{"class":54},[19,6184,6186],{"id":6185},"_3-create-the-widget-component","3. Create the Widget Component",[32,6188,6190],{"className":3305,"code":6189,"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,6191,6192,6196,6204,6212,6218,6230,6244,6249,6275,6283,6291,6295,6315,6341,6345,6357,6365,6373,6379,6383,6400,6404,6418,6427,6441,6455,6463,6467,6481,6495,6499,6505,6511,6515],{"__ignoreMap":37},[41,6193,6194],{"class":43,"line":44},[41,6195,3834],{"class":47},[41,6197,6198,6200,6202],{"class":43,"line":51},[41,6199,55],{"class":54},[41,6201,3321],{"class":58},[41,6203,106],{"class":54},[41,6205,6206,6208,6210],{"class":43,"line":62},[41,6207,3328],{"class":54},[41,6209,819],{"class":58},[41,6211,106],{"class":54},[41,6213,6214,6216],{"class":43,"line":82},[41,6215,816],{"class":54},[41,6217,829],{"class":58},[41,6219,6220,6222,6224,6226,6228],{"class":43,"line":97},[41,6221,3493],{"class":65},[41,6223,69],{"class":54},[41,6225,72],{"class":54},[41,6227,841],{"class":75},[41,6229,79],{"class":54},[41,6231,6232,6235,6237,6239,6242],{"class":43,"line":109},[41,6233,6234],{"class":65}," style",[41,6236,69],{"class":54},[41,6238,72],{"class":54},[41,6240,6241],{"class":75},"width: 100%; max-width: 600px; aspect-ratio: 3\u002F4",[41,6243,79],{"class":54},[41,6245,6246],{"class":43,"line":130},[41,6247,6248],{"class":54}," \u002F>\n",[41,6250,6251,6253,6255,6257,6259,6261,6263,6265,6267,6269,6271,6273],{"class":43,"line":164},[41,6252,816],{"class":54},[41,6254,1018],{"class":58},[41,6256,3889],{"class":65},[41,6258,69],{"class":54},[41,6260,72],{"class":54},[41,6262,3896],{"class":75},[41,6264,72],{"class":54},[41,6266,3341],{"class":54},[41,6268,2936],{"class":133},[41,6270,280],{"class":54},[41,6272,1018],{"class":58},[41,6274,106],{"class":54},[41,6276,6277,6279,6281],{"class":43,"line":220},[41,6278,3389],{"class":54},[41,6280,819],{"class":58},[41,6282,106],{"class":54},[41,6284,6285,6287,6289],{"class":43,"line":226},[41,6286,280],{"class":54},[41,6288,3321],{"class":58},[41,6290,106],{"class":54},[41,6292,6293],{"class":43,"line":250},[41,6294,367],{"emptyLinePlaceholder":366},[41,6296,6297,6299,6301,6303,6305,6307,6309,6311,6313],{"class":43,"line":267},[41,6298,55],{"class":54},[41,6300,103],{"class":58},[41,6302,3414],{"class":65},[41,6304,3417],{"class":65},[41,6306,69],{"class":54},[41,6308,72],{"class":54},[41,6310,3424],{"class":75},[41,6312,72],{"class":54},[41,6314,106],{"class":54},[41,6316,6317,6319,6321,6323,6325,6328,6330,6332,6334,6336,6339],{"class":43,"line":277},[41,6318,692],{"class":528},[41,6320,659],{"class":54},[41,6322,534],{"class":133},[41,6324,245],{"class":54},[41,6326,6327],{"class":528}," type",[41,6329,319],{"class":133},[41,6331,699],{"class":54},[41,6333,702],{"class":528},[41,6335,258],{"class":54},[41,6337,6338],{"class":75},"~\u002Fcomposables\u002FuseFittingWidget",[41,6340,264],{"class":54},[41,6342,6343],{"class":43,"line":447},[41,6344,367],{"emptyLinePlaceholder":366},[41,6346,6347,6349,6351,6353,6355],{"class":43,"line":459},[41,6348,3953],{"class":65},[41,6350,3956],{"class":133},[41,6352,69],{"class":54},[41,6354,3961],{"class":204},[41,6356,3964],{"class":54},[41,6358,6359,6361,6363],{"class":43,"line":470},[41,6360,326],{"class":58},[41,6362,30],{"class":54},[41,6364,3973],{"class":318},[41,6366,6367,6369,6371],{"class":43,"line":509},[41,6368,739],{"class":58},[41,6370,30],{"class":54},[41,6372,3973],{"class":318},[41,6374,6375,6377],{"class":43,"line":515},[41,6376,2933],{"class":54},[41,6378,3988],{"class":133},[41,6380,6381],{"class":43,"line":520},[41,6382,367],{"emptyLinePlaceholder":366},[41,6384,6385,6387,6389,6392,6394,6396,6398],{"class":43,"line":525},[41,6386,3953],{"class":65},[41,6388,659],{"class":54},[41,6390,6391],{"class":133}," open ",[41,6393,982],{"class":54},[41,6395,183],{"class":54},[41,6397,534],{"class":204},[41,6399,3988],{"class":133},[41,6401,6402],{"class":43,"line":541},[41,6403,367],{"emptyLinePlaceholder":366},[41,6405,6406,6408,6410,6412,6414,6416],{"class":43,"line":567},[41,6407,3953],{"class":65},[41,6409,3999],{"class":133},[41,6411,69],{"class":54},[41,6413,614],{"class":54},[41,6415,501],{"class":65},[41,6417,161],{"class":54},[41,6419,6420,6423,6425],{"class":43,"line":594},[41,6421,6422],{"class":204}," open",[41,6424,208],{"class":58},[41,6426,456],{"class":54},[41,6428,6429,6431,6433,6435,6437,6439],{"class":43,"line":599},[41,6430,4032],{"class":58},[41,6432,30],{"class":54},[41,6434,258],{"class":54},[41,6436,841],{"class":75},[41,6438,237],{"class":54},[41,6440,939],{"class":54},[41,6442,6443,6445,6447,6449,6451,6453],{"class":43,"line":604},[41,6444,4047],{"class":58},[41,6446,30],{"class":54},[41,6448,258],{"class":54},[41,6450,399],{"class":75},[41,6452,237],{"class":54},[41,6454,939],{"class":54},[41,6456,6457,6459,6461],{"class":43,"line":621},[41,6458,4062],{"class":58},[41,6460,30],{"class":54},[41,6462,1360],{"class":58},[41,6464,6465],{"class":43,"line":643},[41,6466,4071],{"class":54},[41,6468,6469,6471,6473,6475,6477,6479],{"class":43,"line":648},[41,6470,4076],{"class":58},[41,6472,30],{"class":54},[41,6474,4081],{"class":133},[41,6476,137],{"class":54},[41,6478,1277],{"class":133},[41,6480,939],{"class":54},[41,6482,6483,6485,6487,6489,6491,6493],{"class":43,"line":653},[41,6484,4092],{"class":58},[41,6486,30],{"class":54},[41,6488,4081],{"class":133},[41,6490,137],{"class":54},[41,6492,4101],{"class":133},[41,6494,939],{"class":54},[41,6496,6497],{"class":43,"line":671},[41,6498,4108],{"class":54},[41,6500,6501,6503],{"class":43,"line":1039},[41,6502,4113],{"class":58},[41,6504,939],{"class":54},[41,6506,6507,6509],{"class":43,"line":5457},[41,6508,270],{"class":54},[41,6510,995],{"class":58},[41,6512,6513],{"class":43,"line":5466},[41,6514,361],{"class":54},[41,6516,6517,6519,6521],{"class":43,"line":5471},[41,6518,280],{"class":54},[41,6520,103],{"class":58},[41,6522,106],{"class":54},[1043,6524,6525],{},"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":6527},[6528,6529,6530],{"id":21,"depth":51,"text":22},{"id":5883,"depth":51,"text":5884},{"id":6185,"depth":51,"text":6186},"Integrate with a Vue 3 application","i-lucide-venetian-mask",{},"\u002Fen\u002Fintegrations\u002Fvue",{"title":5685,"description":6531},"en\u002Fintegrations\u002Fvue","GShiJEM5AAOgyg7U0MXXp-Lqn_Y-1BooZA_uvPnVwT0",{"id":6539,"title":6540,"body":6541,"description":6950,"extension":1052,"icon":2201,"meta":6951,"navigation":366,"path":2284,"seo":6952,"stem":6953,"__hash__":6954},"content\u002Fgetting-started\u002Fquick-start.md","Быстрый старт",{"type":7,"value":6542,"toc":6941},[6543,6546,6549,6553,6560,6564,6572,6614,6618,6758,6762,6768,6794,6798,6804,6914,6918,6921,6925,6938],[10,6544,6540],{"id":6545},"быстрый-старт",[15,6547,6548],{},"Следуйте этим шагам, чтобы добавить виртуальную примерку на ваш сайт.",[19,6550,6552],{"id":6551},"_1-получите-api-ключ","1. Получите API-ключ",[15,6554,6555,6556,6559],{},"Зарегистрируйтесь на ",[1789,6557,1794],{"href":1791,"rel":6558},[1793],", чтобы получить бесплатный API-ключ.",[19,6561,6563],{"id":6562},"_2-загрузите-скрипт-виджета","2. Загрузите скрипт виджета",[15,6565,6566,6567,6569,6570,30],{},"Добавьте следующий тег ",[27,6568,1805],{}," на страницу, желательно перед закрывающим тегом ",[27,6571,1809],{},[32,6573,6574],{"className":34,"code":1813,"language":36,"meta":37,"style":37},[27,6575,6576,6582,6594,6606],{"__ignoreMap":37},[41,6577,6578,6580],{"class":43,"line":44},[41,6579,55],{"class":54},[41,6581,59],{"class":58},[41,6583,6584,6586,6588,6590,6592],{"class":43,"line":51},[41,6585,66],{"class":65},[41,6587,69],{"class":54},[41,6589,72],{"class":54},[41,6591,76],{"class":75},[41,6593,79],{"class":54},[41,6595,6596,6598,6600,6602,6604],{"class":43,"line":62},[41,6597,85],{"class":65},[41,6599,69],{"class":54},[41,6601,72],{"class":54},[41,6603,92],{"class":75},[41,6605,79],{"class":54},[41,6607,6608,6610,6612],{"class":43,"line":82},[41,6609,100],{"class":54},[41,6611,103],{"class":58},[41,6613,106],{"class":54},[19,6615,6617],{"id":6616},"_3-инициализируйте-виджет","3. Инициализируйте виджет",[32,6619,6620],{"className":34,"code":1860,"language":36,"meta":37,"style":37},[27,6621,6622,6640,6664,6706,6710,6730,6742,6750],{"__ignoreMap":37},[41,6623,6624,6626,6628,6630,6632,6634,6636,6638],{"class":43,"line":44},[41,6625,55],{"class":54},[41,6627,103],{"class":58},[41,6629,116],{"class":65},[41,6631,69],{"class":54},[41,6633,72],{"class":54},[41,6635,123],{"class":75},[41,6637,72],{"class":54},[41,6639,106],{"class":54},[41,6641,6642,6644,6646,6648,6650,6652,6654,6656,6658,6660,6662],{"class":43,"line":51},[41,6643,134],{"class":133},[41,6645,137],{"class":54},[41,6647,140],{"class":133},[41,6649,69],{"class":54},[41,6651,145],{"class":133},[41,6653,137],{"class":54},[41,6655,140],{"class":133},[41,6657,152],{"class":54},[41,6659,155],{"class":65},[41,6661,158],{"class":54},[41,6663,161],{"class":54},[41,6665,6666,6668,6670,6672,6674,6676,6678,6680,6682,6684,6686,6688,6690,6692,6694,6696,6698,6700,6702,6704],{"class":43,"line":62},[41,6667,167],{"class":58},[41,6669,170],{"class":133},[41,6671,137],{"class":54},[41,6673,175],{"class":133},[41,6675,137],{"class":54},[41,6677,180],{"class":133},[41,6679,183],{"class":54},[41,6681,145],{"class":133},[41,6683,137],{"class":54},[41,6685,175],{"class":133},[41,6687,137],{"class":54},[41,6689,180],{"class":133},[41,6691,196],{"class":54},[41,6693,199],{"class":58},[41,6695,137],{"class":54},[41,6697,205],{"class":204},[41,6699,208],{"class":58},[41,6701,211],{"class":133},[41,6703,214],{"class":58},[41,6705,217],{"class":54},[41,6707,6708],{"class":43,"line":82},[41,6709,223],{"class":54},[41,6711,6712,6714,6716,6718,6720,6722,6724,6726,6728],{"class":43,"line":97},[41,6713,134],{"class":133},[41,6715,137],{"class":54},[41,6717,175],{"class":204},[41,6719,208],{"class":133},[41,6721,237],{"class":54},[41,6723,240],{"class":75},[41,6725,237],{"class":54},[41,6727,245],{"class":54},[41,6729,161],{"class":54},[41,6731,6732,6734,6736,6738,6740],{"class":43,"line":109},[41,6733,253],{"class":58},[41,6735,30],{"class":54},[41,6737,258],{"class":54},[41,6739,1981],{"class":75},[41,6741,264],{"class":54},[41,6743,6744,6746,6748],{"class":43,"line":130},[41,6745,270],{"class":54},[41,6747,214],{"class":133},[41,6749,217],{"class":54},[41,6751,6752,6754,6756],{"class":43,"line":164},[41,6753,280],{"class":54},[41,6755,103],{"class":58},[41,6757,106],{"class":54},[19,6759,6761],{"id":6760},"_4-добавьте-контейнер","4. Добавьте контейнер",[15,6763,6764,6765,6767],{},"Разместите ",[27,6766,2009],{}," там, где должен отображаться виджет:",[32,6769,6770],{"className":34,"code":2013,"language":36,"meta":37,"style":37},[27,6771,6772],{"__ignoreMap":37},[41,6773,6774,6776,6778,6780,6782,6784,6786,6788,6790,6792],{"class":43,"line":44},[41,6775,55],{"class":54},[41,6777,819],{"class":58},[41,6779,116],{"class":65},[41,6781,69],{"class":54},[41,6783,72],{"class":54},[41,6785,841],{"class":75},[41,6787,72],{"class":54},[41,6789,100],{"class":54},[41,6791,819],{"class":58},[41,6793,106],{"class":54},[19,6795,6797],{"id":6796},"_5-запустите-виджет","5. Запустите виджет",[15,6799,6800,6801,6803],{},"Вызовите метод ",[27,6802,581],{}," при нажатии пользователем кнопки:",[32,6805,6806],{"className":1122,"code":2050,"language":1124,"meta":37,"style":37},[27,6807,6808,6828,6842,6856,6864,6868,6882,6896,6900,6906],{"__ignoreMap":37},[41,6809,6810,6812,6814,6816,6818,6820,6822,6824,6826],{"class":43,"line":44},[41,6811,170],{"class":133},[41,6813,137],{"class":54},[41,6815,175],{"class":204},[41,6817,208],{"class":133},[41,6819,237],{"class":54},[41,6821,581],{"class":75},[41,6823,237],{"class":54},[41,6825,245],{"class":54},[41,6827,161],{"class":54},[41,6829,6830,6832,6834,6836,6838,6840],{"class":43,"line":51},[41,6831,381],{"class":58},[41,6833,30],{"class":54},[41,6835,258],{"class":54},[41,6837,841],{"class":75},[41,6839,237],{"class":54},[41,6841,939],{"class":54},[41,6843,6844,6846,6848,6850,6852,6854],{"class":43,"line":62},[41,6845,392],{"class":58},[41,6847,30],{"class":54},[41,6849,258],{"class":54},[41,6851,399],{"class":75},[41,6853,237],{"class":54},[41,6855,939],{"class":54},[41,6857,6858,6860,6862],{"class":43,"line":82},[41,6859,427],{"class":58},[41,6861,30],{"class":54},[41,6863,1360],{"class":133},[41,6865,6866],{"class":43,"line":97},[41,6867,1365],{"class":54},[41,6869,6870,6872,6874,6876,6878,6880],{"class":43,"line":109},[41,6871,1370],{"class":58},[41,6873,30],{"class":54},[41,6875,258],{"class":54},[41,6877,2123],{"class":75},[41,6879,237],{"class":54},[41,6881,939],{"class":54},[41,6883,6884,6886,6888,6890,6892,6894],{"class":43,"line":130},[41,6885,1386],{"class":58},[41,6887,30],{"class":54},[41,6889,258],{"class":54},[41,6891,2138],{"class":75},[41,6893,237],{"class":54},[41,6895,939],{"class":54},[41,6897,6898],{"class":43,"line":164},[41,6899,1402],{"class":54},[41,6901,6902,6904],{"class":43,"line":220},[41,6903,1407],{"class":133},[41,6905,939],{"class":54},[41,6907,6908,6910,6912],{"class":43,"line":226},[41,6909,982],{"class":54},[41,6911,214],{"class":133},[41,6913,217],{"class":54},[19,6915,6917],{"id":6916},"результат","Результат",[15,6919,6920],{},"Теперь ваши покупатели могут загрузить фотографию и мгновенно увидеть, как на них сидит одежда.",[19,6922,6924],{"id":6923},"дальнейшие-шаги","Дальнейшие шаги",[2173,6926,6927,6933],{},[2176,6928,6929,6930,137],{},"Ознакомьтесь с руководствами для конкретных фреймворков в разделе ",[1789,6931,6932],{"href":2181},"Интеграции",[2176,6934,6935,6936,137],{},"Изучите полный ",[1789,6937,1062],{"href":1430},[1043,6939,6940],{},"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":6942},[6943,6944,6945,6946,6947,6948,6949],{"id":6551,"depth":51,"text":6552},{"id":6562,"depth":51,"text":6563},{"id":6616,"depth":51,"text":6617},{"id":6760,"depth":51,"text":6761},{"id":6796,"depth":51,"text":6797},{"id":6916,"depth":51,"text":6917},{"id":6923,"depth":51,"text":6924},"Запустите Fitting Widget за считанные минуты",{},{"title":6540,"description":6950},"getting-started\u002Fquick-start","4USnYxFPZA1hrOvVApcSHMt9oQc0aZ6Ct8ohgcj8WJ8",{"id":6956,"title":6957,"body":6958,"description":7036,"extension":1052,"icon":2292,"meta":7037,"navigation":366,"path":7038,"seo":7039,"stem":7040,"__hash__":7041},"content\u002Findex.md","Введение",{"type":7,"value":6959,"toc":7031},[6960,6964,6969,6973,7002,7006,7023,7025],[10,6961,6963],{"id":6962},"fitting-widget-виртуальная-примерка","Fitting Widget — Виртуальная примерка",[15,6965,6966,6968],{},[2220,6967,2222],{}," — это готовое решение для виртуальной примерки одежды в интернет-магазинах. Он позволяет вашим покупателям загрузить фотографию и мгновенно увидеть, как на них выглядит любой предмет одежды — прямо на странице товара.",[19,6970,6972],{"id":6971},"ключевые-возможности","Ключевые возможности",[2173,6974,6975,6984,6990,6996],{},[2176,6976,6977,6980,6981,6983],{},[2220,6978,6979],{},"Быстрая интеграция"," — Один тег ",[27,6982,1805],{}," и несколько строк кода.",[2176,6985,6986,6989],{},[2220,6987,6988],{},"Не зависит от фреймворков"," — Работает с Vanilla JS, React, Vue, Next.js, Nuxt и другими.",[2176,6991,6992,6995],{},[2220,6993,6994],{},"Настраиваемый"," — Стилизуйте виджет под ваш бренд.",[2176,6997,6998,7001],{},[2220,6999,7000],{},"Лёгкий"," — Оптимизированная загрузка, которая не замедляет магазин.",[19,7003,7005],{"id":7004},"как-это-работает","Как это работает",[2259,7007,7008,7011,7014,7020],{},[2176,7009,7010],{},"Загрузите скрипт виджета на страницу.",[2176,7012,7013],{},"Инициализируйте его с вашим API-ключом.",[2176,7015,7016,7017,7019],{},"Вызовите ",[27,7018,2272],{}," с URL-адресами изображений товаров.",[2176,7021,7022],{},"Виджет отображается внутри выбранного вами контейнера.",[19,7024,6540],{"id":6545},[15,7026,7027,7028,7030],{},"Перейдите к руководству ",[1789,7029,6540],{"href":2284},", чтобы начать работу менее чем за 5 минут.",{"title":37,"searchDepth":51,"depth":51,"links":7032},[7033,7034,7035],{"id":6971,"depth":51,"text":6972},{"id":7004,"depth":51,"text":7005},{"id":6545,"depth":51,"text":6540},"Что такое Fitting Widget и зачем его использовать?",{},"\u002F",{"title":6957,"description":7036},"index","kGT91Bb-Wx88tMoHoRu65KMhDKtcehaBgnLzJYfeCWE",{"id":7043,"title":2300,"body":7044,"description":7919,"extension":1052,"icon":3265,"meta":7920,"navigation":366,"path":7921,"seo":7922,"stem":7923,"__hash__":7924},"content\u002Fintegrations\u002Fnextjs.md",{"type":7,"value":7045,"toc":7910},[7046,7050,7058,7062,7070,7079,7315,7319,7647,7651,7887,7891,7896,7908],[10,7047,7049],{"id":7048},"интеграция-с-nextjs","Интеграция с Next.js",[15,7051,7052,7053,7055,7056,137],{},"Fitting Widget работает как с ",[2220,7054,2312],{},", так и с ",[2220,7057,2316],{},[19,7059,7061],{"id":7060},"app-router-рекомендуется","App Router (рекомендуется)",[15,7063,7064,7065,7067,7068,137],{},"Используйте компонент Next.js ",[27,7066,2326],{}," с ",[27,7069,2330],{},[1252,7071,7073,7074,7076,7077],{"id":7072},"шаг-1-загрузка-скриптов-в-layouttsx-или-pagetsx","Шаг 1 — Загрузка скриптов в ",[27,7075,2337],{}," или ",[27,7078,2341],{},[32,7080,7081],{"className":301,"code":2344,"language":303,"meta":37,"style":37},[27,7082,7083,7099,7103,7135,7141,7145,7153,7157,7163,7175,7187,7199,7203,7207,7213,7225,7237,7241,7247,7251,7255,7259,7263,7283,7287,7293,7301,7305,7311],{"__ignoreMap":37},[41,7084,7085,7087,7089,7091,7093,7095,7097],{"class":43,"line":44},[41,7086,692],{"class":528},[41,7088,2353],{"class":133},[41,7090,2356],{"class":528},[41,7092,258],{"class":54},[41,7094,2361],{"class":75},[41,7096,237],{"class":54},[41,7098,217],{"class":54},[41,7100,7101],{"class":43,"line":51},[41,7102,367],{"emptyLinePlaceholder":366},[41,7104,7105,7107,7109,7111,7113,7115,7117,7119,7121,7123,7125,7127,7129,7131,7133],{"class":43,"line":62},[41,7106,529],{"class":528},[41,7108,2376],{"class":528},[41,7110,155],{"class":65},[41,7112,2381],{"class":204},[41,7114,765],{"class":54},[41,7116,2386],{"class":481},[41,7118,776],{"class":54},[41,7120,659],{"class":54},[41,7122,2386],{"class":58},[41,7124,30],{"class":54},[41,7126,2397],{"class":318},[41,7128,137],{"class":54},[41,7130,2402],{"class":318},[41,7132,2405],{"class":54},[41,7134,161],{"class":54},[41,7136,7137,7139],{"class":43,"line":82},[41,7138,656],{"class":528},[41,7140,811],{"class":58},[41,7142,7143],{"class":43,"line":97},[41,7144,2418],{"class":54},[41,7146,7147,7149,7151],{"class":43,"line":109},[41,7148,2423],{"class":54},[41,7150,2426],{"class":133},[41,7152,361],{"class":54},[41,7154,7155],{"class":43,"line":130},[41,7156,367],{"emptyLinePlaceholder":366},[41,7158,7159,7161],{"class":43,"line":164},[41,7160,826],{"class":54},[41,7162,2439],{"class":318},[41,7164,7165,7167,7169,7171,7173],{"class":43,"line":220},[41,7166,2444],{"class":65},[41,7168,69],{"class":54},[41,7170,72],{"class":54},[41,7172,76],{"class":75},[41,7174,79],{"class":54},[41,7176,7177,7179,7181,7183,7185],{"class":43,"line":226},[41,7178,2457],{"class":65},[41,7180,69],{"class":54},[41,7182,72],{"class":54},[41,7184,2464],{"class":75},[41,7186,79],{"class":54},[41,7188,7189,7191,7193,7195,7197],{"class":43,"line":250},[41,7190,834],{"class":65},[41,7192,69],{"class":54},[41,7194,72],{"class":54},[41,7196,92],{"class":75},[41,7198,79],{"class":54},[41,7200,7201],{"class":43,"line":267},[41,7202,896],{"class":54},[41,7204,7205],{"class":43,"line":277},[41,7206,367],{"emptyLinePlaceholder":366},[41,7208,7209,7211],{"class":43,"line":447},[41,7210,826],{"class":54},[41,7212,2439],{"class":318},[41,7214,7215,7217,7219,7221,7223],{"class":43,"line":459},[41,7216,2457],{"class":65},[41,7218,69],{"class":54},[41,7220,72],{"class":54},[41,7222,2464],{"class":75},[41,7224,79],{"class":54},[41,7226,7227,7229,7231,7233,7235],{"class":43,"line":470},[41,7228,834],{"class":65},[41,7230,69],{"class":54},[41,7232,72],{"class":54},[41,7234,123],{"class":75},[41,7236,79],{"class":54},[41,7238,7239],{"class":43,"line":509},[41,7240,1005],{"class":54},[41,7242,7243,7245],{"class":43,"line":515},[41,7244,2525],{"class":54},[41,7246,2528],{"class":54},[41,7248,7249],{"class":43,"line":520},[41,7250,2533],{"class":75},[41,7252,7253],{"class":43,"line":525},[41,7254,2538],{"class":75},[41,7256,7257],{"class":43,"line":541},[41,7258,2543],{"class":75},[41,7260,7261],{"class":43,"line":567},[41,7262,2548],{"class":75},[41,7264,7265,7267,7269,7271,7273,7275,7277,7279,7281],{"class":43,"line":594},[41,7266,2553],{"class":75},[41,7268,2556],{"class":54},[41,7270,2559],{"class":133},[41,7272,137],{"class":54},[41,7274,2564],{"class":133},[41,7276,137],{"class":54},[41,7278,2569],{"class":133},[41,7280,982],{"class":54},[41,7282,264],{"class":75},[41,7284,7285],{"class":43,"line":599},[41,7286,2578],{"class":75},[41,7288,7289,7291],{"class":43,"line":604},[41,7290,2583],{"class":54},[41,7292,361],{"class":54},[41,7294,7295,7297,7299],{"class":43,"line":621},[41,7296,1015],{"class":54},[41,7298,2326],{"class":318},[41,7300,106],{"class":54},[41,7302,7303],{"class":43,"line":643},[41,7304,2598],{"class":54},[41,7306,7307,7309],{"class":43,"line":648},[41,7308,1034],{"class":58},[41,7310,217],{"class":54},[41,7312,7313],{"class":43,"line":653},[41,7314,361],{"class":54},[1252,7316,7318],{"id":7317},"шаг-2-создание-кнопки-виджета","Шаг 2 — Создание кнопки виджета",[32,7320,7322],{"className":301,"code":7321,"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,7323,7324,7334,7338,7346,7356,7366,7370,7374,7382,7390,7420,7424,7428,7432,7460,7474,7494,7508,7522,7532,7540,7544,7548,7554,7558,7610,7633,7637,7643],{"__ignoreMap":37},[41,7325,7326,7328,7330,7332],{"class":43,"line":44},[41,7327,237],{"class":54},[41,7329,2624],{"class":75},[41,7331,237],{"class":54},[41,7333,217],{"class":54},[41,7335,7336],{"class":43,"line":51},[41,7337,367],{"emptyLinePlaceholder":366},[41,7339,7340,7342,7344],{"class":43,"line":62},[41,7341,315],{"class":65},[41,7343,319],{"class":318},[41,7345,161],{"class":54},[41,7347,7348,7350,7352,7354],{"class":43,"line":82},[41,7349,326],{"class":58},[41,7351,30],{"class":54},[41,7353,331],{"class":318},[41,7355,217],{"class":54},[41,7357,7358,7360,7362,7364],{"class":43,"line":97},[41,7359,338],{"class":58},[41,7361,30],{"class":54},[41,7363,331],{"class":318},[41,7365,217],{"class":54},[41,7367,7368],{"class":43,"line":109},[41,7369,361],{"class":54},[41,7371,7372],{"class":43,"line":130},[41,7373,367],{"emptyLinePlaceholder":366},[41,7375,7376,7378,7380],{"class":43,"line":164},[41,7377,450],{"class":65},[41,7379,453],{"class":133},[41,7381,456],{"class":54},[41,7383,7384,7386,7388],{"class":43,"line":220},[41,7385,462],{"class":65},[41,7387,465],{"class":318},[41,7389,161],{"class":54},[41,7391,7392,7394,7396,7398,7400,7402,7404,7406,7408,7410,7412,7414,7416,7418],{"class":43,"line":226},[41,7393,473],{"class":58},[41,7395,30],{"class":54},[41,7397,478],{"class":54},[41,7399,482],{"class":481},[41,7401,30],{"class":54},[41,7403,331],{"class":318},[41,7405,245],{"class":54},[41,7407,491],{"class":481},[41,7409,352],{"class":54},[41,7411,496],{"class":318},[41,7413,214],{"class":54},[41,7415,501],{"class":65},[41,7417,504],{"class":318},[41,7419,217],{"class":54},[41,7421,7422],{"class":43,"line":250},[41,7423,512],{"class":54},[41,7425,7426],{"class":43,"line":267},[41,7427,361],{"class":54},[41,7429,7430],{"class":43,"line":277},[41,7431,367],{"emptyLinePlaceholder":366},[41,7433,7434,7436,7438,7440,7442,7444,7446,7448,7450,7452,7454,7456,7458],{"class":43,"line":447},[41,7435,529],{"class":528},[41,7437,155],{"class":65},[41,7439,2735],{"class":204},[41,7441,765],{"class":54},[41,7443,2740],{"class":481},[41,7445,776],{"class":54},[41,7447,659],{"class":54},[41,7449,2740],{"class":58},[41,7451,30],{"class":54},[41,7453,319],{"class":318},[41,7455,2753],{"class":133},[41,7457,2756],{"class":54},[41,7459,161],{"class":54},[41,7461,7462,7464,7466,7468,7470,7472],{"class":43,"line":459},[41,7463,544],{"class":65},[41,7465,2765],{"class":133},[41,7467,183],{"class":54},[41,7469,614],{"class":54},[41,7471,501],{"class":65},[41,7473,161],{"class":54},[41,7475,7476,7478,7480,7482,7484,7486,7488,7490,7492],{"class":43,"line":470},[41,7477,570],{"class":133},[41,7479,137],{"class":54},[41,7481,175],{"class":204},[41,7483,208],{"class":58},[41,7485,237],{"class":54},[41,7487,581],{"class":75},[41,7489,237],{"class":54},[41,7491,245],{"class":54},[41,7493,161],{"class":54},[41,7495,7496,7498,7500,7502,7504,7506],{"class":43,"line":509},[41,7497,2798],{"class":58},[41,7499,30],{"class":54},[41,7501,258],{"class":54},[41,7503,841],{"class":75},[41,7505,237],{"class":54},[41,7507,939],{"class":54},[41,7509,7510,7512,7514,7516,7518,7520],{"class":43,"line":515},[41,7511,2813],{"class":58},[41,7513,30],{"class":54},[41,7515,258],{"class":54},[41,7517,399],{"class":75},[41,7519,237],{"class":54},[41,7521,939],{"class":54},[41,7523,7524,7526,7528,7530],{"class":43,"line":520},[41,7525,2828],{"class":58},[41,7527,30],{"class":54},[41,7529,2740],{"class":133},[41,7531,939],{"class":54},[41,7533,7534,7536,7538],{"class":43,"line":525},[41,7535,2839],{"class":54},[41,7537,214],{"class":58},[41,7539,217],{"class":54},[41,7541,7542],{"class":43,"line":541},[41,7543,223],{"class":54},[41,7545,7546],{"class":43,"line":567},[41,7547,367],{"emptyLinePlaceholder":366},[41,7549,7550,7552],{"class":43,"line":594},[41,7551,656],{"class":528},[41,7553,811],{"class":58},[41,7555,7556],{"class":43,"line":599},[41,7557,2418],{"class":54},[41,7559,7560,7562,7564,7566,7568,7570,7572,7574,7576,7578,7580,7582,7584,7586,7588,7590,7592,7594,7596,7598,7600,7602,7604,7606,7608],{"class":43,"line":604},[41,7561,826],{"class":54},[41,7563,819],{"class":58},[41,7565,116],{"class":65},[41,7567,69],{"class":54},[41,7569,72],{"class":54},[41,7571,841],{"class":75},[41,7573,72],{"class":54},[41,7575,2880],{"class":65},[41,7577,851],{"class":54},[41,7579,854],{"class":58},[41,7581,30],{"class":54},[41,7583,258],{"class":54},[41,7585,861],{"class":75},[41,7587,237],{"class":54},[41,7589,245],{"class":54},[41,7591,868],{"class":58},[41,7593,30],{"class":54},[41,7595,874],{"class":873},[41,7597,245],{"class":54},[41,7599,879],{"class":58},[41,7601,30],{"class":54},[41,7603,258],{"class":54},[41,7605,886],{"class":75},[41,7607,237],{"class":54},[41,7609,2915],{"class":54},[41,7611,7612,7614,7616,7618,7620,7622,7624,7627,7629,7631],{"class":43,"line":621},[41,7613,826],{"class":54},[41,7615,1018],{"class":58},[41,7617,2924],{"class":65},[41,7619,2927],{"class":54},[41,7621,2930],{"class":133},[41,7623,2933],{"class":54},[41,7625,7626],{"class":133},"Примерка",[41,7628,280],{"class":54},[41,7630,1018],{"class":58},[41,7632,106],{"class":54},[41,7634,7635],{"class":43,"line":643},[41,7636,2598],{"class":54},[41,7638,7639,7641],{"class":43,"line":648},[41,7640,1034],{"class":58},[41,7642,217],{"class":54},[41,7644,7645],{"class":43,"line":653},[41,7646,361],{"class":54},[1252,7648,7650],{"id":7649},"шаг-3-использование-на-странице-товара","Шаг 3 — Использование на странице товара",[32,7652,7653],{"className":301,"code":2963,"language":303,"meta":37,"style":37},[27,7654,7655,7675,7679,7717,7741,7745,7751,7759,7779,7809,7815,7823,7827,7841,7855,7859,7865,7869,7877,7883],{"__ignoreMap":37},[41,7656,7657,7659,7661,7663,7665,7667,7669,7671,7673],{"class":43,"line":44},[41,7658,692],{"class":528},[41,7660,659],{"class":54},[41,7662,2735],{"class":133},[41,7664,699],{"class":54},[41,7666,702],{"class":528},[41,7668,258],{"class":54},[41,7670,2982],{"class":75},[41,7672,237],{"class":54},[41,7674,217],{"class":54},[41,7676,7677],{"class":43,"line":51},[41,7678,367],{"emptyLinePlaceholder":366},[41,7680,7681,7683,7685,7687,7689,7691,7693,7695,7697,7699,7701,7703,7705,7707,7709,7711,7713,7715],{"class":43,"line":62},[41,7682,529],{"class":528},[41,7684,2376],{"class":528},[41,7686,2999],{"class":65},[41,7688,155],{"class":65},[41,7690,3004],{"class":204},[41,7692,765],{"class":54},[41,7694,3009],{"class":481},[41,7696,776],{"class":54},[41,7698,659],{"class":54},[41,7700,3009],{"class":58},[41,7702,30],{"class":54},[41,7704,659],{"class":54},[41,7706,3022],{"class":58},[41,7708,30],{"class":54},[41,7710,331],{"class":318},[41,7712,699],{"class":54},[41,7714,2405],{"class":54},[41,7716,161],{"class":54},[41,7718,7719,7721,7723,7725,7727,7729,7731,7733,7735,7737,7739],{"class":43,"line":82},[41,7720,544],{"class":65},[41,7722,3039],{"class":133},[41,7724,183],{"class":54},[41,7726,3044],{"class":528},[41,7728,3047],{"class":204},[41,7730,208],{"class":58},[41,7732,3052],{"class":133},[41,7734,137],{"class":54},[41,7736,3057],{"class":133},[41,7738,214],{"class":58},[41,7740,217],{"class":54},[41,7742,7743],{"class":43,"line":97},[41,7744,367],{"emptyLinePlaceholder":366},[41,7746,7747,7749],{"class":43,"line":109},[41,7748,656],{"class":528},[41,7750,811],{"class":58},[41,7752,7753,7755,7757],{"class":43,"line":130},[41,7754,816],{"class":54},[41,7756,819],{"class":58},[41,7758,106],{"class":54},[41,7760,7761,7763,7765,7767,7769,7771,7773,7775,7777],{"class":43,"line":164},[41,7762,826],{"class":54},[41,7764,10],{"class":58},[41,7766,3088],{"class":54},[41,7768,3091],{"class":133},[41,7770,137],{"class":54},[41,7772,3096],{"class":133},[41,7774,3099],{"class":54},[41,7776,10],{"class":58},[41,7778,106],{"class":54},[41,7780,7781,7783,7785,7787,7789,7791,7793,7795,7797,7799,7801,7803,7805,7807],{"class":43,"line":220},[41,7782,826],{"class":54},[41,7784,3110],{"class":58},[41,7786,3113],{"class":65},[41,7788,2927],{"class":54},[41,7790,3091],{"class":133},[41,7792,137],{"class":54},[41,7794,3122],{"class":133},[41,7796,3125],{"class":54},[41,7798,3128],{"class":65},[41,7800,2927],{"class":54},[41,7802,3091],{"class":133},[41,7804,137],{"class":54},[41,7806,3096],{"class":133},[41,7808,3139],{"class":54},[41,7810,7811,7813],{"class":43,"line":226},[41,7812,826],{"class":54},[41,7814,3146],{"class":318},[41,7816,7817,7819,7821],{"class":43,"line":250},[41,7818,3151],{"class":65},[41,7820,2927],{"class":54},[41,7822,3156],{"class":133},[41,7824,7825],{"class":43,"line":267},[41,7826,3161],{"class":54},[41,7828,7829,7831,7833,7835,7837,7839],{"class":43,"line":277},[41,7830,3166],{"class":58},[41,7832,30],{"class":54},[41,7834,3039],{"class":133},[41,7836,137],{"class":54},[41,7838,3096],{"class":133},[41,7840,939],{"class":54},[41,7842,7843,7845,7847,7849,7851,7853],{"class":43,"line":447},[41,7844,3181],{"class":58},[41,7846,30],{"class":54},[41,7848,3039],{"class":133},[41,7850,137],{"class":54},[41,7852,3122],{"class":133},[41,7854,939],{"class":54},[41,7856,7857],{"class":43,"line":459},[41,7858,3196],{"class":54},[41,7860,7861,7863],{"class":43,"line":470},[41,7862,3201],{"class":133},[41,7864,361],{"class":54},[41,7866,7867],{"class":43,"line":509},[41,7868,896],{"class":54},[41,7870,7871,7873,7875],{"class":43,"line":515},[41,7872,1025],{"class":54},[41,7874,819],{"class":58},[41,7876,106],{"class":54},[41,7878,7879,7881],{"class":43,"line":520},[41,7880,1034],{"class":58},[41,7882,217],{"class":54},[41,7884,7885],{"class":43,"line":525},[41,7886,361],{"class":54},[19,7888,7890],{"id":7889},"переменная-окружения","Переменная окружения",[15,7892,7893,7894,30],{},"Добавьте ваш API-ключ в ",[27,7895,3235],{},[32,7897,7898],{"className":3238,"code":3239,"language":3240,"meta":37,"style":37},[27,7899,7900],{"__ignoreMap":37},[41,7901,7902,7904,7906],{"class":43,"line":44},[41,7903,2569],{"class":133},[41,7905,69],{"class":54},[41,7907,3251],{"class":75},[1043,7909,3254],{},{"title":37,"searchDepth":51,"depth":51,"links":7911},[7912,7918],{"id":7060,"depth":51,"text":7061,"children":7913},[7914,7916,7917],{"id":7072,"depth":62,"text":7915},"Шаг 1 — Загрузка скриптов в layout.tsx или page.tsx",{"id":7317,"depth":62,"text":7318},{"id":7649,"depth":62,"text":7650},{"id":7889,"depth":51,"text":7890},"Интеграция с Next.js (Pages Router и App Router)",{},"\u002Fintegrations\u002Fnextjs",{"title":2300,"description":7919},"integrations\u002Fnextjs","KS6JTPT1XrolEU5h4YdImeGYebYne3YB0eM4G4u-UlY",{"id":7926,"title":3273,"body":7927,"description":8740,"extension":1052,"icon":4169,"meta":8741,"navigation":366,"path":8742,"seo":8743,"stem":8744,"__hash__":8745},"content\u002Fintegrations\u002Fnuxt.md",{"type":7,"value":7928,"toc":8730},[7929,7933,7936,7940,7948,7954,8236,8242,8418,8422,8709,8711,8716,8728],[10,7930,7932],{"id":7931},"интеграция-с-nuxt","Интеграция с Nuxt",[15,7934,7935],{},"Fitting Widget легко интегрируется с Nuxt 3 и Nuxt 4.",[19,7937,7939],{"id":7938},"_1-загрузка-скрипта","1. Загрузка скрипта",[15,7941,7942,7943,7945,7946,137],{},"Используйте composable ",[27,7944,3292],{}," или добавьте скрипты в ",[27,7947,3296],{},[1252,7949,7951,7952],{"id":7950},"вариант-а-на-страницу-через-usehead","Вариант А — На страницу через ",[27,7953,3292],{},[32,7955,7956],{"className":3305,"code":3306,"language":3307,"meta":37,"style":37},[27,7957,7958,7962,7970,7978,7994,8022,8030,8038,8042,8062,8080,8084,8092,8100,8104,8118,8132,8136,8140,8154,8162,8166,8170,8174,8178,8202,8206,8212,8216,8222,8228],{"__ignoreMap":37},[41,7959,7960],{"class":43,"line":44},[41,7961,3314],{"class":47},[41,7963,7964,7966,7968],{"class":43,"line":51},[41,7965,55],{"class":54},[41,7967,3321],{"class":58},[41,7969,106],{"class":54},[41,7971,7972,7974,7976],{"class":43,"line":62},[41,7973,3328],{"class":54},[41,7975,819],{"class":58},[41,7977,106],{"class":54},[41,7979,7980,7982,7984,7986,7988,7990,7992],{"class":43,"line":82},[41,7981,816],{"class":54},[41,7983,10],{"class":58},[41,7985,3341],{"class":54},[41,7987,3344],{"class":133},[41,7989,280],{"class":54},[41,7991,10],{"class":58},[41,7993,106],{"class":54},[41,7995,7996,7998,8000,8002,8004,8006,8008,8010,8012,8014,8016,8018,8020],{"class":43,"line":97},[41,7997,816],{"class":54},[41,7999,3357],{"class":58},[41,8001,3360],{"class":65},[41,8003,69],{"class":54},[41,8005,72],{"class":54},[41,8007,3367],{"class":75},[41,8009,72],{"class":54},[41,8011,3372],{"class":65},[41,8013,69],{"class":54},[41,8015,72],{"class":54},[41,8017,3379],{"class":75},[41,8019,72],{"class":54},[41,8021,3384],{"class":54},[41,8023,8024,8026,8028],{"class":43,"line":109},[41,8025,3389],{"class":54},[41,8027,819],{"class":58},[41,8029,106],{"class":54},[41,8031,8032,8034,8036],{"class":43,"line":130},[41,8033,280],{"class":54},[41,8035,3321],{"class":58},[41,8037,106],{"class":54},[41,8039,8040],{"class":43,"line":164},[41,8041,367],{"emptyLinePlaceholder":366},[41,8043,8044,8046,8048,8050,8052,8054,8056,8058,8060],{"class":43,"line":220},[41,8045,55],{"class":54},[41,8047,103],{"class":58},[41,8049,3414],{"class":65},[41,8051,3417],{"class":65},[41,8053,69],{"class":54},[41,8055,72],{"class":54},[41,8057,3424],{"class":75},[41,8059,72],{"class":54},[41,8061,106],{"class":54},[41,8063,8064,8066,8068,8070,8072,8074,8076,8078],{"class":43,"line":226},[41,8065,692],{"class":528},[41,8067,659],{"class":54},[41,8069,3437],{"class":133},[41,8071,699],{"class":54},[41,8073,702],{"class":528},[41,8075,258],{"class":54},[41,8077,3446],{"class":75},[41,8079,264],{"class":54},[41,8081,8082],{"class":43,"line":250},[41,8083,367],{"emptyLinePlaceholder":366},[41,8085,8086,8088,8090],{"class":43,"line":267},[41,8087,3292],{"class":204},[41,8089,208],{"class":133},[41,8091,456],{"class":54},[41,8093,8094,8096,8098],{"class":43,"line":277},[41,8095,3465],{"class":58},[41,8097,30],{"class":54},[41,8099,1360],{"class":133},[41,8101,8102],{"class":43,"line":447},[41,8103,1365],{"class":54},[41,8105,8106,8108,8110,8112,8114,8116],{"class":43,"line":459},[41,8107,3478],{"class":58},[41,8109,30],{"class":54},[41,8111,258],{"class":54},[41,8113,76],{"class":75},[41,8115,237],{"class":54},[41,8117,939],{"class":54},[41,8119,8120,8122,8124,8126,8128,8130],{"class":43,"line":470},[41,8121,3493],{"class":58},[41,8123,30],{"class":54},[41,8125,258],{"class":54},[41,8127,92],{"class":75},[41,8129,237],{"class":54},[41,8131,939],{"class":54},[41,8133,8134],{"class":43,"line":509},[41,8135,1402],{"class":54},[41,8137,8138],{"class":43,"line":515},[41,8139,1365],{"class":54},[41,8141,8142,8144,8146,8148,8150,8152],{"class":43,"line":520},[41,8143,3493],{"class":58},[41,8145,30],{"class":54},[41,8147,258],{"class":54},[41,8149,123],{"class":75},[41,8151,237],{"class":54},[41,8153,939],{"class":54},[41,8155,8156,8158,8160],{"class":43,"line":525},[41,8157,3530],{"class":58},[41,8159,30],{"class":54},[41,8161,3535],{"class":54},[41,8163,8164],{"class":43,"line":541},[41,8165,3540],{"class":75},[41,8167,8168],{"class":43,"line":567},[41,8169,3545],{"class":75},[41,8171,8172],{"class":43,"line":594},[41,8173,3550],{"class":75},[41,8175,8176],{"class":43,"line":599},[41,8177,3555],{"class":75},[41,8179,8180,8182,8184,8186,8188,8190,8192,8194,8196,8198,8200],{"class":43,"line":604},[41,8181,3560],{"class":75},[41,8183,2556],{"class":54},[41,8185,692],{"class":528},[41,8187,137],{"class":54},[41,8189,3569],{"class":133},[41,8191,137],{"class":54},[41,8193,2564],{"class":133},[41,8195,137],{"class":54},[41,8197,3578],{"class":133},[41,8199,982],{"class":54},[41,8201,264],{"class":75},[41,8203,8204],{"class":43,"line":621},[41,8205,3587],{"class":75},[41,8207,8208,8210],{"class":43,"line":643},[41,8209,3592],{"class":54},[41,8211,939],{"class":54},[41,8213,8214],{"class":43,"line":648},[41,8215,1402],{"class":54},[41,8217,8218,8220],{"class":43,"line":653},[41,8219,1407],{"class":133},[41,8221,939],{"class":54},[41,8223,8224,8226],{"class":43,"line":671},[41,8225,982],{"class":54},[41,8227,995],{"class":133},[41,8229,8230,8232,8234],{"class":43,"line":1039},[41,8231,280],{"class":54},[41,8233,103],{"class":58},[41,8235,106],{"class":54},[1252,8237,8239,8240],{"id":8238},"вариант-б-глобально-в-nuxtconfigts","Вариант Б — Глобально в ",[27,8241,3296],{},[32,8243,8244],{"className":3627,"code":3628,"language":3424,"meta":37,"style":37},[27,8245,8246,8258,8266,8274,8282,8286,8300,8314,8318,8322,8336,8344,8348,8352,8356,8360,8384,8388,8394,8398,8404,8408,8412],{"__ignoreMap":37},[41,8247,8248,8250,8252,8254,8256],{"class":43,"line":44},[41,8249,529],{"class":528},[41,8251,2376],{"class":528},[41,8253,3639],{"class":204},[41,8255,208],{"class":133},[41,8257,456],{"class":54},[41,8259,8260,8262,8264],{"class":43,"line":51},[41,8261,3648],{"class":58},[41,8263,30],{"class":54},[41,8265,161],{"class":54},[41,8267,8268,8270,8272],{"class":43,"line":62},[41,8269,3657],{"class":58},[41,8271,30],{"class":54},[41,8273,161],{"class":54},[41,8275,8276,8278,8280],{"class":43,"line":82},[41,8277,3666],{"class":58},[41,8279,30],{"class":54},[41,8281,1360],{"class":133},[41,8283,8284],{"class":43,"line":97},[41,8285,3675],{"class":54},[41,8287,8288,8290,8292,8294,8296,8298],{"class":43,"line":109},[41,8289,3680],{"class":58},[41,8291,30],{"class":54},[41,8293,258],{"class":54},[41,8295,76],{"class":75},[41,8297,237],{"class":54},[41,8299,939],{"class":54},[41,8301,8302,8304,8306,8308,8310,8312],{"class":43,"line":130},[41,8303,3695],{"class":58},[41,8305,30],{"class":54},[41,8307,258],{"class":54},[41,8309,92],{"class":75},[41,8311,237],{"class":54},[41,8313,939],{"class":54},[41,8315,8316],{"class":43,"line":164},[41,8317,3710],{"class":54},[41,8319,8320],{"class":43,"line":220},[41,8321,3675],{"class":54},[41,8323,8324,8326,8328,8330,8332,8334],{"class":43,"line":226},[41,8325,3695],{"class":58},[41,8327,30],{"class":54},[41,8329,258],{"class":54},[41,8331,123],{"class":75},[41,8333,237],{"class":54},[41,8335,939],{"class":54},[41,8337,8338,8340,8342],{"class":43,"line":250},[41,8339,3733],{"class":58},[41,8341,30],{"class":54},[41,8343,3535],{"class":54},[41,8345,8346],{"class":43,"line":267},[41,8347,3742],{"class":75},[41,8349,8350],{"class":43,"line":277},[41,8351,3747],{"class":75},[41,8353,8354],{"class":43,"line":447},[41,8355,3752],{"class":75},[41,8357,8358],{"class":43,"line":459},[41,8359,3757],{"class":75},[41,8361,8362,8364,8366,8368,8370,8372,8374,8376,8378,8380,8382],{"class":43,"line":470},[41,8363,3762],{"class":75},[41,8365,2556],{"class":54},[41,8367,692],{"class":528},[41,8369,137],{"class":54},[41,8371,3569],{"class":133},[41,8373,137],{"class":54},[41,8375,2564],{"class":133},[41,8377,137],{"class":54},[41,8379,3578],{"class":133},[41,8381,982],{"class":54},[41,8383,264],{"class":75},[41,8385,8386],{"class":43,"line":509},[41,8387,3787],{"class":75},[41,8389,8390,8392],{"class":43,"line":515},[41,8391,3792],{"class":54},[41,8393,939],{"class":54},[41,8395,8396],{"class":43,"line":520},[41,8397,3710],{"class":54},[41,8399,8400,8402],{"class":43,"line":525},[41,8401,3803],{"class":133},[41,8403,939],{"class":54},[41,8405,8406],{"class":43,"line":541},[41,8407,1402],{"class":54},[41,8409,8410],{"class":43,"line":567},[41,8411,3814],{"class":54},[41,8413,8414,8416],{"class":43,"line":594},[41,8415,982],{"class":54},[41,8417,995],{"class":133},[19,8419,8421],{"id":8420},"_2-создание-компонента-обёртки","2. Создание компонента-обёртки",[32,8423,8425],{"className":3305,"code":8424,"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,8426,8427,8431,8439,8447,8475,8501,8509,8517,8521,8541,8553,8561,8569,8575,8579,8593,8613,8627,8641,8649,8653,8667,8681,8685,8691,8697,8701],{"__ignoreMap":37},[41,8428,8429],{"class":43,"line":44},[41,8430,3834],{"class":47},[41,8432,8433,8435,8437],{"class":43,"line":51},[41,8434,55],{"class":54},[41,8436,3321],{"class":58},[41,8438,106],{"class":54},[41,8440,8441,8443,8445],{"class":43,"line":62},[41,8442,3328],{"class":54},[41,8444,819],{"class":58},[41,8446,106],{"class":54},[41,8448,8449,8451,8453,8455,8457,8459,8461,8463,8465,8467,8469,8471,8473],{"class":43,"line":82},[41,8450,816],{"class":54},[41,8452,819],{"class":58},[41,8454,116],{"class":65},[41,8456,69],{"class":54},[41,8458,72],{"class":54},[41,8460,841],{"class":75},[41,8462,72],{"class":54},[41,8464,3869],{"class":65},[41,8466,69],{"class":54},[41,8468,72],{"class":54},[41,8470,3876],{"class":75},[41,8472,72],{"class":54},[41,8474,3384],{"class":54},[41,8476,8477,8479,8481,8483,8485,8487,8489,8491,8493,8495,8497,8499],{"class":43,"line":97},[41,8478,816],{"class":54},[41,8480,1018],{"class":58},[41,8482,3889],{"class":65},[41,8484,69],{"class":54},[41,8486,72],{"class":54},[41,8488,3896],{"class":75},[41,8490,72],{"class":54},[41,8492,3341],{"class":54},[41,8494,7626],{"class":133},[41,8496,280],{"class":54},[41,8498,1018],{"class":58},[41,8500,106],{"class":54},[41,8502,8503,8505,8507],{"class":43,"line":109},[41,8504,3389],{"class":54},[41,8506,819],{"class":58},[41,8508,106],{"class":54},[41,8510,8511,8513,8515],{"class":43,"line":130},[41,8512,280],{"class":54},[41,8514,3321],{"class":58},[41,8516,106],{"class":54},[41,8518,8519],{"class":43,"line":164},[41,8520,367],{"emptyLinePlaceholder":366},[41,8522,8523,8525,8527,8529,8531,8533,8535,8537,8539],{"class":43,"line":220},[41,8524,55],{"class":54},[41,8526,103],{"class":58},[41,8528,3414],{"class":65},[41,8530,3417],{"class":65},[41,8532,69],{"class":54},[41,8534,72],{"class":54},[41,8536,3424],{"class":75},[41,8538,72],{"class":54},[41,8540,106],{"class":54},[41,8542,8543,8545,8547,8549,8551],{"class":43,"line":226},[41,8544,3953],{"class":65},[41,8546,3956],{"class":133},[41,8548,69],{"class":54},[41,8550,3961],{"class":204},[41,8552,3964],{"class":54},[41,8554,8555,8557,8559],{"class":43,"line":250},[41,8556,326],{"class":58},[41,8558,30],{"class":54},[41,8560,3973],{"class":318},[41,8562,8563,8565,8567],{"class":43,"line":267},[41,8564,739],{"class":58},[41,8566,30],{"class":54},[41,8568,3973],{"class":318},[41,8570,8571,8573],{"class":43,"line":277},[41,8572,2933],{"class":54},[41,8574,3988],{"class":133},[41,8576,8577],{"class":43,"line":447},[41,8578,367],{"emptyLinePlaceholder":366},[41,8580,8581,8583,8585,8587,8589,8591],{"class":43,"line":459},[41,8582,3953],{"class":65},[41,8584,3999],{"class":133},[41,8586,69],{"class":54},[41,8588,614],{"class":54},[41,8590,501],{"class":65},[41,8592,161],{"class":54},[41,8594,8595,8597,8599,8601,8603,8605,8607,8609,8611],{"class":43,"line":470},[41,8596,134],{"class":133},[41,8598,137],{"class":54},[41,8600,175],{"class":204},[41,8602,208],{"class":58},[41,8604,237],{"class":54},[41,8606,581],{"class":75},[41,8608,237],{"class":54},[41,8610,245],{"class":54},[41,8612,161],{"class":54},[41,8614,8615,8617,8619,8621,8623,8625],{"class":43,"line":509},[41,8616,4032],{"class":58},[41,8618,30],{"class":54},[41,8620,258],{"class":54},[41,8622,841],{"class":75},[41,8624,237],{"class":54},[41,8626,939],{"class":54},[41,8628,8629,8631,8633,8635,8637,8639],{"class":43,"line":515},[41,8630,4047],{"class":58},[41,8632,30],{"class":54},[41,8634,258],{"class":54},[41,8636,399],{"class":75},[41,8638,237],{"class":54},[41,8640,939],{"class":54},[41,8642,8643,8645,8647],{"class":43,"line":520},[41,8644,4062],{"class":58},[41,8646,30],{"class":54},[41,8648,1360],{"class":58},[41,8650,8651],{"class":43,"line":525},[41,8652,4071],{"class":54},[41,8654,8655,8657,8659,8661,8663,8665],{"class":43,"line":541},[41,8656,4076],{"class":58},[41,8658,30],{"class":54},[41,8660,4081],{"class":133},[41,8662,137],{"class":54},[41,8664,1277],{"class":133},[41,8666,939],{"class":54},[41,8668,8669,8671,8673,8675,8677,8679],{"class":43,"line":567},[41,8670,4092],{"class":58},[41,8672,30],{"class":54},[41,8674,4081],{"class":133},[41,8676,137],{"class":54},[41,8678,4101],{"class":133},[41,8680,939],{"class":54},[41,8682,8683],{"class":43,"line":594},[41,8684,4108],{"class":54},[41,8686,8687,8689],{"class":43,"line":599},[41,8688,4113],{"class":58},[41,8690,939],{"class":54},[41,8692,8693,8695],{"class":43,"line":604},[41,8694,270],{"class":54},[41,8696,995],{"class":58},[41,8698,8699],{"class":43,"line":621},[41,8700,361],{"class":54},[41,8702,8703,8705,8707],{"class":43,"line":643},[41,8704,280],{"class":54},[41,8706,103],{"class":58},[41,8708,106],{"class":54},[19,8710,7890],{"id":7889},[15,8712,8713,8714,30],{},"Добавьте в ",[27,8715,4141],{},[32,8717,8718],{"className":3238,"code":4144,"language":3240,"meta":37,"style":37},[27,8719,8720],{"__ignoreMap":37},[41,8721,8722,8724,8726],{"class":43,"line":44},[41,8723,3578],{"class":133},[41,8725,69],{"class":54},[41,8727,3251],{"class":75},[1043,8729,4157],{},{"title":37,"searchDepth":51,"depth":51,"links":8731},[8732,8738,8739],{"id":7938,"depth":51,"text":7939,"children":8733},[8734,8736],{"id":7950,"depth":62,"text":8735},"Вариант А — На страницу через useHead",{"id":8238,"depth":62,"text":8737},"Вариант Б — Глобально в nuxt.config.ts",{"id":8420,"depth":51,"text":8421},{"id":7889,"depth":51,"text":7890},"Интеграция с Nuxt 3 \u002F Nuxt 4 приложением",{},"\u002Fintegrations\u002Fnuxt",{"title":3273,"description":8740},"integrations\u002Fnuxt","mSERafXf_JPUG4rn6ZlSU_qJnLNa0suHinF4LwLrASI",{"id":8747,"title":5,"body":8748,"description":9589,"extension":1052,"icon":1053,"meta":9590,"navigation":366,"path":9591,"seo":9592,"stem":9593,"__hash__":9594},"content\u002Fintegrations\u002Freact.md",{"type":7,"value":8749,"toc":9584},[8750,8754,8757,8761,8766,8950,8958,8962,9268,9272,9582],[10,8751,8753],{"id":8752},"интеграция-с-react","Интеграция с React",[15,8755,8756],{},"Работает с любым React-окружением — Vite, Create React App или своим решением.",[19,8758,8760],{"id":8759},"_1-загрузка-скрипта-виджета","1. Загрузка скрипта виджета",[15,8762,8763,8764,30],{},"Добавьте скрипт в ваш ",[27,8765,29],{},[32,8767,8769],{"className":34,"code":8768,"language":36,"meta":37,"style":37},"\u003C!-- В public\u002Findex.html или index.html (Vite) -->\n\u003Cscript\n src=\"https:\u002F\u002Fwidget.try-on.ru\u002Ffitting-widget-bundle.js\"\n id=\"fitting-widget-bundle\"\n>\u003C\u002Fscript>\n\u003Cscript id=\"fitting-init\">\n window.fitting = window.fitting || function() {\n (window.fitting.q = window.fitting.q || []).push(arguments);\n };\n window.fitting('init', {\n apiKey: '%VITE_TRY_ON_API_KEY%'\n });\n\u003C\u002Fscript>\n",[27,8770,8771,8776,8782,8794,8806,8814,8832,8856,8898,8902,8922,8934,8942],{"__ignoreMap":37},[41,8772,8773],{"class":43,"line":44},[41,8774,8775],{"class":47},"\u003C!-- В public\u002Findex.html или index.html (Vite) -->\n",[41,8777,8778,8780],{"class":43,"line":51},[41,8779,55],{"class":54},[41,8781,59],{"class":58},[41,8783,8784,8786,8788,8790,8792],{"class":43,"line":62},[41,8785,66],{"class":65},[41,8787,69],{"class":54},[41,8789,72],{"class":54},[41,8791,76],{"class":75},[41,8793,79],{"class":54},[41,8795,8796,8798,8800,8802,8804],{"class":43,"line":82},[41,8797,85],{"class":65},[41,8799,69],{"class":54},[41,8801,72],{"class":54},[41,8803,92],{"class":75},[41,8805,79],{"class":54},[41,8807,8808,8810,8812],{"class":43,"line":97},[41,8809,100],{"class":54},[41,8811,103],{"class":58},[41,8813,106],{"class":54},[41,8815,8816,8818,8820,8822,8824,8826,8828,8830],{"class":43,"line":109},[41,8817,55],{"class":54},[41,8819,103],{"class":58},[41,8821,116],{"class":65},[41,8823,69],{"class":54},[41,8825,72],{"class":54},[41,8827,123],{"class":75},[41,8829,72],{"class":54},[41,8831,106],{"class":54},[41,8833,8834,8836,8838,8840,8842,8844,8846,8848,8850,8852,8854],{"class":43,"line":130},[41,8835,134],{"class":133},[41,8837,137],{"class":54},[41,8839,140],{"class":133},[41,8841,69],{"class":54},[41,8843,145],{"class":133},[41,8845,137],{"class":54},[41,8847,140],{"class":133},[41,8849,152],{"class":54},[41,8851,155],{"class":65},[41,8853,158],{"class":54},[41,8855,161],{"class":54},[41,8857,8858,8860,8862,8864,8866,8868,8870,8872,8874,8876,8878,8880,8882,8884,8886,8888,8890,8892,8894,8896],{"class":43,"line":164},[41,8859,167],{"class":58},[41,8861,170],{"class":133},[41,8863,137],{"class":54},[41,8865,175],{"class":133},[41,8867,137],{"class":54},[41,8869,180],{"class":133},[41,8871,183],{"class":54},[41,8873,145],{"class":133},[41,8875,137],{"class":54},[41,8877,175],{"class":133},[41,8879,137],{"class":54},[41,8881,180],{"class":133},[41,8883,196],{"class":54},[41,8885,199],{"class":58},[41,8887,137],{"class":54},[41,8889,205],{"class":204},[41,8891,208],{"class":58},[41,8893,211],{"class":133},[41,8895,214],{"class":58},[41,8897,217],{"class":54},[41,8899,8900],{"class":43,"line":220},[41,8901,223],{"class":54},[41,8903,8904,8906,8908,8910,8912,8914,8916,8918,8920],{"class":43,"line":226},[41,8905,134],{"class":133},[41,8907,137],{"class":54},[41,8909,175],{"class":204},[41,8911,208],{"class":133},[41,8913,237],{"class":54},[41,8915,240],{"class":75},[41,8917,237],{"class":54},[41,8919,245],{"class":54},[41,8921,161],{"class":54},[41,8923,8924,8926,8928,8930,8932],{"class":43,"line":250},[41,8925,253],{"class":58},[41,8927,30],{"class":54},[41,8929,258],{"class":54},[41,8931,261],{"class":75},[41,8933,264],{"class":54},[41,8935,8936,8938,8940],{"class":43,"line":267},[41,8937,270],{"class":54},[41,8939,214],{"class":133},[41,8941,217],{"class":54},[41,8943,8944,8946,8948],{"class":43,"line":277},[41,8945,280],{"class":54},[41,8947,103],{"class":58},[41,8949,106],{"class":54},[286,8951,8952],{"icon":288},[15,8953,8954,8955,8957],{},"Замените ",[27,8956,261],{}," на ваш реальный ключ во время сборки, или используйте инъекцию во время выполнения.",[19,8959,8961],{"id":8960},"_2-создайте-свой-хук","2. Создайте свой хук",[32,8963,8964],{"className":301,"code":302,"language":303,"meta":37,"style":37},[27,8965,8966,8970,8978,8988,8998,9008,9012,9016,9024,9034,9064,9076,9080,9084,9092,9100,9130,9134,9138,9142,9154,9176,9200,9204,9208,9222,9242,9246,9250,9264],{"__ignoreMap":37},[41,8967,8968],{"class":43,"line":44},[41,8969,310],{"class":47},[41,8971,8972,8974,8976],{"class":43,"line":51},[41,8973,315],{"class":65},[41,8975,319],{"class":318},[41,8977,161],{"class":54},[41,8979,8980,8982,8984,8986],{"class":43,"line":62},[41,8981,326],{"class":58},[41,8983,30],{"class":54},[41,8985,331],{"class":318},[41,8987,217],{"class":54},[41,8989,8990,8992,8994,8996],{"class":43,"line":82},[41,8991,338],{"class":58},[41,8993,30],{"class":54},[41,8995,331],{"class":318},[41,8997,217],{"class":54},[41,8999,9000,9002,9004,9006],{"class":43,"line":97},[41,9001,349],{"class":58},[41,9003,352],{"class":54},[41,9005,331],{"class":318},[41,9007,217],{"class":54},[41,9009,9010],{"class":43,"line":109},[41,9011,361],{"class":54},[41,9013,9014],{"class":43,"line":130},[41,9015,367],{"emptyLinePlaceholder":366},[41,9017,9018,9020,9022],{"class":43,"line":164},[41,9019,315],{"class":65},[41,9021,374],{"class":318},[41,9023,161],{"class":54},[41,9025,9026,9028,9030,9032],{"class":43,"line":220},[41,9027,381],{"class":58},[41,9029,30],{"class":54},[41,9031,331],{"class":318},[41,9033,217],{"class":54},[41,9035,9036,9038,9040,9042,9044,9046,9048,9050,9052,9054,9056,9058,9060,9062],{"class":43,"line":226},[41,9037,392],{"class":58},[41,9039,352],{"class":54},[41,9041,258],{"class":54},[41,9043,399],{"class":75},[41,9045,237],{"class":54},[41,9047,404],{"class":54},[41,9049,258],{"class":54},[41,9051,409],{"class":75},[41,9053,237],{"class":54},[41,9055,404],{"class":54},[41,9057,258],{"class":54},[41,9059,418],{"class":75},[41,9061,237],{"class":54},[41,9063,217],{"class":54},[41,9065,9066,9068,9070,9072,9074],{"class":43,"line":250},[41,9067,427],{"class":58},[41,9069,30],{"class":54},[41,9071,319],{"class":318},[41,9073,434],{"class":133},[41,9075,217],{"class":54},[41,9077,9078],{"class":43,"line":267},[41,9079,361],{"class":54},[41,9081,9082],{"class":43,"line":277},[41,9083,367],{"emptyLinePlaceholder":366},[41,9085,9086,9088,9090],{"class":43,"line":447},[41,9087,450],{"class":65},[41,9089,453],{"class":133},[41,9091,456],{"class":54},[41,9093,9094,9096,9098],{"class":43,"line":459},[41,9095,462],{"class":65},[41,9097,465],{"class":318},[41,9099,161],{"class":54},[41,9101,9102,9104,9106,9108,9110,9112,9114,9116,9118,9120,9122,9124,9126,9128],{"class":43,"line":470},[41,9103,473],{"class":58},[41,9105,30],{"class":54},[41,9107,478],{"class":54},[41,9109,482],{"class":481},[41,9111,30],{"class":54},[41,9113,331],{"class":318},[41,9115,245],{"class":54},[41,9117,491],{"class":481},[41,9119,352],{"class":54},[41,9121,496],{"class":318},[41,9123,214],{"class":54},[41,9125,501],{"class":65},[41,9127,504],{"class":318},[41,9129,217],{"class":54},[41,9131,9132],{"class":43,"line":509},[41,9133,512],{"class":54},[41,9135,9136],{"class":43,"line":515},[41,9137,361],{"class":54},[41,9139,9140],{"class":43,"line":520},[41,9141,367],{"emptyLinePlaceholder":366},[41,9143,9144,9146,9148,9150,9152],{"class":43,"line":525},[41,9145,529],{"class":528},[41,9147,155],{"class":65},[41,9149,534],{"class":204},[41,9151,158],{"class":54},[41,9153,161],{"class":54},[41,9155,9156,9158,9160,9162,9164,9166,9168,9170,9172,9174],{"class":43,"line":541},[41,9157,544],{"class":65},[41,9159,547],{"class":133},[41,9161,183],{"class":54},[41,9163,478],{"class":54},[41,9165,554],{"class":481},[41,9167,30],{"class":54},[41,9169,374],{"class":318},[41,9171,214],{"class":54},[41,9173,501],{"class":65},[41,9175,161],{"class":54},[41,9177,9178,9180,9182,9184,9186,9188,9190,9192,9194,9196,9198],{"class":43,"line":567},[41,9179,570],{"class":133},[41,9181,137],{"class":54},[41,9183,175],{"class":204},[41,9185,208],{"class":58},[41,9187,237],{"class":54},[41,9189,581],{"class":75},[41,9191,237],{"class":54},[41,9193,245],{"class":54},[41,9195,491],{"class":133},[41,9197,214],{"class":58},[41,9199,217],{"class":54},[41,9201,9202],{"class":43,"line":594},[41,9203,223],{"class":54},[41,9205,9206],{"class":43,"line":599},[41,9207,367],{"emptyLinePlaceholder":366},[41,9209,9210,9212,9214,9216,9218,9220],{"class":43,"line":604},[41,9211,544],{"class":65},[41,9213,609],{"class":133},[41,9215,183],{"class":54},[41,9217,614],{"class":54},[41,9219,501],{"class":65},[41,9221,161],{"class":54},[41,9223,9224,9226,9228,9230,9232,9234,9236,9238,9240],{"class":43,"line":621},[41,9225,570],{"class":133},[41,9227,137],{"class":54},[41,9229,175],{"class":204},[41,9231,208],{"class":58},[41,9233,237],{"class":54},[41,9235,634],{"class":75},[41,9237,237],{"class":54},[41,9239,214],{"class":58},[41,9241,217],{"class":54},[41,9243,9244],{"class":43,"line":643},[41,9245,223],{"class":54},[41,9247,9248],{"class":43,"line":648},[41,9249,367],{"emptyLinePlaceholder":366},[41,9251,9252,9254,9256,9258,9260,9262],{"class":43,"line":653},[41,9253,656],{"class":528},[41,9255,659],{"class":54},[41,9257,547],{"class":133},[41,9259,245],{"class":54},[41,9261,609],{"class":133},[41,9263,668],{"class":54},[41,9265,9266],{"class":43,"line":671},[41,9267,361],{"class":54},[19,9269,9271],{"id":9270},"_3-использование-в-компоненте","3. Использование в компоненте",[32,9273,9275],{"className":301,"code":9274,"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,9276,9277,9281,9301,9305,9313,9323,9333,9337,9341,9365,9383,9387,9393,9401,9407,9419,9457,9461,9467,9475,9483,9497,9511,9537,9543,9547,9551,9556,9564,9572,9578],{"__ignoreMap":37},[41,9278,9279],{"class":43,"line":44},[41,9280,687],{"class":47},[41,9282,9283,9285,9287,9289,9291,9293,9295,9297,9299],{"class":43,"line":51},[41,9284,692],{"class":528},[41,9286,659],{"class":54},[41,9288,534],{"class":133},[41,9290,699],{"class":54},[41,9292,702],{"class":528},[41,9294,258],{"class":54},[41,9296,707],{"class":75},[41,9298,237],{"class":54},[41,9300,217],{"class":54},[41,9302,9303],{"class":43,"line":62},[41,9304,367],{"emptyLinePlaceholder":366},[41,9306,9307,9309,9311],{"class":43,"line":82},[41,9308,315],{"class":65},[41,9310,722],{"class":318},[41,9312,161],{"class":54},[41,9314,9315,9317,9319,9321],{"class":43,"line":97},[41,9316,326],{"class":58},[41,9318,30],{"class":54},[41,9320,331],{"class":318},[41,9322,217],{"class":54},[41,9324,9325,9327,9329,9331],{"class":43,"line":109},[41,9326,739],{"class":58},[41,9328,30],{"class":54},[41,9330,331],{"class":318},[41,9332,217],{"class":54},[41,9334,9335],{"class":43,"line":130},[41,9336,361],{"class":54},[41,9338,9339],{"class":43,"line":164},[41,9340,367],{"emptyLinePlaceholder":366},[41,9342,9343,9345,9347,9349,9351,9353,9355,9357,9359,9361,9363],{"class":43,"line":220},[41,9344,529],{"class":528},[41,9346,155],{"class":65},[41,9348,762],{"class":204},[41,9350,765],{"class":54},[41,9352,768],{"class":481},[41,9354,245],{"class":54},[41,9356,773],{"class":481},[41,9358,776],{"class":54},[41,9360,722],{"class":318},[41,9362,214],{"class":54},[41,9364,161],{"class":54},[41,9366,9367,9369,9371,9373,9375,9377,9379,9381],{"class":43,"line":226},[41,9368,544],{"class":65},[41,9370,659],{"class":54},[41,9372,547],{"class":133},[41,9374,699],{"class":54},[41,9376,183],{"class":54},[41,9378,534],{"class":204},[41,9380,158],{"class":58},[41,9382,217],{"class":54},[41,9384,9385],{"class":43,"line":250},[41,9386,367],{"emptyLinePlaceholder":366},[41,9388,9389,9391],{"class":43,"line":267},[41,9390,656],{"class":528},[41,9392,811],{"class":58},[41,9394,9395,9397,9399],{"class":43,"line":277},[41,9396,816],{"class":54},[41,9398,819],{"class":58},[41,9400,106],{"class":54},[41,9402,9403,9405],{"class":43,"line":447},[41,9404,826],{"class":54},[41,9406,829],{"class":58},[41,9408,9409,9411,9413,9415,9417],{"class":43,"line":459},[41,9410,834],{"class":65},[41,9412,69],{"class":54},[41,9414,72],{"class":54},[41,9416,841],{"class":75},[41,9418,79],{"class":54},[41,9420,9421,9423,9425,9427,9429,9431,9433,9435,9437,9439,9441,9443,9445,9447,9449,9451,9453,9455],{"class":43,"line":470},[41,9422,848],{"class":65},[41,9424,851],{"class":54},[41,9426,854],{"class":58},[41,9428,30],{"class":54},[41,9430,258],{"class":54},[41,9432,861],{"class":75},[41,9434,237],{"class":54},[41,9436,245],{"class":54},[41,9438,868],{"class":58},[41,9440,30],{"class":54},[41,9442,874],{"class":873},[41,9444,245],{"class":54},[41,9446,879],{"class":58},[41,9448,30],{"class":54},[41,9450,258],{"class":54},[41,9452,886],{"class":75},[41,9454,237],{"class":54},[41,9456,891],{"class":54},[41,9458,9459],{"class":43,"line":509},[41,9460,896],{"class":54},[41,9462,9463,9465],{"class":43,"line":515},[41,9464,826],{"class":54},[41,9466,903],{"class":58},[41,9468,9469,9471,9473],{"class":43,"line":520},[41,9470,908],{"class":65},[41,9472,911],{"class":54},[41,9474,914],{"class":65},[41,9476,9477,9479,9481],{"class":43,"line":525},[41,9478,919],{"class":204},[41,9480,208],{"class":133},[41,9482,456],{"class":54},[41,9484,9485,9487,9489,9491,9493,9495],{"class":43,"line":541},[41,9486,928],{"class":58},[41,9488,30],{"class":54},[41,9490,258],{"class":54},[41,9492,841],{"class":75},[41,9494,237],{"class":54},[41,9496,939],{"class":54},[41,9498,9499,9501,9503,9505,9507,9509],{"class":43,"line":567},[41,9500,944],{"class":58},[41,9502,30],{"class":54},[41,9504,258],{"class":54},[41,9506,399],{"class":75},[41,9508,237],{"class":54},[41,9510,939],{"class":54},[41,9512,9513,9515,9517,9519,9521,9523,9525,9527,9529,9531,9533,9535],{"class":43,"line":594},[41,9514,959],{"class":58},[41,9516,30],{"class":54},[41,9518,964],{"class":133},[41,9520,967],{"class":54},[41,9522,768],{"class":133},[41,9524,245],{"class":54},[41,9526,974],{"class":58},[41,9528,30],{"class":54},[41,9530,979],{"class":133},[41,9532,982],{"class":54},[41,9534,985],{"class":133},[41,9536,939],{"class":54},[41,9538,9539,9541],{"class":43,"line":599},[41,9540,992],{"class":54},[41,9542,995],{"class":133},[41,9544,9545],{"class":43,"line":604},[41,9546,1000],{"class":54},[41,9548,9549],{"class":43,"line":621},[41,9550,1005],{"class":54},[41,9552,9553],{"class":43,"line":643},[41,9554,9555],{"class":133}," Примерка\n",[41,9557,9558,9560,9562],{"class":43,"line":648},[41,9559,1015],{"class":54},[41,9561,1018],{"class":58},[41,9563,106],{"class":54},[41,9565,9566,9568,9570],{"class":43,"line":653},[41,9567,1025],{"class":54},[41,9569,819],{"class":58},[41,9571,106],{"class":54},[41,9573,9574,9576],{"class":43,"line":671},[41,9575,1034],{"class":58},[41,9577,217],{"class":54},[41,9579,9580],{"class":43,"line":1039},[41,9581,361],{"class":54},[1043,9583,1045],{},{"title":37,"searchDepth":51,"depth":51,"links":9585},[9586,9587,9588],{"id":8759,"depth":51,"text":8760},{"id":8960,"depth":51,"text":8961},{"id":9270,"depth":51,"text":9271},"Интеграция с React-приложением (Vite \u002F CRA)",{},"\u002Fintegrations\u002Freact",{"title":5,"description":9589},"integrations\u002Freact","F7mSDoVd1RiVLbrCGyquPOzGkvCalo0IeQdlhW6YYUs",{"id":9596,"title":5005,"body":9597,"description":10218,"extension":1052,"icon":5677,"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,5028],{"class":54},[41,9620,5031],{"class":58},[41,9622,5034],{"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,5062],{"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,5073],{"class":65},[41,9661,69],{"class":54},[41,9663,72],{"class":54},[41,9665,5080],{"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,5093],{"class":65},[41,9679,69],{"class":54},[41,9681,72],{"class":54},[41,9683,5100],{"class":75},[41,9685,72],{"class":54},[41,9687,5105],{"class":65},[41,9689,69],{"class":54},[41,9691,72],{"class":54},[41,9693,5112],{"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,5123],{"class":58},[41,9705,3341],{"class":54},[41,9707,9708],{"class":133},"Страница товара — Виртуальная примерка",[41,9710,280],{"class":54},[41,9712,5123],{"class":58},[41,9714,106],{"class":54},[41,9716,9717,9719,9721],{"class":43,"line":130},[41,9718,280],{"class":54},[41,9720,5062],{"class":58},[41,9722,106],{"class":54},[41,9724,9725,9727,9729],{"class":43,"line":164},[41,9726,55],{"class":54},[41,9728,5149],{"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,5222],{"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,5243],{"class":65},[41,9823,69],{"class":54},[41,9825,72],{"class":54},[41,9827,5250],{"class":204},[41,9829,158],{"class":75},[41,9831,72],{"class":54},[41,9833,3341],{"class":54},[41,9835,7626],{"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,5284],{"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,5297],{"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,5310],{"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,5370],{"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,5413],{"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,5438],{"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":5457},[41,10029,3389],{"class":54},[41,10031,103],{"class":58},[41,10033,106],{"class":54},[41,10035,10036],{"class":43,"line":5466},[41,10037,367],{"emptyLinePlaceholder":366},[41,10039,10040,10042,10044],{"class":43,"line":5471},[41,10041,3328],{"class":54},[41,10043,103],{"class":58},[41,10045,106],{"class":54},[41,10047,10048,10050,10052,10054],{"class":43,"line":5480},[41,10049,5483],{"class":65},[41,10051,5486],{"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":5493},[41,10059,5496],{"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":5515},[41,10079,5518],{"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":5531},[41,10093,5534],{"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":5547},[41,10107,5550],{"class":58},[41,10109,30],{"class":54},[41,10111,1360],{"class":58},[41,10113,10114],{"class":43,"line":5557},[41,10115,3161],{"class":54},[41,10117,10118,10120,10122,10124,10126,10128],{"class":43,"line":5562},[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":5577},[41,10133,3181],{"class":58},[41,10135,30],{"class":54},[41,10137,258],{"class":54},[41,10139,5586],{"class":75},[41,10141,237],{"class":54},[41,10143,939],{"class":54},[41,10145,10146],{"class":43,"line":5593},[41,10147,3196],{"class":54},[41,10149,10150,10152],{"class":43,"line":5598},[41,10151,3201],{"class":58},[41,10153,939],{"class":54},[41,10155,10156,10158,10160],{"class":43,"line":5605},[41,10157,5608],{"class":54},[41,10159,214],{"class":58},[41,10161,217],{"class":54},[41,10163,10164],{"class":43,"line":5615},[41,10165,5618],{"class":54},[41,10167,10168,10170,10172],{"class":43,"line":5621},[41,10169,3389],{"class":54},[41,10171,103],{"class":58},[41,10173,106],{"class":54},[41,10175,10176,10178,10180],{"class":43,"line":5630},[41,10177,280],{"class":54},[41,10179,5149],{"class":58},[41,10181,106],{"class":54},[41,10183,10184,10186,10188],{"class":43,"line":5639},[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,5660],{}," перед вызовом ",[27,10206,581],{},[2176,10208,10209,10211],{},[27,10210,1203],{}," должен совпадать с существующим элементом на странице.",[1043,10213,5671],{},{"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":5005,"description":10218},"integrations\u002Fvanilla-js","TOVOFdq4t72IBSUKHoJgLGlQk10I_zCs_rea9Sj9PGA",{"id":10224,"title":5685,"body":10225,"description":11055,"extension":1052,"icon":6532,"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,8760],{"id":8759},[15,10237,10238,10239,30],{},"В ",[27,10240,29],{},[32,10242,10243],{"className":34,"code":5704,"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":5887,"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,5894],{"class":47},[41,10432,10433,10435,10437,10439],{"class":43,"line":51},[41,10434,529],{"class":528},[41,10436,5901],{"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,5901],{"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,5994],{"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,6047],{"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,6178],{"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,6234],{"class":65},[41,10767,69],{"class":54},[41,10769,72],{"class":54},[41,10771,6241],{"class":75},[41,10773,79],{"class":54},[41,10775,10776],{"class":43,"line":130},[41,10777,6248],{"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,7626],{"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,6327],{"class":528},[41,10857,319],{"class":133},[41,10859,699],{"class":54},[41,10861,702],{"class":528},[41,10863,258],{"class":54},[41,10865,6338],{"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,6391],{"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,6422],{"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":5457},[41,11033,270],{"class":54},[41,11035,995],{"class":58},[41,11037,11038],{"class":43,"line":5466},[41,11039,361],{"class":54},[41,11041,11042,11044,11046],{"class":43,"line":5471},[41,11043,280],{"class":54},[41,11045,103],{"class":58},[41,11047,106],{"class":54},[1043,11049,6525],{},{"title":37,"searchDepth":51,"depth":51,"links":11051},[11052,11053,11054],{"id":8759,"depth":51,"text":8760},{"id":10421,"depth":51,"text":10422},{"id":10717,"depth":51,"text":10718},"Интеграция с Vue 3 приложением",{},"\u002Fintegrations\u002Fvue",{"title":5685,"description":11055},"integrations\u002Fvue","940Q7exH9C3y9bXr_sW6skJzNNxxGlNzOBpnASqYjFU",1779283221010]