Implementing models for Augmented Reality

SOLVE
JLangman
Participant | Partner

Hi all,

 

I have used the model-viewer from https://modelviewer.dev/examples/augmentedreality/#webXR in wordpress as well as just static sites. My problem is when I put the <model-viewer> element in a page within hubspot, it ends up getting stripped out from the html. Pretty sure this must be something simple I am overlooking. Can anyone offer any advice?

 

Thanks!

Jim

 

0 Upvotes
1 Accepted solution

Accepted Solutions
Teun
Solution
Key Advisor | Diamond Partner

@JLangman Thanks for sharing your code. I have the solution for your issue.

When I added the code to the Rich Text module from HubSpot, the HTML was indeed removed. When I add the code to a custom module, the code stays there and is actually working.

 

So the quickest way to solve this is to create a custom module for this specific element.
If you are in your HubSpot portal, you can navigate to the Design tools (Marketing > Files and Templates > Design tools). In the navigation bar on the left side, you can select 'File' > 'New file'. You get a popup where you can select the type of file you want to create. In your case, you need a 'Module'. 


In the next screen, you can select where you want to use this module. Select 'Pages' (and 'Blog' if needed) and make sure it is a 'local' module. Give it some fancy name that matches the output of this module and click on the 'Create' button.

 

This should open a new tab where you have three rows that you can edit. The first one is the module.html where you can paste your code.
In the module.css you can also add the styling you had in your codepen.

