Using a Convio Progress Meter on another website

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 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,



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:

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