<!DOCTYPE html>

<html ng-app="hjApp">
<head>
<base href="/"/>
<meta charset="utf-8"/>
<title>Hotjar</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"/>
<meta content="145303889798-klj2v98crrvamfjk1lfuq7teulqd8kh3.apps.googleusercontent.com" name="google-signin-client_id"/>
<script>
            window.hjDisabledFeatures = [];
        </script>
<script>
            var settings = {
  "always_on_prices": {
    "0": "0.00",
    "2000": "100.0",
    "5000": "200.0",
    "15000": "500.0",
    "30000": "900.0",
    "50000": "1400.0",
    "100000": "2700.0"
  },
  "currency_symbols": {
    "eur": "€",
    "usd": "$"
  },
  "default_always_on_rates": {
    "basic": "0",
    "plus": "0",
    "business": "0"
  },
  "default_sample_rates": {
    "basic": "2000",
    "plus": "10000",
    "business": "20000"
  },
  "default_storage_duration": {
    "basic": "3",
    "plus": "6",
    "business": "12"
  },
  "forms": {
    "snapshot_plans": {
      "1000": "basic",
      "2000": "plus",
      "5000": "business"
    }
  },
  "heatmaps": {
    "snapshot_plans": {
      "1000": "basic",
      "2000": "plus",
      "10000": "business"
    }
  },
  "plans": {
    "basic": {
      "price": {
        "eur": {
          "standard": "0.00",
          "discount": "0.00"
        },
        "usd": {
          "standard": "0.00",
          "discount": "0.00"
        }
      },
      "tier": 1,
      "limits": {
        "polls": 3,
        "forms": 3,
        "forms.snapshot_size": 1000,
        "funnels": 3,
        "heatmaps": 3,
        "heatmaps.snapshot_size": 1000,
        "playbacks": 300,
        "playbacks.snapshot_size": 100,
        "surveys": 3,
        "testers": 3
      },
      "features": []
    },
    "plus": {
      "price": {
        "eur": {
          "standard": "29.00",
          "discount": "9.00"
        },
        "usd": {
          "standard": "29.00",
          "discount": "9.00"
        }
      },
      "tier": 2,
      "limits": {
        "forms.snapshot_size": 2000,
        "heatmaps.snapshot_size": 2000,
        "playbacks.snapshot_size": 2000
      },
      "features": [
        "integrations.optimizely",
        "intercom.chat",
        "playbacks.page_targeting",
        "targeting.cap",
        "targeting.triggers"
      ]
    },
    "business": {
      "price": {
        "eur": {
          "standard": "89.00",
          "discount": "59.00"
        },
        "usd": {
          "standard": "89.00",
          "discount": "59.00"
        }
      },
      "tier": 3,
      "limits": {
        "forms.snapshot_size": 5000,
        "heatmaps.snapshot_size": 10000,
        "playbacks.snapshot_size": 5000
      },
      "features": [
        "branding.toggle",
        "integrations.optimizely",
        "intercom.chat",
        "playbacks.page_targeting",
        "targeting.cap",
        "targeting.triggers"
      ]
    }
  },
  "recordings": {
    "search_max_results": 1000,
    "snapshot_plans": {
      "100": "basic",
      "2000": "plus",
      "5000": "business"
    }
  },
  "sample_rate_prices": {
    "2000": "0.00",
    "10000": "0.00",
    "20000": "0.00",
    "50000": "100.0",
    "120000": "200.0",
    "400000": "500.0",
    "800000": "900.0",
    "2000000": "1800.0",
    "5000000": "3700.0"
  },
  "sample_rate_prices_v2": {
    "2000": "0.00",
    "10000": "29.00",
    "20000": "89.00",
    "50000": "189.0",
    "120000": "289.0",
    "400000": "589.0",
    "800000": "989.0",
    "2000000": "1889.0",
    "5000000": "3789.0"
  },
  "sample_rate_plans": {
    "2000": "basic",
    "10000": "plus",
    "20000": "business",
    "50000": "business",
    "120000": "business",
    "400000": "business",
    "800000": "business",
    "2000000": "business",
    "5000000": "business"
  },
  "version": 2
};
        </script>
<link href="//cdn.jsdelivr.net/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//cdn.jsdelivr.net/angular.ui-select/0.12.1/select.min.css" rel="stylesheet"/>
<link href="//cdn.jsdelivr.net/jquery.nouislider/8.5.0/nouislider.min.css" rel="stylesheet"/>
<link href="//cdn.jsdelivr.net/c3/0.4.11/c3.min.css" rel="stylesheet"/>
<link href="/favicon.ico" rel="shortcut icon"/>
<link href="/static/insights-754673a40c76fb2946e24f4634d2227c.css" rel="stylesheet"/>
<script src="https://www.google.com/recaptcha/api.js?render=explicit"></script>
<script async="" defer="" src="https://apis.google.com/js/platform.js"></script>
<script src="https://js.braintreegateway.com/js/beta/braintree-hosted-fields-beta.17.min.js"></script>
<script src="//cdn.jsdelivr.net/mousetrap/1.6.0/mousetrap.min.js"></script>
<script src="//cdn.jsdelivr.net/ua-parser.js/0.7.10/ua-parser.min.js"></script>
<script async="" src="//fast.wistia.net/assets/external/E-v1.js"></script>
<script src="/static/globals-54e0792dfebe726b1ffd59a8e9eeff55.js"></script>
<script src="//cdn.jsdelivr.net/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/g/jquery.ui@1.10%28jquery.ui.core.min.js+jquery.ui.widget.min.js+jquery.ui.mouse.min.js+jquery.ui.sortable.min.js+jquery.ui.draggable.min.js+jquery.ui.droppable.min.js%29"></script>
<script src="//cdn.jsdelivr.net/lodash/3.10.0/lodash.min.js"></script>
<script src="//cdn.jsdelivr.net/angularjs/1.4.2/angular.min.js"></script>
<script src="//cdn.jsdelivr.net/angularjs/1.4.2/angular-sanitize.min.js"></script>
<script src="//cdn.jsdelivr.net/angular.bootstrap/0.13.3/ui-bootstrap.min.js"></script>
<script src="//cdn.jsdelivr.net/angular.bootstrap/0.13.3/ui-bootstrap-tpls.min.js"></script>
<script src="//cdn.jsdelivr.net/angular.ui-router/0.2.15/angular-ui-router.min.js"></script>
<script src="//cdn.jsdelivr.net/d3js/3.5.17/d3.js"></script>
<script src="//cdn.jsdelivr.net/c3/0.4.11/c3.min.js"></script>
<script src="//cdn.jsdelivr.net/intro.js/0.9.0/intro.min.js"></script>
<script src="//cdn.jsdelivr.net/restangular/1.3.1/restangular.min.js"></script>
<script src="//cdn.jsdelivr.net/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//cdn.jsdelivr.net/chart.js/1.0.2/Chart.min.js"></script>
<script src="//cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>
<script src="//cdn.jsdelivr.net/parseuri/1.2.2/parseuri.min.js"></script>
<script src="//cdn.jsdelivr.net/angular.ui-select/0.12.1/select.min.js"></script>
<script src="//cdn.jsdelivr.net/autolinker/0.19.0/Autolinker.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.nouislider/8.5.0/nouislider.min.js"></script>
<script src="//cdn.jsdelivr.net/angular.dragdrop/1.07/angular-dragdrop.min.js"></script>
<script src="//cdn.jsdelivr.net/angular.masonry-packed/0.14.5/angular-masonry-packed.min.js"></script>
<script src="/static/libs-af45848f435badbd24786a09a91402f3.js"></script>
<script src="/static/insights-e7235daf40fd98dcbe8bac4aa118030b.js"></script>
<!-- HUBSPOT TRACKING SCRIPT -->
<script type="text/javascript">
            (function(d,s,i,r) {
                if (d.getElementById(i)){return;}
                var n=d.createElement(s),e=d.getElementsByTagName(s)[0];
                n.id=i;n.src='//js.hs-analytics.net/analytics/'+(Math.ceil(new Date()/r)*r)+'/'+'1951809'+'.js';
                e.parentNode.insertBefore(n, e);
            })(document,"script","hs-analytics",300000);
        </script>
<!-- MIXPANEL TRACKING -->
<script type="text/javascript">
            window.mixpanelLoaded = false;
            var mixpanelID = ((document.location.host === 'insights.hotjar.com') ? '6d7c50ad560e01715a871a117a2fbd90' : 'de220befb53275d738b897338b9faece');
            (function(f,b){if(!b.__SV){var a,e,i,g;window.mixpanel=b;b._i=[];b.init=function(a,e,d){function f(b,h){var a=h.split(".");2==a.length&&(b=b[a[0]],h=a[1]);b[h]=function(){b.push([h].concat(Array.prototype.slice.call(arguments,0)))}}var c=b;"undefined"!==typeof d?c=b[d]=[]:d="mixpanel";c.people=c.people||[];c.toString=function(b){var a="mixpanel";"mixpanel"!==d&&(a+="."+d);b||(a+=" (stub)");return a};c.people.toString=function(){return c.toString(1)+".people (stub)"};i="disable track track_pageview track_links track_forms register register_once alias unregister identify name_tag set_config people.set people.set_once people.increment people.append people.union people.track_charge people.clear_charges people.delete_user".split(" ");
            for(g=0;g<i.length;g++)f(c,i[g]);b._i.push([a,e,d])};b.__SV=1.2;a=f.createElement("script");a.type="text/javascript";a.async=!0;a.src="undefined"!==typeof MIXPANEL_CUSTOM_LIB_URL?MIXPANEL_CUSTOM_LIB_URL:"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js";e=f.getElementsByTagName("script")[0];e.parentNode.insertBefore(a,e)}})(document,window.mixpanel||[]);
            mixpanel.init(mixpanelID, {
                cross_subdomain_cookie : true,
                persistence_name: 'hj_mixpanel',
                loaded: function() {
                   window.mixpanelLoaded = true;
                }
            });
        </script>
<!-- GOOGLE ANALYTICS TRACKING -->
<script>
            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
            })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

            ga('create', 'UA-51401671-1', 'hotjar.com');
        </script>
<!-- OPTIMIZELY TRACKING -->
<script src="//cdn.optimizely.com/js/1407201747.js"></script>
<!-- GOOGLE ADWORDS CONVERSION TRACKING (https://developers.google.com/adwords-remarketing-tag/asynchronous/) -->
<script charset="utf-8" src="//www.googleadservices.com/pagead/conversion.js" type="text/javascript"></script>
<script>
        /* OLD FACEBOOK TRACKING RETAINED IN PARALLEL UNTIL FURTHER NOTICE */
        (function() {
            var _fbq = window._fbq || (window._fbq = []);
            if (!_fbq.loaded) {
                var fbds = document.createElement('script');
                fbds.async = true;
                fbds.src = '//connect.facebook.net/en_US/fbds.js';
                var s = document.getElementsByTagName('script')[0];
                s.parentNode.insertBefore(fbds, s);
                _fbq.loaded = true;
            }
        })();
        /* OLD FACEBOOK TRACKING ENDS HERE */

        !function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
        n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
        n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
        t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
        document,'script','https://connect.facebook.net/en_US/fbevents.js');

        fbq('init', '259210877621442');

        </script>
<noscript><img height="1" src="https://www.facebook.com/tr?id=259210877621442&amp;ev=PageView&amp;noscript=1" style="display:none" width="1"/></noscript>
<!-- End Facebook Pixel Code -->
<!-- TWITTER TRACKING -->
<script src="//platform.twitter.com/oct.js" type="text/javascript"></script>
<!-- DETECTIFY VERIFICATION -->
<meta content="6524996da2667e519fadf8e2b4baade0" name="detectify-verification"/>
<!-- GOOGLE TAG MANAGER -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-TWWVRK');</script>

