@tattle-test/tttl-embed-survey NPM

Tattle Embed Survey Web Component

<!-- Tattle's Embed Survey Web Component -->
<tttl-embed-survey></tttl-embed-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-embed-survey and is published via NPM, making it accessible via CDN:

<script src="https://unpkg.com/tttl-embed-survey/dist/tttl-embed-survey/tttl-embed-survey.js"></script>

Or you can install it using NPM:

npm install tttl-embed-survey

If 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-embed-survey/dist/tttl-embed-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-embed-survey></tttl-embed-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-embed-survey/dist/tttl-embed-survey/tttl-embed-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-embed-survey tid="{{your-32-character-Merchant-UUID}}"></tttl-embed-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 <required>
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 <optional>
a. Value: CSS font-family string
b. Defaults to 'Roboto'
c. Description: Sets font family type for component text
color <optional>
a. Value: Hex color code string, i.e. '#AA3E4C'
b. Defaults to your account's brand_color
c. Description: Sets color of component header bar
icon <optional>
a. Value: enum ['face', 'faces', 'star', 'stars']
b. Defaults to 'star'
c. Description: Sets rating icon style type
position <optional>
a. Value: enum ['left', 'right']
b. Defaults to 'right'
c. Description: Sets which lower corner component will be rendered in.
overall-header <optional>
a. Value: string
b. Defaults to 'Did you dine with us recently?'
c. Description: Sets the header text for the first overall question
header-text-font-size <optional>
a. Value: CSS font size string
b. Defaults to '15px'
c. Description: Sets the font size for the header text
header-text-color <optional>
a. Value: CSS color string
b. Defaults to 'black'
c. Description: Sets the font color for the header text
header-text-transformation <optional>
a. Value: CSS transformation string (ex: 'capitalize', 'uppercase', or 'lowercase')
b. Defaults to 'none'
c. Description: Sets the text transformation for the header text
header-close-button-color <optional>
a. Value: CSS color string
b. Defaults to 'white'
c. Description: Sets the color of the x button in the header
question-font <optional>
a. Value: CSS font-family string
b. Defaults to 'Roboto'
c. Description: Sets font family type for the body of the questions
overall-question-font-size <optional>
a. Value: CSS font size
b. Defaults to '16px'
c. Description: Sets font size for the overall question (the first question in a step that provides a star rating)
survey-question-font-size <optional>
a. Value: CSS font size
b. Defaults to '14px'
c. Description: Sets font size for the survey question header
answer-font-size <optional>
a. Value: CSS font size
b. Defaults to '14px'
c. Description: Sets font size for the answers available to the user
visit-info-header <optional>
a. Value: string
b. Defaults to 'Can we ask a few more questions?'
c. Description: Sets the header text for the visit information step
location-search-header <optional>
a. Value: string
b. Defaults to 'Where was your experience?'
c. Description: Sets the header text for the location search step
thanks-header <optional>
a. Value: string
b. Defaults to 'We Appreciate Your Feedback!'
c. Description: Sets the header text for the end of feedback step
additional-information-header <optional>
a. Value: string
b. Defaults to 'Additional Information'
c. Description: Sets the header text for the additional information step, if applicable

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">
  <link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
</head>
<body>
    <tttl-embed-survey 
    tid="{{your 32 character Merchant UUID}}"
    font="Montserrat"
    color="#aa0000"
    icon='star'
    position='right'
    header-text-font-size="18px"
    header-text-weight="1000"
    header-text-color="#ffb3b3"
    header-text-transformation="capitalize"
    header-close-button-color="#ccddff"
    overall-header='This is the overall header'
    visit-info-header='This is the visit info header'
    location-search-header='This is the location search header'
    thanks-header='This is the thanks header'
    additional-information-header='This is the additional info header'
    overall-question-font-size="16px"
    survey-question-font-size="16px"
    answer-font-size="12px"
    question-font="Poppins"
    ></tttl-embed-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 Screencap You can see a working demo using customized attributes here to experiment with it.

Component Functionality

The Tattle Embed Survey provides an easy way for website's visitors to give a complete customer experience feedback (aka a Tattle) about their recent visit to your store. This widget will collect a customer's experience data and then POST that to our standard survey questionnaire API. The record created is exactly equivalent to what would happen if the customer were completing the survey on Tattle's website.

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.