Embed an Encrypted Web Application into Wix

How to use GitHub pages to host an HTTPS website and embed into Wix

As a bespoke data visualization firm, Graphicacy frequently get requests to build out a single data visualization component for a website that the client will embed via <iframe/> into their existing site. About 95% of the time, after building the data visualization component, we use a GitHub Action on merge to deploy the build files of the site to a static website on AWS S3. We can then hand off that url for the client to embed into their site.

On a recent project, a client came to us with a rare request to embed the visualization into a Wix website. We went through our traditional process of building the visualization component with React.js, Mapbox, and D3.js and deploying to a static website on AWS S3, but when we went to embed the website as an <iframe/> Wix required that the embedded site be HTTPS.

We Googled to find options for how to get the AWS S3 site to play nice with HTTPS, but we couldn’t find a straightforward method that didn’t require us to register a new domain and work through a few DNS configurations. We had an internal meeting and discussed several options and eventually the conversation led to GitHub Pages.

After a few minutes of setting up the gh-pages branch within the repository and dropping our static files in there, we had a working HTTPS url for an easy embed into Wix. Voila! It just worked! We took it one step further and found an easy to configure custom GitHub Action to help remove the manual intervention of this process for future changes and now all of our changes are going right into an encrypted website.

Christopher Lanoue is a Data Visualization Engineer and Director of Engineering and Innovation at Graphicacy with a focus on designing and building innovative and creative solutions for clients all over the world.