Using a Convio Progress Meter on another website

Eileen Lambert

Does anyone know of a way to publish a progress meter (thermometer) on a site outside of Convio? We use Convio for our web site and donations, but our fundraisers often have their own sites. Since the thermometer ticks upwards upon each donation on a Convio donation page, is there a way to build a URL string that will pull the newest "total raised" and revise the thermometer upon page refresh for the page outside Convio? Thanks in advance.

Noah Cooper

Eileen,

 

You can do this with a little bit of JavaScript!

 

Here's how -- create a PageBuilder page, and call it thermometerScript. Insert the following in the content of the page, making sure the WYSIWYG editor is disabled:

 

[[U8:application/javascript]]
(function(){
        document.getElementById('[[S334:elementId]]').innerHTML='[[T6:[[E337:donations_campaign:[[S334:campaignId]]:0:0:[[S334:goalAmount]]:[[S334rogressImageId]]:#000000]]]]';
})();

 

Then on the external site, add the following wherever you want the thermometer to appear, replacing "www.yourdomain.com" with your Convio Online Marketing domain name, and set the variables I've highlighted in bold (campaignId, goalAmount, and progressImageId). Be sure to remove the line break after pgwrap=n.  

 

<div id="thermometerContainer"></div>
<script type="text/javascript" src="http://www.yourdomain.com/site/PageServer?pagename=thermometerScript&pgwrap=n
&elementId=thermometerContainer&campaignId=1234&goalAmount=100000&progressImageId=1"></script>

 

That should do it!

Robin Bram

Noah Cooper:

Eileen,

 

You can do this with a little bit of JavaScript!

 

Here's how -- create a PageBuilder page, and call it thermometerScript. Insert the following in the content of the page, making sure the WYSIWYG editor is disabled:

 

[[U8:application/javascript]]
(function(){
        document.getElementById('[[S334:elementId]]').innerHTML='[[T6:[[E337:donations_campaign:[[S334:campaignId]]:0:0:[[S334:goalAmount]]:[[S334rogressImageId]]:#000000]]]]';
})();

 

Then on the external site, add the following wherever you want the thermometer to appear, replacing "www.yourdomain.com" with your Convio Online Marketing domain name, and set the variables I've highlighted in bold (campaignId, goalAmount, and progressImageId). Be sure to remove the line break after pgwrap=n.  

 

<div id="thermometerContainer"></div>
<script type="text/javascript" src="http://www.yourdomain.com/site/PageServer?pagename=thermometerScript&pgwrap=n
&elementId=thermometerContainer&campaignId=1234&goalAmount=100000&progressImageId=1"></script>

 

That should do it!

is there a way to do this using APIs?

Maria Larcher

Noah Cooper:

Eileen,

 

You can do this with a little bit of JavaScript!

 

Here's how -- create a PageBuilder page, and call it thermometerScript. Insert the following in the content of the page, making sure the WYSIWYG editor is disabled:

 

[[U8:application/javascript]]
(function(){
        document.getElementById('[[S334:elementId]]').innerHTML='[[T6:[[E337:donations_campaign:[[S334:campaignId]]:0:0:[[S334:goalAmount]]:[[S334rogressImageId]]:#000000]]]]';
})();

 

Then on the external site, add the following wherever you want the thermometer to appear, replacing "www.yourdomain.com" with your Convio Online Marketing domain name, and set the variables I've highlighted in bold (campaignId, goalAmount, and progressImageId). Be sure to remove the line break after pgwrap=n.  

 

<div id="thermometerContainer"></div>
<script type="text/javascript" src="http://www.yourdomain.com/site/PageServer?pagename=thermometerScript&pgwrap=n
&elementId=thermometerContainer&campaignId=1234&goalAmount=100000&progressImageId=1"></script>

 

That should do it!

