Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Javascript widget code to HTML Button

How can I link a Javascript widget code to an HTML Button? I am using accounting software that gives the widget code. It's just that the "button" that comes with the code is plain, grey and almost dead looking. I have a button (attractive one), and when someone clicks on the button, I want the click to call the script and the script/widget pops up. How can I do this? Thank you.

6 Answers

Steven Parker
Steven Parker
221,451 Points

You can reference your button and call the "addEventListener" method to cause clicking it to run a function associated with your widget. There should be something similar in the code already to start the widget from the plain button.

Thank you for your help! I wish I know how to reference and call the "addEventListener" method. :)

Steven Parker
Steven Parker
221,451 Points

Have you looked at the part of the existing code that responds to the ugly button?

Steven Parker
Steven Parker
221,451 Points

There's still not much here for me to be able to help with. But I can pass along some observations:

<button class="aplos-donation-button" data-widget-id="************..........">Donate</button>
        <!- this class probably works with some CSS code -->
                                      <!- this id probably works with the script -->
<script type="text/javascript" src="^**^**^^*^*^*^*^*^*^*^*^*^*^.min.js"></script>
<!- script tags should be relocated to the end of the "body" section -->

To be of further help, you will need to post the whole code after redaction. You cannot redact the entire script as parts of it involved with displaying or using the button will be necessary to replicate the issue.

The best way to share the code/environment is in a link to a workspace snapshot or something like a github repo.

Steven Parker
Steven Parker
221,451 Points

You might not need additional JavaScript code. Try coding the button using the same tags and attributes of the buttons that already work. Perhaps something like this:

<div class="thrv_wrapper thrv-button" data-css="tve-u-16ffbcb7471" style="" data-button-size="m">
    <button class="aplos-donation-button tcb-button-link" data-widget-id="B56D325481DE46559FFA613A1E91FB90" style="outline: none; color: white">
        <span class="tcb-button-text thrv-inline-text">Custom ThriveThemes Button</span>
    </button>
</div>

Yes, I did. What should I do? I am not sure how safe it is to share the code here since that is linked to my accounting software and don't know if that will reveal account numbers, etc. So...

Steven Parker
Steven Parker
221,451 Points

Basically, you need to look over the existing code and find where the the existing button is tied into the functionality so you can replace the references with ones to your improved button.

To get more specific help, you'll need to figure out how to identify and redact any PII so you can show the actual code.

@Steven Parker ... This is just BEYOND me. :) I use a donate button widget on my website (build on WordPress). That button looks dead. No life in it, and I do not think any donor would feel compelled to click on it. I cannot upload the screenshot here, but you would get an idea if you see it. So, the software company gave a basic code (barebone) button so coders can alter it and make it match their website look and feel. I cannot get this to work.

This is how the code looks:

<button class="aplos-donation-button" data-widget-id="************....................................">Donate</button> <script type="text/javascript" src="^**^**^^*^*^*^*^*^*^*^*^*^*^.min.js"></script>

Here is the code Aplos gives:

<button class="aplos-donation-button" data-widget-id="B56D325481DE46559FFA613A1E91FB90">Donate</button> <script type="text/javascript" src="https://cdn.aplos.com/widgets/donations/1.0.2/donations.min.js"></script>

Steven Parker
Steven Parker
221,451 Points

I notice that the button response code only works for buttons that are enclosed in an iframe element having an id of "aplos-donation-frame", but the HTML snippet shown here is too small to confirm that.

If you can't put the entire project in a repo or workspace, what might help is to:

  • provide a (publicly accessible) link to the original page with the working but ugly button
  • put up a publicly accessible page with your new but non-functional button

Here is the link. Both buttons will be right next to each other - the ugly one that I have to center it manually, and a pre-styled button. The Aplos customer service says that the ugly bare-bones one "can" be modified. I just don't know how.

Link for the page: https://www.gospelheritageministries.org/ghmspecialrequest/

Steven Parker
Steven Parker
221,451 Points

If you mean the "Give to GHM Projects!" button by the plain "Donate" button in the green area near the page bottom, both of those buttons open the "powered by Aplos" dialog widget for me. Maybe I'm not understanding what it is that isn't working correctly?

They do work. My question to start this conversation is how to make a custom button that would call javascript. In this case, the script of Aplos button. The ugly looking one is a barebone button that can be modified. However, I am not able to modify the button. It doesn't match the rest of the page. It doesn't look good. In order to have a potential donor click on it, it must at least look decent. The other blue button you see is a pre-styled button by Aplos. None of these can be modified or centered, etc. Now, check the link again. I added a custom ThriveTheme/Architect button that can be modified however I like. In the first place, I want to add or make it possible to call the script and so the Aplos popup when one clicks on the custom button. For that, I was told that I need to add eventlistener? No clue how to do that. So, based on what I just said, is there any way you can help? https://www.gospelheritageministries.org/ghmspecialrequest/

Steven Parker
Steven Parker
221,451 Points

See the suggestion I added to my answer.