Skip to main content

Custom CSS & JavaScript

Kathryn Hamilton
Kathryn Hamilton
  • Updated

Overview: What are we talking about?

Gingr allows you to embed custom CSS & JavaScript into the customer-facing application. This allows you to do many things, but the most common use cases are customized color & fonts and embed advertising campaign trackers. This functionality is offered by Gingr, but requires the help of a 3rd party web developer hired by your business. Our support and development teams are not able to provide guidance for implementing the following instructions.

This article includes:

 

 

How to: Add Custom CSS & JavaScript.

To add custom CSS or JavaScript, navigate to Left-hand Navigation: Admin » Custom Configurations. Locate the Customer app CSS and Customer app JS/Customer app footer fields and copy/paste your code into the respective box. Once finished, click the green Save button at the bottom of the page. 

Gingr automatically includes the <style> tag in the Customer App CSS Field, as well as a <script> tag in the Customer App JS field, so there's no need to include that yourself.  

If you are using provided code that contains a <script> tag, then you'll want to paste it into the Customer App Footer field on the Custom Configurations page. This field does not include a <script> tag automatically.

 

 

JavaScript events emitted

JavaScript events can be used to trigger a conversion in Google AdWords, Facebook Pixel etc. 

  • reservation_created - This event is emitted when a reservation or appointment request has been made
  • owner_created - This event is emitted when a customer registers a new account
  • lead_created - This event is emitted when a customer submits a lead form

  

Listening for Custom JavaScript Events

You'll want to add your code that listens for custom JavaScript events in the Customer app JS or Customer app footer field on the Custom Configurations page. Below is an example listener function for the reservation_created event. 

Example:

Js
document.addEventListener('reservation_created', function (e) { 
    // add conversion code here
    // e.detail.reservation_ids is an object which contains the animal ID & reservation IDs of what was just created
}, false);

 

 

Js
document.addEventListener('owner_created', function (e) { 
    // add conversion code here
    // e.detail is an object which contains the user supplied data that was submitted on the form.
}, false);

 

 

Google Tag Manager (AdWords/Analytics) Example

Below is an example outlining the code you'll want to add to the Customer app footer field on the Custom Configurations page to notify Google Tag Manager when a customer requests a reservation in Gingr. 

Note, you'll first need to configure Google Tag Manager (https://tagmanager.google.com). The below example assumes you have created a Tag called Reservations. If you want to use a different tag, replace Reservations and created in the example below with your desired settings.  

Note, you'll want to replace MY_GTM_ID in the below example with the GTM- ID provided to you by Google. Alternatively, you can visit tagmanager.google.com -> Admin -> Install Tag Manager to retrieve the code specific to your account.

 

Js
<!-- Google Tag Manager -->
<script async="" src="https://www.googletagmanager.com/gtm.js?id=MY_GTM_ID"></script>
<!-- End Google Tag Manager -->


<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=MY_GTM_ID"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

<script>
document.addEventListener('reservation_created', function (e) { 
     ga('send', 'event', 'Reservations', 'created');
}, false);
</script>

 

 

Facebook Pixel Example 

Below is an example outlining the code you'll want to add to the Customer app footer field on the System-wide Settings page to notify Facebook Pixel when a customer requests a reservation in Gingr. 

Note, you'll first need to configure Facebook Pixel (https://www.facebook.com/business/a/facebook-pixel). 

Note, you'll want to replace MY_FB_PIXEL_ID in the below example with the Pixel ID provided to you by Facebook. Alternatively, you can visit your Facebook Pixel Dashboard to retrieve the code specific to your account. 

 

Js
<!-- Facebook Pixel Code -->
<script>
!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
document,'script','//connect.facebook.net/en_US/fbevents.js');

fbq('init', 'MY_FB_PIXEL_ID');
</script>

<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=MY_FB_PIXEL_ID&ev=Reservation&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->


<script>
document.addEventListener('reservation_created', function (e) { 
    fbq('track', 'Lead', {});
}, false);
</script>

Was this article helpful?

0 out of 0 found this helpful

Have more questions? Submit a request

Comments

0 comments

Article is closed for comments.

Powered by Zendesk