Docs for deployment to Wix

[osdiab]

A lot of nonprofits use Wix, one wants to implement it now - make it easy to deploy to Wix and document it well, for now README is fine

[osdiab]

i just started looking into this as well. looks like you can add a script tag via the tracking and analytics feature on wix; doing it with a custom HTML box doesn't work. the other way is that you can add script tags to an iframe and create your own html button there, but if you do that you can't use the builtin wix buttons since iframe would be sandboxed from the rest of the page, which would proably confuse people.

https://support.wix.com/en/article/embedding-custom-code-to-your-site

to use that, you need to upgrade to a paid wix plan, so we should probably buy one to give it a shot. which is annoying! maybe it's not a good assumption to assume that all nonprofits will be paying for wix tho...

[osdiab]

this is high in pri for me since i'll be talking with a nonprofit in two days to set their wix page up with the donate button, but still haven't gotten it to load our script!

[osdiab]

i'll do a 14 day trial to figure it out :)

[osdiab]

OK, so the script is loading, but it seems that element ids are actually special wix IDs and not real HTML ids, and while you can get a hold of their real IDs, it happens in some weird service worker context so you don't have access to the actual library. wtf is going on lol

[osdiab]

in the future we can also distribute via npm and have it be approved by the wix team, but since i'm talking to the nonprofit very soon, I will continue with getting this to work using a script tag, need to better understand wix's system though.

[osdiab]

i think i have a hack to make this work, by making the donate button a link and then initializing the donate button on all links that go to that href; but gotta wait on the domain to be verified by wix, which might take up to 48 hours (they refuse to run custom code except for on prod on your published domain)... until then no idea if this works.

it seems the right way to do this is to make an npm package, and get it approved by Wix; i'm worried about actually being able to make this work before meeting with the nonprofit, if it doesn't work early tomorrow i feel like i should postpone the call (cc @markulrich )

[markulrich]

A script that automatically turns Every.org links into donate buttons would be extra awesome because then if script does not get included correctly for some reason, things will still work!

[jake-nz]

I should have added my notes here but I was waiting for my test domain to be verified first!
I've found basically the same thing as @osdiab but my strategy was to add an onClick handler to the Wix button which calls everyMonthWidget.show

I too like the idea of enhancing every.org links. See my comment here: #50 (comment)

[osdiab]

i got it to work! custom domain, using normal script tag method. but you need a custom domain/paid subscription.

[osdiab]

edowix.omardiab.com , see the script tag at the bottom.

You can't do it in that Wix Velo code editor, it runs in a sandbox and doesn't have access to the global scope. You have to do it all in the custom code section unfortunately; it might have a chance that the button loads after the script though, not sure how Wix works internally, made sure to async/defer the script as well to try to make that unlikely.

[osdiab]

I'll make a video showing how this works later, and we should also up in priority #48 so that we can just do it that way, which seems much cleaner.

[osdiab]

my custom code (donate-button url can be shortened with #58 ):

<script async defer id="donateButtonScript" src="https://assets.every.org/donate-button/omartest/donate-button.js"></script>
<script>
  console.log("donate script!");
  document.getElementById("donateButtonScript").addEventListener("load", function() {
  const selector = "a[href='https://www.every.org/maps/donate']"
  const btns = document.querySelectorAll(selector);
  everyMonthWidget.showOnClick(selector);
  for (var i = 0; i < btns.length; ++i) {
    console.log("!!!!", i, btns[i])
    btns[i].addEventListener("click", function(e) {
      e.preventDefault();
    });
  }

});
</script>

[jake-nz]

Nice!
My domain just got verified and I can confirm that it doesn't work - no access to global scope :(

[osdiab]

OK, I now know how we can do this, so I'll write up a doc in the repo wiki and link it from the README!

[osdiab]

before we make a self-serve doc I think we should first make the configuration less finnicky: #63 #62 amongst other things

[osdiab]

Basically this is the embed I did though:

View the embed

<script async defer id="donateButtonScript" src="https://assets.every.org/dist/donate-button/0.2/index.js"></script>

<script>
document.querySelector('#donateButtonScript').addEventListener('load', () => {
	var selector =
		"a[href='https://www.every.org/noblestrengthfoundation/donate']";
	var btns = document.querySelectorAll(selector);
	everyMonthWidget.setOptions({
		monthly: {
			levels: [
				{amount: '25'},
				{amount: '50'},
				{amount: '100'},
				{amount: '500'},
				{amount: 'custom'}
			]
		},
		oneTime: {
			levels: [10, 20, 30, 50, 100, 200],
			allowCustom: true
		},
		onSubmit: {
			charity: 'noblestrengthfoundation',
			params: {share_info: 1, no_exit: 1}
		},
		i18n: {
			en: {
				company: {
					logo:
						'https://res.cloudinary.com/everydotorg/image/upload/v1612307963/agetoage_zndtzz.png',
					name: 'Noble Strength Foundation',
					location: 'Cary, North Carolina'
				},
				monthly: {
					logo: {
						header: 'Support Age to Age Monthly',
						text: 'on <link>every.org</link>',
						link: 'https://every.org'
					},
					header: 'Connecting elderly loved ones',
					info:
						'Monthly gifts help us focus on our mission and long-term impact',
					levels: [
						{amount: '25'},
						{amount: '50'},
						{amount: '100'},
						{amount: '500'}
					],
					custom: {label: 'Custom', placeholder: 'Enter amount'},
					button: 'Donate {{amount}} every month',
					switch: 'Or make a <action>One Time Donation</action>'
				},
				oneTime: {
					logo: {
						header: 'One time donation',
						text: 'on <link>every.org</link>',
						link: 'https://every.org'
					},
					name: 'One time donation',
					header: 'Connecting elderly loved ones',
					info: 'Thank you for supporting our mission!',
					custom: {placeholder: 'Enter custom amount'},
					button: 'Donate {{amount}}',
					switch: 'Or make a <action>Monthly donation</action>'
				},
				footer:
					'You will be redirected to a secure page on Every.org to complete your donation in support of the Noble Strength Foundation.'
			}
		}
	});
	for (var i = 0; i < btns.length; ++i) {
		btns[i].addEventListener('click', (e) => {
			e.preventDefault();
			everyMonthWidget.show();
		});
	}
});
</script>

[osdiab]

https://github.com/everydotorg/donate-button/wiki/Deploy-to-Wix