Successfully embed 3rd party widget code on Wix

Status: Closed
Prize: $1500
Entries Received: 2
Winner: benipuri

Winner

Contest Brief

The contest is to see who can embed the attached 3rd party widget code on a Wix website without using the built-in embed HTML/Code feature since it simply puts the widget in an iFrame. The widget code needs to be able to load properly without being in an iFrame, be fully functional, and work as intended. I've included a .html file so you can see how it should work. If you win, you need to be able to demonstrate how you did it so we can offer this solution to other people that use Wix.

#### OPTIONAL DETAILS IF YOU WANT TO KNOW MORE #####

** THE PROBLEM **
We have a website that provides clients widget code that allows them to embed a shopping cart and checkout system on their website. On most sites, it's very simple to just coy and paste the widget code we provide and everything works great. With Wix, when you use the Embed HTML feature, it puts the code into an iframe which destroying the user experience of the widget. We've fought with Wix trying to find a way to embed the code so it loads properly. The main issue we've found is that we require access to DOM which isn't allowed directly with Wix.

** OUR CURRENT SOLUTION **
We were able to find a work around that allowed us to load the widget code properly by adding a "box" element into their page, grabbing the tag ID of this box on the page, then using custom site code that injects our javascript and associated custom div tags dynamically after the page has loaded This works and the widget loads and functions properly. However, it only works when you go directly to the page with the widget on it. If you navigate to the page by clicking links through their site, it will not load. From what I understand, the problem is related to the way Wix loads as it's technically a single page, or at least it's something like that so the code we have to inject our custom javascript and div tags only works the first time the website loads is the page with the "box" element that we are using to dynamically replace with our code. I searched around and found a company that has instructions on how to fully embed their widget to a wix site and it uses custom elements. I was unable to get it to work properly for us.

** SAMPLE WIDGET CODE **
I've attached an HTML file which you can open on your computer to see how the widget should work (loads full screen over the whole site). I've also attached a .txt file with the code to add to a Wix site using the "Embed HTML" feature so you can see for yourself how Wix breaks the UX by putting it in an iframe.

** REFERENCE INSTRUCTIONS ON OUR CURRENT SOLUTION **
Here is a link to the site where we got instructions on how to dynamically inject our custom code while giving us full DOM access. This is the current solution we have implemented but as mentioned, it still has the problem where the widget only loads when you go directly to the website in a new window and not when you navigate to the page from within the Wix site.
https://help.elfsight.com/article/1118-how-to-install-a-widget-on-wix-avoiding-iframe

** REFERENCE INSTRUCTIONS FROM SITE USING CUSTOM ELEMENTS **
Here is a link to that site I was referring to that has a simple solution for embedding their widget on a Wix site using custom elements: https://help.givebutter.com/en/articles/6464972-how-to-use-givebutter-widgets-on-a-wix-website
One thing I noticed about this solution is that it triggers on a button click. For us we need it to automatically run when the site loads so not sure if that will work or not with this custom element solution.

Recommended Skills

Winner

Post a Contest Like This

Employer Feedback

“Absolutely outstanding work! Extremely attentive and has a strong desire to not just complete the task, but complete it as well as it can possibly be done. He made several suggestions and proposed new ideas I didn't think of to help produce the best outcome possible. Usually people on Freelancer are quick to just finish a task and move on but Rajan wanted to be sure everything was done right. It's refreshing and his skill, experience, and perseverance to solving every problem that came his way makes him one of the best freelancers I've worked with so far in my last 20+ years on this site (Back before when it was scriptlance).”

PPass, United States.

Top entries from this contest

mailtozeeshan1 Pakistan

0

Public Clarification Board

usmancodes
- 2 months ago
please checkout my #26
- 2 months ago
mdraselsarker17
- 2 months ago
#guaranteed
- 2 months ago
techxp23
- 2 months ago
Hello Sir, Please check my entry............................................................................... #8 ✅
- 2 months ago
techxp23
- 2 months ago
Hello Sir, Please check my entry............................................................................... #8 ✅
- 2 months ago
techxp23
- 2 months ago
Hello Sir, Please check my entry............................................................................... #8 ✅
- 2 months ago
techdevelop5685
- 2 months ago
#guaranteed please
- 2 months ago
irvanmoses10
- 2 months ago
do you guarantee $1500?
- 2 months ago
huzaifa959
- 2 months ago
Dear Contest Holder, I want to discuss about the project. So please inbox me.
- 2 months ago
shahoriarkhondo1
- 2 months ago
#guaranteed please
- 2 months ago