Good afternoon, I have a strange issue in Elements. I’m using a custom HTML component on page to show a list of events for my company, which is working great. Now I’m trying to add a second new custom HTML component but when I create it using the + it seems to already have the html code from the previous component in it, so both html components on the page are displaying the same code. When I change one to use the new code, both change…
What happens if you rename the second one?
I named them both different names yet the same issue happens… It seems I’m not getting empty components when I create them
Can you make sure you drag the new component to the page, then select it, does that solve it for you?
If not, perhaps you could make a screen recording so we can see exactly what you’re doing…
I used the HTML component too and it behaves like a global with me too. If you click in the + sign and get a new HTML component.. I comes in empty..
If you click on the “+” you will be creating a new HTML component. If you want to use one you had previously created, simply drag it out of the component panel into the editor of node panel where you want to place it. It helps if you give your component a unique name, which can be done in the code editor when the component is selected.
A custom component does behave a little like a global in that each instance is identical, unless it has properties you can edit to make it unique.
I’m having an issue also with HTML Custom Component. Had and embedded calculator in an accordian working fine, but when added another HTML custom compent for a google map on another page, the calculator in the accordian stopped displaying.
Trying to get to the bottom of it today and recreating the components, I see error as per the attached screenshot.
Any ideas?
I suspect it is something in the custom code causing an issue — could you paste the code, or better yet a link to an example project containing the code? 
Hi Ben,
Here’s a link to the project file:
The calculator HTML/JS custom compnanent is on the FAQ’s page in the accordian 2nd from top “Government Charges Calculator”
The other custom HTML component is on the Contatct page in the Map above footer.
Appreciated it!
Not really a good idea to post the project publicly, since it’s a paid template from a third-party provider.
Please send it directly to Dan or Ben.
Do you see any ways to prevent this in the future?
Hi @peter
luckily, this is an “easy” fix 
You’ve pasted a <script> tag in to the Javascript tab of your custom component — the Javascript tab is for raw javascript, not an HTML script element!
You can fix this by removing the <script> tag from the Javascript tab, and entering the following code in the template tab:
@portal(headEnd)
<script id="stamp-src" type="text/javascript" data-state="QLD" src="//calculatorsonline.com.au/external/!main/stamp_duty.min.js"></script>
@endportal
<div id="stamp-duty-calculator" class="red-theme hidden"><div id="stamp-duty-anchors"></div></div>
Note the use of @portal, this places the script element in to the <head> area of the page. You can read more about how @portal works in the docs
Once you’ve done this, the calculator will work as expected!
Many thanks! I’ll give that a go!
I’l edit my post above to remove the link also
Hi again @ben,
This is my first elements project, and I’m not as familiar with this as I was with classic, but trying to learn.
I followed your instructions above (I think) but on preview now, the navigation menu isn’t present, and the calculator also appears under the HTML map component on the Contact page. There is also artifacts under the footer that says “@portal(headEnd) @endportal”, so something is wrong somehere here.
Could I email you the project file per chance or some other way to look at? Another user said I shouldn’t post the cloudlink on the forum.
Any held would be greatly appreciated.
Here’s a blank project with a working Calculator custom component: elementsapp://downloadDocument/Mxvf0UlEdgnc
Sounds like you’ve maybe edited the wrong custom component and added the calculator code to a custom map component?
Did you place the @portal statement in the Template for the custom component?
If you’re still stuck, you can send a link to the project, along with a link to this thread, to forumsupport@realmacsoftware.com
Hi @dan
Thanks for your help, especially sending that project file with the calculator. It helped figure out my settings. Many thanks!
Tweaking those settings also resolved the map issue on the Contact page. I had the code you provided earlier in the Project Settings Template in error, rather than the actual custom component Template section.
There’s only one issue remaining now on the FAQ page where the calculator in the accordion is that I can’t work out.
Only the FAQ page, and that page only, the site navigation menu disappears, and the middle column in the footer with “Quick Contact Info” also vanishes.
I’ve emailed a link to this thread and the project file.
Thanks agaiin!
I’ve taken a look at the project you emailed over, and the short answer is: that the third-party stamp duty widget is clobbering the code in the menu.
So this isn’t an issue with Elements or the code it produces, it’s an issue with the widget. However, I’ve still gonna ahead and put together a workaround for you 
Here we go…
1: Place the following “Template” code into your Calculator Embed Code Custom Component:
@if(edit)
<div class="p-10 bg-surface-100 border-2 border-dashed border-surface-600 text-center font-semibold tracking-wide text-lg text-text-600 uppercase">Calculator will appear here.</div>
@else
<div class="not-prose">
<iframe
src="/stamp-duty.html?state=QLD"
title="Stamp Duty Calculator"
class="w-full"
style="height: 650px; border: 0; overflow: hidden;"
loading="lazy"
referrerpolicy="no-referrer"
></iframe>
</div>
@endif
2: Then, create a stamp-duty.html file in the root of your project, and add the following code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link href="//calculatorsonline.com.au/external/!main/stamp_duty.css" rel="stylesheet" />
</head>
<body>
<div id="stamp-duty-calculator" class="red-theme">
<div id="stamp-duty-anchors"></div>
</div>
<script id="stamp-src" data-state="QLD" src="//calculatorsonline.com.au/external/!main/stamp_duty.min.js"></script>
</body>
</html>
I’ve tested this here, and it appears to resolve the menu issue 
Thanks Dan!
You’ve gone above and beyond and truly helpful!
I’ll give those updates a go over the weekend.
Thaks again!
1 Like