</head>
<script id="modal_company_details_v2.html" type="text/ng-template">
        <div class="modal-body pan">
    <button type="button" class="close white" ng-click="$dismiss()">&times;</button>
    <h2 class="modal-title">Edit Organization details</h2>

    <div class="form-info relative">
        <form name="model.forms.companyDetails" class="form-landscape" autocomplete="off" novalidate ng-submit-with-loader="model.forms.companyDetails.submitted=true; onSubmitCompanyDetails(model.companyDetails.company, model.companyDetails.address, model.companyDetails.countryCode, model.companyDetails.vatNumber)">

            <p class="note-top">For tax and invoicing purposes, please enter and verify this information about your Organization:</p>

            <!-- COMPANY NAME -->
            <div class="form-group clearfix mth" ng-class="{error: model.forms.companyDetails.submitted && model.forms.companyDetails.companyName.$invalid}">
                <label for="companyName" class="not-required">Org. Name</label>
                <div class="pull-left">
                    <input type="text" id="companyName" name="companyName" class="form-control companyName" maxlength="50" ng-model="model.companyDetails.company" placeholder="e.g. SomeCompany Inc.">
                    <div class="clear"></div>
                    <div class="form-error" ng-if="model.forms.companyDetails.submitted && model.forms.companyDetails.companyName.$invalid">This field is required.</div>
                </div>
            </div>

            <!-- ADDRESS -->
            <div class="form-group clearfix">
                <label for="address" class="not-required">Org. Address</label>
                <div class="pull-left">
                    <textarea id="address" name="address" class="form-control" maxlength="255" ng-model="model.companyDetails.address"></textarea>
                </div>
            </div>

            <!-- COUNTRY -->
            <div class="form-group clearfix" ng-class="{error: model.forms.companyDetails.submitted && model.forms.companyDetails.country.$invalid}">
                <label for="country">Country<span class="required-marker">*</span></label>
                <div class="pull-left">
                    <select id="country" name="country" class="form-control country"
                            required
                            ng-change="onCountryChange()"
                            ng-model="model.companyDetails.countryCode"
                            ng-options="country.value as country.label for country in model.countries">
                        <option value="">Please select...</option>
                    </select>
                    <div class="form-error" ng-if="model.forms.companyDetails.submitted && model.forms.companyDetails.country.$invalid">This field is required.</div>
                </div>
            </div>

            <!-- VAT NUMBER -->
            <div class="form-group form-group-with-addon clearfix" ng-show="model.vat.applies" ng-class="{error: model.forms.companyDetails.submitted
                && (model.forms.companyDetails.vatNumber.$invalid === true || model.forms.companyDetails.vatNumber.$error.failure === true)}" >
                <label for="vatNumber" class="not-required">VAT Number</label>
                <div class="pull-left">
                    <span class="addon">{{ model.companyDetails.countryCode | isoToVatCountryCode }}</span>
                    <input type="text" id="vatNumber" name="vatNumber" class="form-control vatNumber" maxlength="50" ng-model="model.companyDetails.vatNumber" />
                    <div class="clear"></div>
                    <div class="form-error" ng-if="model.forms.companyDetails.submitted && model.forms.companyDetails.vatNumber.$invalid === true">This VAT number is invalid.</div>
                    <div class="form-error" ng-if="model.forms.companyDetails.submitted && model.forms.companyDetails.vatNumber.$error.failure === true">The 3rd party service we use to validate VAT numbers is unavailable. Kindly try again in a few hours.</div>
                </div>

                <div class="form-group clearfix" ng-show="model.vat.showNotification">
                    <div class="alert alert-info alert-multiline man mtb" ng-hide="model.companyDetails.countryCode === 'MT'">
                        <strong>NOTE:</strong> Failure to supply a Value Added Tax (VAT) number requires us to add {{ model.vat.rate }}% VAT to your total bill.
                    </div>
                    <div class="alert alert-info alert-multiline man mtb" ng-show="model.companyDetails.countryCode === 'MT'">
                        <strong>NOTE:</strong> We are required to add {{ model.vat.rate }}% VAT to your total bill. Invoices that can be used to reclaim this charge, will be available within the 'Billing History' in your account.
                    </div>
                </div>
            </div>

            <!-- Button -->
            <div class="form-group mts">
                <label>&nbsp;</label>
                <div class="pull-left">
                    <button id="continue" type="submit" class="btn btn-lg btn-primary">
                        <span class="spinner"></span>
                        <span class="text-default">Continue</span>
                        <span class="text-loading">Please wait...</span>
                    </button>
                </div>
                <div class="clear"></div>
            </div>
        </form>
    </div>

</div>
    </script>
<script id="modal_expired_v2.html" type="text/ng-template">
        <div class="modal-body pan">
    <h2 class="modal-title" ng-bind-html="modalTitle() | trustAsHtml"></h2>

    <!-- EXPIRED screen -->
    <div class="form-expired">
        <div ng-if="!model.loaded" class="payment-loading">
            <span class="spinner"></span>
            <br />Please wait...
        </div>

        <form ng-if="model.loaded" name="model.forms.expired" novalidate>

            <!-- MULTIPLE SITES -->
            <div class="expired-content">
                <h2 ng-if="model.expiryType === 'site'" class="font16">
                    <span ng-if="model.sites.length === 1">Your site's trial has ended. Please choose whether you would like to upgrade or revert back to your site's Original plan.</span>
                    <span ng-if="model.sites.length > 1">Your site trial have ended. Please choose whether you would like to upgrade or revert back to your sites' Original plans.</span>
                </h2>
                <h2 ng-if="model.expiryType === 'account'" class="font16">
                    To continue enjoying uninterrupted and unlimited Insights with Hotjar, you will need to start a subscription. <a class="inherit-color underline" target="_blank" href="https://www.hotjar.com/pricing">Compare plans</a>.
                </h2>
                <h2 ng-if="model.expiryType === 'payment'" class="font16">
                    To continue, you will need to either downgrade to Basic or reactivate your subscription.
                </h2>
                <table class="table less-td-padding mth">
                    <thead>
                        <tr>
                            <th>Site</th>
                            <th style="width: 240px;">Plan &amp; data collection rate</th>
                            <th>Price</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="site in model.sites" ng-form="accountSite" class="site-row">
                            <td class="wordwrap">{{ site.name | stripProtocol }}</td>

                            <td>
                                <div id="expiredSampleRateDropdown{{ $index }}" class="dropdown dropdown-select" dropdown>
                                    <div class="dropdown-toggle"
                                         dropdown-toggle>
                                        <span class="badge badge-plan-md badge-plan mln mrm {{ site.plan }}">
                                            {{ site.plan }}
                                        </span>
                                        {{ site.sample_rate | number | localeNumber }}
                                        <span class="caret caret-light"></span>
                                    </div>
                                    <ul class="dropdown-menu no-caret dropdown-menu-left" role="menu">
                                        <li ng-repeat="sampleRateOption in getChoices(site, 'sample_rate')"
                                            ng-class="{active: sampleRateOption.pageviews == site.sample_rate}">
                                            <a ng-click="changeSiteSampleRate(site, sampleRateOption.pageviews)">
                                                <span style="width: 72px" class="badge badge-plan-md badge-plan mln mrm {{ sampleRateOption.plan }}">{{ sampleRateOption.plan }}</span>
                                                <span class="font13 semibold mlm">{{ sampleRateOption.pageviews | number | localeNumber }}</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>

                                <div id="alwaysOnRateDropdown{{ $index }}" class="dropdown dropdown-select mtm" dropdown>
                                    <div class="dropdown-toggle"
                                         dropdown-toggle>
                                        {{ site.always_on_rate | number | localeNumber }}
                                        <span class="caret caret-light"></span>
                                    </div>
                                    <ul class="dropdown-menu no-caret dropdown-menu-left" role="menu">
                                        <li ng-repeat="alwaysOnRateOption in getChoices(site, 'always_on_rate')"
                                            ng-class="{active: alwaysOnRateOption.value == site.always_on_rate}">
                                            <a ng-click="changeSiteAlwaysOnRate(site, alwaysOnRateOption.value)">
                                                <span class="font13 semibold mlm">{{ alwaysOnRateOption.value | number | localeNumber }}</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </td>
                            <td>
                                {{ prettifyCost(getSpec(site).total) }}&nbsp;
                                <span class="full font13" ng-hide="getSpec(site).full === getSpec(site).total">{{ prettifyCost(getSpec(site).full) }}</span>
                                <span class="icon-tag mlm"
                                      ng-hide="getSpec(site).full === getSpec(site).total"
                                      data-tooltip="{{ getSpec(site).percentage_discount }}% discount applies."
                                      data-tooltip-placement="top"
                                      data-tooltip-append-to-body="true">
                                </span>
                            </td>
                        </tr>
                        <tr class="totals">
                            <td class="text" colspan="2">
                                Total
                            </td>
                            <td class="sums" ng-if="model.cost.total !== model.cost.discountedTotal">
                                <div class="underline-dashed inline"
                                     tooltip-html-unsafe="Your account benefits from a discount of {{ prettifyCost(totalMonetaryDiscount()) }}.</div>"
                                     data-tooltip-placement="top"
                                     data-tooltip-append-to-body="true">
                                    {{ prettifyCost(model.cost.discountedTotal) }}
                                    <span class="full">{{ prettifyCost(model.cost.total) }}</span>
                                </div><br />
                                <span> per month</span>
                            </td>
                            <td class="sums" ng-if="model.cost.total === model.cost.discountedTotal">
                                {{ prettifyCost(model.cost.discountedTotal) }}
                            </td>
                        </tr>
                    </tbody>
                </table>

                <button id="continueFromExpired" type="button" class="btn btn-lg btn-primary" ng-click-with-loader="updatePlans()">
                    <span class="spinner"></span>
                    <span class="text-default">Continue</span>
                    <span class="text-loading">Please wait...</span>
                </button>

            </div>
        </form>
    </div>
</div>
    </script>
