SPA Examples

https://github.com/wootric/spa-examples
Admin
SPA Examples provides example implementations of Wootric customer feedback surveys across popular...
Tokens:8,643
Snippets:92
Trust Score:5.4
License:MIT
Update:5 months ago
Show doc for...
Tokens:
Raw
### Install and Run Example

Source: https://github.com/wootric/spa-examples/blob/master/vuejs/inline-example/README.md

Standard npm commands to install dependencies and start the example application.

```bash
cd to_current_directory i.e. inline-example
npm install
npm start
```

--------------------------------

### Install and Run Nuxt.js Project

Source: https://github.com/wootric/spa-examples/blob/master/vuejs/nuxt-js-example/README.md

Standard commands to install dependencies and start the development server for a Nuxt.js project.

```bash
cd to_current_directory i.e. vue-cli-example
npm install
npm run dev
```

--------------------------------

### Clone spa-examples Repository

Source: https://github.com/wootric/spa-examples/blob/master/angular/README.md

Clone the spa-examples repository to get started with the Angular Wootric setup. Ensure you have git installed.

```bash
git clone https://github.com/Wootric/spa-examples.git
cd spa-exaples
cd angular
npm install
```

--------------------------------

### Install and Run Vue CLI Project

Source: https://github.com/wootric/spa-examples/blob/master/vuejs/vue-cli-example/README.md

Standard commands to install dependencies and serve the Vue.js application locally.

```bash
cd to_current_directory i.e. vue-cli-example
npm install
npm run serve
```

--------------------------------

### Run Development Server

Source: https://github.com/wootric/spa-examples/blob/master/react-example/README.md

Start the development server to view the application. The application will be accessible at http://localhost:3000/.

```bash
yarn start/npm start
```

--------------------------------

### Clone Repository and Install Dependencies

Source: https://github.com/wootric/spa-examples/blob/master/emberjs/README.md

Clone the project repository and install necessary npm and bower packages.

```bash
git clone <repository-url>
cd emberjs
npm install
bower install
```

--------------------------------

### Clone spa-examples Repository

Source: https://github.com/wootric/spa-examples/blob/master/react-example/README.md

Clone the spa-examples repository and navigate to the react-example directory. Install dependencies using yarn or npm.

```bash
git clone https://github.com/Wootric/spa-examples.git
cd spa-examples
cd react-example
yarn install/npm install
```

--------------------------------

### Clone spa-examples Repository

Source: https://github.com/wootric/spa-examples/blob/master/angularjs/README.md

Clone the spa-examples repository and navigate to the angularjs directory. Install dependencies using npm.

```bash
git clone https://github.com/Wootric/spa-examples.git
cd spa-exaples
cd angularjs
npm install
```

--------------------------------

### Install Angular CLI Globally

Source: https://github.com/wootric/spa-examples/blob/master/angular/README.md

Install the Angular CLI globally using npm. This is a prerequisite for managing Angular projects.

```bash
npm install -g @angular/cli
```

--------------------------------

### Start Ember.js Development Server

Source: https://github.com/wootric/spa-examples/blob/master/emberjs/README.md

Run the Ember CLI to serve your application locally for development.

```bash
ember serve
```

--------------------------------

### Install @exponent/electron-cookies with Yarn

Source: https://github.com/wootric/spa-examples/blob/master/ELECTRON_INSTALLATION.md

Use this command to add the necessary package for document.cookie support in Electron.

```bash
yarn add @exponent/electron-cookies
```

--------------------------------

### Interpolate Filter Example

Source: https://github.com/wootric/spa-examples/blob/master/angularjs/app/view2/view2.html

Demonstrates the 'interpolate' filter for dynamic content insertion. Ensure the filter is available in your Angular environment.

```html
{{ 'Current version is v%VERSION%.' | interpolate }}
```

--------------------------------

### Setup Wootric Directive in Angular

Source: https://github.com/wootric/spa-examples/blob/master/angular/README.md

Integrate Wootric into your Angular application by updating the account token in the directive and applying the directive to your component's template.

