3D Printing Get Quote Widget STL/OBJ Support

Introduction

The 3D Printing Get Quote Widget is a powerful tool that allows you to easily integrate 3D printing services into your website or application. With this widget, you can provide your customers with a seamless and convenient way to get a quote for their 3D printing projects. One of the key features of the Get Quote Widget is its support for STL and OBJ file formats, which are commonly used in 3D printing. In this tutorial, we will show you how to use the 3D Printing Get Quote Widget with STL/OBJ support to streamline your 3D printing workflow.

Prerequisites

Before you start, make sure you have the following:

• A website or application where you want to integrate the Get Quote Widget
• A 3D printing service account with the Get Quote Widget enabled
• A basic understanding of HTML and JavaScript

Step 1: Install the Get Quote Widget

To get started, you need to install the Get Quote Widget on your website or application. You can do this by copying the following code and pasting it into your HTML file:

<div id="get-quote-widget"></div>
<script src="https://cdn.getquotewidget.com/getquotewidget.min.js"></script>
<script>
  GetQuoteWidget.init({
    apiKey: 'YOUR_API_KEY',
    widgetId: 'YOUR_WIDGET_ID'
  });
</script>

Replace YOUR_API_KEY and YOUR_WIDGET_ID with your actual API key and widget ID, which you can obtain from your 3D printing service account.

Step 2: Configure the Get Quote Widget

Once you have installed the Get Quote Widget, you need to configure it to support STL and OBJ file formats. You can do this by adding the following code to your JavaScript file:

GetQuoteWidget.config({
  fileTypes: ['stl', 'obj'],
  fileExtensions: ['stl', 'obj']
});

This code tells the Get Quote Widget to accept files with the .stl and .obj extensions.

Step 3: Add the File Input Field

To allow your customers to upload their 3D model files, you need to add a file input field to your HTML file. You can do this by adding the following code:

<input type="file" id="file-input" accept=".stl,.obj">

This code adds a file input field with the accept attribute set to .stl and .obj, which restricts the file types that can be uploaded.

Step 4: Handle File Uploads

To handle file uploads, you need to add an event listener to the file input field. You can do this by adding the following code:

document.getElementById('file-input').addEventListener('change', function(event) {
  const file = event.target.files[0];
  GetQuoteWidget.uploadFile(file);
});

This code listens for changes to the file input field and uploads the selected file to the Get Quote Widget.

Step 5: Display the Quote

Once the file is uploaded, the Get Quote Widget will display a quote for the 3D printing project. You can customize the quote display by adding the following code to your HTML file:

<div id="quote-display"></div>

And then, in your JavaScript file:

GetQuoteWidget.on('quoteReceived', function(quote) {
  document.getElementById('quote-display').innerHTML = quote;
});

This code displays the quote in a #quote-display element.

Conclusion

That's it! With these steps, you have successfully integrated the 3D Printing Get Quote Widget with STL/OBJ support into your website or application. Your customers can now easily upload their 3D model files and get a quote for their 3D printing projects.