Meta tags:
description= Complete API reference for the Studio Widget, including configuration options, feature configuration, instance methods, and events.;
Headings (most frequently used words):
syntax, example, cloudinary, configuration, options, studio, widget, api, reference, documentation, index, get, started, with, install, agent, skills, installation, initialization, instance, methods, events, analytics, studiowidget, constructor, feature, show, hide, update, destroy, on, getversion, error,
Text of the page (most frequently used words):
video (260), and (246), image (206), the (173), transformations (156), sdk (142), upload (139), api (101), images (88), #cloudinary (80), widget (78), reference (74), react (68), with (64), assets (52), introduction (51), transformation (50), javascript (49), media (46), for (45), next (45), player (45), node (43), asset (40), sample (40), vue (39), start (38), angular (37), management (36), quick (35), overview (33), php (32), optimization (32), product (30), add (29), delivery (29), python (29), apis (28), your (26), flutter (26), configure (26), options (25), user (24), advanced (24), optimize (24), 2026 (23), videos (23), projects (22), get (21), 2023 (21), troubleshooting (21), crop (20), tutorials (20), account (20), effects (20), studio (19), 2024 (19), text (19), content (19), started (18), you (18), dart (18), analysis (18), sdks (17), gallery (17), android (17), ios (17), streaming (17), detection (17), google (17), tips (17), resize (17), native (16), accessibility (16), layer (16), when (15), svelte (15), net (15), ruby (15), rails (15), java (15), auto (15), audio (15), project (15), roles (15), step (15), use (14), custom (14), legacy (14), moderation (14), background (14), tagging (14), programmatic (14), ons (13), true (13), from (13), automatic (13), permissions (13), app (13), 2025 (13), builder (13), social (13), library (12), configuration (12), remove (12), example (12), syntax (12), type (12), code (12), first (12), guide (12), live (12), cropping (12), amazon (12), rekognition (12), color (12), modes (12), how (11), url (11), event (11), update (11), migration (11), jquery (11), analyze (11), cli (11), deliver (11), manage (11), search (11), onboarding (11), events (10), analytics (10), create (10), hides (10), skills (10), beta (10), visual (10), delete (10), signatures (10), conditional (10), are (9), false (9), resources (9), object (9), using (9), agent (9), references (9), may (9), october (9), release (9), notes (9), laravel (9), uploads (9), metadata (9), guides (9), this (8), see (8), button (8), description (8), call (8), load (8), config (8), postman (8), collections (8), imagga (8), specifying (8), animated (8), special (8), layers (8), gravity (8), types (8), named (8), files (8), hints (8), faq (7), products (7), try (7), additional (7), can (7), data (7), default (7), saved (7), session (7), string (7), version (7), show (7), iframe (7), public (7), latest (7), settings (7), features (7), access (7), integration (7), july (7), august (7), astro (7), kotlin (7), canvas (7), admin (7), removal (7), workflows (7), apps (7), presets (7), side (7), all (6), training (6), support (6), demos (6), error (6), cloud (6), usage (6), close (6), insert (6), studiowidget (6), methods (6), feature (6), controls (6), html (6), based (6), mobile (6), provisioning (6), creation (6), editor (6), generation (6), transcription (6), aware (6), customize (6), best (6), practices (6), console (6), list (6), uploading (6), crops (6), pdf (6), basics (6), dev (6), agents (6), documentation (5), pricing (5), page (5), name (5), more (5), available (5), required (5), instance (5), option (5), which (5), quality (5), attributes (5), environment (5), authentication (5), replace (5), changelog (5), 2022 (5), january (5), february (5), april (5), frontend (5), profiles (5), enhancement (5), extraction (5), scale (5), duplicate (5), interactive (5), profile (5), transform (5), moderate (5), client (5), adaptive (5), bitrate (5), extension (5), tools (5), find (5), credentials (5), policy (4), developers (4), retail (4), commerce (4), feedback (4), what (4), these (4), application (4), editing (4), transformed (4), callback (4), register (4), parameter (4), time (4), previous (4), creates (4), pass (4), control (4), tab (4), download (4), set (4), key (4), file (4), installation (4), run (4), install (4), mcp (4), servers (4), june (4), september (4), november (4), starter (4), kit (4), before (4), why (4), disabled (4), sign (4), policies (4), assign (4), folder (4), pdfs (4), failed (4), unsigned (4), formats (4), errors (4), recipes (4), defined (4), variables (4), arithmetic (4), condition (4), conditions (4), reshaping (4), artistic (4), enhancements (4), underlays (4), watermarking (4), transforming (4), fonts (4), placement (4), placing (4), trimming (4), resizing (4), flags (4), rollout (4), around (4), face (4), shape (4), padding (4), restore (4), fill (4), generative (4), zoompan (4), cards (4), backgrounds (4), drop (4), nuxt (4), component (4), generate (4), tag (4), pages (4), blog (3), getting (3), resource (3), non (3), dam (3), rate (3), again (3), open (3), email (3), view (3), triggered (3), method (3), visible (3), after (3), hide (3), script (3), listeners (3), destroy (3), new (3), apply (3), loads (3), ids (3), restores (3), resetstate (3), opens (3), without (3), format (3), previews (3), refiners (3), save (3), original (3), constructor (3), element (3), title (3), always (3), specific (3), check (3), setup (3), releases (3), drupal (3), netlify (3), gatsby (3), nuxtjs (3), community (3), developed (3), libraries (3), backend (3), claimable (3), webpurify (3), viesus (3), url2png (3), website (3), screenshots (3), pixelz (3), ocr (3), microsoft (3), azure (3), indexer (3), perception (3), point (3), malware (3), translation (3), vision (3), aspose (3), document (3), conversion (3), celebrity (3), facial (3), action (3), clarity (3), adaptability (3), accessible (3), buy (3), marketplace (3), review (3), picture (3), generated (3), differentiators (3), counted (3), billing (3), plans (3), webhook (3), notifications (3), eager (3), incoming (3), crud (3), post (3), processing (3), customizing (3), menu (3), glossary (3), enterprise (3), service (3), café (3), sessions (3), español (3), youtube (3), fetch (3), tutorial (3), here (3), congrats (3), ready (3), faster (3), developer (3), kickstart (3), starts (3), power (3), checks (3), privacy (2), contact (2), customers (2), about (2), our (2), details (2), was (2), rating (2), them (2), own (2), users (2), listen (2), interact (2), used (2), clicks (2), requires (2), also (2), clears (2), hideclosebutton (2), showinsertbutton (2), handler (2), getversion (2), returns (2), loaded (2), function (2), receives (2), supported (2), preserved (2), calls (2), following (2), sets (2), applied (2), merged (2), each (2), fresh (2), boolean (2), current (2), including (2), its (2), adds (2), q_auto (2), f_auto (2), enables (2), shows (2), that (2), templates (2), featureconfig (2), oauth (2), authenticate (2), mount (2), initialization (2), https (2), com (2), complete (2), learn (2), coding (2), assistant (2), copy (2), prompt (2), dec (2), feb (2), apr (2), december (2), cloudinary_url_gen (2), package (2), active (2), storage (2), attachinary (2), carrierwave (2), mixing (2), contrast (2), temporary (2), ugc (2), multi (2), channel (2), china (2), requirements (2), bot (2), traffic (2), successfully (2), rotate (2), keys (2), did (2), spike (2), migrate (2), optimizer (2), downgrade (2), plan (2), recover (2), credit (2), card (2), payments (2), existing (2), cancel (2), system (2), define (2), via (2), migrating (2), saml (2), sso (2), high (2), adult (2), nsfw (2), permitted (2), naming (2), conventions (2), avoiding (2), already (2), fetched (2), underscores (2), names (2), does (2), store (2), any (2), cookies (2), modify (2), dimensions (2), has (2), changed (2), issues (2), invalidate (2), cached (2), backups (2), provenance (2), authenticity (2), response (2), notification (2), inspector (2), semantic (2), rules (2), structured (2), contextual (2), tags (2), expressions (2), cacheable (2), urls (2), relate (2), rename (2), filemaker (2), cloud_name (2), uploaded (2), truncated (2), unsupported (2), parameters (2), square (2), requests (2), rejected (2), codec (2), duration (2), missing (2), play (2), simulated (2), poster (2), frame (2), logo (2), watermark (2), white (2), looping (2), gif (2), converting (2), posters (2), rotating (2), playback (2), transition (2), concatenation (2), concatenating (2), transcoding (2), shoppable (2), ads (2), monetization (2), hls (2), mpeg (2), dash (2), playlists (2), recommendations (2), customization (2), embed (2), blurry (2), force (2), sharing (2), links (2), facebook (2), detect (2), corrupted (2), placeholder (2), lqip (2), long (2), byte (2), ttfb (2), webpagetest (2), org (2), delivered (2), gzip (2), compression (2), archives (2), cdn (2), photoshop (2), pictures (2), remote (2), core (2), frameworks (2), dynamic (2), responsive (2), offset (2), position (2), solid (2), over (2), instagram (2), story (2), photo (2), percentage (2), horizontal (2), line (2), person (2), full (2), body (2), functions (2), models (2), focus (2), areas (2), recolor (2), cutouts (2), distortion (2), displacement (2), rotation (2), rounding (2), distorting (2), vertical (2), collage (2), layouts (2), upscaling (2), downscaling (2), shadows (2), effect (2), splice (2), trim (2), components (2), complex (2), watermarks (2), overlay (2), convert (2), overlays (2), enhance (2), abr (2), diagnosing (2), codes (2), solidjs (2), widgets (2), scripting (2), django (2), captioning (2), fallbacks (2), sanity (2), lazy (2), signature (2), interaction (2), webhooks (2), hono (2), remix (2), sveltekit (2), server (2), actions (2), drag (2), multiple (2), captions (2), programmatically (2), edits (2), secret (2), free (2), powered (2), brand (2), capabilities (2), tech (2), stack (2), platforms (2), integrations (2), easyflows (2), powerflows (2), mediaflows (2), index (2), theme (2), docs (2), 698, rights, reserved, dmca, notice, terms, education, sales, technical, trust, newsroom, careers, partners, company, profits, travel, hospitality, entertainment, solutions, programmable, unfortunately, there, been, sending, assistance, request, committed, protecting, information, security, send, want, back, should, improved, good, were, looking, thanks, submitting, got, love, hear, tell, liked, make, even, better, helpful, doc, sent, internal, they, aren, disable, connect, tracker, track, work, includes, built, handled, sends, automatically, soon, renders, while, uses, understand, improve, none, handlers, stays, both, values, registers, across, removes, cleans, don, calling, c_fill, g_auto, h_500, w_500, array, strings, publicids, supports, below, stored, successive, extends, reveal, hidden, unless, note, optional, only, discards, later, usual, saves, browser, selected, closing, discard, reopening, different, makes, registered, unsaved, changes, label, skips, confirmation, closes, ignoreunsavedchanges, manual, mode, startwithmanualcrop, copying, advancedcodesnippet, allows, change, preview, canchangepreviewimage, canuserefiners, showintercomfeedbackbutton, triggers, welcome, modal, hidewelcomemodal, chat, hideaichattab, lists, hidetemplatestab, hidedeliverytab, provides, template, hidesavetemplatebutton, lets, overwrite, depend, hidesaveassetbutton, hidedownloadassetbutton, enabled, styles, iframeattr, token, instead, oauthtoken, loading, apikey, dom, selector, container, htmlelement, appendto, cloudname, isn, displayed, until, once, window, path, most, recent, number, versions, include, out, implementation, steps, cases, embedding, web, last, updated, nov, repo, github, give, class, context, working, paste, one, into, installs, configures, validates, markdown, llm, discover, exploring, further, llms, txt, device, dark, light, ask, toggle, navigation, now, important, plus, keep,
Text of the page (random words):
inspector analyze api beta moderate assets webhook notifications advanced asset management signatures authentication signatures notification signatures delivery url signatures response signatures provenance and authenticity backups and version management invalidate cached assets add ons troubleshooting and tips admin api authentication issues why has the public id of my asset changed asset id vs public id check resource type and delivery type get image or video dimensions download account assets delete or modify original images does cloudinary store any cookies underscores in public ids or folder names update already fetched asset upload manage and deliver pdfs cloudinary sample images avoiding duplicate uploads permitted naming conventions adult nsfw content policy high transformation rate account management account settings folder modes product environment settings user provisioning saml sso billing and plans roles and permissions migrating to roles and permissions legacy permissions manage assign roles in the console roles and permissions via api manage roles assign roles define custom policies system roles and policies list usage data how are transformations counted troubleshooting and tips cancel or delete cloudinary account sign up or add user with existing email credit card payments recover disabled account can t downgrade my plan migrate media optimizer account why did my usage spike rotate api keys in the console successfully go live with cloudinary bot traffic and access control china delivery requirements retail and e commerce best practices visual differentiators customize and optimize assets workflows product asset workflows non product asset workflows multi channel content delivery user generated content overview upload manage and analyze transform and customize optimize and deliver profile picture sample project video review sample project marketplace products sample project try before you buy sample project delete temporary ugc assets accessible media overview image accessibility video and audio accessibility image and video adaptability visual and audio clarity color accessibility text contrast and color audio controls and mixing interactive content and controls ai in action native mobile add ons advanced facial attributes detection amazon rekognition ai moderation amazon rekognition video moderation amazon rekognition auto tagging amazon rekognition celebrity detection aspose document conversion cloudinary ai background removal cloudinary ai content analysis overview object aware cropping automatic image tagging image analysis cloudinary ai vision cloudinary duplicate image detection cloudinary image generation google ai video moderation google ai video transcription google auto tagging google automatic video tagging google translation image to video image to video api reference imagga auto tagging imagga crop and scale perception point malware detection microsoft azure video indexer ocr text detection and extraction pixelz remove the background url2png website screenshots viesus automatic image enhancement webpurify image moderation references transformation url api upload api admin api cloudinary cli image apis analyze api beta image generation api video apis ai video analysis api beta image to video api live streaming api player profiles api video canvas api video config api video player api widget apis media editor api media library widget api product gallery api studio widget api upload widget api account management apis agent account creation api claimable cloud api permissions api provisioning api sdk references angular sdk reference dart sdk reference flutter sdk reference go sdk reference javascript sdk reference php sdk reference react sdk reference transformation builder reference vue js sdk reference postman collections sdks backend sdks node js sdk node js introduction node js quick start node js image and video upload node js image transformations node js video transformations node js asset management node js sample projects node js video tutorials python sdk python introduction python quick start python image and video upload python image transformations python video transformations python asset management python sample projects python video tutorials php sdk php introduction php quick start php image and video upload php image transformations php video transformations php asset management php sample projects php video tutorials php management reference php transformation reference java sdk java introduction java quick start java image and video upload java image transformations java video transformations java asset management ruby rails sdk ruby rails introduction ruby rails quick start ruby rails image and video upload ruby rails image transformations ruby rails video transformations ruby rails asset management carrierwave integration attachinary integration active storage integration net sdk net introduction net quick start net image and video upload net image transformations net video transformations net asset management go sdk go introduction go quick start go image and video upload go media transformations go asset management go sample projects go video tutorials go sdk reference dart sdk dart introduction dart quick start dart image and video upload dart media transformations dart sdk reference frontend sdks react sdk react introduction react starter kit react quick start react image and video upload react image transformations react video transformations react sample projects react video tutorials react sdk reference transformation builder reference vue js sdk vue js introduction vue js quick start vue js image and video upload vue js image transformations vue js video transformations vue js sample projects vue js video tutorials vue js sdk reference transformation builder reference angular sdk angular introduction angular quick start angular image and video upload angular image transformations angular video transformations angular sample projects angular video tutorials angular sdk reference transformation builder reference javascript sdk javascript introduction javascript quick start javascript image and video upload javascript image transformations javascript video transformations javascript sample projects javascript video tutorials javascript sdk reference transformation builder reference next js sdk next js introduction next js starter kit next js quick start next js image and video upload next js image transformations next js video transformations next js sample projects next js video tutorials jquery sdk jquery introduction jquery image and video upload jquery image transformations jquery video transformations react sdk legacy react introduction react image and video upload react image transformations react video transformations react migration guide vue js sdk legacy vue js introduction vue js image and video upload vue js image transformations vue js video transformations vue js migration guide angular sdk legacy angular introduction angular image and video upload angular image transformations angular video transformations angular migration guide javascript sdk legacy javascript introduction javascript image and video upload javascript image transformations javascript video transformations javascript migration guide mobile sdks ios sdk ios introduction ios quick start ios image and video upload ios image transformations ios video transformations ios video player ios sample projects android sdk android introduction android quick start android image and video upload android image transformations android video transformations android video player android sample projects flutter sdk flutter introduction flutter quick start flutter image and video upload flutter media transformations flutter video player flutter video tutorials dart based cloudinary_url_gen package reference flutter sdk reference react native sdk react native introduction react native image and video upload react native image transformations react native video transformations react native video player kotlin sdk kotlin introduction kotlin media transformations community developed libraries astro laravel nuxtjs svelte gatsby netlify drupal release notes latest october 31 2026 august 31 2026 july 9 2026 previous releases may 28 2026 april 7 2026 february 28 2026 january 30 2026 2025 december 18 2025 october 31 2025 september 3 2025 july 09 2025 may 27 2025 2024 november 29 2024 october 9 2024 august 12 2024 june 27 2024 may 31 2024 april 16 2024 february 28 2024 january 03 2024 2023 november 13 2023 october 26 2023 september 21 2023 august 15 2023 july 13 2023 june 19 2023 may 16 2023 apr 04 2023 feb 21 2023 2022 dec 27 2022 image video apis references widget apis studio widget api studio widget api reference copy for llm download markdown get started get started with cloudinary paste one prompt into your ai coding assistant and it sets up cloudinary for you installs the sdk configures skills and mcp servers and validates your setup copy prompt learn more agent skills install cloudinary agent skills cloudinary agent skills give your ai coding assistant first class context for working with cloudinary run to install or update the skills view the skills repo on github learn about cloudinary skills last updated nov 04 2026 the studio widget api reference details the options methods and events that you can use when embedding the studio widget in your web application see also for integration steps and use cases see the studio widget guide check out the studio widget sample app to see a complete implementation in javascript on this page installation initialization configuration options instance methods events analytics installation to use the studio widget include the studio widget javascript file in your html the latest path always loads the most recent version of the widget to load a specific version replace latest with the version number for example https studio widget cloudinary com 1 0 15 all js see the changelog for the available versions once loaded the widget is available as window cloudinary studiowidget initialization studiowidget creates a studio widget instance and returns it the widget isn t displayed until you call show syntax cloudinary studiowidget options parameter type description options object required the constructor options including the cloud name authentication mount element and feature configuration example configuration options constructor options pass these options to cloudinary studiowidget option type description cloudname string required the cloud name of the product environment to access appendto string or htmlelement required a dom selector for example my container or the html element to mount the widget iframe in apikey string the api key of the product environment used to authenticate when loading the widget oauthtoken string an oauth access token to authenticate with instead of an api key see using oauth to access cloudinary apis iframeattr object additional attributes to set on the iframe element for example id title or custom styles merged with the default attributes featureconfig object controls which features are visible or enabled in the widget see feature configuration feature configuration pass these options in the featureconfig object of the constructor all options are boolean option default description hidedownloadassetbutton true hides the download asset button hidesaveassetbutton true hides the save asset button which lets the user save the transformed image as a new asset or overwrite the original the options available depend on the user s permissions hidesavetemplatebutton true hides the save template button hideclosebutton false hides the widget s close x button use this when your application provides its own close control hidedeliverytab true hides the get code tab hidetemplatestab true hides the templates tab which lists saved studio templates that the user can apply to the image hideaichattab true hides the ai chat tab hidewelcomemodal true hides the welcome modal when the widget first loads showinsertbutton true shows the insert button which triggers the insert event your application receives the delivery url of the transformed image in the event callback showintercomfeedbackbutton false shows the feedback button canuserefiners false enables refiners canchangepreviewimage false allows the user to change the preview image advancedcodesnippet false enables copying code and sdk code previews in the get code tab startwithmanualcrop false opens the widget in manual crop mode f_auto false adds f_auto automatic format to the delivery url q_auto false adds q_auto automatic quality to the delivery url ignoreunsavedchanges true hides the unsaved changes label and skips the confirmation when the user closes the widget instance methods after you create the widget with studiowidget use the following methods to control and interact with it show creates the widget iframe with the latest configuration and makes it visible each call creates a fresh iframe and registered event listeners are preserved the widget saves the user s editing session in the browser including applied transformations and selected assets and restores it the next time it opens closing the widget with its close button clears the saved session pass resetstate true to discard the saved session for example when reopening the widget for a different asset syntax widget show options parameter type description options object optional settings for this call only supported option resetstate boolean when true the widget opens with the current update configuration and discards the saved editing session a later show without the option restores the saved session as usual example hide hides the widget iframe note you can t reveal a hidden widget to open it again call show which creates a fresh iframe with the latest configuration and restores the user s saved editing session unless you pass resetstate true syntax widget hide example update sets the images and transformation for the widget to load the configuration is stored and applied the next time you call show successive calls are merged so each call extends the previous configuration syntax widget update config parameter type description config object required the configuration to apply see the options below the config object supports the following options option type description publicids array of strings the public ids of the images to load in the widget transformation string a transformation to apply when the widget loads in transformation url syntax for example c_fill g_auto h_500 w_500 example destroy removes the widget iframe and all event listeners and cleans up resources don t use the widget instance after calling destroy to open the widget again create a new instance with studiowidget syntax widget destroy example on registers a handler for a widget event listeners are preserved across show calls syntax widget on event callback parameter type descripti...
|
