How to embed a custom design widget from another website?

Shopify Discussion
,
1

Hello,

We are trying to set up a positive surprise for our distributor, however, we are not sure if it’s even possible. The vision is to embed his custom design widget into our website so that when someone makes an inquiry on our website, our distributor receives it. We copy-pasted the HTML code and added full links to CSS, etc., but some features are still not working. Perhaps someone can notice the issue? Or maybe it’s just not possible?

The background image is missing & request quote form doesn’t work.

Link to our widget page: https://swish.eu/pages/custom (please do tests here)

Link to our partner’s widget page: https://www.shootaway.com/design-your-own-gun/

We would tremendously value it!

Kind Regards,

Our HTML code:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Build-A-Gun</title>

		<!-- our stylesheets -->
		<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css" />
		<link rel="stylesheet" type="text/css" href="https://www.shootaway.com/build-a-gun-app/css/spectrum.css" />
		
        
        
        <style>
        
        html{
	margin:0;
	padding:0;
	box-sizing:border-box;
}
*,*:before,*:after{
	box-sizing:inherit;
}
body{
	background-color: transparent;
	color:#fff;
	font-family:sans-serif;
	margin:0;
	padding:0;
}

/* children of this shouldn't inherent our cursor (which they do in chrome) */
.modal-bg * {
	cursor: auto;
}

.wrapper{
	width:100%;
	max-width:1200px;
	margin:auto;
}
.settings-formelement{
	width:100%;
	padding:0px 20px;
/*	background-color:#333;*/
	margin-top:10px;
	margin-bottom:10px;
	border-radius:5px;
	display: inline-block;
}
.settings-formelement label,.settings-formelement input{
/*	display:inline-block;*/
	color: #000000;
}
.settings-formelement h3{
	margin:0;
	font-size: 18px;
	text-transform: uppercase;
	color: #e00001;
	text-align: center;
	margin-bottom: 10px;
}
.settings-formelement hr{
	border:none;
	border-top: 2px solid #f64a51;
	margin-bottom: 15px;
}

.flex_box {
    display: flex;
    justify-content: center;
}

.radio_input {
    min-width: 150px;
}

.settings-formelement .radio_input span{
	display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 5px 10px;
    padding: 6px 10px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
	color: #000;
	background-color: #e9eaeb;
	box-shadow: 0 3px 5px #333;
}

.settings-formelement .radio_input input[type="radio"]{
	visibility: hidden;
    display: none;
}

.settings-formelement .radio_input input[type="radio"]:checked + span{
	background: #f64a51;
    color: #fff;
}

.settings-formelement .btn-request-quote{
	background: #ef4a4d;
    padding: 8px 25px;
    border-radius: 20px;
    display: block;
    margin: 10px auto;
    text-transform: uppercase;
    font-weight: 500;
}

.col-1{
	width:100%;
	float:left;
}
.canvas-container{
	width:100%;
	float:left;
}
canvas{
	max-width:100%;
}

.actions{
	clear: both;
    text-align: center; 
    display: flex;
    justify-content: space-around;
}

.btn,.btn:link,.btn:visited{
	display: inline-block;
    background-color: #df0001;
    color: #fff;
    padding: 8px 15px;
    margin: 5px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    font-size: 18px;
    text-decoration: none;
    text-align: center;
	position: relative;
}
.btn:hover,.btn:focus,.btn:active{
	background-color:#c00;
}
.actions .btn{
	display:flex;
	justify-content: space-evenly;
	align-items: center;
	width:100%;
}

.btn-facebook{
	background-color: #465892;
}

.btn-twitter{
	background-color: #54aced;
}

.modal-bg{
	max-width:100%;
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color: rgba(0, 0, 0, 0.5);
	display:-webkit-box;
	display:-moz-box;
	display:-ms-flexbox;
 	display:-webkit-flex;
	display:flex;
	cursor: pointer;
}

.modal{
	width:300px;
	max-width:100%;
	max-height:100%;
	overflow-y:auto;
	margin:auto;
	padding:20px;
	background-color:#ddd;
	color:#111;
	border-radius:3px;
	box-shadow:0 10px 50px rgba(0,0,0,0.5);
}

.modal h2{
	margin:0;
	padding:0;
}

