How To Embed DCA Hall Of Fame Reviews

You need to place the below HTML code in the space where you want to display DCA Hall Of Fame Reviews in client's website. And place the CSS code in stylesheet. That's it! :)

Bootstrap Version Non-Bootstrap Version

Images can be used to link HOF pages: HOF Link

Bootstrap Version

HTML Part

You need to replace the client ID

<div class="hof_profile_wrapper">
<div class="rbnr-banners">
<?php
    $listing_id=31475;
    $url="https://www.doctorschoiceawards.org/feed-reviews.php?id=".$listing_id;
    $xml_reviews = simplexml_load_file($url);
    $xml_reviews = (array)$xml_reviews;
    $profile=$xml_reviews['profile'];
    $reviews=$xml_reviews['reviews'];
    if(isset($reviews)){
        foreach($reviews as $review){
        if (true) {
        echo '<div class="col-sm-6 rbnr-banner">';
        echo '<a href="#" data-toggle="modal" data-target="#reviewModal'.$review->id.'">';
        echo '<img src="https://www.doctorschoiceawards.org/reviews/'.$review->id.'.jpg" alt="Review '.$review->id.'"/>';
        echo '</a>';
        echo '
    <div class="rbp-share">
                      <h3 class="marginb10">Share this review</h3>
                      <ul class="share-now">
                        <li><a class="nofancybox" target="_blank" href="https://www.facebook.com/share.php?u=https://www.doctorschoiceawards.org/reviews/'.$review->id.'.jpg"><i class="fa fa-lg fa-facebook"></i></a></li>
                        <li><a class="nofancybox" target="_blank" href="https://www.twitter.com/share?url=https://www.doctorschoiceawards.org/reviews/'.$review->id.'.jpg"><i class="fa fa-lg fa-twitter"></i></a></li>
                        <li><a class="nofancybox" target="_blank" href="https://plus.google.com/share?url=https://www.doctorschoiceawards.org/reviews/'.$review->id.'.jpg"><i class="fa fa-lg fa-google"></i></a></li>
                        <li><a class="nofancybox" target="_blank" href="https://www.linkedin.com/shareArticle?mini=true&url=https://www.doctorschoiceawards.org/reviews/'.$review->id.'.jpg"><i class="fa fa-lg fa-linkedin"></i></a></li>
                      </ul>
                    </div>';
        echo '</div>';
            ?>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" id="reviewModal<?php echo $review->id; ?>" style="z-index:9999991; text-align:center;">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
       <div class="modal-header">
        <h2 style="color: #000;">Doctors' Choice Awards – Reviews for <?php echo $profile->name; ?>!</h2>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
         </button>
      </div>
      <div class="modal-body" style="">
        <div class="review-banner-pop">
            <div class="row">
                <div class="col-md-7">
                    <div class="rbp-banner">
                        <img src="https://www.doctorschoiceawards.org/reviews/<?php echo $review->id; ?>.jpg" alt="Review <?php echo $review->id; ?>"/>
                    </div>
                </div>
                <div class="col-md-5">
                    <h2 class="rbp-heading"><?php echo $review->user_name; ?>'s review on <?php echo $profile->name; ?></h2>
                    <div class="rbp-stars"><span class="rbp-starstext">5</span> <img src="https://www.doctorschoiceawards.org/wp-content/uploads/2017/11/stars.png" alt="Stars"/></div>
                    <div class="rbp-share">
                      <h3 class="marginb10">Share this review</h3>
                      <ul class="share-now">
                        <li><a target="_blank" href="https://www.facebook.com/share.php?u=https://www.doctorschoiceawards.org/reviews/<?php echo $review->id; ?>.jpg"><i class="fa fa-lg fa-facebook"></i></a></li>
                        <li><a target="_blank" href="https://www.twitter.com/share?url=https://www.doctorschoiceawards.org/reviews/<?php echo $review->id; ?>.jpg"><i class="fa fa-lg fa-twitter"></i></a></li>
                        <li><a target="_blank" href="https://plus.google.com/share?url=https://www.doctorschoiceawards.org/reviews/<?php echo $review->id; ?>.jpg"><i class="fa fa-lg fa-google"></i></a></li>
                        <li><a target="_blank" href="https://www.linkedin.com/shareArticle?mini=true&url=https://www.doctorschoiceawards.org/reviews/<?php echo $review->id; ?>.jpg"><i class="fa fa-lg fa-linkedin"></i></a></li>
                      </ul>
                    </div>
<div itemscope="" itemtype="http://schema.org/Review">
  <div itemprop="itemReviewed" style="display:none;" itemscope="" itemtype="http://schema.org/MedicalOrganization">
    <span itemprop="name"><?php echo $profile->name; ?></span><br>
  </div>
  <span itemprop="reviewRating" itemscope="" itemtype="http://schema.org/Rating">
    <span itemprop="ratingValue" style="display:none;">5</span>
  </span>
  <span style="display:none;"><span itemprop="name"><?php echo $profile->name; ?></span> Reviewed by<br></span>
  <span itemprop="author" style="display:none;" itemscope="" itemtype="http://schema.org/Person">
    <span itemprop="name"><?php echo $review->user_name; ?></span><br>
  </span>
  <span itemprop="reviewBody" class="rbp-desc">"<?php echo $review->comment; ?>"</span>
  <div itemprop="publisher" style="display:none;" itemscope="" itemtype="http://schema.org/Organization">
    <meta itemprop="name" content="<?php echo $profile->name; ?>">
  </div>
</div>
                    <div class="rbp-plink">
                        <a href="<?php echo $profile->url; ?>" target="_blank">Visit DCA Profile</a>
                    </div>
                </div>
            </div>
        </div>
      </div>
    </div>
  </div>
</div>
            <?php
            }
        }
    } else{
        echo "No reviews found!";
    }
