Please follow these 6 instruction steps to set up the Capitula campaign for Shopify website.
Please login to your Shopify store and install this XO Insert Code App
Once you have installed the XO Insert Code App you will see it when you click on the Apps.
Click on the app and click on the button “Add new code”, this will show you 3 boxes: header, body, and footer.
Please copy ALL of the <script code below and insert it into the ‘Body box’ and Click on the ‘Save’ button.
<script>document.write(“<script type=’text/javascript’ src=’https://demo.capitula.co.uk/assets/js/capitula_cdn.js?v=“ + Date.now() + “‘><\/script>“);</script>
<script type=”text/javascript“>if(typeof jQuery == ‘undefined‘){document.write(‘<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js”></‘+‘script>‘);}</script>
<script>
document.addEventListener(“DOMContentLoaded“, function() {
// Select the contact form
var contactForm = document.querySelector(‘#ContactForm‘);
var emailValue = ”;
if (contactForm) {
console.log(‘Contact form found.‘);
// Listen for changes to the email input field
var emailInput = document.querySelector(‘input[name=”contact[email]”]‘);
if (emailInput) {
emailInput.addEventListener(‘input‘, function(event) {
emailValue = event.target.value;
console.log(‘Captured email:‘, emailValue);
});
} else {
console.log(‘Email input field not found.‘);
}
// Prevent default form submission and handle manually
contactForm.addEventListener(‘submit‘, function(event) {
event.preventDefault(); // Prevent default form submission
// Capture the form data
var formData = new FormData(contactForm);
// Submit the form via AJAX
fetch(contactForm.action, {
method: ‘POST‘,
body: formData,
headers: {
‘X-Requested-With‘: ‘XMLHttpRequest‘
}
})
.then(response => response.text())
.then(responseText => {
console.log(‘Form submitted via AJAX.‘);
// Store the email in session storage
if (emailValue) {
sessionStorage.setItem(‘submittedEmail‘, emailValue);
}
// Redirect to the custom thank you page
window.location.href = ‘/pages/thank-you‘;
})
.catch(error => {
console.error(‘Error submitting form:‘, error);
});
});
} else {
console.log(‘Contact form not found.‘);
}
});
</script>
Click on ‘Settings’ at the bottom left corner to open the website settings page. From the sidebar please click on “Checkout” scroll down to the “Order status page additional scripts” section and paste ALL the following <script code and click ‘Save’.
<script>
document.write(“<script type=’text/javascript’ src=’https://demo.capitula.co.uk/assets/js/capitula_cdn.js?v=“ + Date.now() + “‘><\/script>“);
</script>
<script type=”text/javascript“>
if(typeof jQuery == ‘undefined‘){
document.write(‘<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js”></‘+‘script>‘);
}
</script>
<script>
document.addEventListener(“DOMContentLoaded“, function() {
// Wrap Transaction ID
var transactionIdElement = document.querySelector(“.os-order-number“);
if (transactionIdElement) {
var newTransactionIdElement = document.createElement(“capitula_trans“);
newTransactionIdElement.innerHTML = transactionIdElement.innerHTML;
transactionIdElement.parentNode.replaceChild(newTransactionIdElement, transactionIdElement);
}
// Wrap Total Amount
var totalAmountElement = document.querySelector(“.payment-due__price“);
if (totalAmountElement) {
// Extract the numeric value using a regular expression
var totalAmountString = totalAmountElement.innerHTML;
var totalAmount = parseFloat(totalAmountString.replace(/[^\d.-]/g, ”));
// Create and update the new element
var newTotalAmountElement = document.createElement(“capitula_pay“);
newTotalAmountElement.innerHTML = totalAmount.toFixed(2); // Format the number to 2 decimal places if needed
totalAmountElement.parentNode.replaceChild(newTotalAmountElement, totalAmountElement);
}
});
</script>
Now close ‘Settings’ and click on Online Store and then click on Pages. We next have to create a custom Thank You Page.
Click on the “Add Page” button Title will be “Thank you” and then click on this icon </>.
Next paste ALL the following <script code into the content area and click ‘Save’.
<script>
document.addEventListener(“DOMContentLoaded“, function() {
var submittedEmail = sessionStorage.getItem(‘submittedEmail‘);
if (submittedEmail) {
var emailDisplayElement = document.querySelector(‘#emailDisplay‘);
if (emailDisplayElement) {
emailDisplayElement.innerHTML = ‘<capitula_email>‘ + submittedEmail + ‘</capitula_email>‘;
}
}
});
</script>
<p>Thank you for contacting us!</p>
<p>Your email: <span id=”emailDisplay“></span></p>
Congratulations, you have completed this set-up.
FINALLY, please inform your key contact at Capitula via email to confirm next steps & testing.
Please follow these 5 instruction steps to set up the
Capitula campaign for Shopify website
STEP
Please login to your Shopify store and install this XO Insert Code App
STEP
Once you have installed the XO Insert Code App you will see it when you click on the Apps.
STEP
Click on the app and click on the button “Add new code”, this will show you 3 boxes: header, body, and footer.
Please copy the CDN code below and paste it into the header section.
Great now we have to copy the code to register the CPL if you are using the contact form and email subscription please copy both codes below into the body section, if not then you can skip the one you are not using and click on save button.
Contact us from code
Email subscription code
STEP
Click on ‘Settings’ at the bottom left corner to open the website settings page. From the sidebar please click on “Checkout” scroll down to the “Order status page additional scripts” section and paste ALL the following <script code and click ‘Save’.
STEP
Now close ‘Settings’ and click on Online Store and then click on Pages. We next have to create a custom Thank You Page.
Click on the “Add Page” button Title will be “Thank you” and then click on this icon </>.
Congratulations, you have completed this set-up.
FINALLY, please inform your key contact at Capitula via email to confirm next steps & testing.