Articles in this section

Connecting the Customer Portal to Your Location's Website

Avatar
Brittney Trahan
  • Updated
Follow

Overview: What are we talking about?

Gingr's Customer Portal allows pet parents ease of access to their information, the ability to request reservations and appointments, upload immunizations, purchase packages, retail items, and more.

While customers can do all of these things within the customer portal by direct access, it's important for the business to provide them a way to access the portal—we recommend that you provide a link to the customer portal on your location's website for this purpose. There are two ways to link to the Gingr customer portal on your website—you can provide a link which would direct the customer to a new window to log into the portal, or you can embed the portal directly into your website.

This article includes:

 

Helpful Hints: Before you begin.

  • Before you get started, take a moment to understand how your business' website is set up. Do you have access to configure it or know who does? You will need access to edit your business website in order to implement the directions below. This may require the assistance of a developer or IT professional. Outside of the instructions below, our support teams are unable to assist with this process.

 

 

Set it Up: Let's get started. 

Creating a Link to the Customer Portal on your Website

Creating a link for existing customers

  1. Edit your website layout.

  2. Add the following link information to your website for existing customers to log in: https://businessname.gingrapp.com/front_end/login/email where you will replace businessname with your own Gingr app (commonly your business name).
    • Linking the customer portal with a “Log In” button or a “click here to log in” text link will be a more seamless experience for your customers. This link will take customers directly to the login page where they can log in to their existing account in Gingr using their email address or mobile phone number on file.

 

 

Creating a link for new customers

  1. Edit your website layout.

  2. Add the following link information to your website for existing customers to log in: https://businessname.gingrapp.com/front_end/new_customer where you will replace businessname with your own Gingr app (commonly your business name).
    • Linking the customer portal with a "Register Now” button or a “click here to register” text link will be a more seamless experience for your customers. This link will take customers directly to the registration page.

 

Creating a link for contact us

  1. Edit your website layout.

  2. Add the following link information to your website for existing customers to log in: https://businessname.gingrapp.com/front_end/facility where you will replace businessname with your own Gingr app (commonly your business name).
    • Linking the customer portal with a "Contact Us” button will be a more seamless experience for your customers. This link will take customers directly to the lead form.

 

Embedding the Customer Portal into your Website

While the steps will vary a bit between Content Management Systems (CMS), below are  generalized instructions.

 

Example Using Inline Targeting

This example demonstrates how placing the embeddable code anywhere on the page will result in the customer portal being embedded right where that code was placed. This is the easiest way to embed the customer portal.

  1. First, you'll need to add Gingr's embeddable code to your website. You'll want to add this to the <head> section of your website. Many CMS' call this "Code Injection" or "Custom Header Code". Locate where to embed header code on your website and paste the following code between <head> and </head>. 
    1. <script type="text/javascript" src="https://storage.googleapis.com/gingr-embeddable/assets/js/bundle.js"></script>

    Note: If you have already embedded a Lead Form or Photo Stream on your website, you already have done this step and can move to step 2. 

  2. Next, you'll want to paste another bit of code exactly where you would like your customer portal to be displayed. You'll be pasting in HTML, or Source Code into your website. Be sure to not paste this directly into a rich-text editor or text block. 
    1. <script>
       window.GingrForms.embedCustomerPortal({
           allow_new_customers: true,
           subdomain: 'YOUR_BUSINESS_NAME',
           iframe_attributes: {
               style: {
                   width: "100%",
                   height: "800px",
                   border: "1px solid #ccc"
               }
           }
       })
      </script>
  3. Here, you have some customization available within the this script. You can customize:

    • allow_new_customers: this can be set to true or false—this determines if a new customer can register via this page or if only existing pet parents can log in.
    • subdomain: this should be your app's subdomain—if your app is demo.gingrapp.com, your subdomain is demo
    • iframe attributes: this is where you can optionally customize the iframe sizing

  4. Now, save your changes. The Customer Portal is now embedded where you pasted the code in step #2.

 

Example Using Explicit Targeting

This example demonstrates how you can create a target container (in this case, #exampleTargetContainer) and then use Gingr's embeddable code anywhere by adding a target parameter to the code.

  1. First, you'll need to add Gingr's embeddable code to your website. You'll want to add this to the <head> section of your website. Many CMS' call this "Code Injection" or "Custom Header Code". Locate where to embed header code on your website and paste the following code between <head> and </head>. 
    1. <script type="text/javascript" src="https://storage.googleapis.com/gingr-embe

    Note: If you have already embedded a Lead Form or Photo Stream on your website, you already have done this step and can move to step 2. 

  2. Next, you'll want to paste another bit of code exactly where you would like your customer portal to be displayed. You'll be pasting in HTML, or Source Code into your website. Be sure to not paste this directly into a rich-text editor or text block. 
    1. <script>
       window.GingrForms.embedCustomerPortal({
           allow_new_customers: true,
           subdomain: 'YOUR_BUSINESS_NAME',
           target: "#exampleTargetContainer",
           iframe_attributes: {
               style: {
                   width: "100%",
                   height: "800px",
                   border: "1px solid #ccc"
               }
           }
       })
      </script>
  3. Here, you have some customization available within the this script. You can customize:

    • allow_new_customers: This can be set to true or false—this determines if a new customer can register via this page or if only existing pet parents can log in.
    • subdomain: This should be your app's subdomain—if your app is demo.gingrapp.com, your subdomain is demo.
    • target: The target defines where to put the widget on your site, instead of putting it on the page where the code was pasted to.
    • iframe attributes: this is where you can optionally customize the iframe sizing
  4. Now, save your changes. The Customer Portal is now embedded per the target in step #2.

 

FAQ: Check this out!

 

Can I see an example of the types of embedding in action?

Absolutely! Check out this page to see how this works: https://storage.googleapis.com/gingr-embeddable/customerportal.html

 

Can I bypass the login screen for the customer portal?

No, customers will always be required to log in to access their portal.

 

 

Related articles

Comments

0 comments

Article is closed for comments.

Powered by Zendesk