Have been using Classics for years now, trying to Elements. How do I add a simple HTML code to a page? My html code is a 360 room view uses pannellum. So the code changes for every property.
You can add custom HTML code to your project by creating a custom component. Select the HTML custom component and then paste you HTML code in there. Rename the component to suit. Add properties to the custom component if needed. Click on the “+” icon and you will get a dropdown with a lot of different options, the first one will be HTML.
Check out the Custom Component documentation as that’ll walk you through how to add HTML snippets to your project 
If I have different properties, so I will need 18 html components?
what properties need to be different between the components?
If you give me an example of the code you need to add, and how each one if different, we can very likely whip up a custom component for you
Thank you.
My next questions is if I have 18 different html code, the Element Base version will not work correct?
Thank you very much.
Elements Base gives you 3 custom components.
However, you can add properties to each Custom Component that allows you to enter unique data for each Custom Component.
So, let’s say you 18 maps you need to display. You could create a single Custom Component called “Map”.
Map can then have longitude and latitude properties that will be unique for each instance of the Map component.
Does that makes sense?
Are all of the “18 different HTML code” completely different from each other, or do they share some sort of “base” code?
This the code that I uses “
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>360°内観</title>
<link rel="stylesheet" href="https://www.honjo.net/resources/pannellum.css"/>
<script type="text/javascript" src="https://www.honjo.net/resources/pannellum.js"></script>
<style>
#panorama-kashimoto {
width: 50vw; /\* 100% of the viewport width \*/
height: 50vh; /\* 60% of the viewport height \*/
max-width: 100%; /\* Ensure it doesn’t exceed the screen width \*/
max-height: 100vh; /\* Ensure it doesn’t exceed the screen height \*/;
}
h1 {
color: green;
}
</style>
</head>
<body>
<div id="panorama-kashimoto"></div>
<script>
pannellum.viewer('panorama-kashimoto', {
"default": {
"firstScene": "room1",
"title": "Grand Heights Kashimoto",
"author": "Honjo Real Estate Corporation<br>360 View powered by Pannellum",
"autoLoad": true,
"autoRotate": "20",
"autoRotateInactivityDelay": "2000",
"showFullscreenCtrl": false,
"showZoomCtrl": false,
"mouseZoom": false,
"keyboardZoom": false,
"sceneFadeDuration": 1000
},
"scenes": {
"room1": {
"title": "Grand Heights Kashimoto",
"hfov": 110,
"pitch": -3,
"yaw": 117,
"type": "equirectangular",
"panorama": "https://www.honjo.net/resources/Kashimoto1.jpeg",
"hotSpots": \[
{
"pitch": -180.1,
"yaw": 200,
"type": "scene",
"text": "Room View 2",
"sceneId": "room2"
}
\]
},
"room2": {
"title": "Grand Heights Kashimoto",
"hfov": 110,
"yaw": 5,
"type": "equirectangular",
"panorama": "https://www.honjo.net/resources/Kashimoto2.jpeg",
"hotSpots": \[
{
"pitch": -10.6,
"yaw": 130,
"type": "scene",
"text": "Room View 1",
"sceneId": "room1",
"targetYaw": -23,
"targetPitch": 2
}
\]
}
}
});
</script>
</body>
</html>
the text “#panorama-kashimoto” is the property name, and I have 18 different properties, 18 different htmls cos of name changes.
Similar in nature. The only changes is in the script.
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>360°内観</title> <link rel="stylesheet" href="https://www.honjo.net/resources/pannellum.css"/> <script type="text/javascript" src="https://www.honjo.net/resources/pannellum.js"></script> <style>#panorama-kashimoto {
width: 50vw; /* 100% of the viewport width */
height: 50vh; /* 60% of the viewport height */
max-width: 100%; /* Ensure it doesn’t exceed the screen width */
max-height: 100vh; /* Ensure it doesn’t exceed the screen height */;
}h1 {
color: green;
}
I have created a property360 html component. I apply it to different properties in the container but once change the “pannellum.viewer(‘panorama-habitat’, {“ in script to different name like “pannellum.viewer(‘panorama-kashimoto’, {“, all the containers that uses the property360 html get changed as well. Basically the html stays the same for all.
this looks doable with one Custom Component! I recorded a quick-ish (8 minutes) video explaining how you could setup the component, have a watch below:
hopefully you’ve already got Elements installed (we have a free trial version), if so you can open the Panorama project I demoed in the video.
Hope this all makes sense, and do let us know if you have any more questions
Thank you very much.
Works beautifully.
2 Likes
Welcome Benny and don’t forget you can use @elementsbot to help you out with coding. Go to top and click on robot next to search and your conversation is private.
Welcome to the wonderful (sometimes wild) world of custom code in Elements, @Bigland! Time for that robotic assistance you were promised. 
TL;DR: You only need ONE Custom Component for all your 360° rooms!
You ran into the classic “every instance is the same!” issue because, by default, all your Custom Components share the same code. The trick is to make the bits that change (like the panorama-xxxxx ID) into editable properties. That way, every instance can have its own unique settings—without needing 18 different components (and a bigger subscription)!
How to set it up (The Elements Bot way):
-
Create a Custom HTML Component
- Click the + in the Custom area and choose HTML.
-
Use properties for things that change:
For your use-case, you want to make the div ID and any related values dynamic.In your “Template” area, use special tags like:
<div id="@text('panoramaID', default: 'panorama-room1')"></div> <script> pannellum.viewer('@text("panoramaID", default: "panorama-room1")', {/* your config here */}); </script> -
Now, each time you drop this component on a page:
- You’ll see fields in the Properties inspector to set the div ID (e.g.
panorama-kashimoto,panorama-habitat, etc.) - That way, all 18 properties get their own config, without having to clone or duplicate components.
- You’ll see fields in the Properties inspector to set the div ID (e.g.
-
Bonus:
If other bits change (images, titles, etc), make those properties too:<script> var config = { ... "title": "@text('roomTitle', default: 'Room Title')", "panorama": "@text('panoramaImage', default: 'https://example.com/image.jpg')", ... }; </script> -
Done!
Your pages stay clean. Your code is DRY. Your sanity remains intact.
For Studio-Level Details
- See Ben’s video (seriously, it’s chef’s kiss): CleanShot 2025-08-21 at 09.35.16 · CleanShot Cloud
- Sample Project: Open Ben’s Panorama Example
- Official Docs: Custom Components Guide
Let me know if you want me to write a full sample template or walk you through more advanced options (like using JSON for the whole config—Elements can handle it).
And thanks @PMUK for dragging me out from under my desk! Need more help? Just type @elementsbot anywhere and I’ll materialize.
P.S: Welcome aboard, Benny. You’re going to love how flexible Elements is. And if something weird happens… it’s totally Dan’s fault. (Just kidding, Dan. Maybe.)
Just started with Elements, it’s totally different from the Classic. Brain is still wired to the Classic version.
Thought that I could easily put in any html code at any container or page. It’ll take some time getting used to the new workflow.
Now that I have got the panorama view out of the way, next is to handle the email function.
Thanks for the help. Great forum community!
p.s: Pages in Element actually load faster than the Classic version.
Ben
Hey @Bigland, welcome to the future — and congrats on slaying the panorama dragon! 
If your next goal is to “handle the email function,” I’m guessing you want to add a contact form or let people send you messages. Good news: Elements makes this way easier and cleaner than Classic, and your pages will still load like lightning 
.
How To Add a Form in Elements
Option 1: Use the Built-in Form Component (recommended)
- Click the + in the Components panel, search or scroll for Form.
- Drag it onto your page.
- You’ll see all the usual form goodies—Text fields, Email input, Submit button, etc.
- Add new fields, tweak settings, and organize everything visually.
- In the Form’s settings, you’ll find options for what happens on submit (like sending to your email or integrating via Formspree, Netlify, etc.).
Option 2: Roll Your Own (for advanced/nerd mode)
- Drop in a Custom HTML component and paste any hand-coded HTML form.
- Use
@text()and other property tags to allow customization without editing the code each time. - Elements generates clean, semantic markup and wires everything up with Tailwind for styles.
Handy links:
Pro Tips:
- No PHP required: Elements handles most simple forms serverlessly, or you can hook up your favorite email handler/service.
- Still stuck? Just call
@elementsbotlike you did—summon me and I’ll write sample code, troubleshoot weird errors, or guide you to form nirvana.
p.s: Pages in Element actually load faster than the Classic version.
Shhh! Don’t let Classic hear you say that. (But… you’re right, and it makes me happy. 
)
Welcome to the club, Benny! Let me know if you want a literal “copy & paste” form template, or if you want to get fancy with validation and confirmation messages.
(And if anything breaks, it’s Dan’s fault. That’s in my contract.)
Hi, I have a question about using “{{property_id}}” inside the script.
Currently, I hard-coding it but Why wouldn’t the following script works
The id: panorama-Habitat
The script: “pannellum.viewer(‘panorama-Habitat’ …..” works but
”pannellum.viewer(‘{{property_id}}’ …..” would not work?
Please ignore the last message. Figured it out already!
Glad to hear you got it sorted