<!-- Pull the Wootric Snippet -->
<script type="text/javascript" src="https://cdn.wootric.com/wootric-sdk.js"></script>
<!-- begin Wootric code -->
<script type="text/javascript">
  window.wootricSettings = {
    email:'nps@example.com',// TODO: Required to uniquely identify a user. Email is recommended but this can be any unique identifier.
    created_at: 1234567890, // TODO: The current logged in user's sign-up date as a Unix timestamp.
    account_token: 'NPS-xxxxxxx'
  };

  // Request a survey
  window.wootric('run');
</script>
...//The rest of the widget...
<!-- end Wootric code -->

<!-- Pull the Wootric Snippet -->
<script type="text/javascript" src="https://cdn.wootric.com/wootric-sdk.js"></script>

<!­­-- begin Wootric code ­­-->
<script type="text/javascript">
  // TEST ONLY FLAGS - REMOVE BEFORE GOING LIVE
  wootric_survey_immediately=true; //Overwrites sampling settings and forces the server to return true to all survey requests.
  wootric_no_surveyed_cookie = true; //Disables the cookie writing after a survey is taken effectively disabling any client side mechanisms to prevent multiple surveys from being rendered.
  // END OF TEST ONLY FLAGS

  window.wootricSettings = {
    email:'nps@example.com', // TODO: Required to uniquely identify a user. Email is recommended but this can be any unique identifier.
    product_name: 'Wootric', // TODO: The name of the product or service.
    account_token: 'NPS­xxxxxxxx' };

  //Request a survey
  window.wootric('run');
</script>
<!--­­ end Wootric code ­­-->

<!-- begin Wootric code -->
<script type="text/javascript">
   wootric_survey_immediately = true;
   window.wootricSettings = {
      email: 'customer@example.com',
      created_at: 1234567890,
      account_token: 'NPS-XXXXXXXX'
  };
</script>
<script type="text/javascript" src="https://cdn.wootric.com/wootric-sdk.js" async onload="window.wootric('run')"></script>

<!-- Pull the Wootric Snippet -->
<script type="text/javascript" src="https://cdn.wootric.com/wootric-sdk.js"></script>
<!-- begin Wootric code -->
<script type="text/javascript">
  // TEST ONLY FLAGS - REMOVE BEFORE GOING LIVE
  wootric_survey_immediately=true; //Overwrites sampling settings and forces the server to return true to all survey requests.
  wootric_no_surveyed_cookie = true; //Disables the cookie writing after a survey is taken effectively disabling any client side mechanisms to prevent multiple surveys from being rendered.
  // END OF TEST ONLY FLAGS
  window.wootricSettings = {
    email:'customer@example.com', //TODO: Required to uniquely identify a user. Email is recommended but this can be any unique identifier.
    created_at: 1234567890, //TODO:replace it with date when your customer signed up           
    account_token: 'NPS-XXXX' //TODO:replace it with your account token       
  };
  window.wootric('run');
</script>
<!-- end Wootric code -->

// 1. Load Wootric JS SDK
<script type="text/javascript" src="https://cdn.wootric.com/wootric-sdk.js"></script>

// 2. Create Factory
app.factory('wootricFactory', function() {
  window.wootricSettings = {
    email: 'customer@example.com',// TODO: Required to uniquely identify a user. Email is recommended but this can be any unique identifier.
    created_at: 1234567890, // TODO: The current logged in user's sign-up date as a 10 digit Unix timestamp.
    account_token: 'NPS-xxxxxxxx' // This is your unique account token.
  };
  return {
    run: function() {
      window.wootric_survey_immediately = true; // Shows survey immediately for testing purposes.  TODO: Comment out for production.
      window.wootric_no_surveyed_cookie = true; // Bypass cookie based throttle for testing purposes.  TODO: Comment out for production.     
      window.wootric("run");
    }
  }
});

// 3. Using the factory in your controller
app.controller('myController', [
  'wootricFactory',
  function(wootricFactory){
    wootricFactory.run();
  }
]);

// 4. Optional: More control on survey display 
User.getData().then(function (wootricFactory) {
    wootricFactory.run();
});

// 1. Create Directive
import { Directive, AfterViewInit, ElementRef } from '@angular/core';

@Directive({
  selector: '[appWootric]'
})
export class WootricDirective implements AfterViewInit {

  constructor(private elementRef: ElementRef) {
    window['wootric_no_surveyed_cookie'] = true; // Shows survey immediately for testing purposes.  TODO: Comment out for production.
    window['wootric_survey_immediately'] = true; // Bypass cookie based throttle for testing purposes.  TODO: Comment out for production.
    window['wootricSettings'] = {
      email: 'nps@example.com', // TODO: Required to uniquely identify a user. Email is recommended but this can be any unique identifier.
      created_at: 1234567890, // TODO: The current logged in user's sign-up date as a 10 digit Unix timestamp.
      account_token: 'NPS-xxxxxxxx' // This is your unique account token.
    };
  }

