Unable to embed html in topic page

I am attempting to embed some test code into a topic page.  I am clicking tools>source code, and pasting the code. Instead of the calendar, I am getting a link. Can someone help?

I am using NopCom without source code, and hosting with Everleap. My browser is google chrome. I have no coding knowledge.

Here is the embed code:
<p class="loxi" data-background-color="" data-categories="all" data-color="#7fc11c" data-default-layout="list" data-font-family="" data-is-demo="false" data-show-category-filter="1" data-show-location-address="1" data-show-location-filter="1" data-show-search-filter="1" data-show-view-switcher="1" data-show-list-view-image="1" data-show-social-media-buttons="1" data-site-id="9400" data-subdomain="hanford-community-calendar" data-theme="light" data-timezone="UTC" data-title="Hanford Community Calendar" data-venue="all"><a href="https://hanford-community-calendar.loxi.io">View more events</a> on <a href="https://loxi.io">Loxi.io</a></p>

Here is the page I'm trying to embed into:
www.findinghanford.com/events

Thank you.

Ssussdriad wrote:
What is the link for an example where it does embed correctly ?

Yidna wrote:

Thank you for your response.

Here it is in a wordpress site:
https://www.ssussdriad.com/contact/

Loxi support got back to me with this:
"based on the issue you are describing, it does sound like the iframe code and its associated JavaScript component are not being rendered.
This is usually the case whenever the CMS/Platform sanitizes (aka cleans) the pasted code.

The fix for this is to use a widget or container that is meant to receive (and render) HTML code or just code."

Yes looks like there is script file associated which probably gets stripped out in the save
You need to see if there is a plugin or you need to modify the code to get it to work

Yidna wrote:

thank you. how should I proceed?  what sort of plugin am I looking for / what modification would the code need? would I need to modify the embed code, or the code for the desired page in nopcommerce?

I tried using the Quick.HTML plugin from Nop4You, but had the same issue.

Edit: though, it's possible I didn't use the plugin correctly.

Ssussdriad wrote:
It is always worth to contact with support directly if you faced with any issues related to plugin, however at this case is not related to plugin. If will past code you provided at the first post, for example at jsfiddle, will get exactly this same result (only links without calendar). I suppose there is something more to be added, as code you have provide did not get any js but html is ready to use some. Are you sure you have copy full code to paste? Do double check.

If you have js code to be added, the most simple would be add some code directly at the cshtml file.

Regards,
Tom

I found the JS on the referenced page above
Here is a codepen that works
https://codepen.io/SelectSystemsInternational/pen/vYNpeRJ

Thank you for your replies. Do either of you have a suggestion for how I might proceed? I am attempting to put together a marketplace for local small business, and would like to also host a community calendar on the site. The calendar I am attempting to embed is the only one I have found that meets my needs in both style, and function.

Any guidance is appreciated. Thank you.

Edit: Is is at simple as pasting this in notepad, and dropping it in the right folder within Filezilla? If so, how do I know which folder to move it to?

Ssussdriad wrote:
Almost :)

If I may suggest - use new topic and topic template. How to add new topic, I suppose you know - only at the admin panel.  Later apply new template. To get new template just go to section Topic Templates and add new by adding any name you like (ex. event template), and add new path (ex. TopicEventDetails). Now, you may apply new template to new topic you have added - but need to do one more step to complete it. Not sure if you theme is using topics, if yes, then copy TopicDetails file with new name - MUST be this same as you have addeed at the view path (in my example - TopicEventDetails). If theme is not using that file, just go to default view and copy file from there to your theme. File to copy will be here. Before you copy, may add HTML and JS provided by Loxi directly at the code of the file, and remove unused parts of the code - like password for example.

To show topic at the homapage for example, you may edit Home/Index.cshtml file and add

@await Component.InvokeAsync("TopicBlock", new { systemName = "EVENT" })

where system name need to be replaced by name you have set when adding new topic.

Hope this helps.

Regards,
Tom