[Note: I've edited this reply, so the topic "conversation" makes sense to future readers.]

 

Hi Noah,

 

I've just tried your "very cool" solution and the thermometer isn't displaying on my non-Convio, external webpage - clearly I have misinterpreted your instructions.

 

 

Using your instructions, I created an "active" PageBuilder page:

http://dhr.convio.net/site/PageNavigator/thermometerScript.html

 

"thermometerScript" HAD the following content (which turns out to be the "corrupted" script):

]

(function(){

     document.getElementById(']').innerHTML=']:0:0​:]:]:#000000]]]]';

})();

 

 

Then, the html I used on our external site had the structure you described further down on this page.

 

Any ideas - I can't wait to put a thermometer on our "real" donation page, somewhere!

 

Maria

Noah Cooper

Maria Larcher:

[Note: I've edited this reply, so the topic "conversation" makes sense to future readers.]

 

Hi Noah,

 

I've just tried your "very cool" solution and the thermometer isn't displaying on my non-Convio, external webpage - clearly I have misinterpreted your instructions.

 

 

Using your instructions, I created an "active" PageBuilder page:

http://dhr.convio.net/site/PageNavigator/thermometerScript.html

 

"thermometerScript" HAD the following content (which turns out to be the "corrupted" script):

]

(function(){

     document.getElementById(']').innerHTML=']:0:0​:]:]:#000000]]]]';

})();

 

 

Then, the html I used on our external site had the structure you described further down on this page.

 

Any ideas - I can't wait to put a thermometer on our "real" donation page, somewhere!

 

Maria

Maria,



My code above was corrupted when Convio recently migrated from another community platform. I've corrected the code. Can you try updating the code on your site?

Maria Larcher

Noah Cooper:

Maria,



My code above was corrupted when Convio recently migrated from another community platform. I've corrected the code. Can you try updating the code on your site?

Hi Noah (and April in Convio Support),

 

Thank you!!!

 

A summary for other folks who see this discussion:

 

1. Very, very important to turn OFF the WYSIWYG in via your Administrator Preferences.

 

2. Noah's code worked (of course!) - I created a PageBuilder page called "thermometerScript"  - scroll down to see it:

 

3. The html I used on our external site had the structure also described by Noah further down on this page.

 

 

So, last question, now that this is working, do I always use that same "thermometerScript" PageBuilder page and all I need to do is copy&paste the html for the external site, updating the 3 variables (campaignId, goalAmount, and progressImageId), as appropriate?

 

Thanks again!

Maria 

Noah Cooper

Maria Larcher:

Hi Noah (and April in Convio Support),

 

Thank you!!!

 

A summary for other folks who see this discussion:

 

1. Very, very important to turn OFF the WYSIWYG in via your Administrator Preferences.

 

2. Noah's code worked (of course!) - I created a PageBuilder page called "thermometerScript"  - scroll down to see it:

 

3. The html I used on our external site had the structure also described by Noah further down on this page.

 

 

So, last question, now that this is working, do I always use that same "thermometerScript" PageBuilder page and all I need to do is copy&paste the html for the external site, updating the 3 variables (campaignId, goalAmount, and progressImageId), as appropriate?

 

Thanks again!

Maria 

I'm not sure why my code was getting truncated with an ellipsis. I've updated the code above to prevent that from happening by adding a line break. Try one more time.  

Ken Bess

Noah Cooper:

Eileen,

 

You can do this with a little bit of JavaScript!

 

Here's how -- create a PageBuilder page, and call it thermometerScript. Insert the following in the content of the page, making sure the WYSIWYG editor is disabled:

 

[[U8:application/javascript]]
(function(){
        document.getElementById('[[S334:elementId]]').innerHTML='[[T6:[[E337:donations_campaign:[[S334:campaignId]]:0:0:[[S334:goalAmount]]:[[S334rogressImageId]]:#000000]]]]';
})();

 

Then on the external site, add the following wherever you want the thermometer to appear, replacing "www.yourdomain.com" with your Convio Online Marketing domain name, and set the variables I've highlighted in bold (campaignId, goalAmount, and progressImageId). Be sure to remove the line break after pgwrap=n.  

 