```typescript
import { Directive, ElementRef, OnInit } from '@angular/core';

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

  constructor(private el: ElementRef) { }

  ngOnInit() {
    // Update 'YOUR-ACCOUNT-TOKEN' with your actual Wootric account token
    (window as any).wootricSettings = {
      account_token: 'YOUR-ACCOUNT-TOKEN'
    };
    (function(w, d, t, u, n, a, o) {
      if (!w[t]) {
        w[t] = {};
        w[t].q = [];
        w[t].on = function(ch, cb) {
          w[t].q.push({ action: 'on', channel: ch, callback: cb });
        };
        w[t].render = function(opt) {
          w[t].q.push({ action: 'render', options: opt });
        };
      }
      a = d.createElement('script');
      o = d.getElementsByTagName('script')[0];
      a.async = 1;
      a.src = u;
      a.onload = function() {
        w[t].init(opt);
      };
      o.parentNode.insertBefore(a, o);
    })(window, document, 'Wootric', 'https://d3dav05170d02.cloudfront.net/v1/wootric.js', 'Wootric');
  }
}
```

```html
<div appWootric></div>
```

--------------------------------

### Configure Wootric Settings and Run Survey

Source: https://context7.com/wootric/spa-examples/llms.txt

Sets up core Wootric configuration, including user details and account token. Development flags are included for immediate testing and should be removed in production. Call 'window.wootric("run")' to initiate the survey.

```javascript
// Core wootricSettings configuration (required for all integrations)
window.wootricSettings = {
  email: 'customer@example.com',     // Required: Unique user identifier (email recommended)
  created_at: 1234567890,            // Required: User signup date as Unix timestamp (10 digits)
  account_token: 'NPS-XXXXXXXX'      // Required: Your Wootric account token
};

// Development/testing flags (remove in production)
window.wootric_survey_immediately = true;   // Force survey to show immediately
window.wootric_no_surveyed_cookie = true;   // Disable survey throttling cookies

// Run the survey
window.wootric('run');

```

--------------------------------

### Load Wootric SDK and Run Survey

Source: https://github.com/wootric/spa-examples/blob/master/generic/wootric-toggle-survey.html

Configures and loads the Wootric SDK, then initiates the survey. Ensure the Wootric SDK script is loaded before calling this function.

```javascript
function loadWootric() {
  // Set up settings
  window.wootric_survey_immediately = true;
  window.wootric_no_surveyed_cookie = true;
  window.wootricSettings = {
    email: document.getElementById('email').value,
    created_at: parseInt(document.getElementById('created_at').value),
    account_token: document.getElementById('token').value
  };

  // Remove existing script if any
  const oldScript = document.getElementById('wootric-script');
  if (oldScript) oldScript.remove();

  // Clear Wootric globals to force fresh init
  delete window.wootric;
  delete window.WootricSurvey;

  // Load fresh script
  const script = document.createElement('script');
  script.id = 'wootric-script';
  script.src = 'https://cdn.wootric.com/wootric-sdk.js?t=' + Date.now();
  script.onload = function() {
    window.wootric('run');
  };
  document.body.appendChild(script);
}
```

--------------------------------

### Configure Wootric SDK in Renderer File

Source: https://github.com/wootric/spa-examples/blob/master/ELECTRON_INSTALLATION.md

Require the electron-cookies package, enable it with your domain, and configure Wootric settings. Load the SDK script after your main index.js has loaded and call window.wootric('run') on script load.

```javascript
import React from 'react'
import ReactDOM from 'react-dom'
import App from './components/App'

ReactDOM.render(<App />, document.getElementById('root'))

// Require the package
const ElectronCookies = require('@exponent/electron-cookies');
// Set your domain
ElectronCookies.enable({ origin: 'https://your.domain.com' });

// Configure your Wootric settings
window.wootric_survey_immediately = true;
window.wootricSettings = {
  email: 'customer@example.com',
  created_at: 1234567890,
  account_token: 'NPS-XXXXXXXX' // Add your account token
};

// Inject the script into your Electron app after index.js
window.onload = () => {
  const script = document.createElement("script");
  script.src = "https://cdn.wootric.com/wootric-sdk.js";
  script.onload = () => {
    window.wootric('run');
  }
  document.body.appendChild(script);
};
```

--------------------------------

### Electron Renderer Process Integration

Source: https://context7.com/wootric/spa-examples/llms.txt

This JavaScript code is for an Electron renderer process, demonstrating how to enable cookie support using '@exponent/electron-cookies' and configure/load the Wootric SDK.

