Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Embed Web Widget(?) in Web Page

We have customers that create small intranet applications on servers we provide them. The servers also house various (windows/.net based) systems we have created.

We need to provide our customers a "one-liner" piece of code that will allow them to embed functionality into their web pages. Similar to how Google Ads works when they are embedded into a site. A slight difference is that ours will need to refresh every 5 seconds or so. We will create several of these "widgets" for them to place in their pages.

All our developement is in .Net so I would prefer options in regard, but I'm open to anything.

Early research points to IFrame, possibly with Ajax, or JavaScript, JQuery, and a webservice, or using IHttpHandler that returns HTML via "Document.Write" (like this).

Recommendations?

like image 214
MattH Avatar asked Nov 14 '22 15:11

MattH


1 Answers

Simply put, Iframes are easy because they eliminate any possible conflict with the client's web site. That's vitally important, unless you also manage the client's web site so you control the environment into which you are inserting your widget.

Otherwise, situations where you're embedding your widget code directly into the client's web site (not using an Iframe) is likely to cause a conflict with the client's HTML, CSS or Javascript. You can write your widget code so it doesn't conflict, but you generally can't depend on their web page code. All it takes is something poorly written on your client's site to cause problems with your embedded widget. CSS is the easy example.. Say your client had something silly in their stylesheet like:

div { background-color: red; }

...unless you've specified the background property using a more specific selector for all div's used in your widget, now they're red.

I think the best way to do widgets is give your clients a single external script reference that passes a client ID in the script URL. Your script starts by document.write()-ing the Iframe - that way you have future control over every aspect of your widget (including the iframe) with no changes ever necessarily on the part of your clients.

like image 98
Wick Avatar answered Dec 09 '22 21:12

Wick