?>
</div>
<br clear="all"/><br/>
</div>

CSS Part

You can customize this css part as you want as per the client site design.

/* DCA Hall Of Fame Reviews */
.hof_profile_wrapper {
	background: url(https://www.doctorschoiceawards.org/wp-content/uploads/2018/01/original-stars-fall-1.gif) top center repeat;
}
button.close {
	display: block;
    position: absolute;
    background: #ff0000;
    color: #ffffff;
    padding: 10px 15px;
    text-decoration: none;
    right: 10px;
    top: 10px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    -khtml-border-radius: 50px;
}

.rbnr-heading {
	margin-top: 25px;
	text-align: left;
	background: #082044;
	min-height: 100px;
	padding: 20px 10px;
	border-radius: 10px;
}
.rbnr-heading h1 {
	display: inline-block;
	vertical-align: middle;
	margin: 10px 20px;
	font-size: 32px;
	color: #fff;
	font-weight: bold;
}
.rbnr-heading img {
	display: inline-block;
	vertical-align: middle;
	max-width: 100%;
	max-height: 100px;
	border-radius: 10px;
}
.rbnr-headingright {
	float: right;
	background: #fff;
	border-radius: 10px;
	padding: 5px;
}

.hof-row-con {
	padding: 0px 20px;
}
.rbnr-banners {
	margin-top: 20px;
	margin-bottom: 30px;
	text-align: center;
}
.rbnr-banners .rbnr-banner a {
	display: block;
	display: relative;
	max-width: 96%;
	border-radius: 10px;
	margin: 2%;
	overflow: hidden;
}
.rbnr-banners .rbnr-banner img {
	max-width: 96%;
	border-radius: 10px;
	margin: 2%;
}

/* Popup Sytyle */
.review-banner-pop {
	background: #fff;
}
.review-banner-pop img {
	max-width: 100%;
}
.review-banner-pop [class*="col-"] {
  padding: 15px 10px;
}
.review-banner-pop h2{
  text-align: center;
}
.hof_profile_wrapper .modal-header {
  padding: 15px 55px;
  text-align: center;
}
.hof_profile_wrapper .modal-header h2 {
  text-align: center;
}

.rbp-stars {
	margin: 10px auto;
	text-align: center;
}
.rbp-starstext {
	font-size: 28px;
	font-weight: bold;
	color: #010e16;
	display: inline-block;
	vertical-align: middle;
}
.rbp-stars img {
	width: 32px;
	height: 32px;
	display: inline-block;
	vertical-align: middle;
}

.rbp-other-reviews {
	margin: 30px 0px 20px;
	padding: 10px 5px;
	list-style: none;
	background: #ccc;
}
.rbp-other-reviews li {
	display: inline-block;
	vertical-align: middle;
	margin: 5px 1%;
	width: 17%;
}

.rbp-heading {
	margin: 10px 0px 20px;
	font-size: 24px;
	font-weight: bold;
}
.rbp-desc {
	margin: 20px 0px;
	font-size: 16px;
	text-align: left;
}
.rbp-plink {
	margin: 20px 0px;
	font-size: 16px;
}
.rbp-plink a {
	display: block;
	background: #3d4749;
	color: #fff;
	padding: 5px 10px;
	font-size: 16px;
	text-decoration: none;
}
.rbp-plink a:hover {
	text-decoration: none;
	background: #010e16;
}

.rbp-share {
	margin: 20px 0px;
	background: #fff;
	border-radius: 10px;
	text-align: center;
	vertical-align: middle;
}
.rbp-share h3 {
	display: inline-block;
	vertical-align: middle;
}
.rbp-share ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
	display: inline-block;
	vertical-align: middle;
}
.rbp-share ul li {
	display: inline-block;
	vertical-align: middle;
	margin: 0px 5px;
}
.rbp-share ul li a{
	display: block;
	background: #6ec4ff;
	color: #fff;
	padding: 5px 10px;
}