```javascript
// renderer.js - Electron renderer process
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';

ReactDOM.render(<App />, document.getElementById('root'));

// Enable cookie support for Electron
const ElectronCookies = require('@exponent/electron-cookies');
ElectronCookies.enable({ origin: 'https://your.domain.com' });

// Configure Wootric
window.wootric_survey_immediately = true;
window.wootricSettings = {
  email: 'customer@example.com',
  created_at: 1234567890,
  account_token: 'NPS-XXXXXXXX'
};

// Load SDK after window loads
window.onload = () => {
  const script = document.createElement("script");
  script.src = "https://cdn.wootric.com/wootric-sdk.js";
  script.onload = () => {
    window.wootric('run');
  };
  document.body.appendChild(script);
};

// Install: yarn add @exponent/electron-cookies
```

--------------------------------

### Configure Wootric Settings

Source: https://github.com/wootric/spa-examples/blob/master/vuejs/inline-example/README.md

Set global flags and user-specific settings for Wootric surveys. Ensure `account_token` is replaced with your actual token.

```javascript
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.
    created_at: 1234567890, //TODO:replace it with date when your customer signed up
    account_token: 'NPS-xxxxxxx' //TODO:replace it with your account token
};
window.wootric('run');
```

--------------------------------

### Nuxt.js Configuration for Wootric SDK

Source: https://context7.com/wootric/spa-examples/llms.txt

Loads the Wootric SDK via Nuxt head configuration. This ensures the SDK is available before your Vue components are initialized.

```javascript
// nuxt.config.js - Load SDK via Nuxt head configuration
module.exports = {
  head: {
    script: [
      { src: 'https://cdn.wootric.com/wootric-sdk.js' }
    ]
  }
}
```

--------------------------------

### Initialize Wootric in Vue Component

Source: https://github.com/wootric/spa-examples/blob/master/vuejs/nuxt-js-example/README.md

Configure Wootric settings and run the survey initialization within a Vue component's created lifecycle hook. Ensure to replace placeholder values.

```javascript
window.wootric_survey_immediately = true; //Overwrites sampling settings and forces the server to return true to all survey requests.
window.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.
    created_at: 1234567890, //TODO:replace it with date when your customer signed up
    account_token: 'NPS-xxxxxxx' //TODO:replace it with your account token
};
window.wootric('run');
```

--------------------------------

### Load AngularJS Dependencies and Bootstrap

Source: https://github.com/wootric/spa-examples/blob/master/angularjs/app/index-async.html

This snippet uses the $script.js loader to asynchronously load all necessary AngularJS application files. Once all scripts are loaded, it bootstraps the AngularJS application using 'angular.bootstrap'.

```javascript
$script([
  'lib/angular/angular.js',
  'lib/angular-route/angular-route.js',
  'app.js',
  'view1/view1.js',
  'view2/view2.js',
  'core/version/version.js',
  'core/version/version-directive.js',
  'core/version/interpolate-filter.js'
], function() {
  // when all is done, execute bootstrap AngularJS application
  angular.bootstrap(document, ['myApp']);
});
```

--------------------------------

### Update index.html with Content-Security-Policy

Source: https://github.com/wootric/spa-examples/blob/master/ELECTRON_INSTALLATION.md

Add this meta tag to the head of your index.html file to allow the Wootric SDK to communicate with Wootric's servers.

```html
<head>
  <meta http-equiv="Content-Security-Policy" content="default-src 'self' https://*.wootric.com/;
                                                      connect-src 'self' https://*.wootric.com/;
                                                      script-src 'unsafe-inline' *;
                                                      style-src 'unsafe-inline' *;
                                                      frame-src *;
                                                      font-src * data:;">
</head>
```

--------------------------------

### Electron Integration Content Security Policy

Source: https://context7.com/wootric/spa-examples/llms.txt

This HTML snippet shows how to configure the Content-Security-Policy meta tag in an Electron application's index.html to allow communication with Wootric servers.

```html
<!-- index.html - Add CSP meta tag -->
<head>
  <meta http-equiv="Content-Security-Policy" content="default-src 'self' https://*.wootric.com/;
                                                      connect-src 'self' https://*.wootric.com/;
                                                      script-src 'unsafe-inline' *;
                                                      style-src 'unsafe-inline' *;
                                                      frame-src *;
                                                      font-src * data:;">
</head>
```

--------------------------------

### Initialize Wootric in Vue.js

