Tutorial: how to embed your 3DShot content into Webflow

Oct 6 · 3 min read

Webflow is a visual web design platform, CMS, and hosting provider for building production websites and prototypes. It empowers designers to build professional, custom websites in a completely visual canvas with no code. Launched in 2013, the platform has already gained the trust of millions of users. With the 3DShot mobile app, you can make your Webflow project even more interactive. Let’s find out how to embed immersive content into Webflow.

3DShot is a mobile application for creating interactive 3D Views (3D data format developed by Cappasity) and embedding them into websites, marketplaces, and classifieds. With 3DShot, you can shoot anything in 3D, from accessories to sculptures, and share the result on the most popular website constructors, including Webflow. All you need to create interactive 3D/360 content is a good smartphone camera.

Here’s a full tutorial on how to embed your 3DShot content into Webflow. Watch the video to see the entire process:

  1. Open the app, ensure that the object fits into the frame and move slowly around the object.

2. Use zoom to remove surrounding objects.

3. Apply filters to improve the 3D View.

4. Upload the 3D View to your Cappasity account.

5. Open the 3D View in your Cappasity account and click “Get embed code”.

6. Configure and copy the embed code.

7. Add code widget in the Webflow admin.

8. Paste the embed code.

9. Adjust the size of the iframe.

10. Click “Publish”.

That’s it! The 3D View is available on your Webflow project.

Here’s the result:

Follow us on Instagram, Twitter, and Facebook to stay tuned for more 3DShot tutorials. If you have any questions, feel free to contact us!

Cappasity Blog