On the right side, you can add a label to give the module some user friendly name, but that is not necessary. 
You can also add some fields if you want to be able to reuse this module for more AR elements. (If this is the case, let me know, and I'll explain how you can achieve this).


If you added everything you need, press 'Publish changes' and go back to the website page where you want to show your AR module. You can search for your custom module in the 'Add' tab on the left side and drag it on the page. Now, you should be able to see your AR element.

 

Side note: If you are going to develop a lot of modules for your website, check out the Local Development Tools (HubSpot CLI) which improves your developing experience.



Did my answer solve your issue? Help the community by marking it as the solution.

View solution in original post

8 Replies 8
Teun
Key Advisor | Diamond Partner

Hi @JLangman , how did you add the <model-viewer> to HubSpot? Did you use a native HubSpot module or did you create a custom module to add this piece of HTML?
I tried adding the code from the example to a custom module as well as adding it through a 'Rich Text' module using the 'advanced options' to add HTML. In both cases, the HTML was not removed.


Can you share a bit more about how you added the code? And maybe share the code itself as well?



Did my answer solve your issue? Help the community by marking it as the solution.
0 Upvotes
JLangman
Participant | Partner

Hi @Teun  thanks for taking a look. I am using this code below:

https://codepen.io/jlangman/pen/wvdLXvb

 

I was doing just as you did, adding it into a source code within the text editor. 

0 Upvotes
Teun
Solution
Key Advisor | Diamond Partner

@JLangman Thanks for sharing your code. I have the solution for your issue.

When I added the code to the Rich Text module from HubSpot, the HTML was indeed removed. When I add the code to a custom module, the code stays there and is actually working.

 

So the quickest way to solve this is to create a custom module for this specific element.
If you are in your HubSpot portal, you can navigate to the Design tools (Marketing > Files and Templates > Design tools). In the navigation bar on the left side, you can select 'File' > 'New file'. You get a popup where you can select the type of file you want to create. In your case, you need a 'Module'. 


In the next screen, you can select where you want to use this module. Select 'Pages' (and 'Blog' if needed) and make sure it is a 'local' module. Give it some fancy name that matches the output of this module and click on the 'Create' button.

 

This should open a new tab where you have three rows that you can edit. The first one is the module.html where you can paste your code.
In the module.css you can also add the styling you had in your codepen.

On the right side, you can add a label to give the module some user friendly name, but that is not necessary. 
You can also add some fields if you want to be able to reuse this module for more AR elements. (If this is the case, let me know, and I'll explain how you can achieve this).


If you added everything you need, press 'Publish changes' and go back to the website page where you want to show your AR module. You can search for your custom module in the 'Add' tab on the left side and drag it on the page. Now, you should be able to see your AR element.

 

Side note: If you are going to develop a lot of modules for your website, check out the Local Development Tools (HubSpot CLI) which improves your developing experience.



Did my answer solve your issue? Help the community by marking it as the solution.

View solution in original post

JLangman
Participant | Partner
You just made my day! Thank you so much! I would love to hear more about extending this as I am hoping to be able to build and add more models.

Thanks!

Jim
0 Upvotes
Teun
Key Advisor | Diamond Partner

@JLangman I will focus on creating the fields in the Design tools for now. If you are interested in Local Development, read the documentation I shared earlier. There is also a great academy course available about local development called the CMS For Developers Certification.


To be able to reuse this module for new elements you should definitely create some fields. The fields you create should replace the static code that you want to replace for each AR element. So if I am reading your code correctly, you need at least two fields. One to set the src and one to set the ios-src. 
In case you want to also update the text of the button, you could create an extra field.

 

Open your module through the design tools again. On the right side, you should see an option named 'Fields'. Click on the 'Add fields' button and select the type of field you need. In your case, you would probably need the 'File' type field. If you select this field, you can select which type of content it will contain. As your files do not use any img extension, I would go with the 'File' type again.

 

You should definitely give it some understandable name. So for the first field, you could call it 'Model Viewer Source' and for the second you could call it 'IOS Model Viewer Source'. The important part to update is the 'HubL variable name', as this is used in the code (model_viewer_src and ios_model_viewer_src for example). Once you have set everything up, you should click on the 'Copy' button and select 'Copy value only', which will give you the HubL ( {{ module.model_viewer_src }} ) to access the data set through this field. Paste that value in the place where you want to use the data set through this field. 

Your code should now look something like this:

 

<div>
  <!—Include GLTF for Android, USDZ for iOS devices -->
  <model-viewer class="jlmodel" src="{{ module.model_viewer_src }}" ar camera-controls alt="Description of Model" ios-src="{{ module.ios_model_viewer_src }}" unstable-webxr> 
    <button slot="ar-button" style="Padding: 15px; background-color: white; border-radius: 30px; border: solid; border-color: #ededed; position: absolute; top: 16px; right: 16px; background-image: url(https://f.hubspotusercontent20.net/hubfs/5643223/models/ar-icon-32.png); background-repeat: no-repeat; background-position: 10% 50%; padding-left: 60px; height: auto; width: 220px;">
      <span style="float: right; font-size: 20px;">View In your Space</span>
    </button>
  </model-viewer>
</div>
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js"></script>
<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>

 

 

When you edit your module on page level, you should see the option to change or set the value for your two new fields, and this gives you the option to change the src and the ios-src.

 

If the 'File' type field gives you any issues, just use a 'Text' type field instead. You can paste the URL in that field instead of selecting the file.



Did my answer solve your issue? Help the community by marking it as the solution.
0 Upvotes
Teun
Key Advisor | Diamond Partner

Extra tip: Try to move the <script> tags to either the head or the footer of your template. This can be achieved through the settings (Settings > Website > Pages) or in the template you are using for your pages. Right now, the script tag is included in every instance where you call this module.

Normally, I would advice to use require_js instead, but I am not sure how you could set the type="module" and the nomodule in this HubL function.

Maybe @dennisedson could help us with that.
I think you could try this:

 

 

{% require_js %}
 <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js"> </script>
 <script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>
{% end_require_js %}

 

 

Which would move the code to the footer.



Did my answer solve your issue? Help the community by marking it as the solution.
0 Upvotes
JLangman
Participant | Partner

@Teun  Thanks so much for this. This is very clear and concise and I really appreciate your help with this. This has really inspired me to get into all of these way more so than I thought I could. I am off to go give this a try. I will dive into the course too.

 

Thanks!

-Jim

 

0 Upvotes
Teun
Key Advisor | Diamond Partner

@JLangman Happy to help!



Did my answer solve your issue? Help the community by marking it as the solution.