Good Day,
I would like to add a mockup generator on my company website. The team thought it would be a great way to get visitors to interact with the website. Unfortunately, we do not have much experience with coding. Is there an app we can use to get this functionality for our website? If not, is there someone we can consult to help us add this functionality, through coding or any other means?
You mean something like people can submit their own details and get a image of the “customised” content?
You can post a request on Wix Marketplace to find a Velo Developers.
Yes, exactly.
Thanks. I will have a look.
hey! I’m looking for the same feature, did you find a solution?
Hi Komal. Still no luck finding help on that. I will try reposting on the marketplace.
Hi @sandxaba ,
Can you give some more information of what you are trying to do? 
Kind regards,
kristof.
Hi Kristof
We want the same thing. We have bottles and want to add the picture, wich our customer uploads, on this bottle.
Hi,
Did anything ever pan out with this?
To solve this issue you will need either a —> HTML-COMPONENT or a → CUSTOM-ELEMENT.
How do I get that?
Type into the SEARCH → “HTML component” and see which results you get.
https://www.wix.com/velo/forum/search/html-component
Do the same for → CUSTOM-ELEMENT.
If you are not familiar with HTML, JS and CSS, your task will be very hard and you will have to invest a lot of time to resolve your issue.
First try to use the HTML-COMPONENT, i think it will be the more easy way to go.
I see some comments about adding a mock up generator to wix websites.I have contacted the Wix Support Desk and the only thing so far looks like to connect to POD companies is an option.Or contact velo with a request. For me that would not work.I am almost sure that more Wix customers are looking for something like this .And yes, I would like to see an independent mock up generator app in the Wix web store …not connected to a pod company.
What is a POD-company ?
Hi. Pod is a print on demand company…
Like already mentioned in one of my posts… → generate your own function, by using a CUSTOM-ELEMENT or HTML-Component.
Let’s generate a 3-D-object on canvas …
<head>
<title>
<</title>
<style>
#myCanvas {
disply: block;
margin: 0 auto;
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="600" height="480">
</canvas>
<script>
var width = 600,
height = 480;
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Camera
var Gx = 0,
Gy = 0,
Gz = 0,
RotX = 0,
RotY = 0,
RotZ = 0,
Cx = 0,
Cy = 0,
Cz = 5,
f = 0.1,
Px = 0.06,
Py = 0.048,
offsetX = width / 2,
offsetY = height / 2,
skew = 0,
offset = [],
N = [],
P = [],
C = [],
Rx = [],
Ry = [],
Rz = [],
G = [];
var pix = 12;
// 3D DATA
var verts =
[
[
[ -1 ],
[ -1 ],
[ -1 ],
[ 1 ]
],
[
[ 1 ],
[ -1 ],
[ -1 ],
[ 1 ]
],
[
[ -1 ],
[ 1 ],
[ -1 ],
[ 1 ]
],
[
[ 1 ],
[ 1 ],
[ -1 ],
[ 1 ]
],
[
[ -1 ],
[ -1 ],
[ 1 ],
[ 1 ]
],
[
[ 1 ],
[ -1 ],
[ 1 ],
[ 1 ]
],
[
[ -1 ],
[ 1 ],
[ 1 ],
[ 1 ]
],
[
[ 1 ],
[ 1 ],
[ 1 ],
[ 1 ]
]
];
var edges =
[
[
[ 0 ],
[ 1 ]
],
[
[ 0 ],
[ 2 ]
],
[
[ 2 ],
[ 3 ]
],
[
[ 1 ],
[ 3 ]
],
[
[ 0 ],
[ 4 ]
],
[
[ 1 ],
[ 5 ]
],
[
[ 2 ],
[ 6 ]
],
[
[ 3 ],
[ 7 ]
],
[
[ 4 ],
[ 5 ]
],
[
[ 4 ],
[ 6 ]
],
[
[ 6 ],
[ 7 ]
],
[
[ 5 ],
[ 7 ]
]
];
function cameraModel(data) {
var result = [];
for (var i = 0; i < data.length; i++) {
result[i] = multiplyMatrix (G ,data[i]);
result[i] = multiplyMatrix (Rz ,result[i]);
result[i] = multiplyMatrix (Ry ,result[i]);
result[i] = multiplyMatrix (Rx ,result[i]);
result[i] = multiplyMatrix (C ,result[i]);
result[i] = multiplyMatrix (P ,result[i]);
N =
[
[ 1/result[i][2], 0, 0, 0 ],
[ 0, 1/result[i][2], 0, 0 ],
[ 0, 0, 1, 0 ],
[ 0, 0, 0, 1 ]
];
result[i] = multiplyMatrix (N ,result[i]);
result[i] = multiplyMatrix (offset ,result[i]);
}
return result;
}
function multiplyMatrix(m1, m2) {
var result = [];
for(var j = 0; j < m1.length; j++) {
result[j] = [];
for(var k = 0; k < m2[0].length; k++) {
var sum = 0;
for(var i = 0; i < m2.length; i++) {
sum += m2[i][k] * m1[j][i];
}
result[j].push(sum);
}
}
return result;
}
function displayData(points,lines) {
drawDots(points);
drawLines(points, lines);
}
function drawDots(data) {
for (var i = 0; i < data.length; i++) {
if (data[i][2] > 0) {
var x = data[i][0]
var y = data[i][1]
var z = data[i][2]
var d = pix / z / 2;
ctx.fillRect(x - d, y - d, 2 * d, 2 * d);
}
}
}
function drawLines(points, lines) {
for (var i = 0; i < lines.length; i++) {
var j = lines[i][0];
var k = lines[i][1];
if (points[j][2] > 0 && points[k][2] > 0) {
ctx.beginPath();
ctx.moveTo(points[j][0],(points[j][1]));
ctx.lineTo(points[k][0],(points[k][1]));
ctx.stroke();
}
}
}
var mainLoopId = setInterval(function(){
ctx.clearRect(0, 0, width, height);
offset =
[
[ 1, 0, 0, offsetX ],
[ 0, -1, 0, offsetY ],
[ 0, 0, 1, 0 ],
[ 0, 0, 0, 1 ]
];
P =
[
[ (f * width) / (2 * Px), skew, 0, 0 ],
[ 0, (f * height) / (2 * Py), 0, 0 ],
[ 0, 0, -1, 0 ],
[ 0, 0, 0, 1 ]
];
C =
[
[ 1, 0, 0, -Cx ],
[ 0, 1, 0, -Cy ],
[ 0, 0, 1, -Cz ],
[ 0, 0, 0, 1 ]
];
Rx =
[
[ 1, 0, 0, 0 ],
[ 0, Math.cos(RotX), - Math.sin(RotX), 0 ],
[ 0, Math.sin(RotX), Math.cos(RotX), 0 ],
[ 0, 0, 0, 1 ]
];
Ry =
[
[ Math.cos(RotY), 0, Math.sin(RotY), 0 ],
[ 0, 1, 0, 0 ],
[ - Math.sin(RotY), 0, Math.cos(RotY), 0 ],
[ 0, 0, 0, 1 ]
];
Rz =
[
[ Math.cos(RotZ), - Math.sin(RotZ), 0, 0 ],
[ Math.sin(RotZ), Math.cos(RotZ), 0, 0 ],
[ 0, 0, 1, 0 ],
[ 0, 0, 0, 1 ]
];
G =
[
[ 1, 0, 0, -Gx ],
[ 0, 1, 0, -Gy ],
[ 0, 0, 1, -Gz ],
[ 0, 0, 0, 1 ]
];
var camera = [];
camera = cameraModel(verts);
displayData(camera, edges);
RotY += 0.02;
}, 1000/60);
</script>
</body>
On CANVAS you can generate what-ever you want.
Put this code into a HTML-ELEMENT.
Save it.
Publish your website and test it, or test in inside Wix-Editor in PREVIEW-MODE
Hey Nicolas, did you succeed already with your mockup html code?