<script id="modal_payments_v2.html" type="text/ng-template">
        <div class="modal-body pan">
    <button type="button" class="close white" ng-click="closeAndReload()">&times;</button>
    <h2 class="modal-title">Update payment method</h2>

    <div class="form-payment relative">

        <div ng-hide="model.forms.payment.ready" class="payment-loading">
            <span class="spinner"></span>
            <br />Please wait...
        </div>

        <div ng-show="model.forms.payment.ready">
            <p class="note-top">
                <span ng-if="model.costSpecs">
                    <span ng-show="model.entireAccountBill">
                        <strong class="font15">Total bill for your account: {{ prettifyCost(model.totalCost) }} per month <span class="font12 normal" ng-show="model.isVatCountry">(Excluding VAT)</span></strong><br />
                    </span>
                    <span ng-hide="model.entireAccountBill">
                        <span ng-show="model.costSpecs.length === 1">
                            <strong class="font15">Hotjar <span class="uppercase">{{ model.costSpecs[0].plan }}</span>: {{ prettifyCost(model.totalCost) }} per month <span class="font12 normal" ng-show="model.isVatCountry">(Excluding VAT)</span></strong><br />
                        </span>
                        <span ng-show="model.costSpecs.length > 1">
                            <strong class="font15">Total bill for {{ model.costSpecs.length }} sites: {{ prettifyCost(model.totalCost) }} per month <span class="font12 normal" ng-show="model.isVatCountry">(Excluding VAT)</span></strong><br />
                        </span>
                    </span>
                </span>
                Please enter your payment details below:
            </p>

            <!-- ALERT: Payment Failure -->
            <div class="alert alert-danger mbh mtb" ng-show="model.forms.payment.errorMessage && !model.cardTypeNotAccepted">
                Payment failed: {{ paymentErrorInfo(model.forms.payment.errorMessage) }}
            </div>

            <!-- Payment type selection -->
            <div class="payment-method-selector">
                <div class="custom-check pull-left man">
                    <input type="radio" id="payment-method-credit-card" ng-model="model.paymentMethod" name="paymentMethod" value="creditCard" />
                    <label for="payment-method-credit-card" class="man">Pay with credit card</label>
                </div>
                <div class="custom-check pull-right man">
                    <input type="radio" id="payment-method-paypal" ng-model="model.paymentMethod" name="paymentMethod" value="paypal" />
                    <label for="payment-method-paypal" class="man">Pay with<span class="icon-paypal icon-after"></span></label>
                </div>
                <div class="clear"></div>
            </div>

            <form id="modal-payment-form" class="payment-form form-landscape" autocomplete="off">

                <!-- Credit card payments-->
                <div ng-show="model.paymentMethod === 'creditCard'">

                    <!-- ALERT: Card not accepted -->
                    <div class="alert alert-danger mbh mtb" ng-if="model.cardTypeNotAccepted">
                        We do not accept <span class="capitalize">{{ model.cardType.replace('-', ' ') }}</span> credit cards yet. Please use <a ng-click="setPaymentMethod('paypal')">PayPal</a> instead or <a href="https://www.hotjar.com/contact" target="_blank">Contact us</a> for assistance.
                    </div>

                    <!-- CARD NUMBER -->
                    <div class="form-group clearfix" ng-class="{error: model.cardValidationErrors.number}">
                        <label for="modal-payment-form-number">Card number<span class="required-marker">*</span></label>
                        <div class="pull-left">
                            <div class="payment-field number" id="modal-payment-form-number"></div>
                            <div class="inline payment-options mlm" tooltip="Accepted Credit Cards: American Express, Visa, Master Card, Maestro, Maestro UK and Discover." data-tooltip-append-to-body="true"></div>
                            <div class="clear"></div>
                            <div class="form-error" ng-if="model.cardValidationErrors.number">Invalid card number.</div>
                        </div>
                    </div>

                    <!-- EXPIRATION UNTIL -->
                    <div class="form-group clearfix" ng-class="{error: model.cardValidationErrors.expirationMonth || model.cardValidationErrors.expirationYear}">
                        <label>Exp. Date<span class="required-marker">*</span></label>
                        <div class="pull-left">
                            <div class="payment-field expiration-month" id="modal-payment-form-expiration-month"></div>
                            <div class="payment-field expiration-year" id="modal-payment-form-expiration-year"></div>
                            <div class="form-error" ng-if="model.cardValidationErrors.expirationMonth || model.cardValidationErrors.expirationYear">Invalid expiration date.</div>
                        </div>
                    </div>

                    <!-- CVC -->
                    <div class="form-group clearfix" ng-class="{error: model.cardValidationErrors.cvv}">
                        <label for="modal-payment-form-cvv">CVC<span class="required-marker">*</span></label>
                        <div class="pull-left">
                            <div class="payment-field cvv" id="modal-payment-form-cvv"></div>
                            <span class="inline icon-info info-cvc mlm" tooltip="The CVC number is a 3 or 4 digit security code printed on the front or back of your card." data-tooltip-append-to-body="true"></span>
                            <div class="clear"></div>
                            <div class="form-error" ng-if="model.cardValidationErrors.cvv">Invalid CVC number.</div>
                        </div>
                    </div>

                </div>

                <!-- PayPal payments -->
                <div ng-show="model.paymentMethod === 'paypal'">
                    <div id="modal-payment-form-paypal-button"></div>
                </div>

                <!-- Submit Button -->
                <div class="form-group" ng-class="{'center mtb': model.paymentMethod === 'paypal'}">
                    <label ng-if="model.paymentMethod === 'creditCard'">&nbsp;</label>
                    <button type="submit" ng-disabled="model.cardTypeNotAccepted || model.forms.payment.submitting" ng-hide="model.forms.payment.submitting" class="btn btn-lg btn-primary">
                        SET PAYMENT METHOD
                    </button>
                    <button type="button" ng-show="model.forms.payment.submitting" class="btn btn-lg btn-primary btn-loading">
                        <span class="spinner"></span>Please wait...
                    </button>
                </div>
            </form>


            <p class="note">Downgrade plans anytime &ndash; directly from your account.</p>
        </div>

    </div>
</div>
    </script>
<script id="modal_upsell_v2.html" type="text/ng-template">
        <div class="modal-body pan">
    <button type="button" class="close white" ng-click="$close()">&times;</button>
    <h2 class="modal-title" ng-bind-html="modalTitle() | trustAsHtml"></h2>

    <div class="form-upsell">

        <div ng-hide="model.loaded" class="payment-loading">
            <span class="spinner"></span>
            <br />Please wait...
        </div>

        <form ng-if="model.loaded" name="model.forms.upsell" novalidate>
            {{ settings }}
            <div class="upsell-content">
                <h2 class="font18">What's included in <span class="uppercase">{{ model.costSpec.plan }}</span>:</h2>
                <ul ng-show="model.costSpec.plan === 'plus'">
                    <li>Unlimited Heatmaps, Recordings, Funnels, Forms, Polls, Surveys and Recruiters.</li>
                    <li>Larger Snapshots ({{ 2000 | localeNumber }} visitors) for Heatmaps, Recordings and Forms.</li>
                    <li>Increased Sample size ({{ 10000 | localeNumber }} pageviews per day).</li>
                </ul>
                <ul ng-show="model.costSpec.plan === 'business'">
                    <li>Larger Snapshots for Heatmaps ({{ 10000 | localeNumber }} visitors) and Recordings and Forms ({{ 5000 | localeNumber }} visitors).</li>
                    <li>Increased Sample size ({{ 20000 | localeNumber }} pageviews per day).</li>
                    <li>Remove Hotjar branding from Incoming Feedback, Polls, Surveys, Recruiters and shared pages.</li>
                </ul>

                <!-- Is site Owner -->
                <div ng-if="model.isSiteOwner">

                    <!-- Payment details available - Confirm payment -->
                    <div ng-if="model.account.has_payment_details" class="custom-check center inline">
                        <input id="confirm_payment" name="confirm_payment" required type="checkbox" ng-model="model.confirmPayment" />
                        <label for="confirm_payment" class="normal" ng-class="{red: model.forms.upsell.submitted && model.forms.upsell.confirm_payment.$error.required}">
                            I understand I will be charged <span class="bold">{{ prettifyCost(model.costSpec.total) }} per month</span>.<br />
                        </label>
                    </div>

                    <!-- Payment details not available -->
                    <h2 ng-hide="model.account.has_payment_details" class="font14" >Only {{ prettifyCost(model.costSpec.total) }} per month.</h2>

                    <br/>

                    <button type="button" class="btn btn-lg"
                            ng-class="{'btn-purple': model.costSpec.plan === 'plus', 'btn-gold': model.costSpec.plan === 'business'}"
                            ng-click-with-loader="model.forms.upsell.submitted=true; updateSubscription()">
                        <span class="spinner"></span>
                        <span class="text-default">Upgrade to {{ model.costSpec.plan }}</span>
                        <span class="text-loading">Please wait...</span>
                    </button>

                </div>

                <!-- Is not site Owner -->
                <div ng-if="!model.isSiteOwner">
                    <h2 class="font14" >Only {{ prettifyCost(model.costSpec.full) }} per month.</h2>
                </div>

            </div>
        </form>
        <p class="note" ng-if="!model.isSiteOwner">
            <br />
            <span class="icon-info"></span>Only Account Owners can perform upgrades or downgrades.
            <br /><br />
        </p>
        <p class="note black" ng-show="model.isSiteOwner && model.loaded">
            <img src="/static/app/img/money-back.png" width="30" class="mrm"><strong>30 Day Money Back Guarantee.</strong> 100% satisfied or your money back.
        </p>
    </div>
</div>
    </script>
<script id="modal_company_details.html" type="text/ng-template">
        <div class="modal-body pan">
    <button type="button" class="close white" ng-click="$dismiss()">&times;</button>
    <h2 class="modal-title">Edit Organization details</h2>

    <div class="form-info relative">
        <form name="model.forms.companyDetails" class="form-landscape" autocomplete="off" novalidate ng-submit-with-loader="model.forms.companyDetails.submitted=true; onSubmitCompanyDetails(model.companyDetails.company, model.companyDetails.address, model.companyDetails.countryCode, model.companyDetails.vatNumber)">

            <p class="note-top">For tax and invoicing purposes, please enter and verify this information about your Organization:</p>

            <!-- COMPANY NAME -->
            <div class="form-group clearfix mth" ng-class="{error: model.forms.companyDetails.submitted && model.forms.companyDetails.companyName.$invalid}">
                <label for="companyName" class="not-required">Org. Name</label>
                <div class="pull-left">
                    <input type="text" id="companyName" name="companyName" class="form-control companyName" maxlength="50" ng-model="model.companyDetails.company" placeholder="e.g. SomeCompany Inc.">
                    <div class="clear"></div>
                    <div class="form-error" ng-if="model.forms.companyDetails.submitted && model.forms.companyDetails.companyName.$invalid">This field is required.</div>
                </div>
            </div>

            <!-- ADDRESS -->
            <div class="form-group clearfix">
                <label for="address" class="not-required">Org. Address</label>
                <div class="pull-left">
                    <textarea id="address" name="address" class="form-control" maxlength="255" ng-model="model.companyDetails.address"></textarea>
                </div>
            </div>

            <!-- COUNTRY -->
            <div class="form-group clearfix" ng-class="{error: model.forms.companyDetails.submitted && model.forms.companyDetails.country.$invalid}">
                <label for="country">Country<span class="required-marker">*</span></label>
                <div class="pull-left">
                    <select id="country" name="country" class="form-control country"
                            required
                            ng-change="onCountryChange()"
                            ng-model="model.companyDetails.countryCode"
                            ng-options="country.value as country.label for country in model.countries">
                        <option value="">Please select...</option>
                    </select>
                    <div class="form-error" ng-if="model.forms.companyDetails.submitted && model.forms.companyDetails.country.$invalid">This field is required.</div>
                </div>
            </div>

            <!-- VAT NUMBER -->
            <div class="form-group form-group-with-addon clearfix" ng-show="model.isVatCountry" ng-class="{error: model.forms.companyDetails.submitted
                && (model.forms.companyDetails.vatNumber.$invalid === true || model.forms.companyDetails.vatNumber.$error.failure === true)}" >
                <label for="vatNumber" class="not-required">VAT Number</label>
                <div class="pull-left">
                    <span class="addon">{{ model.companyDetails.countryCode | isoToVatCountryCode }}</span>
                    <input type="text" id="vatNumber" name="vatNumber" class="form-control vatNumber" maxlength="50" ng-model="model.companyDetails.vatNumber">
                    <div class="clear"></div>
                    <div class="form-error" ng-if="model.forms.companyDetails.submitted && model.forms.companyDetails.vatNumber.$invalid === true">This VAT number is invalid.</div>
                    <div class="form-error" ng-if="model.forms.companyDetails.submitted && model.forms.companyDetails.vatNumber.$error.failure === true">The 3rd party service we use to validate VAT numbers is unavailable. Kindly try again in a few hours.</div>
                </div>

                <div class="form-group clearfix" ng-show="model.showVatWarning">
                    <div class="alert alert-info alert-multiline man mtb" ng-show="model.companyDetails.countryCode !== 'MT'">
                        <strong>NOTE:</strong> Failure to supply a Value Added Tax (VAT) number requires us to add {{ model.vatRate }}% VAT to your next bill.
                    </div>
                    <div class="alert alert-info alert-multiline man mtb" ng-show="model.companyDetails.countryCode === 'MT'">
                        <strong>NOTE:</strong> We are required to add {{ model.vatRate }}% VAT to your next bill. Invoices that can be used to reclaim this charge, will be available within the 'Billing History' in your account.
                    </div>
                </div>
            </div>

            <!-- Button -->
            <div class="form-group mts">
                <label>&nbsp;</label>
                <div class="pull-left">
                    <button id="continue" type="submit" class="btn btn-lg btn-primary">
                        <span class="spinner"></span>
                        <span class="text-default">Continue</span>
                        <span class="text-loading">Please wait...</span>
                    </button>
                </div>
                <div class="clear"></div>
            </div>
        </form>
    </div>

