--- title: How to Integrate IMAGIN.studio Car Images into Your Website (The Right Way) description: "Integrate IMAGIN.studio car images into HubSpot or any website. Dynamic URLs, no storage. Full mapping guide for BMW, Mini, Smart, Porsche. HubL + JS code included.\">" image: https://growthhub.io/hubfs/How_to_Integrate_IMAGIN.studio_Car_Images_into_Your_Website_The_Right_Way.jpg --- [![GrowthHub Logo](https://growthhub.io/hubfs/growthhub_hubspot_agency-logo.png)](https://growthhub.io/) - [Agents ▼](https://growthhub.io/#expertise) ### Acquisition & Activation [Activation & CRO Agents](https://growthhub.io/website-design-development) [Content Engine Agents](https://growthhub.io/hubspot-content-engine) [SEO Agents](https://growthhub.io/hubspot-seo) ### Paid & Programmatic [Google Ads Agents](https://growthhub.io/hubspot-google-ads-campaigns) [Meta Ads Agents](https://growthhub.io/hubspot-meta-campaigns) [Programmatic SEO Agents](https://growthhub.io/hubdb-dynamic-content) - [Our Clients](https://growthhub.io/#clients) - [Our Team](https://growthhub.io/#team) - [Pricing](https://growthhub.io/pricing) - [Blog](https://growthhub.io/hubspot-ai-first-blog) - [Manifesto ▼](https://growthhub.io/ai-first-agency-manifesto-for-hubspot) ### Our Approach [How It Works](https://growthhub.io/our-approach) [Our Approach](https://growthhub.io/our-approach-to-hubspot-campaigns) [The Agents-for-GTM Manifesto](https://growthhub.io/ai-first-agency-manifesto-for-hubspot) [Let's Talk](https://meetings-eu1.hubspot.com/tdalic?uuid=05e37d02-399f-42aa-9341-c0745d569437) [Agents ▼](https://growthhub.io/#expertise) ### Acquisition & Activation [Activation & CRO Agents](https://growthhub.io/website-design-development) [Content Engine Agents](https://growthhub.io/hubspot-content-engine) [SEO Agents](https://growthhub.io/hubspot-seo) ### Paid & Programmatic [Google Ads Agents](https://growthhub.io/hubspot-google-ads-campaigns) [Meta Ads Agents](https://growthhub.io/hubspot-meta-campaigns) [Programmatic SEO Agents](https://growthhub.io/hubdb-dynamic-content) [Our Clients](https://growthhub.io/#clients) [Our Team](https://growthhub.io/#team) [Pricing](https://growthhub.io/pricing) [Blog](https://growthhub.io/hubspot-ai-first-blog) [Manifesto ▼](https://growthhub.io/ai-first-agency-manifesto-for-hubspot) ### Our Approach [How It Works](https://growthhub.io/our-approach) [Our Approach](https://growthhub.io/our-approach-to-hubspot-campaigns) [The Agents-for-GTM Manifesto](https://growthhub.io/ai-first-agency-manifesto-for-hubspot) [Let's Talk](https://meetings-eu1.hubspot.com/tdalic?uuid=05e37d02-399f-42aa-9341-c0745d569437) # How to Integrate IMAGIN.studio Car Images into Your Website (The Right Way) By Tomislaw Dalic October 30, 2025 **No more 10,000+ static car photos. No more broken images. No more CDN nightmares.** Just *one dynamic URL per car* — perfect every time. After building a **370-car leasing platform** with **IMAGIN.studio**, I learned the *real* challenge isn’t the API — it’s **mapping your messy data to their strict URL format**. This is the **complete, battle-tested guide** you won’t find in the docs. --- ## What is IMAGIN.studio? **IMAGIN.studio** = **Dynamic car image CDN** You build a URL → They render a **studio-quality 3D car image** on demand. ``` https://cdn.imagin.studio/getImage ?customer=yourcompany &make=bmw &modelFamily=series-3 &modelVariant=sw &powerTrain=hybrid &angle=203 ``` No storage. No uploads. **Infinite variants.** --- ## The Real Problem: Data ≠ IMAGIN | Your Data | IMAGIN Expects | | --- | --- | | `BMW 3 Series Touring` | `make=bmw&modelFamily=series-3&modelVariant=sw` | | `Toyota Corolla Hatchback` | `make=toyota&modelFamily=corolla&modelVariant=ha` | | `Smart #1` | `make=smart&modelFamily=hashtag-1` | **99% of integrations fail here.** --- ## Master the IMAGIN URL Parameters | Param | Required | Example | Notes | | --- | --- | --- | --- | | `customer` | Yes | `mycompany` | Your API key | | `make` | Yes | `bmw`, `mercedes-benz` | Lowercase, hyphenated | | `modelFamily` | Yes | `series-3`, `corolla` | **No body style words** | | `modelRange` | No | `m3`, `cooper` | For Mini, BMW M, etc. | | `modelVariant` | No | `sa`, `sw`, `ha` | Body style code | | `powerTrain` | No | `electric`, `hybrid` | Fuel type | | `angle` | No | `203` | 01–60 (203 = front 3/4) | | `zoomLevel` | No | `1` | 1–3 (1 = full car) | **Start simple:** `customer + make + modelFamily + angle=203` Add others **only when needed**. --- ## The Body Style Code Map (Your Secret Weapon) ``` const BODY_STYLE_MAP = { // Sedans sedan: 'sa', saloon: 'sa', // Wagons 'station wagon': 'sw', estate: 'sw', touring: 'sw', avant: 'sw', combi: 'sw', // Hatchbacks hatchback: 'ha', // Coupes coupe: 'co', // Convertibles convertible: 'od', cabriolet: 'od', cabrio: 'od', // SUVs suv: 'su', crossover: 'su' }; ``` --- ## The Ultimate URL Builder (JavaScript) ``` function buildImaginUrl(car, customerId = 'yourcompany') { const base = 'https://cdn.imagin.studio/getImage'; // 1. Normalize make let make = car.brand?.toLowerCase().replace(/\s+/g, '-') || ''; // 2. Extract model family (remove body style) let modelFamily = (car.model || '').toLowerCase(); const bodyWords = /(touring|estate|avant|station wagon|combi|sedan|saloon|hatchback|coupe|cabrio|convertible|suv)/gi; modelFamily = modelFamily.replace(bodyWords, '').replace(/\s+/g, ' ').trim(); modelFamily = modelFamily.replace(/\s+/g, '-'); // 3. Brand-specific fixes let modelRange = ''; if (make === 'bmw') { modelFamily = modelFamily .replace(/(\d+)\s*serie/i, 'series-$1') .replace(/series-(\d+)/, 'series-$1'); } if (make === 'mini') { modelFamily = 'mini'; modelRange = 'cooper'; } if (make === 'smart') { modelFamily = (car.model || '').toLowerCase().replace('#', 'hashtag-').replace(/\s/g, ''); } if (make === 'porsche' && modelFamily.includes('taycan')) { if ((car.model || '').toLowerCase().includes('sport turismo')) { modelRange = 'sport-turismo'; } } // 4. Map body style let modelVariant = ''; const body = (car.body_style || '').toLowerCase(); for (const [key, code] of Object.entries(BODY_STYLE_MAP)) { if (body.includes(key)) { modelVariant = code; break; } } // 5. Map fuel let powerTrain = ''; const fuel = (car.fuel_type || '').toLowerCase(); if (fuel.includes('electric')) powerTrain = 'electric'; else if (fuel.includes('hybrid')) powerTrain = 'hybrid'; else if (fuel.includes('diesel')) powerTrain = 'diesel'; else if (fuel.includes('petrol') || fuel.includes('benzine')) powerTrain = 'petrol'; // 6. Build URL let url = `${base}?customer=${customerId}&make=${make}&modelFamily=${modelFamily}&angle=203&zoomLevel=1`; if (modelRange) url += `&modelRange=${modelRange}`; if (modelVariant) url += `&modelVariant=${modelVariant}`; if (powerTrain) url += `&powerTrain=${powerTrain}`; return url; } ``` --- ## HubL Version (HubSpot CMS) ``` ``` --- ## Brand-Specific Edge Cases | Brand | Fix | | --- | --- | | **BMW** | `2 Serie` → `series-2` | | **Mini** | `modelFamily=mini&modelRange=cooper` | | **Smart** | `#1` → `hashtag-1` | | **Porsche Taycan** | `Sport Turismo` → `modelRange=sport-turismo` | | **Toyota Corolla** | Add `modelRange=corolla` | --- ## Performance & Reliability ``` Car ``` --- ## Debug Like a Pro ``` function debug(car) { console.group(car.brand + ' ' + car.model); console.log('URL:', buildImaginUrl(car)); console.groupEnd(); } ``` --- ## Common Mistakes (Avoid These) | Mistake | Fix | | --- | --- | | `modelFamily=3-series-touring` | Remove body words | | `make=mercedes benz` | Use `mercedes-benz` | | Hardcoding `width=1200` | Use `zoomLevel=1` | | No fallback image | Add `onerror` | --- ## Final Checklist - Normalize make & model - Strip body style from `modelFamily` - Map body style → `modelVariant` - Handle brand quirks - Add lazy loading - Add fallback image - Test 10 edge cases --- ## Result? - **Zero image storage** - **Perfect consistency** - **Infinite variants** - **Lightning fast** --- **Your turn:** Drop a comment with a car from your inventory — I’ll generate the **exact IMAGIN URL** for you. **Resources:** [IMAGIN.studio Docs](https://imagin.studio/docs) • [HubL Guide](https://developers.hubspot.com/docs/cms/hubl) **Want the full code as a downloadable module?** Say *“Send module”* — I’ll package it for HubSpot Marketplace. ![Tomislaw Dalic](https://growthhub.io/hubfs/Captura%20de%20pantalla%202025-10-26%20111157.png) ### Tomislaw Dalic ## Join the Conversation Share your thoughts and connect with other readers GrowthHub [Our Approach](https://growthhub.io/hubspot-ai-first-blog/how-to-integrate-imagin.studio-car-images-into-your-website-the-right-way#approach) [Our Expertise](https://growthhub.io/hubspot-ai-first-blog/how-to-integrate-imagin.studio-car-images-into-your-website-the-right-way#expertise) [Our Clients](https://growthhub.io/hubspot-ai-first-blog/how-to-integrate-imagin.studio-car-images-into-your-website-the-right-way#clients) [Our Team](https://growthhub.io/hubspot-ai-first-blog/how-to-integrate-imagin.studio-car-images-into-your-website-the-right-way#team) Diskettenweg 14 Amsterdam, The Netherlands Cami de Cas Carreter 4 07100 Soller, Mallorca [contact@growthhub.io](mailto:contact@growthhub.io) Legal notices Privacy policy Accessibility © 2025 GrowthHub. To subscribe to our newsletter: Back to the top ```json { "@context" : "https://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "Tomislaw Dalic", "url" : "https://growthhub.io/hubspot-ai-first-blog/author/tomislaw-dalic" }, "dateModified" : "2025-10-31T00:14:06.283Z", "datePublished" : "2025-10-30T23:48:05.000Z", "headline" : "How to Integrate IMAGIN.studio Car Images into Your Website (The Right Way)", "image" : [ "https://growthhub.io/hubfs/How_to_Integrate_IMAGIN.studio_Car_Images_into_Your_Website_The_Right_Way.jpg" ], "mainEntityOfPage" : { "@id" : "https://growthhub.io/hubspot-ai-first-blog/how-to-integrate-imagin.studio-car-images-into-your-website-the-right-way", "@type" : "WebPage" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://growthhub.io/hubfs/ChatGPT%20Image%2027%20okt%202025%2c%2016_22_43.png" }, "name" : "GrowthHub" } } ```