Module to paste HTML

[jpineda91]

Hi everyone,

I want to add a lottie file but when I paste the code into the rich text module the <lottie-player> gets removed. I saw in a different post that HubSpot had a default HTML module but was told it was removed.

Any ideas on how I can add a module that allows me to add the code?

I added this script to the Site footer HTML:

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

This is what I tried to add to the Rich Text module:

<lottie-player src="https://assets6.lottiefiles.com/packages/lf20_buhqqgcm.json" background="transparent" speed="1" style="width: 600px; height: 600px;" loop autoplay></lottie-player>

Thanks in advance,
Jonathan

[evaldas]

Hi Jonathan,

The Rich Text module is notorious for removing or updating code snippets added.
Your best bet would be creating a custom module via Design Manager and adding that <lottie-player> code in that module’s HTML. By default, it would just sit on the left (like below screenshot) but it would need more work to make it look nice on the page.

If you wanted control on placement, then you could try need to utilize columns in a drag and drop template (one column for lottie, one for text). Ideally, that text field would be built in the custom module itself, but it would require additional HTML and CSS code to make it look decent and work on responsive renders.

Unless the theme you are using has modules that allow dropping in HTML (which is unusual).

[BarryGrennan]

Expanding on what @evaldas has said (and lifting from a module @Stephanie-OG made). You’d create a custom module with fields for all the necessary variables of the lottie file

 <lottie-player 
 src="{{ lottie_url }}" 
 background="{{ lottie_background }}" 
 speed="{{ module.lottie_player_settings.speed }}" 
 style="{{ module.lottie_player_settings.style }}" 
 {% if module.lottie_player_settings.autoplay %}autoplay {% endif %}
 {% if module.lottie_player_settings.loop %}loop {% endif %}
 {% if module.lottie_player_settings.show_controls %}controls {% endif %}
 >
 </lottie-player>

I believe Stephanie uses this module in her Geometry and Bold themes for reference

---

Barry Grennan

Freelance HubSpot CMS Developer

Website | Contact | LinkedIn

[Jaycee_Lewis]

Thank you very much, @evaldas and @BarryGrennan