</div>
    </script>
<script id="modal_expired.html" type="text/ng-template">
        <div class="modal-body pan" ng-class="{plus: model.plan === 'plus', business: model.plan === 'business'}">
    <h2 class="modal-title" ng-bind-html="model.title | trustAsHtml"></h2>

    <!-- EXPIRED screen -->
    <div class="form-expired">
        <form name="forms.expired" novalidate>

            <!-- SINGLE ORGANIZATION -->
            <div class="expired-content expired-single" ng-if="model.accountOrganizations.length === 1">
                <h2 class="font18">Subscribe to Hotjar <span class="uppercase">{{ model.plan }}</span> to continue enjoying uninterrupted and unlimited Insights.</h2>

                <button type="button" class="btn btn-lg"
                        ng-class="{'btn-purple': model.plan === 'plus', 'btn-gold': model.plan === 'business'}"
                        ng-click-with-loader="updateOrganization()">
                    <span class="spinner"></span>
                    <span class="text-default">Continue with Hotjar {{ model.plan }}</span>
                    <span class="text-loading">Please wait...</span>
                </button>

                <h2 class="font14" ng-show="model.currencySymbol">Only {{ model.currencySymbol + model.totalCost }} per month for Unlimited Users, Sites and Insights.</h2>

                <hr />

                <p class="note">Or <a ng-click="downgradeToBasic()">downgrade</a> to our limited free account &ndash; Hotjar Basic</p>
                <a class="black underline" target="_blank" href="https://www.hotjar.com/pricing">Compare BASIC and <span class="uppercase">{{ model.plan }}</span></a>
            </div>

            <!-- MULTIPLE ORGANIZATIONS -->
            <div class="expired-content" ng-if="model.accountOrganizations.length > 1">
                <h2 class="font16">To continue enjoying uninterrupted and unlimited Insights with Hotjar, you will need to start a subscription. <a class="inherit-color underline" target="_blank" href="https://www.hotjar.com/pricing">Compare plans</a>.</h2>

                <table class="table less-td-padding table-hover mth" table-data="accountOrganizations(st)" sortable-table st-initial-by="name" st-initial-reverse="false">
                    <thead>
                    <tr>
                        <th st-by="name">Organization</th>
                        <th st-by="plan">Plan</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="organization in accountOrganizations(st)" ng-form="accountOrganization">
                        <td class="wordwrap">{{ organization.name }}</td>
                        <td>
                            <select class="form-control inline widthAuto" ng-model="organization.sample_rate" ng-change="updateTotals(organization)"
                                ng-options="getSampleRateOptionText(value) for value in sampleRates track by value">
                            </select>
                        </td>
                    </tr>
                    <tr class="totals">
                        <td class="text">
                            Total
                        </td>
                        <td class="sums">
                            <div id="totalPrice" ng-class="{strikethrough: model.totalDiscount > 0}" class="inline">{{ model.currencySymbol + model.totalStandardCost }}</div>
                            &nbsp;
                            <div id="discountedPrice" ng-show="model.totalDiscount > 0" class="green underline-dashed inline"
                                  tooltip-html-unsafe="<strong>{{ model.currencySymbol + model.totalDiscount }} discount applies.</strong><br />You pay discounted rates when subscribing to multiple paid plans."
                                  data-tooltip-append-to-body="true">
                                {{ model.currencySymbol + (model.totalStandardCost - model.totalDiscount) }}
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>

                <button id="continueFromExpired" type="button" class="btn btn-lg btn-primary" ng-click-with-loader="updateMultipleOrganizations()">
                    <span class="spinner"></span>
                    <span class="text-default">Continue</span>
                    <span class="text-loading">Please wait...</span>
                </button>

            </div>
        </form>
    </div>
</div>
    </script>
<script id="modal_payment.html" type="text/ng-template">
        <div class="modal-body pan">
    <button type="button" class="close white" ng-click="closeAndReload()">&times;</button>
    <h2 class="modal-title">Update payment method</h2>

    <div class="form-payment relative">

        <div ng-hide="model.forms.payment.ready" class="payment-loading">
            <span class="spinner"></span>
            <br />Please wait...
        </div>

        <div ng-show="model.forms.payment.ready">
            <p class="note-top">
                <span ng-show="model.costSpecs.length === 1 && model.currencySymbol"><strong class="font15">Hotjar <span class="uppercase">{{ model.costSpecs[0].plan }}</span>: {{ model.currencySymbol + model.totalCost }} per month <span class="font12 normal" ng-show="model.isVatCountry">(Excluding VAT)</span></strong><br /></span>
                <span ng-show="model.costSpecs.length > 1 && model.currencySymbol"><strong class="font15">Total bill for {{ model.costSpecs.length }} organizations: {{ model.currencySymbol + model.totalCost }} per month <span class="font12 normal" ng-show="model.isVatCountry">(Excluding VAT)</span></strong><br /></span>
                <span ng-show="model.originalState === 'upsell'">Enter your payment details for instant access:</span>
                <span ng-show="model.originalState !== 'upsell'">Please enter your payment details below:</span>
            </p>

            <!-- ALERT: Payment Failure -->
            <div class="alert alert-danger mbh mtb" ng-show="model.forms.payment.errorMessage && !model.cardTypeNotAccepted">
                Payment failed: {{ paymentErrorInfo(model.forms.payment.errorMessage) }}
            </div>

            <!-- Payment type selection -->
            <div class="payment-method-selector">
                <div class="custom-check pull-left man">
                    <input type="radio" id="payment-method-credit-card" ng-model="model.paymentMethod" name="paymentMethod" value="creditCard" />
                    <label for="payment-method-credit-card" class="man">Pay with credit card</label>
                </div>
                <div class="custom-check pull-right man">
                    <input type="radio" id="payment-method-paypal" ng-model="model.paymentMethod" name="paymentMethod" value="paypal" />
                    <label for="payment-method-paypal" class="man">Pay with<span class="icon-paypal icon-after"></span></label>
                </div>
                <div class="clear"></div>
            </div>

            <form id="modal-payment-form" class="payment-form form-landscape" autocomplete="off">

                <!-- Credit card payments-->
                <div ng-show="model.paymentMethod === 'creditCard'">

                    <!-- ALERT: Card not accepted -->
                    <div class="alert alert-danger mbh mtb" ng-if="model.cardTypeNotAccepted">
                        We do not accept <span class="capitalize">{{ getCardName(model.cardType) }}</span> credit cards yet. Please use <a ng-click="setPaymentMethod('paypal')">PayPal</a> instead or <a href="https://www.hotjar.com/contact" target="_blank">Contact us</a> for assistance.
                    </div>

                    <!-- CARD NUMBER -->
                    <div class="form-group clearfix" ng-class="{error: model.cardValidationErrors.number}">
                        <label for="modal-payment-form-number">Card number<span class="required-marker">*</span></label>
                        <div class="pull-left">
                            <div class="payment-field number" id="modal-payment-form-number"></div>
                            <div class="inline payment-options mlm" tooltip="Accepted Credit Cards: American Express, Visa, Master Card, Maestro, Maestro UK and Discover." data-tooltip-append-to-body="true"></div>
                            <div class="clear"></div>
                            <div class="form-error" ng-if="model.cardValidationErrors.number">Invalid card number.</div>
                        </div>
                    </div>

                    <!-- EXPIRATION UNTIL -->
                    <div class="form-group clearfix" ng-class="{error: model.cardValidationErrors.expirationMonth || model.cardValidationErrors.expirationYear}">
                        <label>Exp. Date<span class="required-marker">*</span></label>
                        <div class="pull-left">
                            <div class="payment-field expiration-month" id="modal-payment-form-expiration-month"></div>
                            <div class="payment-field expiration-year" id="modal-payment-form-expiration-year"></div>
                            <div class="form-error" ng-if="model.cardValidationErrors.expirationMonth || model.cardValidationErrors.expirationYear">Invalid expiration date.</div>
                        </div>
                    </div>

                    <!-- CVC -->
                    <div class="form-group clearfix" ng-class="{error: model.cardValidationErrors.cvv}">
                        <label for="modal-payment-form-cvv">CVC<span class="required-marker">*</span></label>
                        <div class="pull-left">
                            <div class="payment-field cvv" id="modal-payment-form-cvv"></div>
                            <span class="inline icon-info info-cvc mlm" tooltip="The CVC number is a 3 or 4 digit security code printed on the front or back of your card." data-tooltip-append-to-body="true"></span>
                            <div class="clear"></div>
                            <div class="form-error" ng-if="model.cardValidationErrors.cvv">Invalid CVC number.</div>
                        </div>
                    </div>

                </div>

                <!-- PayPal payments -->
                <div ng-show="model.paymentMethod === 'paypal'">
                    <div id="modal-payment-form-paypal-button"></div>
                </div>

                <!-- Submit Button -->
                <div class="form-group" ng-class="{'center mtb': model.paymentMethod === 'paypal'}">
                    <label ng-if="model.paymentMethod === 'creditCard'">&nbsp;</label>
                    <button type="submit" ng-disabled="model.cardTypeNotAccepted || model.forms.payment.submitting" ng-hide="model.forms.payment.submitting" class="btn btn-lg btn-primary">
                        SET PAYMENT METHOD
                    </button>
                    <button type="button" ng-show="model.forms.payment.submitting" class="btn btn-lg btn-primary btn-loading">
                        <span class="spinner"></span>Please wait...
                    </button>
                </div>
            </form>


            <p class="note">Downgrade plans anytime &ndash; directly from your account.</p>
        </div>

    </div>
</div>
    </script>
<script id="modal_prompt.html" type="text/ng-template">
        <div class="modal-body">
    <button type="button" class="close" ng-click="close()()">&times;</button>
    <h2 ng-bind="header"></h2>
    <span ng-bind="text"></span>
</div>
<div class="modal-footer">
    <button id="posButton" class="btn {{ posButtonColor }} pull-left" ng-click="posClick()" ng-bind="posButtonText"></button>
    <button id="negButton" class="btn {{ negButtonColor }} pull-right" ng-click="negClick()" ng-bind="negButtonText"></button>
    <div class="clear"></div>
</div>
    </script>
