# Custom HTML component attach to button

**URL:** <https://forums.realmacsoftware.com/t/custom-html-component-attach-to-button/46553>\
**Category:** Elements\
**Created:** [March 2, 2025, 10:46pm UTC](https://forums.realmacsoftware.com/t/custom-html-component-attach-to-button/46553 "2025-03-02T22:46:56Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![PMUK](https://avatars.discourse-cdn.com/v4/letter/p/7993a0/32.png) [@PMUK](https://forums.realmacsoftware.com/u/PMUK)\
**Post date:** [March 2, 2025, 10:46pm UTC](https://forums.realmacsoftware.com/t/custom-html-component-attach-to-button/46553/1 "2025-03-02T22:46:56Z")

</div>

Can you attach a custom HTML snippet to a button? TIA

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [March 3, 2025, 9:02am UTC](https://forums.realmacsoftware.com/t/custom-html-component-attach-to-button/46553/2 "2025-03-03T09:02:08Z")

</div>

Depends exactly what you’re trying to achieve 🙂

If you have an example of what you want to do I can give you a suggestion of how to achieve it in Elements.

---

<div class="post-metadata">

**Author:** ![PMUK](https://avatars.discourse-cdn.com/v4/letter/p/7993a0/32.png) [@PMUK](https://forums.realmacsoftware.com/u/PMUK)\
**Post date:** [March 3, 2025, 9:32am UTC](https://forums.realmacsoftware.com/t/custom-html-component-attach-to-button/46553/3 "2025-03-03T09:32:34Z")

</div>

Dan showed me how to add Code snippets from Cartloom to site last week and I can add these but it just shows page which is fine as I need this. However I want to attach the snippet to a “buy” button as I have 5 products and 3 categories. I want to add a buy button that when opened opens the various categories/products etc. individually - I have all the code snippets from Cartloom. TIA

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [March 3, 2025, 11:37am UTC](https://forums.realmacsoftware.com/t/custom-html-component-attach-to-button/46553/4 "2025-03-03T11:37:32Z")

</div>

Can you post the code snippet that you’re trying to attach to a button?  
A link to the cartloom docs that talks about what you’re trying to do would also be useful!

The more details we have about the problem you’re trying to solve, the better we’ll be able to solve it 😊

---

<div class="post-metadata">

**Author:** ![PMUK](https://avatars.discourse-cdn.com/v4/letter/p/7993a0/32.png) [@PMUK](https://forums.realmacsoftware.com/u/PMUK)\
**Post date:** [March 3, 2025, 12:20pm UTC](https://forums.realmacsoftware.com/t/custom-html-component-attach-to-button/46553/5 "2025-03-03T12:20:49Z")

</div>

First of all you you helped me last week get code snippet into HTML by showing me the custom HTML bit. That works great and opens page on the “page” I am designing. I want to add a snippet to a button so I can have a buy now next to each product group. here is an example of the snippet code which if you place into HTML custom you will see page come up. My current site is compression.solutions which is done in foundation and needs updating hence why I am learning ELEMENTS. TIA

```auto

<!--// CartLoom v5 Snippet for Digital Product //-->
<script data-cartloom-pid="193006">
 if (typeof Cartloom === "undefined") {
	var Cartloom = {};
	(function(){
	 var script = document.createElement("script"); 
	script.src = "https://compressionsolutions.cartloom.com/v5/cart.js";
	 document.body.appendChild(script);
	})();
 }
</script>
<noscript>
	<a href="https://compressionsolutions.cartloom.com/v5/cart/quickbuy/193006" target="_blank">Buy Now</a>
</noscript>

```

PS I am not trying to sell this product to you! 🙂

---

<div class="post-metadata">

**Author:** ![PMUK](https://avatars.discourse-cdn.com/v4/letter/p/7993a0/32.png) [@PMUK](https://forums.realmacsoftware.com/u/PMUK)\
**Post date:** [March 3, 2025, 12:22pm UTC](https://forums.realmacsoftware.com/t/custom-html-component-attach-to-button/46553/6 "2025-03-03T12:22:53Z")

</div>

I can’t post the HTML Apologies it turns it into link. Now I look and snippet there! DOH!!

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [March 3, 2025, 12:42pm UTC](https://forums.realmacsoftware.com/t/custom-html-component-attach-to-button/46553/7 "2025-03-03T12:42:10Z")

</div>

I’m not familiar with exactly how catrloom works, and I’m not 100% sure on what you want to do, but I gave it a go…

Hope that helps!

---

<div class="post-metadata">

**Author:** ![PMUK](https://avatars.discourse-cdn.com/v4/letter/p/7993a0/32.png) [@PMUK](https://forums.realmacsoftware.com/u/PMUK)\
**Post date:** [March 3, 2025, 1:40pm UTC](https://forums.realmacsoftware.com/t/custom-html-component-attach-to-button/46553/8 "2025-03-03T13:40:44Z")

</div>

Wow nearly! When you press the buy button I want it to bring up what you have in second column i.e. product details. I don’t want it to go straight to cart as they might need to chose size and order an attachment. They might need to read details of product first. I want to replicate my “shop all now” and various individual buttons once I learn how to attach the snippets to a button. (compression.solutions)

 ![Screenshot 2025-03-03 at 13.39.02](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/a/3/a31ef320647ebb57b2839520fbe7c0586001f6ca.png)

---

<div class="post-metadata">

**Author:** ![harristype](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/harristype/32/29881_2.png) [@harristype](https://forums.realmacsoftware.com/u/harristype)\
**Post date:** [July 15, 2025, 3:02pm UTC](https://forums.realmacsoftware.com/t/custom-html-component-attach-to-button/46553/9 "2025-07-15T15:02:51Z")

</div>

I am also having difficulty using html code assigned to a button. I have a font design site where I sell about 14 different font products, and I use fatfreecart for my sales. Each individual font page has two custom html code snippets, one for ADD TO CART, and another for VIEW CART. These code snippets automatically build the button. So I need to use 28 different code snippets for my online store. The current way the HTML component seems to work is like a global, and changes every html button on every individual font page to be the same. How can I do this in Elements. My current site, [https://www.harristype.com/](https://www.harristype.com/), was built with RW9 and Foundry 1. I’m currently rebuilding the site with Elements, but this is definitely a roadblock. Help please!

---

<div class="post-metadata">

**Author:** ![harristype](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/harristype/32/29881_2.png) [@harristype](https://forums.realmacsoftware.com/u/harristype)\
**Post date:** [July 15, 2025, 3:15pm UTC](https://forums.realmacsoftware.com/t/custom-html-component-attach-to-button/46553/10 "2025-07-15T15:15:54Z")

</div>

In RW9, you could add a text box and paste in html and it would automatically be treated as an html component, which is what I did on my site linked above. This seems to have been completely removed in Elements.

---

<div class="post-metadata">

**Author:** ![harristype](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/harristype/32/29881_2.png) [@harristype](https://forums.realmacsoftware.com/u/harristype)\
**Post date:** [July 15, 2025, 3:16pm UTC](https://forums.realmacsoftware.com/t/custom-html-component-attach-to-button/46553/11 "2025-07-15T15:16:35Z")

</div>

Here is an example of the html code snippet provided by fatfreecart ([https://www.e-junkie.com/wiki/fatfreecartpro](https://www.e-junkie.com/wiki/fatfreecartpro))

`<a href='https://www.fatfreecartpro.com/ecom/gb.php?&c=cart&ejc=2&cl=345711&i=1604284' onclick='return EJEJC_lc(this);' style='display:inline-block;background: #3da5d9 url(https://www.e-junkie.com/ej/images/newaddtocart.png) center/100px no-repeat;border: none;padding: 7px 55px;border-radius: 3px;box-shadow: 1px 2px 2px rgba(0,0,0,0.2);text-decoration: none;' target='ej_ejc' class='ec_ejc_thkbx'>&nbsp;</a>`

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [July 15, 2025, 4:31pm UTC](https://forums.realmacsoftware.com/t/custom-html-component-attach-to-button/46553/12 "2025-07-15T16:31:45Z")

</div>

Hi @harristype.

Don’t paste the HTML into a Text Component that won’t work. What you need to do is create a Custom Component for the HTML. This is WAY more powerful than in Classic 😉

Here’s the details on how to do that:

> **[Custom Components | RapidWeaver Elements Docs](https://docs.realmacsoftware.com/elements-docs/elements-app/components/custom-components)**
>
> Extend RapidWeaver by creating your very own custom Components

Hope that helps!

---

<div class="post-metadata">

**Author:** ![PMUK](https://avatars.discourse-cdn.com/v4/letter/p/7993a0/32.png) [@PMUK](https://forums.realmacsoftware.com/u/PMUK)\
**Post date:** [July 15, 2025, 4:51pm UTC](https://forums.realmacsoftware.com/t/custom-html-component-attach-to-button/46553/13 "2025-07-15T16:51:08Z")

</div>

That’s the way it works for me.

---

<div class="post-metadata">

**Author:** ![harristype](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/harristype/32/29881_2.png) [@harristype](https://forums.realmacsoftware.com/u/harristype)\
**Post date:** [July 17, 2025, 1:52pm UTC](https://forums.realmacsoftware.com/t/custom-html-component-attach-to-button/46553/14 "2025-07-17T13:52:23Z")

</div>

Dan! Thank you so much! I had already figured out most of that, but it wasn’t obvious to me to click on the HTML title and add a custom name. So all of my components were being named “HTML”, then “Copy of HTML”, etc. Would it be possible to right click on an HTML component to rename it? Anyway, thank you for saving me hours of my life!
