Webflow Integration

Webflow Integration

Webflow Integration

How to set up the 3D & AR
in Webflow

How to set up the 3D & AR
in Webflow

How to set up the 3D & AR
in Webflow

Last updated on January 1, 2025

This guide explains how to integrate the Holostep 3D & AR viewer into your Webflow site by adding a custom script globally to the Head Code section. This ensures the script is loaded on all pages of your site.

Step 1: Open Webflow

Step 1: Open Webflow

  • Log in to your Webflow account.

  • Navigate to the Webflow Dashboard. In the Webflow Dashboard, locate the project where you want to integrate the Holostep 3D & AR viewer

  • Click on the three-dot menu (•••) next to your project and Select Settings from the dropdown menu.

Step 2: Navigate to the
Custom Code Section

Step 2: Navigate to the
Custom Code Section

  • In the Site Settings panel, click on the Custom Code tab.

  • This section allows you to add scripts that will be included across
    all pages of your site.

Step 3: Insert the Holostep Viewer Script in the Head Code

Step 3: Insert the Holostep Viewer Script in the Head Code

  • Scroll down to the Head Code section.

  • Copy and paste the following script inside the Head Code box:

    <script async type="module" src="https://onsite-scripter.holostep.io/serve/core.js?accountId=YOUR_ACCOUNT_ID"></script>

  • IMPORTANT: Replace YOUR_ACCOUNT_ID with the account ID provided by the Holostep team to ensure a proper connection between the systems.

Step 4: Save and Publish
the Changes

Step 4: Save and Publish
the Changes

  • Scroll down and click Save Changes to apply the script to your project.

  • To activate the script, click on the Publish button at the top right of the
    Webflow dashboard.

  • Select the domain where you want to publish the updated site.

  • Click Publish to Selected Domains to make the changes live.

Are you facing issues?

Are you facing issues?

Are you facing issues?

Last updated on January 1, 2025

If you need assistance or encounter any issues, feel free to reach out
to our support team at info@holostep.io.

Our team is ready to help with any questions or troubleshooting
to ensure a smooth integration experience.