Source: https://github.com/wootric/spa-examples/blob/master/vuejs/inline-example/index.html

This snippet shows how to initialize Wootric within the `created` hook of a Vue instance. It includes setting user identification and account token, and forcing survey runs for testing.

```javascript
const app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Wootric!'
  },
  created() {
    console.log("Wootric setup on creation!")
    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.
      created_at: 1234567890, //TODO:replace it with date when your customer signed up
      account_token: 'NPS-xxxxxxx' //TODO:replace it with your account token
    };
    window.wootric('run');
  }
})
```

--------------------------------

### Load Wootric JS SDK

Source: https://github.com/wootric/spa-examples/blob/master/angularjs/README.md

Add the Wootric JS SDK script tag to your main HTML file, typically where other third-party scripts are loaded.

```html
<script type="text/javascript" src="https://cdn.wootric.com/wootric-sdk.js"></script>
```

--------------------------------

### Generic JavaScript Toggle Implementation

Source: https://context7.com/wootric/spa-examples/llms.txt

This HTML and JavaScript code provides a framework-agnostic method to programmatically show and hide Wootric surveys. It ensures a fresh SDK initialization by removing existing elements and scripts before loading the SDK.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Wootric Survey Toggle</title>
</head>
<body>
    <input type="text" id="token" placeholder="NPS-XXXXXXXX">
    <input type="text" id="email" value="test@example.com">
    <input type="text" id="created_at">
    <button id="btn">Show Survey</button>

    <script>
        document.getElementById('created_at').value = Math.floor(Date.now() / 1000);
        let visible = false;
        const btn = document.getElementById('btn');

        function removeWootricElements() {
            const selectors = [
                '#wootric-modal',
                '#wootric-placeholder',
                '[id^="wootric"]',
                '.wootric-beacon',
                '.wootric-slide',
                'iframe[src*="wootric"]'
            ];
            selectors.forEach(sel => {
                document.querySelectorAll(sel).forEach(el => el.remove());
            });
        }

        function loadWootric() {
            window.wootric_survey_immediately = true;
            window.wootric_no_surveyed_cookie = true;
            window.wootricSettings = {
                email: document.getElementById('email').value,
                created_at: parseInt(document.getElementById('created_at').value),
                account_token: document.getElementById('token').value
            };

            // Remove existing script and globals for fresh init
            const oldScript = document.getElementById('wootric-script');
            if (oldScript) oldScript.remove();
            delete window.wootric;
            delete window.WootricSurvey;

            // Load fresh SDK with cache-busting
            const script = document.createElement('script');
            script.id = 'wootric-script';
            script.src = 'https://cdn.wootric.com/wootric-sdk.js?t=' + Date.now();
            script.onload = function() {
                window.wootric('run');
            };
            document.body.appendChild(script);
        }

        btn.onclick = function() {
            visible = !visible;
            btn.textContent = visible ? 'Hide Survey' : 'Show Survey';
            if (visible) {
                loadWootric();
            } else {
                if (window.WootricSurvey && typeof WootricSurvey.stop === 'function') {
                    WootricSurvey.stop();
                }
                removeWootricElements();
            }
        };
    </script>
