Hello, I work with the Wikimedia Foundation and we’re figuring out how to allow Wix sites to use our Wikipedia Preview library: https://github.com/wikimedia/wikipedia-preview . It’s a light JS component that brings Wikipedia to a Wix site in the form of an article preview popup. It looks like this:
In order to integrate Wikipedia Preview, the library (wikipediaPreview) must be first loaded and then initiated (via its wikipediaPreview.initmethod). The init method goes through the DOM looking for the appropriate selector (in this case, any hyperlink to a Wikipedia article). I am using https://www.wixwikipediapreviewtest.com as the testing site, you can use that to follow along.
As a premium Wix user, I can use the custom code feature to add a couple of scripts to load the library in the HTML head [1], for example, and then execute theinit in the body end [2]. This works great for any text in the home page, but it’s inconsistent for blog post pages. The issue we are trying to resolve is how to allow the previews to show up in post pages consistently . That is, when a user goes to a post page from the home page as well as when a user goes from one post page to another post page.
I have tried the following approaches:
- Started with a simple script to
initdirectly at the body end [2] - In order to react to the dynamic behavior of the site, I tried triggering a
postMessagewithin the$w.onReadyhandler [3] (both in masterPage.js and Post) and then I receive that message successfully from within the script and executeinitthen [4]. From the logs I can see the message and a truthywikipediaPreviewobject, but executing itsinithas no effect. It only works after a hard refresh [5]. - I tried using the
[wixLocation.onChange](https://www.wix.com/velo/reference/wix-location/onchange)handler [3] as well to address a change from one post page to another, following the same logic of posting a message and having the script receive it toinit. I see the same behavior. - The
wikipediaPreviewlibrary itself is not accessible through the Velo editor. We submitted a request to have our Wikipedia Preview npm package as part of the packages allowed in Velo , but the request was rejected
Is Wix flexible enough to allow for the consistent behavior we need? I understand Wix is strict on allowing interactions with the DOM . Are we on the right path or should we be looking to submit an app in the WixAppMarket instead?
Thank you in advance for any pointers.
[1]
<script id="wikipediaPreview" src="https://unpkg.com/wikipedia-preview@latest/dist/wikipedia-preview.production.js"></script>
[2]
<script>
wikipediaPreview.init({
detectLinks: true
});
</script>
[3]
// import {local} from 'wix-storage';
import wixWindow from 'wix-window';
import wixLocation from 'wix-location';
$w.onReady(function () {
console.log('Post - $w.onReady...')
wixWindow.postMessage('post-ready');
});
wixLocation.onChange( (location) => {
let newPath = location.path;
console.log('wixLocation onChange - newPath...', newPath)
wixWindow.postMessage('post-ready');
} );
[4]
<script>
window.addEventListener("message", event => {
let message = event.data;
console.log('DEBUG - message listener...', message);
console.log('DEBUG - message listener - wikipediaPreview...', wikipediaPreview);
wikipediaPreview.init({
detectLinks: true
});
} );
</script>
[5] With this error:
Error: getPublicAPI() of 14cc59bc-f0b7-15b8-e1c7-xxxxxxxxx failed. The app does not exist on site.
