Trouble passing secrets to custom html

Anvil Q&A
1

I’ve found an interesting API used to monetize traffic to your website with interactive surveys called, Pollfish.

I can get it to work by hardcoding the api key, but when bring it in as suggested bythis forum post it does not work.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>   
  var pollfishConfig = {
    api_key: '',
    indicator_position: "BOTTOM_RIGHT",
    debug: true
  	};
  </script>
<script>
  function init_poll(api_key) {
    pollfishConfig.api_key = api_key;
    return pollfishConfig
  };
    
  function get_pollfishConfig(){
    return pollfishConfig;
  }; 

</script>

<script src="https://storage.googleapis.com/pollfish_production/sdk/webplugin/pollfish.min.js"></script>

It feels like the pollfish api only recognizes the config variable when it is manually set. Is there something obvious that I am not realizing?

Here is my app if that helps:
https://anvil.works/build#clone:J7QO56A7FCZWFMK3=Z4X7RKCWQEBK2JJUBBPUGGFL

2

The app works for me, ie it fetches the API key from the secret and appears to pass it correctly to the javascript function (which in turn stores it in “pfc”)

Am I missing something?

3

My guess would be that the pollfish API loads before the Anvil app has processed its show event, and expects those config variables to be immediately available. In your shoes I would just hard code the key – it’s not a secret (it’s available to everyone who visits your app), so there’s no sense making it complicated.

I would recommend removing the jQuery include (first line) – Anvil already includes jQuery, and you can come to grief by overwriting it with an incompatible version.

4

Does the pink circle button appear at bottom corner for you?

5

No, just a material button labelled “BUTTON_1”

6

Oh so in this case the api key is exposed to the user anyways so it doesn’t matter if I bring it in with code or otherwise? Thank you, I will just hardcore it and call it at that.

7

As an aside: You can put JavaScript imports in Native Libraries

image

Anything you write here will go into the <head> of your app’s page.

image
image.png925×348 27.4 KB

Here’s your app with Pollfish imported that way (and I’ve removed the JQuery import since it’s automatically imported):

https://anvil.works/build#clone:5XMRJI33BIQDF2TX=NY4VVZMMB4U5NZBFLGETBVOU

8

Thank you Shaun this will come in handy.