.modal-formelement{
	display:block;
	padding: 20px 0 0;
}
.modal-formelement label,.modal-formelement input{
	display:block;
	width:100%;
}
.modal-formelement label{
	margin-bottom:5px;
}
.modal-formelement input{
	padding:5px;
}

.checkbox {
    display: inline-block;
}
.checkbox input[type=checkbox] {
    width:20px;
}
.checkbox label {
    margin-left:-5px;
}

.hidden_options {
    display: none !important;
}
.sub_options {
    margin-left: 20px;
}

/*.option-section{
	padding:5px 0;
}*/
.option-section + .option-section{
	border-top:0px solid #666;
	margin-top:5px;
	padding-top:5px;
}

.option-section h3 label{
	color: #e00001;
}

.option-section #editor_shared_color_outer_name, .option-section #editor_shared_color_inner_name{
	display: block;
	text-align: center;
	color: #000000;
}

.btn-submit{
	margin:0;
}

.message {
	background-color:#ffcc00;
	color:#000;
	padding:20px;
	border-radius:5px;
	margin-bottom:10px;
}
.message h3,.message p{
	margin:0;
	padding:0;
}
.success{
	background-color:#99cc33;
}
.warning{
	background-color:#ffcc00;
}
.error{
	background-color:#ff6600;
}

.required:after{
	content:'*';
	display:inline;
	color:#900;
}

.shared-img{
	display:block;
	width:auto;
	height:auto;
	max-width:100%;
	max-height:80vh;
	margin:auto;
}

.phone-number{
	display:inline-block;
	color:#fff;
	text-decoration:none;
	font-size: 1.2em;
	font-weight: 700;
	letter-spacing: 0.05em;
}

.text-center{
	text-align:center;
}

.inline-block{
	display: inline-block;
}

.settings {
	 display: none;
 }

.canvas-container {
	display: none;
}

.top-req-btn-con {
	display: none;
	text-align: center;
}

.color-palette {
    width: 100%;
    margin-top: 10px;
    background: transparent;
    border: 0;
    margin: auto;
    text-align: center;
    display: flex;
	z-index: 0;
}

.color-palette .sp-palette-container{
    /* width: 100%; */
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: center;
}

.color-palette .sp-palette-container .sp-palette {
    max-width: 100%;
    min-width: 100%;
    text-align: center;
}

.color-palette .sp-palette .sp-thumb-el{
	width: 33px;
	height: 33px;
	margin: 10px 15px;
}

.upload-btn-wrapper{
	position: relative;
	text-align: center;
}

.upload-btn-wrapper label[for="shared_logo"]{
	color: #ffffff;
	padding: 8px 12px;
}

.custom_gun_container br {
    display: none;
}

.custom_gun_container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}

.custom_gun_container iframe {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    margin-top: 20px;
}

.custom_file {
	margin: auto;
	opacity: 0;
	position: absolute;
	z-index: 1;
	height: 37px;
	top: 0;
	left: 0;
	cursor: pointer;
}

input[for="file_default"], input[for="file_name"]{
	color: #000000;
}

.settings-formelement p, .settings-formelement p a {
    color: #df0001;
    text-transform: uppercase;
    text-align: center;
    line-height: 40px;
    font-size: 30px;
	margin: 5px 0 0;
}

@media (max-width:499px){
	.hide-mobile{
		display:none;
	}
	.actions .btn{
		display:inline-block;
/*		width:auto;*/
	}
	
	.radio_input{
		min-width: 100px;
	}
	
	.color-palette .sp-palette .sp-thumb-el{
		margin: 10px 13px;
		margin: 10px 12px;
	}
	
	iframe#blockrandom {
		height: 1550px;
	}
	
	input[for="file_default"], input[for="file_name"]{
		color: #000000;
		display: block;
	}
	
	.settings-formelement p, .settings-formelement p a{
		font-size: 22px;
		line-height: 30px;
	}
	
}

@media (min-width:500px){
	.btn-request-quote {
		padding:30px;
	}
	
	.col-1{
		width:40%;
		padding-left:20px;
	}
	.canvas-container{
		width:100%;
	}
}

@media (min-width:768px){
	.col-1{
		width:50%;
	}
	.canvas-container{
		width:50%;
	}
	
}

@media (min-width:768px) and (max-width: 991px){
	
	.canvas-container{
		padding-left: 20px;
	}
	
	.actions .btn{
		padding: 8px 5px;
	}
	
	.radio_input{
		min-width: 110px;
	}
}

