How to Embed Xspiral 3D Models into Framer?
September 6/2024

Embedding a 3D model from Xspiral into Framer is straightforward and doesn’t require coding skills. With just a few steps, you can add interactive 3D content to your Framer project using either the model’s URL or HTML embed code. Here’s how you can do it:

Step-by-Step Guide to Embedding Xspiral into Framer

  1. Prepare Your 3D Model in Xspiral

    • Start by creating or uploading your 3D model in Xspiral.
    • After finalizing your design, go to the “Export” section.
    • Here, you have two options for export:
      • URL: Generates a shareable link.
      • HTML Embed Code: Generates a code to embed on websites.

  2. Open Framer and Insert Embed Component

    • Open your Framer project where you want to display the 3D model.
    • In the Framer interface, click on Insert and search for “Embed.”
    • Drag the Embed component to the desired area of your project.

  3. Embed Your Xspiral Model

    • On the right-hand panel, you'll see the embed options.
    • You can choose between two methods:
      • URL: Paste the Xspiral-generated URL here.
      • HTML Code: Alternatively, paste the HTML embed code provided by Xspiral.
    • Once you've added the URL or code, your 3D model will be embedded into your Framer design.

  4. Preview and Publish

    • After embedding, you can preview the interactive 3D model directly in Framer.
    • Make any adjustments if necessary and then publish your project.

Updating Your 3D Model in Framer

Every time you make changes to your Xspiral model, simply return to the Xspiral export section and click Publish & Update. This will sync the updated model to your Framer project without requiring any changes to the embed code or URL.


FAQ

Do I have to pay for it? No, all users, whether free or subcribed, can create 3D interactive models with Xspiral.

Do I need to manually update the embed code when I make changes to my model? No. Once you click Publish & Update in Xspiral, your model will automatically update in Framer without any need to change the embed code or URL.

Where is the model hosted? The model is hosted on the Xspiral platform, but subscribed users can mask the subdomain with a ‘custom domain feature’.

To learn more about creating stunning 3D designs or to explore how Xspiral can enhance your projects, visit our website at https://www.xspiral.com