Embed Tryona Iframe on Your Shop Page

  1. Register panel & set limits
    Sign up at Tryona, log in, go to Panel Settings & configure client limits. Tryona: Panel Settings
  2. Get API key & configure domains
    In the dashboard, open API Keys, copy your Public API Key. You can limit access to your shop domain or specific domains using Allowed Domains. Tryona: Panel Settings
  3. Add the iframe
    Place this HTML where you want the viewer:
    <iframe
      src="https://outfit.tryona.com?apiKey=[Your Public API Key]"
      width="800"
      height="600"
      frameborder="0"
      allowfullscreen>
    </iframe>
    Adjust width and height as needed.
  4. Pre-load a garment
    Append query parameters to the src URL:
    • guid=[Garment UID] uid is taken from your uploaded garments library
    • or
    • apiKey=[Public API Key] Use your public api key from API Keys section
    • imageUrl=[Image URL] Garment image url. You can limit urls in Allowed Domains section for your public key
    • url=[Product Page URL] Link to your page with garment
    • description=[Product Title] Description for your garment
    • hideIntro=1 - hide the intro instructions
    • hideSearch=1 - hide garments search
    • hideText=1 - hide all text captions, including garment description and seller caption
    • hideLinks=1 - hide link to garment page button
    <iframe
      src="https://outfit.tryona.com?apiKey=[Your Public API Key]&
            imageUrl=https%3A%2F%2Fapi.tryona.com%2Fv1%2Fgarment%2Fimage%2F01992e7f-d8d5-70bb-9fbf-906bee33a35c%3Fheight%3D1200&
            url=https%3A%2F%2Fshop.com%2Fproduct%2Fshirt&
            description=Blue%20Cotton%20Shirt&hideIntro=1"
      width="800"
      height="600"
      frameborder="0"
      allowfullscreen>
    </iframe>
  5. You can manage the added garments and view tryon statistics in the Tryona dashboard.

Tips: Use CSS for responsive sizing.