.see-all-testimonial-btn:hover .edgtf-btn-icon-holder .arrow_right{
	color: #000000 !important;
}
        
        
        </style>
        
        
        

        
        
        

		<!-- remote libraries -->
<!--		<script type="application/javascript" src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.9/es5-shim.min.js"></script>-->
		<script type="application/javascript" src="//code.createjs.com/easeljs-0.7.1.min.js"></script>
		<script type="application/javascript" src="//code.createjs.com/tweenjs-0.5.1.min.js"></script>
		<script type="application/javascript" src="//code.createjs.com/movieclip-0.7.1.min.js"></script>
		<script type="application/javascript" src="//code.createjs.com/preloadjs-0.4.1.min.js"></script>

		<!-- local libraries -->
		<script type="application/javascript" src="https://www.shootaway.com/build-a-gun-app/js/libs/canvas-toBlob.js"></script>
		<script type="application/javascript" src="https://www.shootaway.com/build-a-gun-app/js/libs/FileSaver.min.js"></script>
		<script type="application/javascript" src="https://www.shootaway.com/build-a-gun-app/js/libs/jquery.min.js"></script>
		<script type="application/javascript" src="https://www.shootaway.com/build-a-gun-app/js/libs/spectrum.js"></script>
<!--		<script type="application/javascript" src="https://www.shootaway.com/build-a-gun-app/js/libs/w3color.js"></script>-->

		<!-- dynamic values set by php -->

		<!-- code exported from flash -->
		<script type="application/javascript" src="https://www.shootaway.com/build-a-gun-app/js/BuildAGun.js"></script>

		<script type="application/javascript" src="https://www.shootaway.com/build-a-gun-app/js/palette.js"></script>
		<script type="application/javascript" src="https://www.shootaway.com/build-a-gun-app/js/gun.js"></script>
		<!-- our main application entry point -->
		<script type="application/javascript" src="https://www.shootaway.com/build-a-gun-app/js/main.js?v=1.05"></script>
     
		
		
	</head>
	<body>

		<form id="form" method="post" action="index.php" enctype="multipart/form-data">
			<div class="top-req-btn-con"><button class="btn btn-request-quote"><i class="fa fa-envelope"></i><span class="hide-mobile"> Request Quote</span></button></div>
			<input type="hidden" name="action" value="facebook" />
			<div class="wrapper">
				<div class="canvas-container">
					<input type="hidden" name="shared_render" value="">
					<canvas id="canvas" width="1000" height="1000"></canvas>
					<div class="actions">
						<button value="facebook" class="btn btn-facebook"><i class="fa fa-facebook"></i><span class="hide-mobile"> Share</span></button>
						<button value="twitter" class="btn btn-twitter"><i class="fa fa-twitter"></i><span class="hide-mobile"> Share</span></button>
						<button class="btn btn-email"><i class="fa fa-envelope-o"></i><span class="hide-mobile"> Email</span></button>
						<button class="btn btn-save"><i class="fa fa-download"></i><span class="hide-mobile"> Save</span></button>
					</div>
					<div class="settings-formelement">
						<p>Call <a class="phone-number" href="tel:800-294-4654">800-294-4654</a> for details and pricing information.</p>
					</div>
				</div>
				<div class="col-1">
					<div class="settings">
						<div class="settings-formelement">
							<hr>
							<h3>Select Model</h3>
							<div class="flex_box">
															<span class="inline-block radio_input">
								<label for="6000">
								<input type="radio" id="6000" name="model_selection" value="6000" checked><span>6000</span></label>
								</span>
															<span class="inline-block radio_input">
								<label for="8000">
								<input type="radio" id="8000" name="model_selection" value="8000" ><span>8000</span></label>
								</span>
															<span class="inline-block radio_input">
								<label for="10K">
								<input type="radio" id="10K" name="model_selection" value="10K" ><span>10K</span></label>
								</span>
															<span class="inline-block radio_input">
								<label for="12K">
								<input type="radio" id="12K" name="model_selection" value="12K" ><span>12K</span></label>
								</span>
														</div>
						</div>
						<div class="settings-formelement">
							<div id="10K_options" class="gun_options hidden_options">
								<hr>
								<h3>10K Options</h3>
								
								<div class="option-section">
									<span class="inline-block">
										<label>
											<input type="radio" name="plastic_selection" id="white_plastic" value="Standard" checked />Standard
										</label>
									</span>
									<span class="inline-block">
										<label>
											<input type="radio" name="plastic_selection" id="black_plastic" value="Midnight"/>Midnight Edition
										</label>
									</span>
								</div>
								<div class="option-section">
									<span class="inline-block">
										<label>
											<input type="radio" name="10K_selection" id="music_player" value="Music Player" checked />Music Player
										</label>
									</span>
									<span class="inline-block">
										<label>
											<input type="radio" name="10K_selection" id="no_options" value=""/>None
										</label>
									</span>
								</div>
								<div class="option-section">
									<span class="inline-block">
										<label>
											<input type="checkbox" id="heart_monitor_selection" class="heart_monitor_selection selection" name="heart_monitor_selection">Heart Rate Monitor
										</label>
									</span>
								</div>
							</div>
						</div>
						<div class="settings-formelement">
						
							<div class="option-section">
								<hr>
								<h3><label for="editor_color_selector_outer">Primary Color</label></h3>
								<span id="editor_shared_color_outer_name"></span>
								<input type="hidden" name="shared_color_outer" value="">
								<input type="hidden" name="shared_color_outer_name" value="">
								<input type="text" id="editor_color_selector_outer">
								
							</div>
							<div class="option-section">
								<hr>
								<h3><label for="editor_color_selector_inner">Secondary Color</label></h3>
								<span id="editor_shared_color_inner_name"></span>
								<input type="hidden" name="shared_color_inner" value="">
								<input type="hidden" name="shared_color_inner_name" value="">
								<input type="text" id="editor_color_selector_inner">
								
							</div>
							<div class="option-section hidden_options">
								<hr>
								<h3><label for="editor_color_selector_stripe">Stripe Color</label></h3>
								<span id="editor_shared_color_stripe_name"></span>
								<input type="hidden" name="shared_color_stripe" value="">
								<input type="hidden" name="shared_color_stripe_name" value="">
								<input type="text" id="editor_color_selector_stripe">
								
							</div>
						</div>
						<div class="settings-formelement">
							<hr>
							<h3>Logo</h3>
							
							<div class="upload-btn-wrapper">
								<label for="shared_logo" class="btn btn-sm btn-primary">Upload Image
								<input type="file" class="text-center form-control-file custom_file" id="editor_image_loader" name="shared_logo"></label>
								<label for="file_default">No File Choosen </label>
								<label for="file_name"><b></b></label>
							</div>
							
						</div>
						<div class="settings-formelement">
							<hr>
							<button class="btn btn-request-quote"><i class="fa fa-envelope"></i><span> Request Quote</span></button>
						</div>
						
					</div>
										
				</div>
				
			</div>
			<div class="modal-bg" style="display:none;">
				<div class="modal modal_quote" style="display:none;">
					<h2>Request a Quote</h2>
					<form>
                        <input type="hidden" id="gad_gclid_input" name="gclid" />
                        <input type="hidden" id="fad_fbclid_input" name="fbclid" />
						<div class="modal-formelement">
							<label for="quote_company" class="required">School or Organization</label>
                            <select id="quote_company" name="quote_company" required>
                                <option value="">---</option>
                                <option value="Administrator">Administrator</option>
                                <option value="High School Coach">High School Coach</option>
                                <option value="College Coach">College Coach</option>
                                <option value="AAU Coach">AAU Coach</option>
                                <option value="Player">Player</option>
                                <option value="Parent">Parent</option>
                                <option value="Training Facility">Training Facility</option>
                            </select>
						</div>
                        <div class="modal-formelement" id="school_name" style="display: none">
                            <label for="quote_name">School Name</label>
                            <input type="text" id="quote_school_name" name="quote_school_name" value="">
                        </div>
						<div class="modal-formelement">
							<label for="quote_name" class="required">Name</label>
							<input type="text" id="quote_first_name" name="quote_first_name" value="" required>
						</div>
						<div class="modal-formelement">
							<label for="quote_email" class="required">Email</label>
							<input type="text" id="quote_email" name="quote_email" placeholder="ex: name@domain.com" value="" required>
						</div>
						<div class="modal-formelement">
							<label for="quote_zipcode" class="required">ZIP Code <span style="line-height: 18px; font-size: 12px;">(used for estimating shipping cost)</span></label>
							<input id="quote_zipcode" name="quote_zipcode" value="" placeholder="ex: xxxxx or xxxxx-xxxx" required>
						</div>
						<div class="modal-formelement">
							<label for="quote_phone">Phone#</label>
							<input type="text" id="quote_phone" name="quote_phone" value="">
						</div>
						<div class="modal-formelement">
							<button class="btn btn-submit" value="quote">Submit</button>
						</div>
					</form>
				</div>
				<div class="modal modal_email" style="display:none;">
					<h2>Email a Friend</h2>
					<div class="modal-formelement">
						<label for="email_your_name">Your Name</label>
						<input type="text" id="email_your_name" name="email_your_name" value="">
					</div>
					<div class="modal-formelement">
						<label for="email_your_email">Your Email</label>
						<input type="text" id="email_your_email" name="email_your_email" value="">
					</div>
					<div class="modal-formelement">
						<label for="email_friends_name">Friend's Name</label>
						<input type="text" id="email_friends_name" name="email_friends_name" value="">
					</div>
					<div class="modal-formelement">
						<label for="email_friends_email">Friend's Email</label>
						<input type="text" id="email_friends_email" name="email_friends_email" value="">
					</div>
					<div class="modal-formelement">
						<button class="btn btn-submit" value="email">Submit</button>
					</div>
				</div>
				<div class="modal modal_submitting" style="display: none; width: 260px;">
					<img src="https://www.shootaway.com/build-a-gun-app/images/loading.gif" style="position: relative; left: 10px;" />
					<h2 style="text-align: center;">Submitting request</h2>
				</div>
			</div>
		</form>
		<script type="text/javascript">
			jQuery(document).ready(function(){
				//Share/Save Events
				jQuery( ".btn-request-quote" ).submit(function( event ) {
					ga('send', 'event', 'BuildAGun', 'Quote Requested');
				});
				jQuery( ".btn-facebook" ).click(function( event ) {
					ga('send', 'event', 'BuildAGun', 'Shared to Facebook');
				});
				jQuery( ".btn-twitter" ).click(function( event ) {
					ga('send', 'event', 'BuildAGun', 'Shared to Twitter');
				});
				jQuery( ".btn-save" ).click(function( event ) {
					ga('send', 'event', 'BuildAGun', 'File Saved');
				});
				jQuery( ".btn-email" ).click(function( event ) {
					ga('send', 'event', 'BuildAGun', 'Shared to a Friend');
				});
			});
		</script>
	</body>
