1 Accepted solution
Implementing models for Augmented Reality
SOLVE@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.
Implementing models for Augmented Reality
SOLVEExtra 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.
Implementing models for Augmented Reality
SOLVE@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.
Implementing models for Augmented Reality
SOLVE@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.
Implementing models for Augmented Reality
SOLVEHi @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?
