Hi Alex,

I assume you already downloaded the standard browser print version for your PC. If you did that, so you will be able to find the folder with the sample code on the following address:

C:\Program Files (x86)\ZebraBrowserPrint\ZebraBrowserPrintDocsWebCodeExamples
Then you open sample folder and JS folder, and open the the javascript file called DevDemo.js. In that file, you will be able to modify the structure of the data you want to send and print. On top of the file you will see a var called start, another called end. This is the format for ZPL printing, you can go to this link to learn more how to use ZPL with Zebra printers.

var available_printers = null;
var selected_category = null;
var default_printer = null;
var selected_printer = null;
var format_start = "^XA^LL200^FO80,50^A0N36,36^FD";
var format_end = "^FS^XZ";
var default_mode = true;

With the function below, you are able to modify the variables and the data sent to the printer.

function sendData()
{
showLoading("Printing...");
checkPrinterStatus( function (text){
if (text == "Ready to Print")
{
selected_printer.send(format_start + $('#entered_name').val() + format_end, printComplete, printerError);
}
else
{
printerError(text);
}
});
};

What you should do now is to modify the following elements of the code above:

1.) You can leave the variables below empty or remove them, it is up to you:
Start=””
End=””

Then this is a sample code that you would need to put on the text_field:

^XA
^MMT
^PW479
^LL0406
^LS0
^FT310,315^A0I,28,28^FH\^FDOne Line^FS
^FT291,269^A0I,28,28^FH\^FDSecond Line^FS
^FT326,219^A0I,28,28^FH\^FDThird Line^FS
^FT302,167^A0I,28,28^FH\^FDFour Line^FS
^FT273,118^A0I,28,28^FH\^FDFifth Line1^FS
^PQ1,0,1,Y^XZ

You can play with JavaScript or with HTML to mask the ZPL code, and leave the portions that you want the user writes on the text_fields.

Please, notice that you are able to set up the x,y position of your texts on the label.

I encourage to use our designing label tool. You can download the ZebraDesigner from the link below, then, you can create on the fly a label and modify the position of the label’s pieces.

https://www.zebra.com/us/en/products/software/barcode-printers/zebralin…

Once you have finished your ZPL label design, ZebraDesigner will generate a txt file with the ZPL code that you would need to add to his web app.

Thanks,

MC