  ngAfterViewInit() {
    var script = document.createElement('script');

    script.type = 'text/javascript';
    script.src = 'https://cdn.wootric.com/wootric-sdk.js';
    script.async = true;
    script.onload = function() {
      window['WootricSurvey'].run();
    };

    this.elementRef.nativeElement.appendChild(script);
  }
}

// 2. Use Directive
<div style="text-align:center" appWootric>
  <h1>
    Welcome to Wootric!
  </h1>
</div>

// 1. Create Component
import React from 'react';

class Wootric extends React.Component {
  componentDidMount() {
    let setupScript = document.createElement('script');
    setupScript.type = 'text/javascript';
    setupScript.id = 'wootric-settings';
    setupScript.async = true;
    setupScript.innerHTML = `
      wootric_no_surveyed_cookie = true;
      wootric_survey_immediately = true;
      window.wootricSettings = {
        email: 'customer@example.com',
        created_at: 1234567890,
        account_token: 'NPS-xxxxxxxx'
      };
    `;
    if (document.getElementById('wootric-settings') == null) {
      document.body.appendChild(setupScript);
    }

    // Beacon
    let beacon = document.createElement('script');
    beacon.type = 'text/javascript';
    beacon.id = 'wootric-beacon';
    beacon.async = true;

    beacon.src = 'https://cdn.wootric.com/wootric-sdk.js';
    beacon.onload = function() {
      window.wootric('run');
    };
    if (document.getElementById('wootric-beacon') == null) {
      document.body.appendChild(beacon)
    };
  }

  render() {
    return (
      <div/>
    );
  }
}

export default Wootric;

// 2. Use Component
import React from 'react';
import Wootric from './Wootric';

function App() {
  return (
    <div className="App">
      <header className="App-header">
          Welcome to Wootric
        </a>
      </header>
      <Wootric/>
    </div>
  );
}

export default App;

<!-- begin Wootric code -->
<script>
  window.wootricSettings = {
    email: 'nps@example.com', // TODO: The current user's email address.
    created_at: 1234567890, // TODO: The current user's sign­up date as a Unix timestamp.
    product_name: 'Wootric', // TODO: The name of the product or service.
    account_token: 'NPS­xxxxxxxx'
  };
  window.customMessages = {
      followup_question: "Custom message for all scores",
      followup_questions_list: {
          detractor_question: "Custom message for detractors",
          passive_question: "Custom message for passives",
          promoter_question: "Custom message for promoters"
      },
      placeholder_text: "Custom placeholder for all scores",
      placeholder_texts_list: {
        detractor_text: "Custom placeholder text for detractors",
        passive_text: "Custom placeholder text for passives",
        promoter_text: "Custom placeholder text for promoters"
      }
  };
</script>
<!--­­ end Wootric code --­­>

window.customMessages = {
      followup_question: "Custom message for all scores",
  };

window.customMessages = {
    followup_questions_list: {
        detractor_question: "Custom message for detractors",
        passive_question: "Custom message for passives",
        promoter_question: "Custom message for promoters"
    }
};

window.customMessages = {
    followup_questions_list: {
        detractor_question: "Custom message for detractors",
    }
};

window.customMessages = {
    followup_questions_list: {
      passive_question: "Custom message for passives"
    }
};

window.customMessages = {
    followup_questions_list: {
      promoter_question: "Custom message for promoters"
    }
};

window.customMessages = {
  placeholder_text: "Custom placeholder for all scores"
};

window.customMessages = {
  placeholder_texts_list: {
    detractor_text: "Custom placeholder text for detractors",
    passive_text: "Custom placeholder text for passives",
    promoter_text: "Custom placeholder text for promoters"
  }
};

window.customMessages = {
  placeholder_texts_list: {
    detractor_text: "Custom placeholder text for detractors"
  }
};

window.customMessages = {
  placeholder_texts_list: {
    passive_text: "Custom placeholder text for passives"
  }
};

window.customMessages = {
  placeholder_texts_list: {
    promoter_question: "Custom message for promoters"
  }
};

window.wootricSettings = {
  account_token: 'NPS-YOURTOKEN',
  email: 'your@email.com'
  ask_permission_to_share_feedback: true
  permission_labels: {
    EN: 'I give permission to contact me about sharing my feedback',
    JA: '私は私のフィードバックを共有することについて私に連絡する許可を与える'
  }
}

window.wootricSettings = {
  wootric_recommend_target: "Custom Wootric recommend target text"
};