</html>
2

Looking at the swish site shows several images urls are 404 not found if that’s what you mean by whatever “some features are still not working” means.

Increase your chances of solutions:

Avoid posting giant walls of code, there are rarely read.

You need to try to narrow down the code to specific areas of interest, best way is to make smaller and smaller reduced use cases of the actual individual problems.

Descriptions need to be much more specific as well, " but some features are still not working" is incredibly ambiguous and makes possible contributors have to make very broad guesswork which easily leads to bad answers.

Generally unless a website page/widget is specifically made for iframe embedding on other websites there will always be problems and a continuing list of problems trying to force something to do something it wasn’t made to do at a foundational level.

Some content may specifically designed to be difficult to work with in iframes to avoid having content casually hotlinked to someone elses profit motive. https://www.google.com/search?q=image+hotlinking

Ooooooof “surprise”, Hopefully any agreements explicitly allow this and you can ignore the rest of this text. Do not assume permission to use product-imagery is in way the same as explicit access to code or UI asset usage.

As a matter of practice when operating online: Be SUPER careful here not all businesses have a “positive” outlook when their content is supplanted without consent or permission onto another’s businesses third party websites and then setup to be presented like the third party is the ones that made it or control it ;regardless of who the lead goes to. They can very well be within their legal rights to use a much stronger S word instead of “supplanted”.

To exacerbate this it looks like you’ve gone more steps further than just a naïve website iframe embed instead copying the entire UI code and putting into a different website.

If you have a good working relationship where you this isn’t a worry and someone on their side explicitly says so, great. But that doesn’t mean you should ignore the practical problem, get some sort of written permission even after the fact, and mention it to your lawyer when you get that permission.

1 Like
3

Hi @PaulNewton ,

Thank you for the guidance, your opinion is accepted!