</body>
</html>
```

--------------------------------

### Async Script Loader (ded/script.js)

Source: https://github.com/wootric/spa-examples/blob/master/angularjs/app/index-async.html

This script loader allows for asynchronous loading of JavaScript files. It's used here to load AngularJS and its modules before bootstrapping the application. Ensure 'npm run update-index-async' is run to inject the necessary async code.

```javascript
function t(a,c){var e=b.createElement("script"),f=j;e.onload=e.onerror=e[o]="";e[m]&&!/^c|loade/.test(e[m])||f||(e.onload=e[o]=null,f=1,c());e.async=1,e.src=a,d.insertBefore(e,d.firstChild)}function q(a,b){p(a,function(a){return!b(a)})}var d=b.getElementsByTagName("head")[0],e={},f={},g={},h={},i="string",j=!1,k="push",l="DOMContentLoaded",m="readyState",n="addEventListener",o="onreadystatechange",p=function(a,b){for(var c=0,d=a.length;c<d;++c)if(!b(a[c]))return j;return 1};!b[m]&&b[n]&&(b[n](l,function r(){b.removeEventListener(l,r,j),b[m]="complete"},j),b[m]="loading");var s=function(a,b,d){function o(){if(!--m){e[l]=1,j&&j();for(var a in g)p(a.split("|"),n)&&!q(g[a],n)&&(g[a]=[]);o()}function n(a){return a.call?a():e[a]}a=a[k]?a:[a];var i=b&&b.call,j=i?b:d,l=i?a.join(""):b,m=a.length;c(function(){q(a,function(a){h[a]?(l&&(f[l]=1),o()):(h[a]=1,l&&(f[l]=1),t(s.path?s.path+a+".js":a,o))})},0);return s};s.get=t,s.ready=function(a,b,c){a=a[k]?a:[a];var d=[];!q(a,function(a){e[a]||d[k](a)})&&p(a,function(a){return e[a]})?b():!function(a){g[a]=g[a]||[],g[a][k](b),c&&c(d)}(a.join("|"));return s};var u=a.$script;s.noConflict=function(){a.$script=u;return this},typeof module!="undefined"&&module.exports?module.exports=s:a.$script=s}(this,document,setTimeout)
```

--------------------------------

### Create Wootric Factory in AngularJS

Source: https://github.com/wootric/spa-examples/blob/master/angularjs/README.md

Define an AngularJS factory to manage Wootric settings and provide a run function. Ensure 'account_token', 'email', and 'created_at' are correctly set. The 'run' function triggers the Wootric survey.

```javascript
app.factory('wootricFactory', function() {
  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.
  };
  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");
    }
  }
});
```

--------------------------------

### Ember.js Component for Wootric Configuration

Source: https://context7.com/wootric/spa-examples/llms.txt

Configures Wootric settings during component initialization, with environment-aware development flags. The SDK is loaded using jQuery's getScript.

```javascript
// app/components/wootric-survey.js
import Ember from 'ember';
import config from '../config/environment';

export default Ember.Component.extend({
  setup: function() {
    // Only enable test flags in development
    if (config.environment === 'development') {
      window.wootric_survey_immediately = true;
      window.wootric_no_surveyed_cookie = true;
    }

    window.wootricSettings = {
      account_token: 'NPS-XXXXXXXX',
      email: 'customer@example.com',
      created_at: 1234567890
    };
  }.on('init')
});
```

```handlebars
{{!-- app/templates/components/wootric-survey.hbs --}}
<script type="text/javascript">
  $.getScript('https://disutgh7q0ncc.cloudfront.net/beacon.js', function() {
    WootricSurvey.run(window.wootricSettings);
  });
</script>
```

--------------------------------

### React Wootric Integration Component

Source: https://context7.com/wootric/spa-examples/llms.txt

A React component that dynamically loads the Wootric SDK and initializes the survey. It injects settings and the SDK beacon into the DOM when the component mounts. Ensure to remove development flags for production.

```javascript
// src/Wootric.js
import React from 'react';

// Configuration constants (src/config/defaults.js)
export const WOOTRIC_ACCOUNT_TOKEN = 'NPS-XXXXXX';
export const WOOTRIC_SURVEY_IMMEDIATELY = true;  // Remove for production
export const WOOTRIC_NO_SURVEYED_COOKIE = true;  // Remove for production

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

    // Load Wootric SDK 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;

// Usage in App.js
// import Wootric from './Wootric';
// <Wootric />

```

--------------------------------

### Configure Wootric Account Token

Source: https://github.com/wootric/spa-examples/blob/master/emberjs/README.md

Update the account token in the Wootric survey component configuration file.

```javascript
Open `app/components/wootric-survey.js`.
Update `account_token` with your account token.
```

--------------------------------

### AngularJS Factory for Wootric Integration

Source: https://context7.com/wootric/spa-examples/llms.txt

Encapsulates Wootric configuration and provides a reusable run method for AngularJS applications. Ensure the SDK is loaded before your app.js.

```javascript
// app/app.js
'use strict';

var app = angular.module('myApp', ['ngRoute']);

// Create Wootric factory
app.factory('wootricFactory', function() {
  window.wootricSettings = {
    email: 'nps@example.com',
    created_at: 1234567890,
    account_token: 'NPS-xxxxxxxx'
  };
  return {
    run: function() {
      // Development flags - remove for production
      window.wootric_survey_immediately = true;
      window.wootric_no_surveyed_cookie = true;
      window.wootric("run");
    }
  }
});