<div id="thermometerContainer"></div>
<script type="text/javascript" src="http://www.yourdomain.com/site/PageServer?pagename=thermometerScript&pgwrap=n
&elementId=thermometerContainer&campaignId=1234&goalAmount=100000&progressImageId=1"></script>

 

That should do it!

Noah -

 

This works great and I will be using it for sure in the future! One question: How do I find the progressImageId value for custom progress bars?  I can access all of the built in ones but can't find the right one for our unique ones.

 

Thanks,

Ken

Noah Cooper

Ken Bess:

Noah -

 

This works great and I will be using it for sure in the future! One question: How do I find the progressImageId value for custom progress bars?  I can access all of the built in ones but can't find the right one for our unique ones.

 

Thanks,

Ken

Ken,

 

If you edit your Progress Meter on the admin side, you'll see an argument in the URL, progress_id. That's what you need!

Ali Burke 2

I know this is an old post, but I was hoping someone could chime in and help me with a few questions



I've got everything working great, but I can't seem to increase the size of the thermometer :$ I uploaded longer gifs to attempt to stretch the length, but when it displays, it still looks short.



Secondly, the ProgressImageId number...where is that listed? I literally had to use trial and error to find the number since I don't see it listed anywhere...Thankfully, it was #3 so I didn't waste too much time



<script type="text/javascript" src="http://srhcf.convio.net/site/PageServer?pagename=EXT_reus_TeamRaiser_Thermometer&pgwrap=n&elementId=thermometerContainer&campaignId=1181&goalAmount=250000&ProgressImageId=3"></script>



Any tips?

 

Daniel Hartanto

Hi Ali,



Looks like the thermometer is an image file which gets uploaded from your backend Convio Admin panel  (Constituent 360 > Social Media > Progress Meters).  Image upload through there usually have size, dimension, and extension restriction -- which could be your case as you stated you uploaded longer gifs (but looks like it only take jpg at moment)



With that said, if you are sticking on that route, one way to resize the image would be to add the inline css on the <img> portion of your javascript  (i.e. style="width:450px"), on yours it should be something like this

<img src=\\"http://srhcf.convio.net/site/DynImg/progress.jpg?pi=3&percent=0\\&quot; style=\\"width:450px\\" alt=\\"Progress: 0%\\" />

p.s. do feel free to change the value of the width, esp. if you are talking about responsive image, you might want to put percentage, and on top of that, add another property of max-width and height:auto





As for the ProgressImageId, every time you create a progress meter from the above location, if you hover / mouse over on the "Copy" link under the "Actions" column from the listing of the created meters, you'll see the ID being listed there (&progress_id=x) -- that same value is what you'll see on your parameter &pi=x





ADD ON EDIT:  on mouse over / hover -- you might want to enable "status bar" on your browser setting so the URL of that link when you hover will show up at the bottom left of your browser



regards,

Daniel

Daniel Hartanto

Alternatively, just in case -- here's the official how to

  Resizing Widget Progress Meter

Ali Burke 2

Much thanks Daniel! You are literally a Luminate Online guru!  Much respect and many thanks! Tell me how you've learned so much.

 

Daniel Hartanto

Thanks Ali !  



I am really far from being one but more of like rest of folks here still learning about the system as well. Nevertheless, the fun thing is always trying to see how we could push it to the limit / find workaround with all of us being aware of the limitations of the product to begin with.



With that said, the forum / community here has been one of the most useful place for me to learn / discover more about CLO -- learn a lot myself  through participating in the discussions, seeing other's ideas and often times or not those very things / ideas that initially might not be applicable to me at the time do come back at later time and by that time we would recall something like hey I think I remember there is such and such discussion that some of the idea(s) there could be applicable to the new tasks I am embarking to do.



Thus, you'll be there too Ali



regards,

Daniel