Embedding video or html content into the body

[charlesanim]

Is there any way to modify or inject a video object or html content or even customize whats in the steps body. Like the replace the text key with an image key or video.

I've tried every method but none seems to work. Thoughts?

See code below.

shepherd.addStep('health', { title: 'Health Team', text: 'Pariatur fugiat proident nisi fugiat enim laboris qui dolore exercitation sint enim magna velit.', attachTo: { element: '.step-4', on: 'left' }, buttons: [{ action: shepherd.back, classes: 'shepherd-button-secondary', text: 'Back' }, { action: shepherd.next, text: 'Next' }] });

[RobbieTheWagner]

@charlesanim text supports html. You can just pass an html string.

[RobbieTheWagner]

Please let me know if this works for you!

[charlesanim]

Thanks for the response,

So I'm trying to pass a <div id="lottieAnim"></div>

And render Lottie a animation using the id.

But it doesnt seem to work.

I even tried to place a html5 video in there but nothing worked. Please what am I doing wrong?

#Help. Thanks

[RobbieTheWagner]

@charlesanim without seeing your code, I wouldn't know. You can pass raw html in as text. For example:

text: `<p>Hi!</p>`

[charlesanim]

Ok, I'll push my code to a repo for you to check out.

but I was trying to text: <div id="lottieAnim"></div>

and once that renders, I target the ID with Lottie to render the animation in that element.

Please checkout lottie here, Lottie by Airbnb

[RobbieTheWagner]

@charlesanim here is an example using <video> https://codepen.io/rwwagner90/pen/jgwEeq

[RobbieTheWagner]

Your text has to be a string, so you would want

text: `<div id="lottieAnim"></div>`

[charlesanim]

Thank you, I will check it out and get back to you. Thanks much.