Embedding a widget to a page I have the following code that our users will use to embed a widget on their page:

var ttp_number = "1Z123489754897";
var ttp_key = "1234567890123457890123";
var ttp_width = 850;
var ttp_height = 650;
var ttp_m_width = 260;
var ttp_m_height = 200;

(function(){
    document.write('&lt;div id="ttp"&gt;&lt;/div&gt;');
    s=document.createElement('script');
    s.type="text/javascript";
    s.src="//example.com/embed.js";
    setTimeout("document.getElementById('ttp').appendChild(s);",1);
})();


Is there a way to reorganize or make this more compact (other than minifying)?

Right now the big list of variables feels inefficient just declaring them one at a time, but I'm not sure what the alternate would be.

NOTE: I need to keep the script as compact as possible as the people who are copy/pasting this code many times know very little (if any) javascript, so if they some massive block of code, they'll freak out or stand a bigger chance of screwing it up.
Don't make your code more compact, it's a futile exercise. Use a minifier or even a compiler/optimizer. Your source code should be as readable as possible
document.write is evil, don't use it.


Here's how I would write it:

var tpp = {
    number: "1Z123489754897",
    key: "1234567890123457890123",
    width: 850,
    height: 200,
    "m width": 260,
    "m height": 200
};

function init(settings) {
    var div, script;
    div = document.createElement("div");
    div.id = "ttp";
    document.body.appendChild(div);
    script = document.createElement("script");
    script.src = "//example.com/embed.js";
    script.type = "text/javascript";
    document.body.appendChild(script);
}

window.attachEvent("load", function() {
    init(tpp);
});
/* or */
window.addEventListener("load", function() {
    init(tpp);
});



Adding the event listener on window.load avoids having to do the setTimeout later on.
Also, when doing a setTimeout, don't use the eval variant, use an anonymous function:




setTimeout(function () {
    document.getElementById('ttp').appendChild(s);
}, 1);