<script id="modal_targeting.html" type="text/ng-template">
        <div class="modal-body">
    <h2 class="modal-title pbb">
        Page targeting
    </h2>

    <div class="page-targeting page-targeting-list">
        <div>
            <p class="man">
                <span ng-hide="model.module === 'playbacks'">The {{ model.widgetText[model.module] }} will show on the following URLs or triggers:</span>
                <span ng-show="model.module === 'playbacks'">Visitors will only start being recorded when they use the following URLs or triggers:</span>
                <span class="icon-info icon-s icon-after" tooltip="Please note that fields are case sensitive." data-tooltip-append-to-body="true"></span>
            </p>

            <form name="targetingForm" novalidate>

                <div class="targeting-rule" ng-repeat="targetingRule in model.positiveTargetingRules track by $index">
                    <div class="pull-left rule-details">
                        <div class="pull-left dropdown dropdown-select" dropdown>
                            <div class="dropdown-toggle" dropdown-toggle>
                                <span ng-show="targetingRule.component === 'url'">{{ model.matchOperationText[targetingRule.match_operation].label }}</span>
                                <span ng-show="targetingRule.component === 'trigger'">{{ model.matchOperationText[targetingRule.component].label }}</span>
                                <span class="caret caret-light"></span>
                            </div>
                            <ul class="dropdown-menu" role="menu">
                                <li ng-mouseover="matchHover = 'simple'">
                                    <a ng-click="setMatchOperation(targetingRule, 'simple')">Simple URL match</a>
                                    <a target="_blank" class="help-link"
                                       tooltip-html-unsafe="Target a page ignoring any ? and # values.<br /><strong>Click for more info</strong>"
                                       tooltip-append-to-body="true"
                                       href="http://docs.hotjar.com/v1.0/docs/page-targeting-explained#simple-match">
                                        <span class="icon-info icon-s grey9" ng-class="{blue: matchHover === 'simple'}"></span>
                                    </a>
                                </li>
                                <li ng-mouseover="matchHover = 'exact'">
                                    <a ng-click="setMatchOperation(targetingRule, 'exact')">Exact URL match</a>
                                    <a target="_blank" class="help-link"
                                       tooltip-html-unsafe="Target a URL exactly as specified.<br /><strong>Click for more info</strong>"
                                       tooltip-append-to-body="true"
                                       href="http://docs.hotjar.com/v1.0/docs/page-targeting-explained#exact-match">
                                        <span class="icon-info icon-s grey9" ng-class="{blue: matchHover === 'exact'}"></span>
                                    </a>
                                </li>
                                <li ng-mouseover="matchHover = 'starts_with'">
                                    <a ng-click="setMatchOperation(targetingRule, 'starts_with')">URL starts with</a>
                                    <a target="_blank" class="help-link"
                                       tooltip-html-unsafe="Target all pages which URLs start in a certain way.<br /><strong>Click for more info</strong>"
                                       tooltip-append-to-body="true"
                                       href="http://docs.hotjar.com/v1.0/docs/page-targeting-explained#starts-with">
                                        <span class="icon-info icon-s grey9" ng-class="{blue: matchHover === 'starts_with'}"></span>
                                    </a>
                                </li>
                                <li ng-mouseover="matchHover = 'ends_with'">
                                    <a ng-click="setMatchOperation(targetingRule, 'ends_with')">URL ends with</a>
                                    <a target="_blank" class="help-link"
                                       tooltip-html-unsafe="Target all pages which URLs end in a certain way.<br /><strong>Click for more info</strong>"
                                       tooltip-append-to-body="true"
                                       href="http://docs.hotjar.com/v1.0/docs/page-targeting-explained#ends-with">
                                        <span class="icon-info icon-s grey9" ng-class="{blue: matchHover === 'ends_with'}"></span>
                                    </a>
                                </li>
                                <li ng-mouseover="matchHover = 'contains'">
                                    <a ng-click="setMatchOperation(targetingRule, 'contains')">URL contains</a>
                                    <a target="_blank" class="help-link"
                                       tooltip-html-unsafe="Target all pages which URLs contain something specific.<br /><strong>Click for more info</strong>"
                                       tooltip-append-to-body="true"
                                       href="http://docs.hotjar.com/v1.0/docs/page-targeting-explained#contains">
                                        <span class="icon-info icon-s grey9" ng-class="{blue: matchHover === 'contains'}"></span>
                                    </a>
                                </li>
                                <li ng-mouseover="matchHover = 'regex'">
                                    <a ng-click="setMatchOperation(targetingRule, 'regex')">URL regular expression</a>
                                    <a target="_blank" class="help-link"
                                       tooltip-html-unsafe="Target all pages which URL matches a regular expression.<br /><strong>Click for more info</strong>"
                                       tooltip-append-to-body="true"
                                       href="http://docs.hotjar.com/v1.0/docs/using-regular-expressions">
                                        <span class="icon-info icon-s grey9" ng-class="{blue: matchHover === 'regex'}"></span>
                                    </a>
                                </li>
                                <li class="divider"></li>
                                <li ng-mouseover="matchHover = 'trigger'">
                                    <a ng-show="canUseJavaScriptTriggers()" ng-click="setMatchOperation(targetingRule, 'trigger')">JavaScript trigger</a>
                                    <a ng-hide="canUseJavaScriptTriggers()" class="grey9 cursor-disabled">JavaScript trigger <span class="badge badge-plan inline plus">plus</span></a>
                                    <a target="_blank" class="help-link"
                                       tooltip-html-unsafe="Target specific visitors by adding a custom JavaScript trigger.<br /><strong>Click for more info</strong>"
                                       tooltip-append-to-body="true"
                                       href="http://docs.hotjar.com/v1.0/docs/using-javascript-triggers">
                                        <span class="icon-info icon-s grey9" ng-class="{blue: matchHover === 'trigger'}"></span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <input ng-show="targetingRule.component === 'url'" name="positivePattern{{$index}}" type="text" class="form-control inline" ng-change="checkValidMatchOperation(targetingRule);" ng-model="targetingRule.pattern" maxlength="750" placeholder="{{ model.matchOperationText[targetingRule.match_operation].placeholder }}"/>
                        <input ng-show="targetingRule.component === 'trigger'" name="positivePattern{{$index}}" type="text" class="form-control inline" ng-change="checkValidMatchOperation(targetingRule);" ng-model="targetingRule.pattern" maxlength="750" placeholder="{{ model.matchOperationText.trigger.placeholder }}"/>
                    </div>
                    <div class="pull-left rule-options">
                        <a ng-hide="model.positiveTargetingRules.length === 1" class="btn-icon" ng-click="deletePositiveRule(targetingRule)" tooltip="Delete" data-tooltip-append-to-body="true"><span class="icon-trash"></span></a>
                        <a ng-show="$last" class="btn-icon man" ng-click="addPositiveRule()" tooltip="Add another" data-tooltip-append-to-body="true"><span class="icon-plus"></span></a>
                    </div>
                    <div class="clear"></div>
                    <div class="form-error" ng-show="targetingRule.error">{{ targetingRule.error }}</div>
                </div>

            </form>
        </div>

        <div class="negative-rules" ng-show="model.module !== 'playbacks' && model.negativeTargetingRules.length === 0">
            <a ng-click="addNegativeRule()" class="black underline">Specify URLs where the {{ model.widgetText[model.module] }} should not show</a>.
        </div>

        <div class="negative-rules" ng-show="model.module !== 'playbacks' && model.negativeTargetingRules.length > 0">
        <p class="man">
            <span ng-hide="model.module === 'playbacks'">The {{ model.widgetText[model.module] }} will <span class="bold">NOT</span> show on the following URLs:</span ng-hide="model.module === 'playbacks'">
            <span class="icon-info icon-s icon-after" tooltip="URLs listed here are case sensitive and given priority over the ones listed above." data-tooltip-append-to-body="true"></span>
        </p>

        <form name="targetingForm" novalidate>

            <div class="targeting-rule" ng-repeat="targetingRule in model.negativeTargetingRules track by $index">
                <div class="pull-left rule-details">
                    <div class="pull-left dropdown dropdown-select" dropdown>
                        <div class="dropdown-toggle" dropdown-toggle>
                            {{ model.matchOperationText[targetingRule.match_operation].label }}
                            <span class="caret caret-light"></span>
                        </div>
                        <ul class="dropdown-menu" role="menu">
                            <li ng-mouseover="matchHover = 'simple'">
                                <a ng-click="setMatchOperation(targetingRule, 'simple')">Simple URL match</a>
                                <a target="_blank" class="help-link"
                                   tooltip-html-unsafe="Target a page ignoring any ? and # values.<br /><strong>Click for more info</strong>"
                                   tooltip-append-to-body="true"
                                   href="http://docs.hotjar.com/v1.0/docs/page-targeting-explained#simple-match">
                                    <span class="icon-info icon-s grey9" ng-class="{blue: matchHover === 'simple'}"></span>
                                </a>
                            </li>
                            <li ng-mouseover="matchHover = 'exact'">
                                <a ng-click="setMatchOperation(targetingRule, 'exact')">Exact URL match</a>
                                <a target="_blank" class="help-link"
                                   tooltip-html-unsafe="Target a URL exactly as specified.<br /><strong>Click for more info</strong>"
                                   tooltip-append-to-body="true"
                                   href="http://docs.hotjar.com/v1.0/docs/page-targeting-explained#exact-match">
                                    <span class="icon-info icon-s grey9" ng-class="{blue: matchHover === 'exact'}"></span>
                                </a>
                            </li>
                            <li ng-mouseover="matchHover = 'starts_with'">
                                <a ng-click="setMatchOperation(targetingRule, 'starts_with')">URL starts with</a>
                                <a target="_blank" class="help-link"
                                   tooltip-html-unsafe="Target all pages which URLs start in a certain way.<br /><strong>Click for more info</strong>"
                                   tooltip-append-to-body="true"
                                   href="http://docs.hotjar.com/v1.0/docs/page-targeting-explained#starts-with">
                                    <span class="icon-info icon-s grey9" ng-class="{blue: matchHover === 'starts_with'}"></span>
                                </a>
                            </li>
                            <li ng-mouseover="matchHover = 'ends_with'">
                                <a ng-click="setMatchOperation(targetingRule, 'ends_with')">URL ends with</a>
                                <a target="_blank" class="help-link"
                                   tooltip-html-unsafe="Target all pages which URLs end in a certain way.<br /><strong>Click for more info</strong>"
                                   tooltip-append-to-body="true"
                                   href="http://docs.hotjar.com/v1.0/docs/page-targeting-explained#ends-with">
                                    <span class="icon-info icon-s grey9" ng-class="{blue: matchHover === 'ends_with'}"></span>
                                </a>
                            </li>
                            <li ng-mouseover="matchHover = 'contains'">
                                <a ng-click="setMatchOperation(targetingRule, 'contains')">URL contains</a>
                                <a target="_blank" class="help-link"
                                   tooltip-html-unsafe="Target all pages which URLs contain something specific.<br /><strong>Click for more info</strong>"
                                   tooltip-append-to-body="true"
                                   href="http://docs.hotjar.com/v1.0/docs/page-targeting-explained#contains">
                                    <span class="icon-info icon-s grey9" ng-class="{blue: matchHover === 'contains'}"></span>
                                </a>
                            </li>
                            <li ng-mouseover="matchHover = 'regex'">
                                <a ng-click="setMatchOperation(targetingRule, 'regex')">URL regular expression</a>
                                <a target="_blank" class="help-link"
                                   tooltip-html-unsafe="Target all pages which URL matches a regular expression.<br /><strong>Click for more info</strong>"
                                   tooltip-append-to-body="true"
                                   href="http://docs.hotjar.com/v1.0/docs/using-regular-expressions">
                                    <span class="icon-info icon-s grey9" ng-class="{blue: matchHover === 'regex'}"></span>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <input name="negativePattern{{$index}}" type="text" class="form-control inline" ng-change="checkValidMatchOperation(targetingRule)" ng-model="targetingRule.pattern" maxlength="750" placeholder="{{ model.matchOperationText[targetingRule.match_operation].placeholder }}"/>
                </div>
                <div class="pull-left rule-options">
                    <a class="btn-icon" ng-click="deleteNegativeRule(targetingRule)" tooltip="Delete" data-tooltip-append-to-body="true"><span class="icon-trash"></span></a>
                    <a ng-show="$last" class="btn-icon man" ng-click="addNegativeRule()" tooltip="Add another" data-tooltip-append-to-body="true"><span class="icon-plus"></span></a>
                </div>
                <div class="clear"></div>
                <div class="form-error" ng-show="targetingRule.error">{{ targetingRule.error }}</div>
            </div>

        </form>
    </div>
    </div>

    <div class="alert alert-info alert-multiline man mtb" ng-show="model.module === 'polls' || model.module === 'testers' || model.module === 'survey'">
        If multiple Feedback widgets are set up on the same page, the last one created will appear on the page. <a href="http://docs.hotjar.com/v1.0/docs/troubleshooting-feedback-widgets#multiple-widgets-set-to-target-the-same-page" target="_blank">Learn more</a>.
    </div>
    <div class="alert alert-info man mtb" ng-hide="model.module === 'polls' || model.module === 'testers' || model.module === 'survey'">
        <a href="http://docs.hotjar.com/v1.0/docs/page-targeting-explained" target="_blank">Learn more about the different match options</a>.
    </div>

