Successfully embed 3rd party widget code on Wix

  • Tình trạng: Closed
  • Giải thưởng: $1500
  • Các bài thi đã nhận: 2
  • Người chiến thắng: benipuri

Tóm tắt cuộc thi

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.

Các kĩ năng yêu cầu

Phản hồi của người thuê

“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).”

Hình ảnh hồ sơ PPass, United States.

Những bài dự thi tốt nhất dự cuộc thi này

Xem thêm bài dự thi

Bảng thông báo công khai

  • usmancodes
    usmancodes
    • cách đây 1 tháng

    please checkout my #26

    • cách đây 1 tháng
  • mdraselsarker17
    mdraselsarker17
    • cách đây 1 tháng

    #guaranteed

    • cách đây 1 tháng
  • techxp23
    techxp23
    • cách đây 1 tháng

    Hello Sir, Please check my entry............................................................................... #8 ✅

    • cách đây 1 tháng
  • techxp23
    techxp23
    • cách đây 1 tháng

    Hello Sir, Please check my entry............................................................................... #8 ✅

    • cách đây 1 tháng
  • techxp23
    techxp23
    • cách đây 1 tháng

    Hello Sir, Please check my entry............................................................................... #8 ✅

    • cách đây 1 tháng
  • techdevelop5685
    techdevelop5685
    • cách đây 1 tháng

    #guaranteed please

    • cách đây 1 tháng
  • irvanmoses10
    irvanmoses10
    • cách đây 1 tháng

    do you guarantee $1500?

    • cách đây 1 tháng
  • huzaifa959
    huzaifa959
    • cách đây 1 tháng

    Dear Contest Holder, I want to discuss about the project. So please inbox me.

    • cách đây 1 tháng
  • shahoriarkhondo1
    shahoriarkhondo1
    • cách đây 1 tháng

    #guaranteed please

    • cách đây 1 tháng

Xem thêm bình luận

Làm thế nào để bắt đầu với cuộc thi

  • Đăng cuộc thi của bạn

    Đăng cuộc thi của bạn Nhanh chóng và dễ dàng

  • Nhận được vô số bài dự thi

    Nhận được vô số Bài dự thi Từ khắp nơi trên thế giới

  • Trao giải cho bài thi xuất sắc nhất

    Trao giải cho bài thi xuất sắc nhất Download File - Đơn giản!

Đăng cuộc thi ngay hoặc tham gia với chúng tôi ngay hôm nay!