.review-embed-text {
	margin: 10px;
	padding: 10px;
	border-radius: 20px;
	background: #fff;
	color: #062a57;
}
.review-embed-text a {
	color: #062a57;
}
/* Fix Modal Window Overlay */
.mm-slideout {
	z-index: 1201;
}
.modal.fade:before {
	content: '';
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	background: #000;
	opacity: 0.7;
}
@media only screen and (max-width:760px){
.rbnr-heading {
	text-align: center;
}
.rbnr-headingright {
	float: none;
	margin: 20px 0px 0px;
	display: block;
}
.rbnr-banners-iframe .rbnr-banner {
	width: 98%;
	margin: 0px 1% 20px;
	display: inline-block;
}
}
/* !END - DCA Hall Of Fame Reviews */

Non-Bootstrap Version

HTML Part

You need to replace the client ID

<div class="hof_profile_wrapper">
<div class="rbnr-banners">
<?php
    $listing_id=31475;
    $url="https://www.doctorschoiceawards.org/feed-reviews.php?id=".$listing_id;
    $xml_reviews = simplexml_load_file($url);
    $xml_reviews = (array)$xml_reviews;
    $profile=$xml_reviews['profile'];
    $reviews=$xml_reviews['reviews'];
    if(isset($reviews)){
        foreach($reviews as $review){
        if (true) {
            ?>
	<div class="rbnr-banner">
		<div class="rbnr-banner-pic">
			<a class="nofancybox nolightbox rbnr-banner-button" href="javascript:void(0);" title="Banner 1" rel="nofollow" id="<?php echo $review->id; ?>">
			<img src="https://www.doctorschoiceawards.org/reviews/<?php echo $review->id; ?>.jpg" alt="Review <?php echo $review->id; ?>"/>
			</a>
			<div class="rbp-share">
              <h3 class="marginb10">Share this review</h3>
              <ul class="share-now">
                <li><a class="nofancybox" target="_blank" href="https://www.facebook.com/share.php?u=https://www.doctorschoiceawards.org/reviews/<?php echo $review->id; ?>.jpg"><i class="fa fa-lg fa-facebook"></i></a></li>
                <li><a class="nofancybox" target="_blank" href="https://www.twitter.com/share?url=https://www.doctorschoiceawards.org/reviews/<?php echo $review->id; ?>.jpg"><i class="fa fa-lg fa-twitter"></i></a></li>
                <li><a class="nofancybox" target="_blank" href="https://plus.google.com/share?url=https://www.doctorschoiceawards.org/reviews/<?php echo $review->id; ?>.jpg"><i class="fa fa-lg fa-google"></i></a></li>
                <li><a class="nofancybox" target="_blank" href="https://www.linkedin.com/shareArticle?mini=true&url=https://www.doctorschoiceawards.org/reviews/<?php echo $review->id; ?>.jpg"><i class="fa fa-lg fa-linkedin"></i></a></li>
              </ul>
            </div>
		</div>
		<div class="nonbs-modal-hide">
			<div class="nonbs-modal-wrapper" id="rbnrBanner<?php echo $review->id; ?>">
				<div class="nonbs-modal-header">
				    <h2 style="color: #000;">Doctors' Choice Awards – Reviews for <?php echo $profile->name; ?>!</h2>
				</div>
				<div class="nonbs-modal-content">
					<div class="nonbs-modal-50">
						<img src="https://www.doctorschoiceawards.org/reviews/<?php echo $review->id; ?>.jpg"/>
					</div>
					<div class="nonbs-modal-50">
						<div class="nonbs-modal-wrap">
		                    <h2 class="rbp-heading"><?php echo $review->user_name; ?>'s review on <?php echo $profile->name; ?></h2>
		                    <div class="rbp-stars"><span class="rbp-starstext">5</span> <img src="https://www.doctorschoiceawards.org/wp-content/uploads/2017/11/stars.png" alt="Stars"/></div>
		                    <div class="rbp-share">
		                      <h3 class="marginb10">Share this review</h3>
		                      <ul class="share-now">
		                        <li><a target="_blank" href="https://www.facebook.com/share.php?u=https://www.doctorschoiceawards.org/reviews/<?php echo $review->id; ?>.jpg"><i class="fa fa-lg fa-facebook"></i></a></li>
		                        <li><a target="_blank" href="https://www.twitter.com/share?url=https://www.doctorschoiceawards.org/reviews/<?php echo $review->id; ?>.jpg"><i class="fa fa-lg fa-twitter"></i></a></li>
		                        <li><a target="_blank" href="https://plus.google.com/share?url=https://www.doctorschoiceawards.org/reviews/<?php echo $review->id; ?>.jpg"><i class="fa fa-lg fa-google"></i></a></li>
		                        <li><a target="_blank" href="https://www.linkedin.com/shareArticle?mini=true&url=https://www.doctorschoiceawards.org/reviews/<?php echo $review->id; ?>.jpg"><i class="fa fa-lg fa-linkedin"></i></a></li>
		                      </ul>
		                    </div>
							<div itemscope="" itemtype="http://schema.org/Review">
							  <div itemprop="itemReviewed" style="display:none;" itemscope="" itemtype="http://schema.org/MedicalOrganization">
							    <span itemprop="name"><?php echo $profile->name; ?></span><br>
							  </div>
							  <span itemprop="reviewRating" itemscope="" itemtype="http://schema.org/Rating">
							    <span itemprop="ratingValue" style="display:none;">5</span>
							  </span>
							  <span style="display:none;"><span itemprop="name"><?php echo $profile->name; ?></span> Reviewed by<br></span>
							  <span itemprop="author" style="display:none;" itemscope="" itemtype="http://schema.org/Person">
							    <span itemprop="name"><?php echo $review->user_name; ?></span><br>
							  </span>
							  <span itemprop="reviewBody" class="rbp-desc">"<?php echo $review->comment; ?>"</span>
							  <div itemprop="publisher" style="display:none;" itemscope="" itemtype="http://schema.org/Organization">
							    <meta itemprop="name" content="<?php echo $profile->name; ?>">
							  </div>
							</div>
		                    <div class="rbp-plink">
		                        <a href="<?php echo $profile->url; ?>" target="_blank">Visit DCA Profile</a>
		                    </div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
            <?php
            }
        }
    } else{
        echo "No reviews found!";
    }