</div>
<div class="modal-footer">
    <button type="button" class="btn btn-clean pull-left" ng-click="closeModal()">Cancel</button>
    <button type="button" class="btn btn-primary pull-right" ng-click="saveTargetingRules()">
        Done
    </button>
</div>
    </script>
<script id="modal_tracking_code.html" type="text/ng-template">
        <div class="modal-body">
    <button type="button" class="close white" ng-click="$close()">&times;</button>
    <div ng-if="model.checkScriptResult === 'failure'" class="alert alert-warning alert-modal-top">{{ model.site.name | stripProtocol }} has not reported any data in the past 24 hours.</div>
    <div ng-if="model.checkScriptResult === 'success'" class="alert alert-success alert-modal-top">{{ model.site.name | stripProtocol }} reported data within the past {{ model.lastDataAge }}.</div>

    <div class="alert alert-info mbn" ng-class="{'alert-multiline': model.checkScriptResult === 'failure'}">
        <strong>Installation is automatically verified every hour.</strong>
        <span ng-if="model.checkScriptResult === 'failure'">
            <br /><br />
            For help on how to install Hotjar, please refer to our <a href="http://docs.hotjar.com/v1.0/docs/hotjar-tracking-code#installation-guides" target="_blank">step by step installation guide</a> for <a href="http://docs.hotjar.com/v1.0/docs/manual" target="_blank">manual installation</a>, <a href="http://docs.hotjar.com/v1.0/docs/google-tag-manager" target="_blank">Google Tag Manager</a>, <a href="http://docs.hotjar.com/v1.0/docs/wordpress" target="_blank">Wordpress</a>, <a href="http://docs.hotjar.com/v1.0/docs/prestashop" target="_blank">Prestashop</a>, etc.
        </span>
    </div>

    <!-- TRACKING CODE -->
    <ul class="modal-tabs">
        <li ng-class="{active: model.activeTab === 1}" ng-click="setActiveTab(1)">Tracking code</li>
        <li ng-class="{active: model.activeTab === 2}" ng-click="setActiveTab(2)">Verify installation</li>
        <li class="site-id">
            <div data-tooltip="This is the site's unique identifier. You may need it to install Hotjar or to integrate with other services."
                 data-tooltip-append-to-body="true">
                    Site ID:&nbsp;<span class="id">{{ model.site.id }}</span>
            </div>
        </li>
        <div class="clear"></div>
    </ul>
    <div class="modal-tab-content pbn" ng-show="model.activeTab === 1">
        Copy and paste the code snippet into the <strong>&lt;head&gt;</strong> tag on every page where you wish to track visitors and collect feedback.
        <div class="tracking-code-holder mtb" data-tour-step="code">
            <div class="numbers">
                1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11
            </div>
            <pre class="scroll notranslate" translate="no"><snippet id="snippet" highlight-content site-id="{{ model.site.id }}" site-name="{{ model.site.name }}"></snippet></pre>
            <div class="clear"></div>
            <button type="button" class="btn btn-sm no-transform" ngclipboard data-clipboard-target="#snippet">Copy to clipboard</button>
        </div>
    </div>

    <!-- VERIFY INSTALLATION -->
    <div class="modal-tab-content integrate-hotjar pbn" ng-show="model.activeTab === 2">
        You can verify this tracking code is installed on a page by entering a URL in the field below.
        <div class="screen-box center">
            <div class="screen-text">&nbsp;</div>
            <img src="/static/app/img/screen-install.png" width="294" height="187" />
        </div>

        <div class="verify-box center">
            <div class="form-group form-field inline mrs" ng-class="{error: model.checkScriptFailed}">
                <input id="test-url" name="test-url" type="text" class="form-control" ng-enter="verifyInstallation()" ng-model="model.installationUrl" placeholder="Enter a URL you want to verify." />
                <div class="help-text" ng-hide="model.checkScriptFailed">e.g. http://www.yourwebsite.com or http://localhost:8000</div>
                <div class="form-error" ng-show="model.checkScriptFailed">Hotjar installation could not be verified, please confirm that the tracking code has been installed on this page.</div>
            </div>
            <div class="form-group inline">
                <button type="button" class="btn btn-primary" ng-click="verifyInstallation()">Verify installation</button>
            </div>
        </div>

        <ol class="verify-steps">
            <li>Enter a URL above where you installed Hotjar to verify installation. This will open a new window.</li>
            <li>You can navigate throughout your site if you wish to verify installation on multiple pages.</li>
            <li>If you don't see the confirmation message or see a failure message, it means that Hotjar has not been properly installed.</li>
        </ol>
    </div>

</div>
    </script>
<script id="modal_upsell.html" type="text/ng-template">
        <div class="modal-body pan" ng-class="{plus: model.plan === 'plus', business: model.plan === 'business'}">
    <button type="button" class="close white" ng-click="$close()">&times;</button>
    <h2 class="modal-title" ng-bind-html="model.title | trustAsHtml"></h2>

    <div class="form-upsell">
        <form name="forms.upsell" novalidate>
            <div class="upsell-content">
                <h2 class="font18">What's included in <span class="uppercase">{{ model.plan }}</span>:</h2>
                <ul ng-show="model.plan === 'plus'">
                    <li>Unlimited Heatmaps, Recordings, Funnels, Forms, Polls, Surveys and Recruiters.</li>
                    <li>Larger Snapshots ({{ 2000 | localeNumber }} visitors) for Heatmaps, Recordings and Forms.</li>
                    <li>Increased Sample size ({{ 10000 | localeNumber }} pageviews per day).</li>
                </ul>
                <ul ng-show="model.plan === 'business'">
                    <li>Larger Snapshots for Heatmaps ({{ 10000 | localeNumber }} visitors) and Recordings and Forms ({{ 5000 | localeNumber }} visitors).</li>
                    <li>Increased Sample size ({{ 20000 | localeNumber }} pageviews per day).</li>
                    <li>Remove Hotjar branding from Polls, Surveys, Recruiters and shared pages.</li>
                </ul>

                    <div ng-hide="model.isAccountAdminOfOrganization">
                    <h2 class="font14" ng-show="model.currencySymbol">Only {{ model.currencySymbol + model.totalCost }} per month.</h2>
                </div>

                <div ng-show="model.isAccountAdminOfOrganization">
                    <h2 class="font14" ng-if="!model.hasPaymentDetails && model.currencySymbol">Only {{ model.currencySymbol + model.totalCost }} per month.</h2>

                    <!-- Confirm payment -->
                    <div class="custom-check center inline" ng-if="model.hasPaymentDetails">
                        <input id="confirm_payment" name="confirm_payment" required type="checkbox" ng-model="model.confirmPayment" />
                        <label for="confirm_payment" class="normal" ng-class="{red: forms.upsell.submitted && forms.upsell.confirm_payment.$error.required}">
                            I understand I will be charged <span class="bold" ng-show="model.currencySymbol">{{ model.currencySymbol + model.totalCost }} per month</span>.<br />
                        </label>
                    </div>

                    <br/>

                    <button type="button" class="btn btn-lg"
                            ng-class="{'btn-purple': model.plan === 'plus', 'btn-gold': model.plan === 'business'}"
                            ng-click-with-loader="forms.upsell.submitted=true; setOrganizationPlan()">
                        <span class="spinner"></span>
                        <span class="text-default">Upgrade to {{ model.plan }}</span>
                        <span class="text-loading">Please wait...</span>
                    </button>

                </div>

            </div>
        </form>
        <p class="note" ng-hide="model.isAccountAdminOfOrganization"><span class="icon-info-grey"></span>Only Account Owners can perform upgrades or downgrades.</p>
        <p class="note black" ng-show="model.isAccountAdminOfOrganization">
            <img src="/static/app/img/money-back.png" width="30" class="mrm"><strong>30 Day Money Back Guarantee.</strong> 100% satisfied or your money back.
        </p>
    </div>
</div>
    </script>
<script id="modal_billing_notifications.html" type="text/ng-template">
        <form name="model.forms.billingNotificationEmails" class="form-landscape" autocomplete="off" novalidate ng-submit-with-loader="onSubmitBillingNotificationEmails(model.emailRecipientsString)">
    <div class="modal-body">
        <button type="button" class="close white" ng-click="$dismiss()">&times;</button>
        <h2 class="modal-title">Billing notifications</h2>
        <p>Please specify the email addresses that should receive billing notifications, such as charging your credit card or notifying about a payment failure. Specify multiple addresses by separating them with a comma (,).</p>
        <div class="emails-holder form-group" ng-class="{error: !model.emailRecipientsValid }">
            <input type="text" id="billingNotificationEmails" name="billingNotificationEmails" class="form-control billingNotificationEmails width100" ng-model="model.emailRecipientsString" placeholder="e.g. john@hotjar.com, doe@hotjar.com">
        </div>
        <div class="form-error" ng-if="!model.emailRecipientsValid">One of the addresses entered is invalid.</div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-clean pull-left" ng-click="$dismiss()">Cancel</button>
        <button type="submit" class="btn btn-primary pull-right">
            <span class="spinner"></span>
            <span class="text-default">Update</span>
            <span class="text-loading">Please wait...</span>
        </button>
    </div>
</form>
    </script>
<body class="page-{{ pageState() }} pagetype-{{ pageType() }} user-{{ UserData.loggedIn }}" isaccountadmin="{{UserData.get('isAccountAdmin')}}" ng-class="{
            'sidebar-minimized': state.minimized,
            'hide-framework': shouldHideFramework()
          }" ng-cloak="" ng-controller="AppCtrl" useraccess="{{ UserData.currentSite.organization.access }}">
<!-- NOTIFICATIONS: notification.js + notify.js -->
<notification></notification>
<!-- LOADER (spinner): loader.js -->
<loader></loader>
<!-- Loader used specifically by UserData when it needs to be refreshed. -->
<div id="userdata-loader">
<div class="overlay"></div>
<div class="content">
<div class="spinner mbb"></div>
<div class="text">Please wait...</div>
</div>
</div>
<!-- UI popovers (help/info messages): ui-helper.js -->
<ui-helper></ui-helper>
<!-- Tip notification for creating poll from heatmap: tip-notification.js-->
<tip-notification tn-id="pollFromHeatmap" tn-title="HOT TIP">
<poll-from-heatmap></poll-from-heatmap>
</tip-notification>
<div id="site-container">
<!-- TOP BAR -->
<div id="topbar" ng-if="UserData.loggedIn &amp;&amp; !shouldHideFramework()">
<a id="logo" ng-style="{'background-image': 'url(' + model.accountLogo + ')'}" ui-sref="dashboard({siteId: UserData.currentSite.id})"></a>
<!-- SITES BUTTON -->
<div class="pull-left menu-button dropdown" data-tour-step="manage-sites" dropdown="">
<div class="dropdown-toggle" data-ui-helper-anchor="uihelper_siteDropdown" dropdown-toggle="" ng-click="filterFocus()">
<span class="icon-organization"></span>
<span class="caret caret-light"></span>
</div>
<div class="dropdown-menu dropdown-menu-dark" id="site-menu" ng-click="$event.stopPropagation()" role="menu">
<div class="site-filter">
<span class="icon-x" ng-click="resetSiteNameFilter()" ng-if="model.nameFilter"></span>
<input class="form-control" id="site-name-filter" ng-change="scrollSiteListTop()" ng-click="$event.stopPropagation()" ng-model="model.nameFilter" placeholder="Filter by site name or Organization" type="text"/>
</div>
<div class="sites" id="sites-list-holder">
<span ng-repeat="site in getFilteredSiteList() track by site.id">
<li class="dropdown-header ellipsis" ng-if="site.organization.name !== getFilteredSiteList()[$index-1].organization.name">
<span class="icon-organization prs font12"></span>{{ site.organization.name }}
                                </li>
