Website Integration Resource Page
Welcome to Your DJEP Website Integration Resource Page!
We’ve created this page specifically for you and/or your website designer to review and test your DJ Event Planner (DJEP) integration codes before implementing them on your site. Here, you’ll find detailed steps, tips, and examples of how these tools can be used effectively. While the examples showcase how I’ve integrated them into my own DJ business website, they are simply meant to inspire and guide you—your approach can and should reflect your unique brand and goals.
Please note: While the codes provided work in this environment, they may not function as intended with all website builders or themes. If you experience difficulties getting them to work on your site, don’t hesitate to reach out—we’re here to help. You can schedule a Zoom video call with our support team for assistance.
Important: Once the integration pieces are placed on your website, please email the new page URLs and the locations of all integrated tools to our support team at support@superiorcrms.com. This step is essential so we can complete the necessary settings configuration within DJ Event Planner.
We’re excited to collaborate with you on making your website work seamlessly with DJEP!
Thank you,
Keith B. Clark
Superior CRMs
REQUEST FOR INFO. FORM
The Client Login form is usually placed on its own page or at the bottom of the Contact page. Additionally, we’ve provided a link for the Client Logout page, which you can customize to include your social media links and encourage clients to follow you.
PAGES TO REFERENCE:
https://www.creativespindjs.ca/contact
Embed this code where you want the the above form to be on your website.
<!-- BEGIN DJEVENTPLANNER CODE -->
<div class="col-xs-12 col-sm-8 col-sm-offset-2"><script src='https://jdjclients.com/check_req_info_form.js' language='javascript' type='text/javascript'></script>
<style>.formbutton{border:1px solid #FF63E1 !important;background-color:#FFF !important;color:#23469 !important;background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ff80ec), color-stop(100%, #b5009a))!important;
background: -webkit-linear-gradient(top, #ff80ec 0%, #b5009a 100%)!important;background: linear-gradient(to bottom, #ff80ec 0%, #b5009a 100%)!important;font-size:12px !important;font-weight:600 !important;border-radius:0px !important;padding:10px 50px !important;margin:3px 3px !important;}</style><style>.form-control {padding:0px 12px !important;}</style><link rel="stylesheet" href="https://jdjclients.com/clients/includes/mobile-framework.css">
<link rel="stylesheet" href="https://jdjclients.com/includes/style-responsivetools-min.css">
<script>if(!window.jQuery){var script = document.createElement('script');script.type = 'text/javascript';script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js';document.getElementsByTagName('head')[0].appendChild(script);}</script>
<form method="post" action="https://jdjclients.com/request_information.asp" onSubmit="return submitIt(this);" name="reqinfoform" style="margin:10px 20px;">
<input type='hidden' name='checkdate' value=''><input type='hidden' name='djidnumber' value='23469'><input type='hidden' name='action' value='add_information_request'><input type='hidden' name='validation_key' value='f2aadc8af691e1cf00e0aa1c96adbca7'><div class="djepcode">
<div style="padding:13px;background-color:#FFFFFF;color:#000000;">
<div class="form-group">
<div class="col-sm-4 col-md-3 padding-tb-7">
<div class="padding-lr-5">First Name <span style="font-weight:900; color:#FF63E1;">*</span></div>
</div>
<div class="col-sm-8 col-md-9"><input type="text" class="form-control width90hack" id="first_name" name="first_name"></div>
<div class="cf"></div><div style="height:0px;"></div>
</div>
<div class="form-group">
<div class="col-sm-4 col-md-3 padding-tb-7">
<div class="padding-lr-5">Last Name <span style="font-weight:900; color:#FF63E1;">*</span></div>
</div>
<div class="col-sm-8 col-md-9"><input type="text" class="form-control width90hack" id="last_name" name="last_name"></div>
<div class="cf"></div><div style="height:0px;"></div>
</div>
<div class="form-group">
<div class="col-sm-4 col-md-3 padding-tb-7">
<div class="padding-lr-5">Email Address <span style="font-weight:900; color:#FF63E1;">*</span></div>
</div>
<div class="col-sm-8 col-md-9"><input type="text" class="form-control width90hack" id="email" name="email"></div>
<div class="cf"></div><div style="height:0px;"></div>
</div>
<div class="form-group">
<div class="col-sm-4 col-md-3 padding-tb-7">
<div class="padding-lr-5">Phone Number<input type=hidden name=q4_mapto value=cell_phone></div>
</div>
<div class="col-sm-8 col-md-9"><input class="form-control width90hack" type=text name=question_4 size=30 maxlength=250>
</div>
<div class="cf"></div><div style="height:0px;"></div>
</div>
<div class="form-group">
<p class="questiontitle" style="margin-left:15px;"><strong>If you prefer text messages, please enter your mobile number above.</strong></p><div class="cf"></div><div style="height:10px;"></div>
<div class="form-group">
<div class="col-sm-4 col-md-3 padding-tb-7">
<div class="padding-lr-5">Date of Event <span style="font-weight:900; color:#FF63E1;">*</span></div>
</div>
<div class="col-sm-8 col-md-9"><span class="metro-table" id="date_select"><select name=month class="form-control monthselect" style="float:left;width:31%;margin:2px;" ><option value=43>Month</option><option value=1>January (1)</option><option value=2>February (2)</option><option value=3>March (3)</option><option value=4>April (4)</option><option value=5>May (5)</option><option value=6>June (6)</option><option value=7>July (7)</option><option value=8>August (8)</option><option value=9>September (9)</option><option value=10>October (10)</option><option value=11>November (11)</option><option value=12>December (12)</option>
</select>
<select name=day class="form-control dayselect" style="float:left;width:31%;margin:2px;" ><option value=43>Day<option value=1>1</option><option value=2>2</option><option value=3>3</option><option value=4>4</option><option value=5>5</option><option value=6>6</option><option value=7>7</option><option value=8>8</option><option value=9>9</option><option value=10>10</option><option value=11>11</option><option value=12>12</option><option value=13>13</option><option value=14>14</option><option value=15>15</option><option value=16>16</option><option value=17>17</option><option value=18>18</option><option value=19>19</option><option value=20>20</option><option value=21>21</option><option value=22>22</option><option value=23>23</option><option value=24>24</option><option value=25>25</option><option value=26>26</option><option value=27>27</option><option value=28>28</option><option value=29>29</option><option value=30>30</option><option value=31>31</option>
</select>
<select name=year id="year-select" class="form-control yearselect" style="float:left;width:31%;margin:2px;">
<option value=43>Year</option>
</select>
<script>
(function() {
var currentYear = new Date().getFullYear();
var select = document.getElementById('year-select');
for (var i = 0; i < 5; i++) {
var year = currentYear + i;
var option = document.createElement('option');
option.value = year;
option.text = year;
if (i === 0) option.selected = true;
select.appendChild(option);
}
})();
</script>
</span></div>
<div class="cf"></div><div style="height:0px;"></div>
</div>
<div class="form-group">
<div class="col-sm-4 col-md-3 padding-tb-7">
<div class="padding-lr-5">Type Of Event <span style="font-weight:900; color:#FF63E1;">*</span></div>
</div>
<div class="col-sm-8 col-md-9"><select name=event_type class="form-control responsive-form-select"><option value=''>Please select...</option><option >Anniversary Party</option><option >Atlanta Braves - Pre Game Party</option><option >Atlanta Braves - Watch Party</option><option >Atlanta Braves - Post Game Party</option><option >Atlanta Braves - Braves Fest</option><option >Awards Banquet</option><option >Bar/Bat Mitzvah</option><option >Baraat</option><option >Basketball Watch Party</option><option >Birthday Party</option><option >Block Party</option><option >Broncos Tail Gate Party</option><option >Car and Motorcycle Show - Rally</option><option >College Formal</option><option >Commitment Ceremony - Reception</option><option >Corporate Party</option><option >Engagement Party</option><option >Equipment Rental Only</option><option >Fashion Show</option><option >Father - Daughter Dance</option><option >Fitness Event</option><option >Football Bingo</option><option >Football Watch Party</option><option >Fraternity Formal</option><option >Graduation Party</option><option >Greek Event</option><option >GridIron Challenge</option><option >Hindu Baraat- Wedding and Reception</option><option >Holiday Party</option><option >In-Game DJ</option><option >JAMMbulance Rental and Appearance</option><option >JAMMIN CLUB NIGHT</option><option >JAMMIN KARAOKE</option><option >JAMMIN TRIVIA</option><option >JAMMIN' BINGO</option><option >JAMMIN' FEUD</option><option >JAMMIN' Feud After Dark</option><option >JAMMIN' INSYNC</option><option >JAMMIN' PONG</option><option >JAMMIN' Sparks</option><option >Lighting Only</option><option >Mehndi</option><option >Military Ball</option><option >Mother - Son Dance</option><option >Movie Night</option><option >Non-Profit Event</option><option >Photo Booth Rental - only</option><option >Photography (Bronze Package)</option><option >Photography (Gold Package)</option><option >Pool Party</option><option >Private Party</option><option >Promotional Event</option><option >Quinceañera</option><option >Rehearsal Dinner</option><option >Rental</option><option >Retirement Party</option><option >Reunion</option><option >Rockies Watch Party</option><option >Salsa Night</option><option >Sangeet</option><option >School Dance</option><option >Sorority Formal</option><option >Tailgate Party</option><option >VIP Client</option><option >Vow Renewal</option><option >Wedding Reception</option><option >Wedding Reception and Ceremony</option><option >Wedgewood Wedding and Reception</option></select></div>
<div class="cf"></div><div style="height:0px;"></div>
</div>
<div class="form-group">
<div class="col-sm-4 col-md-3 padding-tb-7">
<div class="padding-lr-5">Event Location <span style="font-weight:900; color:#FF63E1;">*</span><input type=hidden id=question_3 name=question_3 value=TRUE><input type=hidden name=q3_mapto value=comments></div>
</div>
<div class="col-sm-8 col-md-9"><input class="form-control width90hack" type=text name=question_3 size=30 maxlength=250>
</div>
<div class="cf"></div><div style="height:0px;"></div>
</div>
<div class="form-group">
<div class="col-sm-4 col-md-3 padding-tb-7">
<div class="padding-lr-5">What services are you interested in?<input type=hidden name=q1_mapto value=comments></div>
</div>
<div class="col-sm-8 col-md-9"><input type=checkbox name='question_1' value='DJ' > DJ<br><input type=checkbox name='question_1' value='Photo Booth' > Photo Booth<br><input type=checkbox name='question_1' value='Up-Lighting' > Up-Lighting<br><input type=checkbox name='question_1' value='A/V Rental' > A/V Rental<br><input type=checkbox name='question_1' value='Atmospherics - Cold Sparks, CO2' > Atmospherics (Cold Sparks, CO2)<br></div>
<div class="cf"></div><div style="height:0px;"></div>
</div>
<div class="form-group">
<div class="col-sm-4 col-md-3 padding-tb-7">
<div class="padding-lr-5">Message</div>
</div>
<div class="col-sm-8 col-md-9"><textarea name=additional_information rows=5 cols=25 class="form-control width90hack"></textarea></div>
<div class="cf"></div><div style="height:0px;"></div>
</div>
<div class="form-group">
<div class="col-sm-4 col-md-3 padding-tb-7">
<div class="padding-lr-5">How did you hear about us?</div>
</div>
<div class="col-sm-8 col-md-9"><input type=text name=req_source class="form-control width90hack" maxlength=50></div>
<div class="cf"></div><div style="height:0px;"></div>
</div>
<div class="form-group"><div class="col-sm-12 col-sm-offset-0"><p><label class="questiontitle"><input type=checkbox name=privacy_policy value="true"> Please tick this box to agree to our Privacy Policy <a href="https://jdjclients.com/privacy.asp?djidnumber=23469&view=websitetools" target="_blank">(Click To View)</a></label><label class="questiontitle"><input type=checkbox name=sms_consent value="true"> CLICK HERE To OPT-IN SMS Communication: Message frequency varies and includes appointment reminders, service information, or event updates only. Message and data rates may apply. Opt-out at anytime by replying STOP.</label></p></div></div>
<div class="form-group"><div class="col-sm-10 col-sm-offset-0"><p><br class="visible-xs hidden-sm hidden-md hidden-lg"></p></div></div><br><p align="center"><input type=submit name=submit value=Send class="formbutton"><input type="hidden" name="thank_you_url" value="https://www.myjammindjs.com/thank-you"></p><br>
</div>
</div>
</form>
</div>
<!-- END DJEVENTPLANNER CODE -->
HAVE QUESTIONS, NEED HELP? SCHEDULE A CALL...
CLIENT LOGIN FORM
The Client Login form is normally found on either its own page, or near the bottom of the contact page. We’ve also included a link below for the Client Logout page we created for when the client logs out of the system. The Logout page can include your social media links and where they can follow you.
PAGES TO REFERENCE:
https://www.creativespindjs.ca/login
https://www.creativespindjs.ca/logout
PAGES TO REFERENCE:
https://www.creativespindjs.ca/login
https://www.creativespindjs.ca/logout
<!-- BEGIN DJEVENTPLANNER CODE -->
<link rel="stylesheet" href="https://jdjclients.com/includes/style-responsivetools-min.css">
<SCRIPT LANGUAGE="javascript">function SendPasswordWindow() {w = window.open('https://jdjclients.com/sendpassword.asp?typeoflogon=client','w','width=200,height=100,menubar=no,scrollbars=no,resizable=yes,location=no,directories=no,status=no');w.focus();} function remember_logon_warning(rlw_checkbox) {if (rlw_checkbox.checked) {window.alert('Do not select this option at a public terminal or on a shared computer.');} } function breakout_of_frame() {if (top.location != location) {top.location.href = document.location.href ;}}</SCRIPT><div class="djepcode"><div class="container"><div class="panel" style='font-size:18px!important;background-color:#FFFFFF;color:#000000;'><div class="panel-body" style='font-size:14px!important;background-color:#FFFFFF;color:#000000;'><form role="form" name="logonform" action="https://jdjclients.com/clientlogon.asp?djidnumber=23469" method="post"><div class="form-group"><label for="username">Username:</label><input type="text" name="username" class="form-control input-lg" id="username"></div><div class="form-group"><label for="password">Password:</label><input type="password" name="password" class="form-control input-lg" id="password"></div><button type="submit" name="submit" class="btn-lg btn-block btn-default" style="border:1px solid #FF63E1 !important;background-color:#FFF !important;color:#23469 !important;background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ff80ec), color-stop(100%, #b5009a))!important;
background: -webkit-linear-gradient(top, #ff80ec 0%, #b5009a 100%)!important;background: linear-gradient(to bottom, #ff80ec 0%, #b5009a 100%)!important;font-size:12px !important;font-weight:600 !important;border-radius:0px !important;color: #FFF; font-weight:500 !important;font-size:16px !important;font-weight:600 !important;border-radius:0px !important;padding:10px 50px !important;margin:3px 3px !important;">SUBMIT</button></form></div></div><p align="center"><a href="javascript:SendPasswordWindow()">Forgot your password?</a></p></div></div>
<!-- END DJEVENTPLANNER CODE -->
HAVE QUESTIONS, NEED HELP? SCHEDULE A CALL...
CHECK AVAILABILITY
The Check Availability feature is typically placed on its own page or at the bottom of the Contact page. You can also create a custom success page for after the form is submitted, which could include links to your social media profiles and a message encouraging visitors to follow you.
PAGES TO REFERENCE:
https://www.creativespindjs.ca#check-availability
https://www.creativespindjs.ca/date-available
<!-- BEGIN DJEVENTPLANNER CODE -->
<form method=post action="https://jdjclients.com/check_availability.asp"style="margin:10px 20px;">
<input type=hidden name=djidnumber value=23469>
<link rel="stylesheet" href="https://jdjclients.com/includes/style-responsivetools-min.css">
<div class="djepcode">
<div align=center>
<div style='border:1px solid #FFFFFF;border-collapse:collapse;'>
<div style="padding:8px 5px;">Select the date of your event. Then click on the check availability button to instantly check for our availability.</div>
<div style="width:90%;">
<select name=month class="form-control" style="display:inline-block;width:32%;"><option value=-43>Month<option value=1>January<option value=2>February<option value=3>March<option value=4>April<option value=5>May<option value=6>June<option value=7>July<option value=8>August<option value=9>September<option value=10>October<option value=11>November<option value=12>December</select>
<select name=day class="form-control" style="display:inline-block;width:32%;"><option value=-43>Day<option value=1>1<option value=2>2<option value=3>3<option value=4>4<option value=5>5<option value=6>6<option value=7>7<option value=8>8<option value=9>9<option value=10>10<option value=11>11<option value=12>12<option value=13>13<option value=14>14<option value=15>15<option value=16>16<option value=17>17<option value=18>18<option value=19>19<option value=20>20<option value=21>21<option value=22>22<option value=23>23<option value=24>24<option value=25>25<option value=26>26<option value=27>27<option value=28>28<option value=29>29<option value=30>30<option value=31>31</select>
<select name=year class="form-control" style="display:inline-block;width:32%;"><option value=-43>Year<option value=2026>2026<option value=2027>2027<option value=2028>2028<option value=2029>2029</select>
</div>
<div style="width:90%;">
<div style="margin:10px;"><input type=submit value='SUBMIT' class="formbutton"></div>
</div>
</div>
</div>
</div>
</form>
<!-- END DJEVENTPLANNER CODE -->
HAVE QUESTIONS, NEED HELP? SCHEDULE A CALL...
OTHER PAGES -
Thank You for Signing
This page is used to redirect clients after they’ve signed the contract. It’s especially helpful if you have a separate payment arrangement, such as collecting payment after the event. Having this page available ensures a seamless experience when needed.
PAGES TO REFERENCE:
Reminder:
Once you’ve placed the integration pieces on your website, please email the URLs and the specific locations of the integrated tools to our support team at support@superiorcrms.com. This step is essential to ensure we can complete the settings configuration within DJ Event Planner and make everything work seamlessly.