Sharing some preliminary findings in this initial comment, but this spike is still ongoing. Once we have concrete findings I'd like to organize all the info in the ticket description, for now let's have this be a progress log.

As a reminder, the Wikipedia Preview integration process is currently three steps:

1. Load wikipedia-preview.js
2. Call wikipediaPreview.init( <options> )
3. Annotate articles with <span data-wikipediapreview>Cat</span> or using the hyperlink detection feature

Wix provides an editor named Velo. For the first integration step, what seems to be the straightforward way to load the JS component is using the npm Packages feature available in the Velo editor: https://support.wix.com/en/article/velo-working-with-npm-packages. The npm package needs to be accepted/approved by Wix before we can start using it though, I have already requested our npm component to be accepted [1]. Let's give it some time, I understand it should show up here eventually: https://www.wix.com/velo/npm-modules.

Another options to further explore is loading the component via:

• "Public Code Files": https://support.wix.com/en/article/velo-working-with-the-velo-sidebar#public
• Plugin? https://www.wix.com/app-market

For the second step, the Velo API provides a ways to execute JS: https://www.wix.com/velo/reference/$w/onready, https://support.wix.com/en/article/velo-working-with-the-velo-sidebar#global-site.

The third step should be doable with either the hyperlinks or span tag.

Will continue this work and keep updates up here.

[1]

The npm package needs to be accepted/approved by Wix before we can start using it though, I have already requested our npm component to be accepted [1]. Let's give it some time, I understand it should show up here eventually: https://www.wix.com/velo/npm-modules.

Twitter ping: https://twitter.com/medied/status/1375550526344024067

After trying different ideas [1], I have confirmed we can integrate Wikipedia Preview to Wix sites using the paid feature of adding custom code:

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

The link above lays out the steps pretty well: it's a feature in the dashboard's settings that allows you to add snippets of code to the actual head and body of the published site [2]. After getting a premium account and domain, I was able to add couple of script tags to load the library (using standalone unpkg) and call our wikipediaPreview.init. Check it out here: https://www.wixwikipediapreviewtest.com/. In this case I'm invoking init with detectLinks enabled [3], so editors can add hyperlinks as usual in their sites and have Wikipedia links display the preview.

There are still some things to straighten out. Do all partners need to have premium accounts? If/once our library is accepted as an npm package in the Wix platform, I don't think partners will need a premium account but we can't test that yet. To test that, we should try loading the package in the masterPage.js file in the Velo editor (think import {wikipediaPreview} from 'wikipedia-preview') and use https://www.wix.com/velo/reference/$w/onready to invoke init.

[1] Research first pointed me here: https://support.wix.com/en/article/velo-working-with-the-html-iframe-element#using-a-javascript-library. Idea being that you can add an iframe/HTML element and then place the script tags inside of that. If it sounds hacky... it's because it probably is. Ended in a dead-end street anyway because for the iframe and actual page to interact, you are to use the messaging model which relies on the postMessage API which uses the structured clone algorithm which in turn does not allow you to pass in functions or DOM elements as messages. So there wasn't much to do there. I did end up posting a question in the Velo forum: https://www.wix.com/velo/forum/community-discussion/issues-loading-a-javascript-library, but it got deleted without a notice 😑 (I guess a subtle RTFM?)

[2]

[3]

<script>
  wikipediaPreview.init({
    detectLinks: true
  });
</script>

Check it out here: https://www.wixwikipediapreviewtest.com/

This doesn't work for me. The call to wikipediaPreview.init() happens before the library is loaded so it prints the following error:

Alright so the reference error was due to leftover code within $w.onReady from previous attempts, this has been fixed now.

Thanks @hueitan for pointing out misbehavior when navigating between pages. Let's continue testing. I will also start preparing a doc page with detailed instructions on how to integrate with Wix, we can include that maybe as a wix.md in our wikipedia-preview repo

Here are the instructions we are iterating on to include in the repo: https://github.com/wikimedia/wikipedia-preview/pull/104

After further testing, we learned there's a bit more to do. I've made contact with Wix via their Velo forum [1]. Will keep this ticket parked here in code review for now

https://www.wix.com/velo/forum/coding-with-velo/bringing-wikipedia-to-wix-sites

It was confirmed through the forum post above that using the custom code feature in Velo for our needs isn't possible because of technical reasons, unfortunately. If we wanted to go through, it looks like we would have to develop a solution suited for Wix App Market: https://www.wix.com/app-market. I have done a basic documentation review and the process seems to be similar to what we've seen with Wordpress, though more exploration is needed. Moving this ticket to the backlog until we decide as a team what makes sense from this point.

Some useful references regarding Wix App Market development:

https://devforum.wix.com/en/article/wix-for-developers
https://devforum.wix.com/en/article/about-the-app-launch-process
https://devforum.wix.com/en/article/plan-your-app
https://devforum.wix.com/en/article/app-market-guidelines
https://devforum.wix.com/en/article/about-app-components
https://devforum.wix.com/en/article/set-up-an-embedded-script-component
https://dev.wix.com/api/rest/tutorials