<li class="site" ng-class="{active: isSiteActive(site.id)}">
<a class="wordwrap" ng-click="changeSite(site)">{{ site.name }}</a>
<span class="icon-check font10 white"></span>
</li>
</span>
<div class="empty wordwrap font12" ng-if="getFilteredSiteList().length === 0">
                                No sites or Organizations for "{{ model.nameFilter }}". <a class="white underline" ng-click="resetSiteNameFilter()">Reset filter</a>
</div>
</div>
<div class="dropdown-footer">
<li>
<a ui-sref="site.list">Sites &amp; Organizations settings</a>
</li>
<li>
<a ng-show="UserData.get('isAccountAdmin')" ui-sref="site.create">Add new site</a>
</li>
</div>
</div>
</div>
<!-- ADD BUTTON -->
<div class="pull-left menu-button dropdown" dropdown="" ng-show="UserData.get('isAccountAdmin')">
<div class="dropdown-toggle" dropdown-toggle="">
<span class="icon-plus"></span>
<span class="caret caret-light"></span>
</div>
<ul class="dropdown-menu dropdown-menu-dark" role="menu">
<li><a ui-sref="site.create">Add new site</a></li>
<li><a ui-sref="user.invite">Add users</a></li>
</ul>
</div>
<div class="pull-right">
<!-- REFER FRIENDS -->
<div class="pull-left menu-button text-button" ng-if="model.canAccessReferralProgram" ui-sref="profile.referrals">
<span class="icon-refer icon-l pink middle"></span>Refer Friends
                    </div>
<!-- SETTINGS BUTTON -->
<div class="pull-left menu-button dropdown" data-tour-step="settings" dropdown="" id="btnHeaderSettings">
<div class="dropdown-toggle text-button" dropdown-toggle="">
<span class="icon-cog middle"></span>Settings
                            <span class="caret caret-light"></span>
</div>
<ul class="dropdown-menu dropdown-menu-dark dropdown-menu-right settings-menu" role="menu">
<!-- Account actions -->
<li class="dropdown-header">
                                Account
                            </li>
<li>
<a ui-sref="site.list">
<span class="icon-organization"></span>Sites &amp; Organizations
                                </a>
</li>
<li>
<a id="btnHeaderUsers" ui-sref="user.list">
<span class="icon-users"></span>Users
                                </a>
</li>
<li ng-show="UserData.get('isAdminOfOneOrganization')">
<a ui-sref="settings.ip">
<span class="icon-ip"></span>IP Blocking
                                </a>
</li>
<li required-access="account-admin">
<a ui-sref="settings.account">
<span class="icon-settings"></span>Preferences
                                </a>
</li>
<li ng-show="UserData.get('isAdminOfOneOrganization')">
<a ui-sref="settings.integrations">
<span class="icon-puzzle"></span>Integrations
                                </a>
</li>
<li class="dropdown-header" required-access="account-admin">
                                Billing
                            </li>
<li required-access="account-admin">
<a ui-sref="settings.billing">
<span class="icon-wallet"></span>Plans &amp; Billing
                                </a>
</li>
<li required-access="account-admin">
<a ui-sref="settings.billingHistory">
<span class="icon-receipt"></span>Billing History
                                </a>
</li>
<li class="dropdown-header ellipsis">
                                {{ UserData.get('userName') }}
                            </li>
<li>
<a ui-sref="profile.details">
<img class="icon-img avatar opacity1" ng-src="{{ UserData.get('userPictureUrl') }}"/>My Details
                                </a>
</li>
<li>
<a ui-sref="profile.notifications">
<span class="icon-notification"></span>Notifications
                                </a>
</li>
<li ng-if="model.canAccessReferralProgram">
<a ui-sref="profile.referrals">
<span class="icon-refer"></span>Refer Friends
                                </a>
</li>
<li>
<a class="danger" id="btnHeaderLogout" ng-click="logout();">
<span class="icon-off"></span>Logout
                                </a>
</li>
</ul>
</div>
<!-- HELP BUTTON -->
<div class="pull-left menu-button menu-button-help dropdown" data-tour-step="help" dropdown="">
<div class="dropdown-toggle text-button" dropdown-toggle="">
<span class="icon-help-on middle"></span>Help
                            <span class="caret caret-light"></span>
</div>
<ul class="dropdown-menu dropdown-menu-dark dropdown-menu-right" role="menu" style="right:5px;">
<li>
<a href="https://docs.hotjar.com/docs" target="_blank">
<span class="icon-manual"></span>Hotjar Documentation
                                </a>
</li>
<li ng-show="model.canUseIntercom">
<a class="btn-intercom" href="mailto:c5ke8zbr@incoming.intercom.io">
<span class="icon-chat"></span>Get Help
                                </a>
</li>
<li ng-hide="model.canUseIntercom">
<a href="https://docs.hotjar.com/" target="_blank">
<span class="icon-chat"></span>Get Help
                                </a>
</li>
<li ng-if="isReceptiveLoaded()">
<a href="#" ng-click="trackSuggest();" onclick="receptivePublicLib.loginAndRedirect({anchor: this})" target="_blank">
<span class="icon-star white"></span>Suggest a Feature
                                </a>
</li>
<li class="divider"></li>
<li>
<a href="https://www.hotjar.com/getstarted" target="_blank">
<span class="icon-docs"></span>Getting Started Guide
                                </a>
</li>
<li>
<a href="https://www.hotjar.com/resources" target="_blank">
<span class="icon-docs"></span>Resources
                                </a>
</li>
<li>
<a href="https://www.hotjar.com/demo" target="_blank">
<span class="icon-film"></span>Hotjar Demo
                                </a>
</li>
<li>
<a href="https://docs.hotjar.com/page/roadmap" target="_blank">
<span class="icon-directions"></span>Product Roadmap
                                </a>
</li>
<li>
<a href="https://status.hotjar.com/" target="_blank">
<span class="icon-info" style="margin-top: -2px;"></span>System Status
                                </a>
</li>
</ul>
</div>
</div>
</div>
<!-- STICKY NOTIFICATION -->
<sticky-notification ng-show="UserData.loggedIn &amp;&amp; !shouldHideFramework()"></sticky-notification>
<!-- SITE BAR -->
<div class="sitebar-feature" id="sitebar" ng-if="UserData.loggedIn &amp;&amp; !shouldHideFramework()">
<a class="current-site pull-left ellipsis" ui-sref="dashboard({siteId: UserData.currentSite.id})">
                    {{ UserData.currentSite.name }}
                </a>
<svg class="separator" height="60" width="20" xmlns="http://www.w3.org/2000/svg">
<line stroke="white" stroke-width="1" x1="0" x2="19" y1="0" y2="30"></line>
<line stroke="white" stroke-width="1" x1="0" x2="19" y1="60" y2="30"></line>
</svg>
<div class="current-org pull-left">
<span class="icon-organization icon-s white middle"></span>
<span class="org-name ellipsis">{{ UserData.currentSite.organization.name }}</span>
<span class="badge badge-plan badge-plan-lg {{ currentSitePlanInfo().effective }}" ng-click="showUpsellModal('site-bar-link', 'business')" ng-if="currentSitePlanInfo().effective === 'basic'">{{ currentSitePlanInfo().effective }}</span>
<span class="badge badge-plan badge-plan-lg {{ currentSitePlanInfo().effective }}" ng-if="currentSitePlanInfo().effective !== 'basic'">{{ currentSitePlanInfo().effective }}</span>
</div>
<div class="upsell-link pull-left" ng-if="UserData.get('accountBillingCycle') === 'monthly' &amp;&amp;
                            currentSitePlanInfo().effective !== 'basic' &amp;&amp;
                            model.trialExpiryMessage">
                    {{ model.trialExpiryMessage }} <a class="white underline" ng-click="showPaymentModal()">Add payment details</a>.
                </div>
<div class="upsell-link pull-left" ng-if="currentSitePlanInfo().effective === 'basic'"><a class="gold" ng-click="showUpsellModal('site-bar-link', 'business')">Get unlimited insights</a> with Hotjar Business.</div>
<div class="pull-right">
<!--IP Block -->
<div class="ip-blocked-top pull-left middle" data-tooltip-append-to-body="true" data-tooltip-placement="bottom" ng-show="IP.isBlocked()" tooltip="Your IP is blocked from data collection">
<a href="#" ui-sref="settings.ip">  IP <span class="middle icon-ip-blocked"></span> </a>
</div>
<!-- USERS -->
<div class="pull-left sitebar-button dropdown relative" data-ui-helper-anchor="uihelper_sitebarUsers" dropdown="" id="user_dropdown" ng-hide="getCurrentOrganizationUsers().length &lt; 1">
<div class="dropdown-toggle" dropdown-toggle="">
<span class="icon-users"></span>{{ getCurrentOrganizationUsers().length }}
                        </div>
<div class="dropdown-menu dropdown-menu-right sitebar-user-dropdown" role="menu">
<div ng-if="getCurrentOrganizationUsers().length &gt; 1">
<div class="title">
                                    Users ({{ getCurrentOrganizationUsers().length }})
                                    <span required-access="admin">  <a class="grey9 normal underline" ng-click="inviteUsersToOrganization(UserData.currentSite.organization); $event.stopPropagation();">Invite users</a></span>
</div>
<div class="content">
<img class="icon-img avatar" ng-repeat="user in getCurrentOrganizationUsers() | limitTo:11 track by user.id" ng-src="{{ user.picture_url }}" tooltip="{{ user.name }} ({{ user.access | capitalize }})" tooltip-append-to-body="true" tooltip-placement="bottom"/>
<a class="more-users" ng-show="getCurrentOrganizationUsers().length &gt; 11" tooltip="{{ getCurrentOrganizationUsers().length - 11 }} other people have access to this site." tooltip-append-to-body="true" tooltip-placement="bottom" ui-sref="user.list">+{{ getCurrentOrganizationUsers().length - 11 }}</a>
<div class="clear"></div>
</div>
</div>
<div ng-if="getCurrentOrganizationUsers().length === 1">
<div class="content center pbb font12">
<strong>You're all alone here!</strong><p class="man mts">Share insights with your team by inviting them at no additional cost.</p>
<br/>
<a class="btn btn-hotjar btn-sm" ng-click="inviteUsersToOrganization(UserData.currentSite.organization)"><span class="icon-user-add icon-s"></span>Invite your team</a>
</div>
</div>
</div>
</div>
<!-- TRACKING CODE BUTTONS -->
<div class="tracking-code pull-left relative" data-tooltip-append-to-body="true" data-tooltip-placement="bottom" ng-click="showTrackingCodeModal(UserData.currentSite)" ng-hide="UserData.currentSite.getTrackingState() === 'notActive' || UserData.currentSite.getTrackingState() === 'neverActive' || UserData.currentSite.getTrackingState() === 'active'" tooltip="Checking Tracking Code...">
                        Checking...
                    </div>
<div class="tracking-code pull-left relative" data-tooltip-append-to-body="true" data-tooltip-placement="bottom" ng-click="showTrackingCodeModal(UserData.currentSite)" ng-show="UserData.currentSite.getTrackingState() === 'notActive' || UserData.currentSite.getTrackingState() === 'neverActive'" tooltip="No data received in the past hour.">
<span class="icon-alert icon-circle-red"></span>Tracking Inactive
                    </div>