<!­­ begin Wootric code ­­>
<script type="text/javascript">
window.wootricSettings = {
  email:'nps@example.com', // TODO: Required to uniquely identify a user. Email is recommended but this can be any unique identifier.
  created_at: 1234567890, // TODO: The current user's sign­up date as a Unix timestamp.
  product_name: 'Wootric', // TODO: The name of the product or service.
  account_token: 'NPS­xxxxxxxx',
  modal_theme: 'dark',
  properties:{
    role:'manager',// TODO: The current user's role.
    pricing_plan:'Enterprise'// TODO: The current user's pricing plan.
  }
};
</script>
....//The rest of the widget...
<!--­­ end Wootric code --­­>

<!­­ begin Wootric code ­­>
<script type="text/javascript">
window.wootricSettings = {
  email:'nps@example.com', // TODO: Required to uniquely identify a user. Email is recommended but this can be any unique identifier.
  created_at: 1234567890, // TODO: The current user's sign­up date as a Unix timestamp.
  product_name: 'Wootric', // TODO: The name of the product or service.
  account_token: 'NPS­xxxxxxxx',
  modal_footprint: 'compact',
  properties:{
    role:'manager',// TODO: The current user's role.
    pricing_plan:'Enterprise'// TODO: The current user's pricing plan.
  }
};
</script>
....//The rest of the widget...
<!--­­ end Wootric code --­­>

<!­­ begin Wootric code ­­>
<script type="text/javascript">
window.wootricSettings = {
  email:'nps@example.com', // TODO: Required to uniquely identify a user. Email is recommended but this can be any unique identifier.
  created_at: 1234567890, // TODO: The current user's sign­up date as a Unix timestamp.
  product_name: 'Wootric', // TODO: The name of the product or service.
  account_token: 'NPS­xxxxxxxx',
  modal_position: 'top',
  properties:{
    role:'manager',// TODO: The current user's role.
    pricing_plan:'Enterprise'// TODO: The current user's pricing plan.
  }
};
</script>
....//The rest of the widget...
<!--­­ end Wootric code --­­>

window.wootricSettings = {
  email:'nps@example.com',// TODO: Required to uniquely identify a user. Email is recommended but this can be any unique identifier.
  created_at: 1234567890, // TODO: The current logged in user's sign-up date as a Unix timestamp.
  account_token: 'NPS-xxxxxxx',
  aria: true
};

window.wootricSettings = {
  scale_color: 'three-color' // The options are 'three-color' and 'gradient'.
};

<!­­ begin Wootric code ­­>
<script type="text/javascript">
window.wootricSettings = {
  email:'nps@example.com', // TODO: Required to uniquely identify a user. Email is recommended but this can be any unique identifier.
  created_at: 1234567890, // TODO: The current user's sign­up date as a Unix timestamp.
  product_name: 'Wootric', // TODO: The name of the product or service.
  account_token: 'NPS­xxxxxxxx',
  properties:{
    role:'manager', // TODO: The current user's role.
    pricing_plan:'Enterprise', // TODO: The current user's pricing plan.
    total_purchase_amount: 12, // Integer representing the user's total purchases with the key suffixed with "_amount"
    last_order_date: 1350466020 // Integer representing the date (Unix timestamp format) of the user's last order with the key suffixed with "_date"
    items_array: 'item1, item2'// List of values representing the possible items with the key suffixed with "_array"
  }
};
</script>
....//The rest of the widget...
<!--­­ end Wootric code --­­>

<!--­­ begin Wootric code ­­-->
<script type="text/javascript">
wootric_first_survey=45;
window.wootricSettings = {
  email:'nps@example.com',
  created_at: 1234567890,
  product_name: 'Wootric',
  account_token: 'NPS­xxxxxxxx',
  language: 'XX'
};
</script>
....//The rest of the widget...
<!--­­ end Wootric code --­­>