?>
</div>
<br clear="all"/><br/>
</div>

CSS Part

You can customize this css part as you want as per the client site design.

/* DCA Hall Of Fame Reviews */
.hof_profile_wrapper {
	background: url(https://www.doctorschoiceawards.org/wp-content/uploads/2018/01/original-stars-fall-1.gif) top center repeat;
	padding: 0px 20px;
}
.rbnr-banners {
	margin: 0px;
	text-align: center;
	margin-top: 20px;
	margin-bottom: 30px;
	text-align: center;
}
.rbnr-banners .rbnr-banner a {
	display: block;
	display: relative;
	max-width: 96%;
	border-radius: 10px;
	margin: 2%;
	overflow: hidden;
}
.rbnr-banners .rbnr-banner img {
	max-width: 96%;
	border-radius: 10px;
	margin: 2%;
}
.rbnr-banners-viewer{
	max-width:1000px;
	margin:0px auto;
	display:none;
}
.rbnr-banner {
	display: inline-block;
	width: 46%;
	margin: 1%;
}
.rbp-stars {
	margin: 10px auto;
	text-align: center;
}
.rbp-starstext {
	font-size: 28px;
	font-weight: bold;
	color: #010e16;
	display: inline-block;
	vertical-align: middle;
}
.rbp-stars img {
	width: 32px;
	height: 32px;
	display: inline-block;
	vertical-align: middle;
}

.rbp-heading {
	margin: 0px 0px 20px;
	font-size: 24px;
	font-weight: bold;
}
.rbp-desc {
	margin: 20px 0px;
	font-size: 16px;
	text-align: left;
}
.rbp-plink {
	margin: 20px 0px;
	font-size: 16px;
}
.rbp-plink a {
	display: block;
	background: #3d4749;
	color: #fff;
	padding: 5px 10px;
	font-size: 16px;
	text-decoration: none;
}
.rbp-plink a:hover {
	text-decoration: none;
	background: #010e16;
}

.review-embed-text {
	margin: 10px;
	padding: 10px;
	border-radius: 20px;
	background: #fff;
	color: #062a57;
}
.review-embed-text a {
	color: #062a57;
}
/* Popup */
.nonbs-modal-con{
	min-height:200px;
	background:url(https://www.doctorschoiceawards.org/wp-content/themes/dca/images/loading.gif) center no-repeat; 
	padding: 10px; 
	text-align: center;
}
.nonbs-modal-con img{
	max-width:100%;
}
.nonbs-modal-con-top{
	padding:10px;
	color:#ffffff;
	background:#3b74b9;
	text-align:center;
	cursor:pointer;
	-moz-border-radius-topleft:15px;
	-moz-border-radius-topright:15px;
	-webkit-border-top-right-radius:15px;
	-webkit-border-top-left-radius:15px;
	border-top-left-radius:15px;
	border-top-right-radius:15px;
	-khtml-border-radius-topright:15px;
	-khtml-border-radius-topleft:15px
}
.nonbs-modal-con-bottom{
	padding:10px;color:#ffffff;
	background:#3b74b9;
	text-align:center;
	cursor:pointer;
	-moz-border-radius-bottomleft:15px;
	-moz-border-radius-bottomright:15px;
	-webkit-border-bottom-right-radius:15px;
	-webkit-border-bottom-left-radius:15px;
	border-bottom-left-radius:15px;
	border-bottom-right-radius:15px;
	-khtml-border-radius-bottomright:15px;
	-khtml-border-radius-bottomleft:15px}
.hr{
	height:1px;
	background:#aaaaaa;
	margin-top:10px;
	margin-bottom:10px;
	padding:0px
}
.nbs-slideOverlay{
	display:none;
	position:fixed;
	top:0px;
	left:0px;
	right:0px;
	bottom:0px;
	background:#000000;
	opacity:0.8;
	z-index:100000;
}
.nbs-slide{
	display:none;
	position:absolute;
	width:70%;
	left:15%;
	min-height:180px;
	top:100px;
	bottom:auto;
	background:#ffffff;
	z-index:100001; 
	overflow: hidden; 
	height: auto;
	border-radius: 10px;

-webkit-transition: -webkit-transform .3s ease-out;
    -o-transition: -o-transform .3s ease-out;
    transition: transform .3s ease-out;
}
.nbs-close{
	position:absolute;
	background:#ff0000;
	color:#ffffff;
	padding:10px 15px;
	text-decoration:none;
	right:10px;
	top:10px;
	font-size:18px;
	font-weight:bold;
	cursor:pointer;
	-moz-border-radius:50px;
	-webkit-border-radius:50px;
	border-radius:50px;
	-khtml-border-radius:50px
}
.nbs-close:hover{text-decoration:none}
.nonbs-modal-hide {display: none !important;}

.nonbs-modal-header {
	border-bottom: 1px #aaa solid;
	padding: 20px 60px 20px 10px;
	min-height: 60px;
}
.nonbs-modal-header h2 {
	margin: 0px;
	padding: 0px;
}
.nonbs-modal-content {
	overflow: hidden;
	height: auto;
	padding: 20px 0px 30px 10px;
}
.nonbs-modal-50 {
	float: left;
	width: 50%;
	padding-bottom: 15px
}
.nonbs-modal-wrap {
	padding: 0px 15px;
}
@media only screen and (max-width:1028px){
	.nbs-slide{
		width:90%;
		left:5%;
		top:50px;
		bottom:auto;
	}
	.nonbs-modal-50 {
		width: 100%;
	}
}
@media only screen and (max-width:768px){
	.rbnr-banner {
		display: block;
		width: 98%;
		margin: 1%;
	}
}

JS Part

JS part should be at the bottom of the page. You may place the overlay part before the body closing tag, and put js code in the custom js file.

<div class="nbs-slideOverlay"></div>
<div class="nbs-slide" id="nbs-slide">
<a href="javscript:void(0);" class="nbs-close">X</a>
<div class="nonbs-modal-con" id="nonbs-modal-con"> </div>
</div>

<script type='text/javascript' src='jquery.min.js'></script>
<script type="text/javascript">
jQuery(document).ready(function($){
	var rbnrBanner;
	$('.rbnr-banner-button').click(function(e) {
		e.preventDefault();
		rbnrBannerID = $(this).attr('id');
		rbnrBanner = $('#rbnrBanner'+rbnrBannerID).html();
		rbnrBannerTitle = $(this).attr('title');
		//$("html, body").animate({ scrollTop: 0 }, "slow");
		$('#nonbs-modal-con').delay(1000).html(rbnrBanner);

var scrollPos = $(document).scrollTop();
		scrollPos = scrollPos+50;
		//alert(scrollPos);

var destination = $(this).offset();
		$('.nbs-slide').css({top: scrollPos});

$('.nbs-slideOverlay').show();
		$('.nbs-slide').slideDown();
	});
});
// Close lightbox on click on overlay window
$(document).on("click", ".nbs-slideOverlay", function() {
  $('.nbs-slideOverlay').hide();
  $('.nbs-slide').hide();
  return false;
});
// Close lightbox on click on close button
$(document).on("click", ".nbs-close", function() {
  $('.nbs-slideOverlay').hide();
  $('.nbs-slide').hide();
  return false;
});
</script>