Wootric Survey Toggle

; } } export default Wootric; // Usage in App.js // import Wootric from './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 // ``` -------------------------------- ### 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 ``` -------------------------------- ### 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 //

``` -------------------------------- ### 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()); }); } ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.

{{ msg }}