I want to display remote content like website WordPress them demos to my visitors without sending them off site. This allows me to create a URL / link that looks like https://mydomain.com/frame.php?url=https://someotherwebsite.com/site&title=sometitle and frame it up with a CTA
- Iframe content works… sometimes…
- We can use file_get_contents() in PHP…
- It won’t be perfect or ideal in all situations, but it’s better than nothing?
- Include a “global” header with CTA
- Includes WordPress Contact Form 7 (CF7)
- Will require implementing recaptcha workaround if enabled
- This is all independent of WordPress, but is calling WP resources so I’m doing it on the same domain.
// Set some variables
$url = $_GET['url'];
$url2 = $_GET['url2'];
$title = $_GET['title'];
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://www.google.com/recaptcha/api.js?render=_your_site_key"></script>
<style>
I will be pulling content from multiple remote servers. These have varying policies for how their content can be interacted with so using a combination of an iframe and file_get_contents() is ideal.
So I have to address some minor issues with styles using PHP
// Switch styles
if( $url2 == true ) { echo '
overflow: hidden;
'; } else { echo '
overflow: display;
'; }
Here’s the styles for this page. Note: there are remote server / domain specific styles. I am only going to be using this for two domains and about 300 framed pages total over time.
html, body {
<?php if( $url2 == true ) { echo '
overflow: hidden;
'; } else { echo '
overflow: display;
'; } ?>
}
html, body, div, iframe {
margin: 0px;
padding: 0px;
border: none;
}
iframe {
display: block;
width: 100%;
border: none;
overflow-y: auto;
overflow-x: hidden;
}
.pane iframe {
margin-top: 75px;
}
a#myBtn {
text-decoration: none;
z-index: 999;
position: absolute;
top: 0;
width: 100%;
}
a .frame{
color: #fff;
font-size: 1em;
}
a .frame:hover {
color:#000;
}
.frame:before {
content: "";
background-image: url(https://jarodthornton.com/assets/images/logo-white.png);
background-position: center;
background-size: 75px;
background-repeat: no-repeat;
width: 75px;
height: 75px;
display: inline-block;
float: left;
position: inherit;
}
.frame:hover:before {
background-image: url(https://jarodthornton.com/assets/images/logo.png);
}
.frame {
margin: auto;
text-align: center;
background: #000;
}
.frame:hover {
background: #fff;
}
.frame {
padding: 0 0 32px 0;
font-family: sans-serif;
font-weight: 100;
}
.frame span {
margin-top: 25px;
display: inline-block;
}
.pane {
z-index: 1;
position: relative;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
input, input[type=text], textarea {
width: 100%;
border: none;
background: #eee;
padding: 10px;
margin-top: 5px;
}
label {
font-family: sans-serif;
}
@media only screen and (min-width: 600px) {
br {
display:none;
}
}
header#main-header {
display: none;
}
footer#main-footer {
display: none;
}
</style>
</head>
<body>
<a id="myBtn" href="#">
<div class="frame">
<span>Buy <?php echo $title; ?> <br> Starting at $75 (one-time)</span>
</div>
</a>
<div class="pane">
if( $url == true ) {
$data = file_get_contents($url);
echo $data;
}
elseif( $url2 == true ) {
echo '<iframe src="'.$url2.'"
frameborder="0"
marginheight="0"
marginwidth="0"
width="100%"
height="100%"
scrolling="auto"
autoplay="self"></iframe>';
}
else {
echo 'Nothing here';
}
Next I will put together the form using a modal window and some pure JS to open via click action. The CF7 form is also setup here.
</div>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<div role="form" class="wpcf7" id="wpcf7-f5-p229-o1" lang="en-US" dir="ltr">
<div class="screen-reader-response"></div>
<form action="/contact/#wpcf7-f5-p229-o1" method="post" class="wpcf7-form" novalidate="novalidate">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="5">
<input type="hidden" name="_wpcf7_version" value="5.1.7">
<input type="hidden" name="_wpcf7_locale" value="en_US">
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f5-p229-o1">
<input type="hidden" name="_wpcf7_container_post" value="229">
<input type="hidden" name="g-recaptcha-response" value="">
</div>
<p><label> Your Name (required)<br>
<span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="100%" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false"></span> </label></p>
<p><label> Your Email (required)<br>
<span class="wpcf7-form-control-wrap your-email"><input type="email" name="your-email" value="" size="100%" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false"></span> </label></p>
<p><label> Your Message<br>
<span class="wpcf7-form-control-wrap your-message"><textarea name="your-message" cols="100%" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false">I am interested in the <?php echo $_GET['title']; ?></textarea></span> </label></p>
<p style="padding-bottom: 0px;"><input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit"><span class="ajax-loader"></span></p>
<div class="wpcf7-response-output wpcf7-display-none"></div></form></div>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
/* <![CDATA[ */
var wpcf7 = {"apiSettings":{"root":"https:\/\/YOURDOMAIN.com\/wp-json\/contact-form-7\/v1","namespace":"contact-form-7\/v1"}};
/* ]]> */
</script>
<script type='text/javascript' src='https://YOURDOMAIN.com/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=5.1.7'></script>
<script type="text/javascript">
( function( grecaptcha, sitekey, actions ) {
var wpcf7recaptcha = {
execute: function( action ) {
grecaptcha.execute(
sitekey,
{ action: action }
).then( function( token ) {
var forms = document.getElementsByTagName( 'form' );
for ( var i = 0; i < forms.length; i++ ) {
var fields = forms[ i ].getElementsByTagName( 'input' );
for ( var j = 0; j < fields.length; j++ ) {
var field = fields[ j ];
if ( 'g-recaptcha-response' === field.getAttribute( 'name' ) ) {
field.setAttribute( 'value', token );
break;
}
}
}
} );
},
executeOnHomepage: function() {
wpcf7recaptcha.execute( actions[ 'homepage' ] );
},
executeOnContactform: function() {
wpcf7recaptcha.execute( actions[ 'contactform' ] );
},
};
grecaptcha.ready(
wpcf7recaptcha.executeOnHomepage
);
document.addEventListener( 'change',
wpcf7recaptcha.executeOnContactform, false
);
document.addEventListener( 'wpcf7submit',
wpcf7recaptcha.executeOnHomepage, false
);
} )(
grecaptcha,
'_your_site_key_',
{"homepage":"homepage","contactform":"contactform"}
);
</script>
Your mileage may vary… I sourced much of this code from an existing page with a CF7 form and modified to work.
My last little bit is to include the Facebook Messenger plugin.
<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
xfbml : true,
version : 'v6.0'
});
};
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = 'https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Your customer chat code -->
<div class="fb-customerchat"
attribution=setup_tool
page_id="_page_id_"
theme_color="#d4b164"
logged_in_greeting="Hey, you can use this layout for your website!"
logged_out_greeting="Hey, you can use this layout for your website!">
</div>
</body>
</html>
