top of page

This documentation is meant for no code tools, for a more detailed documentation please visit to Unicorn Studio Docs.

Framer Component

  1. Copy this component link: https://framer.com/m/UnicornStudioEmbed-wWy9.js

2. ​Paste into your Framer project

3. Paste your scene's Project ID into the first field

4. Done!

Quick tips

  • You scene won't render in edit mode, preview or publish to see it action.

  • If your scene isn't updating, it could be the Framer cache. See more below.

  • If you have the UNICORN STUDIO Legend plan, you can paste your exported code into "Project JSON". This will make it load faster.

  • If you need to update your library version, right click the component and select "Unlink". You can see the library link inside the code. Update the version in the link to match the latest version.

Webflow

  1. In Site Settings > Custom Code, add to footer:

<script type="text/javascript">!function(){if(!window.UnicornStudio){window.UnicornStudio={isInitialized:!1};var i=document.createElement("script");i.src="https://cdn.jsdelivr.net/gh/hiunicornstudio/unicornstudio.js@v1.4.25/dist/unicornStudio.umd.js",i.onload=function(){window.UnicornStudio.isInitialized||(UnicornStudio.init(),window.UnicornStudio.isInitialized=!0)},(document.head || document.body).appendChild(i)}}();</script>

2. ​Choose the element you want to embed your scene in and click on the "settings" tab.

3. Add a new "Custom Attribute". For name put data-us-project and for value add your project ID.

4. You may add additional attributes to customize your scene using the settings defined below.

Quick tips

  • The container div you add data-us-project to must have a defined width and height.

  • You can also use the data-us-project-src attribute to point to a hosted project JSON file. This will make it load faster.

  • Rename your code JSON to [your-file-name].json.txt

  • Upload it to your assets library

  • Use the menu to copy link and paste it as the value for data-us-project-src

Wix Studio

  1. In Site EDITOR > ADD A CUSTOM ELEMENT TO A SECTION, PASTE THIS IN CHOOSE SOURCE > SERVER URL :

https://cdn.jsdelivr.net/gh/hiunicornstudio/unicornstudio.js@v1.4.20/components/unicornstudio-wix.js

2. ​IN THE SAME CUSTOM ELEMENT > CHOOSE SOURCE > TAG NAME PASTE THIS: unicorn-studio-embed

3. CUSTOM ELEMENT > SET ATTRIBUTE > ATTRIBUTE NAME > WRITE THIS: PROJECT-ID AND ENTER YOUR UNICORN PROJECT ID IN THE VALUE

Quick tips

  • The CUSTOM ELEMENT SHOULD have a defined width and height.

  • IN ORDER FOR IT WORK WITH THIS METHOD YOUR WIX STUDIO WEBSITE SHOULD BE UPGRADED TO A PREMIUM PLAN

  • IF YOU JUST WANT TO TEST BEFORE HAVING A WIX STUDIO PREMIUM PLAN YOU CAN FALLBACK TO USING AN IFRAME TO TEST THE VISUALS.

bottom of page