Embed CADs in Wiki Articles

A Step to Step Guide!

Note: If you are making a contribution on another form (Google Doc or PDF), please include the URL from step 1 and 2 in the proper location in your submission, and we will complete step 3 for you when processing the document.

This guide is designed to walk contributors through the process of embedding CADs on our Wiki articles. This guide can be generally applied for all HTML, CSS, and JS embeddables but is tailor made for CAD.

1. Upload your CAD to Fusion 360, and Share the Embedded HTML Code

First, upload your CAD file to Fusion 360, and follow this guide below to retrieve the embedded code to share your CAD.

How to embed a viewer of a Fusion design into a websiteautodesk

The code to copy should be located here.

2. Paste the Code in a CodePen Project

Sign up for CodePen, and paste the code under the "HTML" section. Once the code is in the project, you should see a preview of the CAD. Your project is already public, and what you need to copy now is the URL in your browser tab.

If this wasn't cleaer enough, this is what we mean:

3. Paste the link URL from your browser into these locations:

If using the in-browser editor, paste the URL of the CodePen project into the project, and make a press enter to auto-embed.

If using github markdown directly, check this raw file to see how the CAD below was embedded.

If you are making a contribution in another format (Google Docs or PDF), please complete steps 1 and 2 and include the URL on your submission in the appropriate location so we can embed it for you when processing your document.

Sample CAD Embed:

CAD of Change Up "Snailbot", Courtesey of Dylan from 319K

Note that the CAD takes a bit to load, and the ratio for the viewing window is suboptimal. If others have different solutions please let us know at [email protected].

Teams Contributed to this Article:

• BLRS (Purdue SIGBots)

• 319K (319K Kodiak)