How can I properly embed a Marmoset Toolbag viewer of my custom model into my website using Webflow?

Published on

September 22, 2023

Note

CommunityFAQ is not affiliated with Webflow. Click here if you'd like to visit Webflow's help resources.

To properly embed a Marmoset Toolbag viewer of your custom model into your website using Webflow, you can follow these steps:

Obtain the embed code from Marmoset Toolbag:

After exporting your custom model from Marmoset Toolbag, you will need to generate an embed code.
To do this, open your model in Marmoset Toolbag and go to "Export" in the top menu.
Customize the viewer settings as per your requirements and click on "Generate Embed Code".
Copy the provided code.

Create a new page or open an existing page in the Webflow Designer:

In your Webflow project, create a new page or open the page where you want to embed the Marmoset Toolbag viewer.

Add an embed element:

Drag and drop an Embed element from the Elements panel onto the desired section of your page.

Paste the embed code:

Double click on the Embed element to open its settings in the right sidebar.
Paste the Marmoset Toolbag embed code into the Code field.

Adjust the size and position of the viewer:

By default, the Marmoset Toolbag viewer will take up the full width and height of the Embed element.
Use the Webflow Designer tools to adjust the size and position of the Embed element as desired.

Preview and publish your website:

Preview your website to ensure the Marmoset Toolbag viewer is displaying correctly.
Publish your website to make the changes go live.

By following these steps, you will be able to embed a Marmoset Toolbag viewer of your custom model into your website using Webflow. This will allow visitors to interact with and view your model directly on your website. Make sure to optimize your model's title, description, and any relevant keywords in the surrounding content to improve SEO.

Example Embed Code:

<div class="marmoset-embed" data-src="https://your-model-url"></div><script async src="https://viewer.marmoset.co/core/embed.js"></script>

Note: Replace https://your-model-url with the actual URL of your model.

Additional Questions:

How can I customize the appearance of the Marmoset Toolbag viewer in Webflow?
Can I embed multiple Marmoset Toolbag viewers on the same page using Webflow?
Are there any alternative 3D model viewers that can be embedded in a Webflow website?

How can I pair a phone number submitted through a form with a specific link, like a 'Contact via WhatsApp' link, and store it in a CMS collection in Webflow?

What problems are associated with using the YouTube nocookie-embed option in Webflow's video element and Rich Body Elements?

Does anyone have any ideas or experience with workarounds for the issues with Webflow's Membership site, such as not receiving notifications when someone registers or the lack of native Zapier integrations?

Is it possible to remove the border and Figma branding from an embedded Figma prototype in Webflow?

How can I add a LinkedIn Button to my Webflow Team Website?

What is the easiest way to determine the account type and handle payment immediately for new sign-ups in Webflow's Membership Beta?

Is it possible to upload a file to a website from Stripe using Webflow?

What are some CDN repositories that can be used to create a smooth scroll effect in Webflow?

In Webflow, how can I hide a slide on desktop without creating a blank slide in a slider?

Is there usually a certain amount of time I have to wait for a 301 redirect change to take effect in Webflow, or is there something else I have to do?