// Use factory in controller
app.controller('myController', [
  'wootricFactory',
  function(wootricFactory) {
    wootricFactory.run();
  }
]);

// index.html: Load SDK before app.js
// <script type="text/javascript" src="https://cdn.wootric.com/wootric-sdk.js"></script>
```

--------------------------------

### Vue.js Component for Wootric Initialization

Source: https://context7.com/wootric/spa-examples/llms.txt

A Vue component that initializes Wootric in the created lifecycle hook. The SDK script should be loaded in the HTML head or via nuxt.config.js.

```vue
<!-- src/components/HelloWootric.vue -->
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWootric',
  props: {
    msg: String
  },
  created() {
    console.log("Wootric setup on creation!");

    // Development flags - remove for production
    window.wootric_survey_immediately = true;
    window.wootric_no_surveyed_cookie = true;

    // Configure and run Wootric
    window.wootricSettings = {
      email: 'nps@example.com',
      created_at: 1234567890,
      account_token: 'NPS-xxxxxxx'
    };
    window.wootric('run');
  }
}
</script>
```

--------------------------------

### Use Wootric Factory in Controller

Source: https://github.com/wootric/spa-examples/blob/master/angularjs/README.md

Inject the 'wootricFactory' into your AngularJS controller and call its 'run' method to initiate the Wootric survey.

```javascript
app.controller('myController', [
  'wootricFactory',
  function(wootricFactory){
    wootricFactory.run();
  }
]);
```

--------------------------------

### Toggle Survey Visibility

Source: https://github.com/wootric/spa-examples/blob/master/generic/wootric-toggle-survey.html

Handles the click event for the toggle button, showing or hiding the Wootric survey. It calls `loadWootric` to display the survey and `removeWootricElements` to hide it.

```javascript
btn.onclick = function() {
  visible = !visible;
  btn.textContent = visible ? 'Hide Survey' : 'Show Survey';
  if (visible) {
    loadWootric();
  } else {
    if (window.WootricSurvey && typeof WootricSurvey.stop === 'function') {
      WootricSurvey.stop();
    }
    removeWootricElements();
  }
};
```

--------------------------------

### Add Wootric Script to nuxt.config.js

Source: https://github.com/wootric/spa-examples/blob/master/vuejs/nuxt-js-example/README.md

Include the Wootric SDK script in the head section of your Nuxt.js configuration file.

```javascript
head: {
    title: pkg.name,
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: pkg.description }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ],
    script: [
      { src: 'https://cdn.wootric.com/wootric-sdk.js' }
    ]
  }
```

--------------------------------

### Set Created At Timestamp

Source: https://github.com/wootric/spa-examples/blob/master/generic/wootric-toggle-survey.html

Sets the value of the 'created_at' input field to the current Unix timestamp.

```javascript
document.getElementById('created_at').value = Math.floor(Date.now() / 1000);
```

--------------------------------

### Angular Wootric Directive

Source: https://context7.com/wootric/spa-examples/llms.txt

An Angular directive that configures Wootric settings in the constructor and loads the SDK script after the view initializes. Apply this directive to any element in your template. Remember to remove development flags for production.

```typescript
// src/app/wootric.directive.ts
import { Directive, AfterViewInit, ElementRef } from '@angular/core';

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

  constructor(private elementRef: ElementRef) {
    // Development flags - remove for production
    window['wootric_no_surveyed_cookie'] = true;
    window['wootric_survey_immediately'] = true;

    // Configure Wootric settings
    window['wootricSettings'] = {
      email: 'nps@example.com',
      created_at: 1234567890,
      account_token: 'NPS-xxxxxxxx'
    };
  }

  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);
  }
}

// Usage in app.component.html
// <div appWootric></div>

```

--------------------------------

### Remove Wootric Elements

Source: https://github.com/wootric/spa-examples/blob/master/generic/wootric-toggle-survey.html

Removes all Wootric-related elements from the DOM to clean up the interface.

```javascript
function removeWootricElements() {
  // Remove all Wootric-related elements from the DOM
  const selectors = [
    '#wootric-modal',
    '#wootric-placeholder',
    '[id^="wootric"]',
    '.wootric-beacon',
    '.wootric-slide',
    'iframe[src*="wootric"]'
  ];
  selectors.forEach(sel => {
    document.querySelectorAll(sel).forEach(el => el.remove());
  });
}
```
Tokens:
Raw