Tattle Redirect Survey Web Component
<!-- Tattle's Redirect Survey Web Component -->
<tttl-redirect-survey></tttl-redirect-survey>Web Component Standards
Tattle offers an easy drop-in solution for including customer questionnaires in any website. Our web components are fully compliant with current W3 specifications on Custom Elements, Shadow DOM, ES Modules and HTML Template Elements. You can find more details on those specifications at WebComponents.org. We use polyfills for legacy browser compatibility, although we still recommend using modern, evergreen browsers (Chrome, Firefox, Safari, Edge) for the best user experience. This means that Tattle web components are compatible and ready to use with your site and it couldn't be easier!
Component Installation & Setup
The web component is called tttl-redirect-survey and is published via NPM, making it accessible via CDN:
<script src="https://unpkg.com/tttl-redirect-survey/dist/tttl-redirect-survey/tttl-redirect-survey.js"></script>Or you can install it using NPM:
npm install tttl-redirect-surveyIf you install it via NPM and are developing it in a local environment you must put this in the <head> of your html document:
<script type='application/javascript' src='node_modules/tttl-redirect-survey/dist/tttl-redirect-survey.js'></script>Whichever installation method you choose, once it's installed you can use it in any web page just like any HTML element by placing its custom element tag in your HTML document where you want it to appear:
<tttl-redirect-survey></tttl-redirect-survey>Let's see what that looks like with an example in an HTML document:
<head>
<!-- you can load the web component via cdn with unpkg -->
<script src="https://unpkg.com/tttl-redirect-survey/dist/tttl-redirect-survey/tttl-redirect-survey.js"></script>
</head>
<body>
<!-- Use the web component like any HTML element and customize it with attributes. The only required attribute is 'tid' -->
<tttl-redirect-survey tid="{{your-32-character-Merchant-UUID}}"></tttl-redirect-survey>
</body>Supported Customization Attributes
The component's appearance can be altered with various attributes, but its functionality will remain the same. The demo above shows some of the customization that can be done on the web component by using the custom HTML attributes. The full list of supported attributes are as follows:
- tid a. Value: 32 character alphanumeric string b. Required to load component; does not have default value c. Description: Couples component functionality with your Tattle Merchant Account
- font
a. Value: CSS font-family string
b. Defaults to
'sans-serif'c. Description: Sets font family type for component text - color
a. Value: Hex color code string, i.e.
'#AA3E4C'b. Defaults to your account'sbrand_colorc. Description: Sets color of component header bar - rating
a. Value: enum
['face', 'faces', 'star', 'stars']b. Defaults to'star'c. Description: Sets rating icon style type - location
a. Value: enum
['left', 'right']b. Defaults to'right'c. Description: Sets which lower corner component will be rendered in. Below is an example of the component with all of the customization attributes being used:
<head>
<!-- you can load a font and use it in the web component -->
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
</head>
<body>
<tttl-redirect-survey
tid="{{your 32 character Merchant UUID}}"
font="Montserrat"
color="#aa0000"
rating='star'
location='right'
></tttl-redirect-survey>
</body>The only attribute that is required for the web component to work is tid, which is a 32 character alphanumeric string. It's also known as the Merchant UUID. This attribute couples your component instance with your Tattle merchant account. The web component will not load properly without providing a valid string for that attribute. You must contact Tattle to obtain your 32 character Merchant UUID.
Component Demonstration
The default component will appear similar to this on the page where it's embedded:
Component Functionality
The Tattle Redirect Survey provides an easy way for website's visitors to give customer experience feedback about their recent visit to your store. The feedback is captured by Tattle's customer feedback API in the same way as if the visitor had gone to one of Tattle's standard survey pages.
This widget will collect a customer's overall experience rating and then redirect them to our standard survey questionnaire. Upon landing on the survey questionnaire, the overall rating is saved and then the rest of the feedback that the visitor decides to give can be collected and saved.
The component can be easily minimized and/or dismissed by any visitor to your web page so that it does not interfere with the normal functioning of your website. All functionality and styling rules are fully encapsulated using the Shadow DOM Web API so that it is impossible for this component's code to overwrite any functionality or styling on the web page that it is embedded on.