<!--­­ begin Wootric code ­­-->
<script type="text/javascript">
wootric_first_survey=45;
window.wootricSettings = {
  email:'nps@example.com',
  created_at: 1234567890,
  product_name: 'Wootric',
  account_token: 'NPS­xxxxxxxx',
  twitter_account: 'twitteraccount',
  facebook_page: 'https://www.facebook.com/myPage',
</script>
....//The rest of the widget...
<!--­­ end Wootric code --­­>

<!--­­ begin Wootric code ­­-->
<script type="text/javascript">
wootric_first_survey=45;
window.wootricSettings = {
  email:'nps@example.com',
  created_at: 1234567890,
  product_name: 'Wootric',
  account_token: 'NPS­xxxxxxxx',
  twitter_account: 'twitteraccount',
  facebook_page: 'https://www.facebook.com/myPage'
...
};

var Wootric = {
  add_score_param_to_url: true,
  add_comment_param_to_url: true,
  thankYouMessages: {
    thank_you_setup: 'Request for action for all scores',
    thank_you_setup_list: {
      detractor_thank_you_setup: 'Detractor request for action',
      passive_thank_you_setup: 'Passive request for action',
      promoter_thank_you_setup: 'Promoter request for action'
    },
    thank_you_main: 'Thank you for all scores!',
    thank_you_main_list: {
      detractor_thank_you_main: 'Detractor thank you',
      passive_thank_you_main: 'Passive thank you',
      promoter_thank_you_main: 'Promoter thank you'
    }
  },
  thankYouLinks: {
    thank_you_link_text: 'Thank you text for all scores!',
    thank_you_link_url: 'Thank you url for all scores!',
    thank_you_link_text_list: {
      detractor_thank_you_link_text: 'Detractor thank you text',
      passive_thank_you_link_text: 'Passive thank you text',
      promoter_thank_you_link_text: 'Promoter thank you text'
    },
    thank_you_link_url_list: {
      detractor_thank_you_link_url: 'Detractor thank you url',
      passive_thank_you_link_url: 'Passive thank you url',
      promoter_thank_you_link_url: 'Promoter thank you url'
    }
  }
};
</script>
....//The rest of the widget...
<!--­­ end Wootric code --­­>

<!-- Example 1 -->
var Wootric = {
  thankYouLinks: {
    thank_you_link_text: 'Thank you text for all scores!',
    thank_you_link_url: 'http://example.com',
    thank_you_link_text_list: {
      promoter_thank_you_link_text: 'Promoter thank you text'
    },
    thank_you_link_url_list: {
      detractor_thank_you_link_url: 'http://detractor.com'
    }
  }
};

<!-- Example 2 -->
var Wootric = {
  thankYouMessages: {
    thank_you_setup: 'Request for action for all scores',
    thank_you_setup_list: {
      promoter_thank_you_setup: 'Promoter request for action'
    }
  },
  thankYouLinks: {
    thank_you_link_text: 'Thank you text for all scores!',
    thank_you_link_url: 'http://example.com',
    thank_you_link_text_list: {
      promoter_thank_you_link_text: 'Promoter thank you text'
    },
    thank_you_link_url_list: {
      detractor_thank_you_link_url: 'http://detractor.com'
    }
  }
};

<!-- Example 3 -->
var Wootric = {
  // thankYouMessages not defined
  thankYouLinks: {
    thank_you_link_text: 'Thank you text for all scores!',
    thank_you_link_text_list: {
      detractor_thank_you_link_text: 'Detractor thank you text',
      passive_thank_you_link_text: 'Passive thank you text',
      promoter_thank_you_link_text: 'Promoter thank you text'
    },
    thank_you_link_url_list: {
      detractor_thank_you_link_url: 'Detractor thank you url'
    }
  }
};

<!-- Example 4 -->
var Wootric = {
  thankYouMessages: {
    thank_you_main: 'Thank you for your feedback!',
    thank_you_main_list: {
      promoter_thank_you_main: 'Promoter thank you'
    }
  }
};

var wootricSettings = {
    account_token: 'NPS-XXXXXXX'
}

//run
WootricSurvey.run(wootricSettings); OR wootric('run')

//stop
WootricSurvey.stop();

//Version
WootricSurvey.version();

// => "8f2a6414b81db4a57ead648379fb48ddfee5c3d1"

if (show_nps_survey) {
  window.wootricSettings = {
    email:'nps@example.com', // TODO: Required to uniquely identify a user. Email is recommended but this can be any unique identifier.
    created_at: 1234567890, // TODO: The current logged in user's sign-up date as a Unix timestamp.
    account_token: 'NPS-xxxxxxx'
  };
} else if (show_ces_survey) {
  window.wootricSettings = {
    email:'nps@example.com', // TODO: Required to uniquely identify a user. Email is recommended but this can be any unique identifier.
    created_at: 1234567890, // TODO: The current logged in user's sign-up date as a Unix timestamp.
    account_token: 'NPS-yyyyyyy'
  };
}

// Request a survey
window.wootric('run');

wootricSettings = {
  account_token: 'NPS-YOURTOKEN',
  email: 'user@example.com',
  created_at: 1528416000,
  properties: {
    favorite_color: 'blue'
  }
};

// You assign the event name when a given action happens
wootricSettings.event_name = 'on_purchase'

// You call Wootric whenever you want to check if the event you set might be eligible for a survey
wootric('run');

window.wootricSettings = {
  account_token: 'NPS-ABCD1234',
  aria: true,
  created_at: '1528416000',
  email: 'nps@example.com',
  facebook_page: 'https://www.facebook.com/test',
  language: 'EN',
  product_name: 'your product name',
  properties : { country: 'MX' },
  twitter_account: 'test',
  wootric_close_position: 'left',
  wootric_recommend_target: 'your audience',
  ask_permission_to_share_feedback: true,
  permission_labels: {
    EN: 'I give permission to contact me about sharing my feedback'
  }
};