<div class="tracking-code pull-left relative" data-tooltip-append-to-body="true" data-tooltip-placement="bottom" ng-click="showTrackingCodeModal(UserData.currentSite)" ng-show="UserData.currentSite.getTrackingState() === 'active'" tooltip="Click for Tracking Code">
<span class="icon-check icon-circle-green icon-s middle"></span>Tracking Active
                    </div>
<div class="clear"></div>
</div>
</div>
<div class="sitebar-setting" id="sitebar" ng-if="UserData.loggedIn &amp;&amp; !shouldHideFramework()">
<a class="current-site pull-left" ui-sref="dashboard({siteId: UserData.currentSite.id})">
<span class="icon-caret-left icon-before"></span>Go back to {{ UserData.currentSite.name }}
                </a>
</div>
<!-- SIDEBAR -->
<div id="sidebar" ng-if="UserData.loggedIn &amp;&amp; !shouldHideFramework()">
<a class="sidebar-toggle" ng-class="{minimized: state.minimized}" ng-click="toggleMinimized()">
<span></span>
</a>
<!-- SETTINGS SIDEBAR -->
<div class="menu" ng-if="pageType() === 'setting'">
<ul class="sidebar-menu">
<label class="expanded-view">Account</label>
<li ui-sref-active="active">
<a class="minimized-view relative" href="#" tooltip="Sites &amp; Organizations" tooltip-append-to-body="true" tooltip-placement="right" ui-sref="site.list">
<span class="icon-organization"></span>
</a>
<a class="expanded-view relative" href="#" ui-sref="site.list">
<span class="icon-organization"></span>
<span>Sites &amp; Organizations</span>
</a>
</li>
<li ui-sref-active="active">
<a class="minimized-view relative" href="#" tooltip="Users" tooltip-append-to-body="true" tooltip-placement="right" ui-sref="user.list">
<span class="icon-users"></span>
</a>
<a class="expanded-view relative" href="#" ui-sref="user.list">
<span class="icon-users"></span>
<span>Users</span>
</a>
</li>
<li ng-show="UserData.get('isAdminOfOneOrganization')" ui-sref-active="active">
<a class="minimized-view relative" href="#" tooltip="IP Blocking" tooltip-append-to-body="true" tooltip-placement="right" ui-sref="settings.ip">
<span class="icon-ip"></span>
</a>
<a class="expanded-view relative" href="#" ui-sref="settings.ip">
<span class="icon-ip"></span>
<span>IP Blocking</span>
</a>
</li>
<li required-access="account-admin" ui-sref-active="active">
<a class="minimized-view relative" href="#" tooltip="Account preferences" tooltip-append-to-body="true" tooltip-placement="right" ui-sref="settings.account">
<span class="icon-settings"></span>
</a>
<a class="expanded-view relative" href="#" ui-sref="settings.account">
<span class="icon-settings"></span>
<span>Preferences</span>
</a>
</li>
<li ng-show="UserData.get('isAdminOfOneOrganization')" ui-sref-active="active">
<a class="minimized-view relative" href="#" tooltip="Integrations" tooltip-append-to-body="true" tooltip-placement="right" ui-sref="settings.integrations">
<span class="icon-puzzle"></span>
</a>
<a class="expanded-view relative" href="#" ui-sref="settings.integrations">
<span class="icon-puzzle"></span>
<span>Integrations</span>
</a>
</li>
<label class="expanded-view" required-access="account-admin">Billing</label>
<li required-access="account-admin" ui-sref-active="active">
<a class="minimized-view relative" href="#" tooltip="Plans &amp; Billing" tooltip-append-to-body="true" tooltip-placement="right" ui-sref="settings.billing">
<span class="icon-wallet"></span>
</a>
<a class="expanded-view relative" href="#" ui-sref="settings.billing">
<span class="icon-wallet"></span>
<span>Plans &amp; Billing</span>
</a>
</li>
<li required-access="account-admin" ui-sref-active="active">
<a class="minimized-view relative" href="#" tooltip="Billing History" tooltip-append-to-body="true" tooltip-placement="right" ui-sref="settings.billingHistory">
<span class="icon-receipt"></span>
</a>
<a class="expanded-view relative" href="#" ui-sref="settings.billingHistory">
<span class="icon-receipt"></span>
<span>Billing History</span>
</a>
</li>
</ul>
</div>
<!-- PROFILE SIDEBAR -->
<div class="menu" ng-if="pageType() === 'profile'">
<ul class="sidebar-menu">
<label class="expanded-view ellipsis" style="max-width: 170px;">{{ UserData.get('userName') }}</label>
<li ui-sref-active="active">
<a class="minimized-view relative" href="#" tooltip="My Details" tooltip-append-to-body="true" tooltip-placement="right" ui-sref="profile.details">
<img class="icon-img avatar" ng-src="{{ UserData.get('userPictureUrl') }}"/>
</a>
<a class="expanded-view relative ellipsis" href="#" ui-sref="profile.details">
<img class="icon-img avatar" ng-src="{{ UserData.get('userPictureUrl') }}"/>
<span>My Details</span>
</a>
</li>
<li ui-sref-active="active">
<a class="minimized-view relative" href="#" tooltip="Notifications" tooltip-append-to-body="true" tooltip-placement="right" ui-sref="profile.notifications">
<span class="icon-notification"></span>
</a>
<a class="expanded-view relative" href="#" ui-sref="profile.notifications">
<span class="icon-notification"></span>
<span>Notifications</span>
</a>
</li>
<li ng-if="model.canAccessReferralProgram" ui-sref-active="active">
<a class="minimized-view relative" href="#" tooltip="Refer Friends" tooltip-append-to-body="true" tooltip-placement="right" ui-sref="profile.referrals">
<span class="icon-refer"></span>
</a>
<a class="expanded-view relative" href="#" ui-sref="profile.referrals">
<span class="icon-refer"></span>
<span>Refer Friends</span>
</a>
</li>
</ul>
</div>
<!-- FEATURES SIDEBAR -->
<div class="menu" ng-if="pageType() === 'feature'">
<ul class="sidebar-menu" data-tour-step="sidebar">
<li id="dashboard" ui-sref-active="active">
<a class="minimized-view relative" href="#" tooltip="{{ UserData.currentSite.name }} Dashboard" tooltip-append-to-body="true" tooltip-placement="right" ui-sref="dashboard({siteId: UserData.currentSite.id})">
<span class="icon-dashboard"></span>
</a>
<a class="expanded-view relative" href="#" ui-sref="dashboard({siteId: UserData.currentSite.id})">
<span class="icon-dashboard"></span>
<span>Site Dashboard</span>
</a>
</li>
<label class="expanded-view">Analysis</label>
<li ui-sref-active="active">
<a class="minimized-view" href="#" tooltip="Heatmap" tooltip-append-to-body="true" tooltip-placement="right" ui-sref="heatmap({siteId: UserData.currentSite.id})">
<span class="icon-heatmaps"></span>
</a>
<a class="expanded-view" href="#" ui-sref="heatmap({siteId: UserData.currentSite.id})">
<span class="icon-heatmaps"></span>
<span>Heatmaps</span>
</a>
</li>
<li ui-sref-active="active">
<a class="minimized-view" href="#" tooltip="Recordings" tooltip-append-to-body="true" tooltip-placement="right" ui-sref="playbacks({siteId: UserData.currentSite.id})">
<span class="icon-recordings"></span>
</a>
<a class="expanded-view" href="#" ui-sref="playbacks({siteId: UserData.currentSite.id})">
<span class="icon-recordings"></span>
<span>Recordings</span>
</a>
</li>
<li feature="user_behavior" require-explicit-permission="" ui-sref-active="active">
<a class="minimized-view" href="#" tooltip="Recordings (New)" tooltip-append-to-body="true" tooltip-placement="right" ui-sref="playbacks.list-new({siteId: UserData.currentSite.id})">
<span class="icon-recordings"></span>
</a>
<a class="expanded-view" href="#" ui-sref="playbacks.list-new({siteId: UserData.currentSite.id})">
<span class="icon-recordings"></span>
<span>Recordings (New)<span class="badge badge-sm badge-hotjar">BETA</span></span>
</a>
</li>
<li ui-sref-active="active">
<a class="minimized-view" href="#" tooltip="Funnels" tooltip-append-to-body="true" tooltip-placement="right" ui-sref="funnel({siteId: UserData.currentSite.id})">
<span class="icon-funnels"></span>
</a>
<a class="expanded-view" href="#" ui-sref="funnel({siteId: UserData.currentSite.id})">
<span class="icon-funnels"></span>
<span>Funnels</span>
</a>
</li>
<li ui-sref-active="active">
<a class="minimized-view" href="#" tooltip="Forms" tooltip-append-to-body="true" tooltip-placement="right" ui-sref="form({siteId: UserData.currentSite.id})">
<span class="icon-forms"></span>
</a>
<a class="expanded-view" href="#" ui-sref="form({siteId: UserData.currentSite.id})">
<span class="icon-forms"></span>
<span>Forms</span>
</a>
</li>
<label class="expanded-view">Feedback</label>
<li data-ui-helper-anchor="uihelper_incomingFeedbackBetaInvite" ui-sref-active="active">
<a class="minimized-view" href="#" tooltip="Incoming" tooltip-append-to-body="true" tooltip-placement="right" ui-sref="feedback({siteId: UserData.currentSite.id})">
<emotion-face class="icon-buddy"></emotion-face>
</a>
<a class="expanded-view" href="#" ui-sref="feedback({siteId: UserData.currentSite.id})">
<emotion-face class="icon-buddy"></emotion-face>
<span>Incoming<span class="badge badge-sm badge-hotjar">BETA</span></span>
</a>
</li>
<li ui-sref-active="active">
<a class="minimized-view" href="#" tooltip="Polls" tooltip-append-to-body="true" tooltip-placement="right" ui-sref="polls({siteId: UserData.currentSite.id})">
<span class="icon-polls"></span>
</a>
<a class="expanded-view" href="#" ui-sref="polls({siteId: UserData.currentSite.id})">
<span class="icon-polls"></span>
<span>Polls</span>
</a>
</li>
<li ui-sref-active="active">
<a class="minimized-view" href="#" tooltip="Surveys" tooltip-append-to-body="true" tooltip-placement="right" ui-sref="survey({siteId: UserData.currentSite.id})">
<span class="icon-surveys"></span>
</a>
<a class="expanded-view" href="#" ui-sref="survey({siteId: UserData.currentSite.id})">
<span class="icon-surveys"></span>
<span>Surveys</span>
</a>
</li>
<li ui-sref-active="active">
<a class="minimized-view" href="#" tooltip="Recruiters" tooltip-append-to-body="true" tooltip-placement="right" ui-sref="testers({siteId: UserData.currentSite.id})">
<span class="icon-recruiters"></span>
</a>
<a class="expanded-view" href="#" ui-sref="testers({siteId: UserData.currentSite.id})">
<span class="icon-recruiters"></span>
<span>Recruiters</span>
</a>
</li>
</ul>
</div>
<div id="social">
<a class="btn expanded-view" href="https://twitter.com/intent/follow?screen_name=@Hotjar"><span class="icon-twitter"></span>Follow us on twitter</a>
<a class="btn minimized-view" href="https://twitter.com/intent/follow?screen_name=@Hotjar" tooltip="Follow us on twitter" tooltip-append-to-body="true" tooltip-placement="right"><span class="icon-twitter man"></span></a>
<script src="//platform.twitter.com/widgets.js"></script>
</div>
</div>
<div ng-attr-id="{{ shouldHideFramework() ? '' : 'content-container' }}" ui-view="">
</div>
<div class="clear"></div>
</div>
</body>
</html>