@subiz/widget-v4 4.0.53 → 4.0.58

package/index.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<meta name="description" content="Subiz preview">
+		<meta name="description" content="Subiz preview" />
 		<meta charset="utf-8" />
 		<title>Widget v4</title>
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -32,7 +32,23 @@
 			}
 			window.subiz.q = []
 			// set account it in the very first call
-			window.subiz('setAccount', accid)
+			let mask = '' // old mask
+			window.subiz('setAccount', accid, undefined, mask, (mask) => {
+				console.log('MKA', mask)
+			})
+
+			subiz('overrideChatbox', {
+				type: 'chatbox',
+				chatbox: {
+					triggers: [{type: 'after_pageview'}],
+					hide_close_button: true,
+					desktop_button: {hidden: true},
+					mobile_button: {hidden: true},
+				},
+			})
+			subiz('waitReady', () => {})
+			subiz('shrinkWidget')
+			subiz('expandWidget')
 		</script>
 	</body>
 </html>

package/package.json

@@ -1,38 +1,39 @@
 {
 	"name": "@subiz/widget-v4",
-	"version": "4.0.53",
+	"version": "4.0.58",
 	"main": "./compiled_src/lib.js",
 	"scripts": {
 		"dev": "npx webpack serve --config webpack.dev.js",
-		"build": "npx webpack --config webpack.prod.js",
+		"build": "rm -rf dist && npx webpack --config webpack.screenshoot.js && npx webpack --config webpack.prod.js",
 		"report": "npx webpack --config webpack.report.js",
 		"lib": "rm -rf compiled_src && npx babel --out-dir=compiled_src src"
 	},
 	"dependencies": {
-		"@babel/core": "^7.16.0",
-		"@googlemaps/js-api-loader": "^1.11.4",
+		"@googlemaps/js-api-loader": "^1.12.11",
 		"@subiz/ajax": "^3.0.12",
 		"@subiz/flow": "^1.0.9",
 		"@subiz/storage": "0.0.8",
 		"@subiz/wsclient": "^3.1.7",
-		"babel-loader": "^8.2.3",
 		"cookie_js": "1.4.2",
-		"core-js": "^3.19.2",
+		"core-js": "^3.19.3",
 		"css-loader": "^5.2.6",
 		"file-loader": "^6.2.0",
 		"less": "^4.1.2",
 		"less-loader": "^10.2.0",
-		"marked": "^4.0.5",
-		"preact": "^10.6.0"
+		"marked": "^4.0.6",
+		"preact": "^10.6.2"
 	},
 	"devDependencies": {
+		"babel-loader": "^8.2.3",
+		"@babel/core": "^7.16.0",
 		"@babel/cli": "^7.16.0",
 		"@babel/plugin-proposal-class-properties": "^7.16.0",
 		"@babel/plugin-transform-react-jsx": "^7.16.0",
 		"@babel/preset-env": "^7.16.4",
 		"babel-plugin-syntax-jsx": "^6.18.0",
 		"html-webpack-plugin": "^5.5.0",
-		"webpack": "^5.64.4",
+		"puppeteer": "^12.0.1",
+		"webpack": "^5.65.0",
 		"webpack-bundle-analyzer": "^4.5.0",
 		"webpack-cli": "^4.9.1",
 		"webpack-dev-server": "^4.6.0"

package/screenshoot.html

@@ -0,0 +1,15 @@
+<html>
+	<head>
+		<meta name="viewport" content="width=device-width, intial-scale=1.0" />
+		<style>
+			/* make the environment look like widget environment */
+			#sbz-pop * {
+				all: unset;
+			}
+			body {
+				background: #ddd;
+			}
+		</style>
+	</head>
+	<body></body>
+</html>

package/screenshoot.js

@@ -0,0 +1,59 @@
+import Widget from './src/lib.js'
+
+let accid = 'acqsulrowbxiugvginhw'
+let widget = new Widget(
+	'https://api.subiz.com.vn/4.0/',
+	'https://file-subiz.com/',
+	'https://rt-0.subiz.com.vn/',
+	true,
+	true,
+)
+
+function main() {
+	var $div = document.createElement('div')
+	document.body.appendChild($div)
+	let hash = document.location.hash.substr(1)
+
+	let plugin = JSON.parse(decodeURIComponent(atob(hash)))
+	plugin.triggers = [{type: 'after_pageview', after_pageview_sec: 0, enabled: true}]
+	if (plugin.popup) plugin.popup.overlay = false
+	plugin._dont_close = true
+	plugin._page_index = 0
+	plugin.conditions = []
+
+	if (plugin.type === 'notification') {
+		if (!plugin.notification) return console.log('EMPTY PLUGIN')
+
+		if (!plugin.notification.profiles || plugin.notification.profiles.length == 0) {
+			plugin.notification.profiles = [
+				{
+					address: 'Hàng Da, Hoàn Kiếm, Hà Nội',
+					age: 26,
+					avatar_url: 'https://vcdn.subiz-cdn.com/file/firegedmbhqftirxacho-avatar3.jpeg',
+					country: 'VN',
+					email: 'linhxx@gmail.com',
+					gender: 'Female',
+					fullname: 'Nguyễn Linh',
+					phone: '0823588xxx',
+				},
+				{
+					address: 'Lũng Cú, Đồng Văn, Hà Giang',
+					age: 23,
+					avatar_url: 'https://vcdn.subiz-cdn.com/file/fiqvzdstytzxlbsguaci-ellipse_2319.png',
+					country: 'VN',
+					email: 'lannhoanggxx@gmail.com',
+					gender: 'Female',
+					name: 'Nguyễn Hoàng Lan',
+					phone: '0326789xxx',
+				},
+			]
+		}
+	}
+
+	plugin.account_id = accid
+	widget._overridePlugin([plugin])
+	// widget._overrideDeviceType('mobile')
+	widget.setAccount(accid, $div)
+}
+
+main()

package/src/chatbox/Header.js

@@ -44,17 +44,19 @@ export default class Header extends Com {
 		let state = acc.is_online ? this.props.t('agent_online') : this.props.t('agent_offline')
 		let tagline = sb.get(accSetting, `tagline`, {})
 		let desc = this.props.t.i18n(tagline) || accSetting.introduction || state
-		let agentIdsJoined = sb.map(this.getAgentJoined(this.props.cid), agent => agent.id)
+		let agentIdsJoined = sb.map(this.getAgentJoined(this.props.cid), (agent) => agent.id)
 		let cls = 'widget-header--inner widget-header--inner--collapsed'
 		if (!show) cls += ' widget-header--inner--hidden'
 
 		return (
 			<div class={cls}>
 				{this.renderBackButton()}
-				<AgentsAvatar plugin={this.props.plugin} store={this.props.store} mode="secondary" agent_ids={agentIdsJoined} />
-				<div class="widget-header--title-container">
-					<div class="widget-header--title">{this.getTitle()}</div>
-					<div class="widget-header--description" title={desc}>{desc}</div>
+				<AgentsAvatar plugin={this.props.plugin} store={this.props.store} mode='secondary' agent_ids={agentIdsJoined} />
+				<div class='widget-header--title-container'>
+					<div class='widget-header--title'>{this.getTitle()}</div>
+					<div class='widget-header--description' title={desc}>
+						{desc}
+					</div>
 				</div>
 				{this.renderCloseButton()}
 			</div>
@@ -65,7 +67,7 @@ export default class Header extends Com {
 		let accSetting = this.props.plugin.chatbox || {}
 		let acc = this.props.store.matchAccount()
 		let links = sb.get(accSetting, 'header.links') || []
-		let $links = sb.map(links, link => {
+		let $links = sb.map(links, (link) => {
 			if (!link.url || !link.type || link.type === 'subiz') return null
 			if (link.type === 'email') {
 				return (
@@ -79,7 +81,7 @@ export default class Header extends Com {
 
 			return (
 				<div>
-					<a href={link.url} target="_blank" title={link.url} rel="noreferrer">
+					<a href={link.url} target='_blank' title={link.url} rel='noreferrer'>
 						<i class={`social__links-logo social__links-logo--${link.type}`}></i>
 					</a>
 				</div>
@@ -90,7 +92,7 @@ export default class Header extends Com {
 Vui lòng hỏi chúng tôi bất cứ điều gì hoặc chia sẻ phản hồi của bạn`
 		let tagline = sb.get(accSetting, `tagline`, {})
 		var teamintro = this.props.t.i18n(tagline) || accSetting.introduction || this.props.t('team_intro') || DEFTEAMINTO
-		var tags = sb.extractText(teamintro).map(tag => {
+		var tags = sb.extractText(teamintro).map((tag) => {
 			if (tag.type === 'emoji') return <Emoji emojiCode={tag.text} />
 			return tag.text
 		})
@@ -99,17 +101,21 @@ Vui lòng hỏi chúng tôi bất cứ điều gì hoặc chia sẻ phản hồi
 		if (!show) cls += ' widget-header--inner--hidden'
 		return (
 			<div class={cls}>
-				<div class="widget-header-expand-container">
-					<div class="widget-header--top-wrapper">
-						<div class="widget-header--title">{this.getTitle()}</div>
+				<div class='widget-header-expand-container'>
+					<div class='widget-header--top-wrapper'>
+						<div class='widget-header--title'>{this.getTitle()}</div>
 						{this.renderCloseButton()}
 					</div>
-					<div class="widget_header__body widget_header__body__social">
-						<img alt="logo" class="social__account_logo" src={this.props.store.replaceFileUrl(sb.get(acc, 'logo_url'))} />
+					<div class='widget_header__body widget_header__body__social'>
+						<img
+							alt='logo'
+							class='social__account_logo'
+							src={this.props.store.replaceFileUrl(sb.get(acc, 'logo_url'))}
+						/>
 
 						<div>
-							<div class="social__introduction">{tags}</div>
-							<div class="social__links">{$links}</div>
+							<div class='social__introduction'>{tags}</div>
+							<div class='social__links'>{$links}</div>
 						</div>
 					</div>
 				</div>
@@ -123,7 +129,7 @@ Vui lòng hỏi chúng tôi bất cứ điều gì hoặc chia sẻ phản hồi
 Vui lòng hỏi chúng tôi bất cứ điều gì hoặc chia sẻ phản hồi của bạn`
 		let tagline = sb.get(accSetting, `tagline`, {})
 		var teamintro = this.props.t.i18n(tagline) || accSetting.introduction || this.props.t('team_intro') || DEFTEAMINTO
-		var tags = sb.extractText(teamintro).map(tag => {
+		var tags = sb.extractText(teamintro).map((tag) => {
 			if (tag.type === 'emoji') return <Emoji emojiCode={tag.text} />
 			return tag.text
 		})
@@ -132,17 +138,17 @@ Vui lòng hỏi chúng tôi bất cứ điều gì hoặc chia sẻ phản hồi
 		if (!show) cls += ' widget-header--inner--hidden'
 		return (
 			<div class={cls}>
-				<div class="widget-header-expand-container">
-					<div class="widget-header--top-wrapper">
-						<div class="widget-header--title">{this.getTitle()}</div>
+				<div class='widget-header-expand-container'>
+					<div class='widget-header--top-wrapper'>
+						<div class='widget-header--title'>{this.getTitle()}</div>
 						{this.renderCloseButton()}
 					</div>
-					<div class="widget_header__body">
-						<div class="widget-header--avatar-wrapper">
-							<AgentsAvatar plugin={this.props.plugin} store={this.props.store} mode="primary" />
+					<div class='widget_header__body'>
+						<div class='widget-header--avatar-wrapper'>
+							<AgentsAvatar plugin={this.props.plugin} store={this.props.store} mode='primary' />
 						</div>
-						<div class="widget-header--title-container">
-							<div class="widget-header--description">{tags}</div>
+						<div class='widget-header--title-container'>
+							<div class='widget-header--description'>{tags}</div>
 						</div>
 					</div>
 				</div>
@@ -170,32 +176,34 @@ Vui lòng hỏi chúng tôi bất cứ điều gì hoặc chia sẻ phản hồi
 		let user = this.props.store.matchUser()
 
 		let unreadcount = 0
-		sb.map(allconvos, convo => {
+		sb.map(allconvos, (convo) => {
 			if (convo.id == this.props.cid) return
 			if (!sb.isConvoSeen(convo, user.id)) unreadcount++
 		})
 
 		if (unreadcount !== 0) {
-			$unreadcount = <span class="widget-header--total-unread-convo">{unreadcount}</span>
+			$unreadcount = <span class='widget-header--total-unread-convo'>{unreadcount}</span>
 		}
 		return (
 			<div
 				class={`widget-header--wrap-button-back ${unreadcount ? 'widget-header--has-convo-unred' : ''}`}
-				onClick={e => this.onBackClick(e)}>
-				<div class="widget-header--button-back" data-tooltip={this.props.t('menu_back')}></div>
+				onClick={(e) => this.onBackClick(e)}>
+				<div class='widget-header--button-back' data-tooltip={this.props.t('menu_back')}></div>
 				{$unreadcount}
 			</div>
 		)
 	}
 
 	renderCloseButton() {
+		let accSetting = this.props.plugin.chatbox || {}
+		if (accSetting.hide_close_button) return null
 		return (
 			<div
-				class="widget-header--button widget-header--button-close"
+				class='widget-header--button widget-header--button-close'
 				data-tooltip={this.props.t('close')}
-				data-tooltip-position="bottom"
-				onClick={e => this.onCloseClick(e)}>
-				<span class="widget-header--button-close-icon"></span>
+				data-tooltip-position='bottom'
+				onClick={(e) => this.onCloseClick(e)}>
+				<span class='widget-header--button-close-icon'></span>
 			</div>
 		)
 	}
@@ -214,9 +222,9 @@ Vui lòng hỏi chúng tôi bất cứ điều gì hoặc chia sẻ phản hồi
 
 	getAgentJoined(cid) {
 		var convo = this.props.store.matchConvo(cid) || {}
-		let joined = sb.filter(convo.members, mem => mem.type === 'agent' && mem.membership === 'active')
+		let joined = sb.filter(convo.members, (mem) => mem.type === 'agent' && mem.membership === 'active')
 		return joined
 	}
 }
 
-let getJoinedNameMember = agents => sb.map(agents, agent => agent.name).join(', ')
+let getJoinedNameMember = (agents) => sb.map(agents, (agent) => agent.name).join(', ')

package/src/lib.js

@@ -32,9 +32,13 @@ class Widget {
 		xhttp.send()
 	}
 
-	async setAccount(id, $container) {
-		await this.store.init(id)
+	async waitReady(cb) {
+		await this.store.readyGate.entry()
+		cb()
+	}
 
+	async setAccount(id, $container, mask, cb) {
+		let outmask = await this.store.init(id, mask)
 		// add container to client site
 		if (!$container) $container = document.body
 		this.pluginMgr = new PluginMgr(this, $container)
@@ -45,8 +49,9 @@ class Widget {
 			this.pluginMgr.destroy()
 			clearInterval(clean)
 		}, 1000)
-
 		this.domGate.open()
+		cb && cb(outmask)
+		return outmask
 	}
 
 	// deprecated

package/src/notif/notif.js

@@ -68,17 +68,17 @@ export default class Notif extends Com {
 
 	renderCloseButton() {
 		return (
-			<div class="btn_close" onClick={e => this.onCloseButtonClick(e)}>
+			<div class='btn_close' onClick={(e) => this.onCloseButtonClick(e)}>
 				<svg
-					class="btn_close__icon"
-					xmlns="http://www.w3.org/2000/svg"
-					width="24"
-					height="24"
-					viewBox="0 0 24 24"
-					stroke-linecap="round"
-					stroke-linejoin="round">
-					<line x1="18" y1="6" x2="6" y2="18" style="stroke-width: 3 !important;"></line>
-					<line x1="6" y1="6" x2="18" y2="18" style="stroke-width: 3 !important;"></line>
+					class='btn_close__icon'
+					xmlns='http://www.w3.org/2000/svg'
+					width='24'
+					height='24'
+					viewBox='0 0 24 24'
+					stroke-linecap='round'
+					stroke-linejoin='round'>
+					<line x1='18' y1='6' x2='6' y2='18' style='stroke-width: 3 !important;'></line>
+					<line x1='6' y1='6' x2='18' y2='18' style='stroke-width: 3 !important;'></line>
 				</svg>
 			</div>
 		)
@@ -100,13 +100,13 @@ export default class Notif extends Com {
 			this.setState({closeAnimation: false})
 			let timestamp = this.randomTimestampt()
 			let profiles = sb.get(this.props, 'plugin.notification.profiles', [])
-			let user = profiles[Math.floor(Math.random() * sb.size(profiles))]
+			let user = profiles[Math.floor(Math.random() * sb.size(profiles))] || {}
 			// make sure image loaded
 			if (user.avatar_url && user.avatar_url.startsWith('http')) {
 				await sb.preloadImg(user.avatar_url)
 			}
 
-			sb.map(sb.get(this.props.plugin, 'notification.custom_avatar_urls'), url => {
+			sb.map(sb.get(this.props.plugin, 'notification.custom_avatar_urls'), (url) => {
 				profiles.push({
 					type: 'person',
 					fullname: randomName(),
@@ -119,7 +119,12 @@ export default class Notif extends Com {
 			})
 
 			let i18n_messages = sb.get(this.props, 'plugin.notification.i18n_message_quill_deltas', [])
+
 			let i18n_message = i18n_messages[Math.floor(Math.random() * sb.size(i18n_messages))]
+
+			let fallbackmsgs = sb.get(this.props, 'plugin.notification.message_quill_deltas', [])
+			let fallbackmessage = fallbackmsgs[Math.floor(Math.random() * sb.size(fallbackmsgs))]
+
 			let i18n_title = sb.get(this.props, 'plugin.notification.i18n_title_quill_delta')
 
 			return this.setState({
@@ -127,8 +132,8 @@ export default class Notif extends Com {
 				last_show: sb.Date.now(),
 				timestamp: timestamp,
 				user: user,
-				title: this.props.t.i18n(i18n_title),
-				message: this.props.t.i18n(i18n_message),
+				title: this.props.t.i18n(i18n_title) || sb.get(this.props, 'plugin.notification.title_quill_delta'),
+				message: this.props.t.i18n(i18n_message) || fallbackmessage,
 			})
 		}
 		this.setState({closeAnimation: true})
@@ -140,7 +145,7 @@ export default class Notif extends Com {
 	async refreshCSS() {
 		// make sure you are still alive
 		let plugins = this.props.store.matchPlugin()
-		let found = sb.find(plugins, plugin => plugin.id === this.props.plugin.id)
+		let found = sb.find(plugins, (plugin) => plugin.id === this.props.plugin.id)
 		if (!found) return
 		let css = (await notifCSS).default.default.toString()
 		// var outcss = sb.replaceCssVariablePlugin(css, this.props.plugin.popup)
@@ -191,7 +196,7 @@ export default class Notif extends Com {
 	renderTextFromQuillDelta(quilldelta, profile) {
 		let qd = sb.parseJSON(quilldelta)
 		if (!qd || !qd.ops) return null
-		return sb.map(qd.ops, op => {
+		return sb.map(qd.ops, (op) => {
 			let out = null
 			if (!op.insert) return null
 
@@ -215,7 +220,6 @@ export default class Notif extends Com {
 		if (!this.state.imageReady) return null
 		if (this.state.close) return null
 		if (!this.state.message) return null
-
 		let notif = sb.get(this.props.plugin, 'notification', {})
 		if (!notif) return null
 		let animation = ''
@@ -244,24 +248,29 @@ export default class Notif extends Com {
 		return (
 			<div
 				class={animation + ' notif' + ' notif__' + pos}
-				onClick={e => this.onClick(e)}
-				onmouseover={e => this.setOver(true)}
+				onClick={(e) => this.onClick(e)}
+				onmouseover={(e) => this.setOver(true)}
 				style={st}
-				onmouseleave={e => this.setOver(false)}>
-				<div style="position: relative !important; display: flex !important; align-items: center !important;">
-					<img alt="notification background" class="notif_bg" src={notif.background_url} style={sb.js2css(notif.background_style)} />
+				onmouseleave={(e) => this.setOver(false)}>
+				<div style='position: relative !important; display: flex !important; align-items: center !important;'>
+					<img
+						alt='notification background'
+						class='notif_bg'
+						src={notif.background_url}
+						style={sb.js2css(notif.background_style)}
+					/>
 					{this.renderCloseButton()}
-					<div class="notif_avatar" style={sb.js2css(notif.avatar_style)}>
-						<img alt="notification avatar" class="notif_avatar__img" src={user.avatar_url} />
+					<div class='notif_avatar' style={sb.js2css(notif.avatar_style)}>
+						<img alt='notification avatar' class='notif_avatar__img' src={user.avatar_url} />
 					</div>
-					<div class="notif_body">
-						<div class="notif_title" style={sb.js2css(notif.title_style)}>
+					<div class='notif_body'>
+						<div class='notif_title' style={sb.js2css(notif.title_style)}>
 							{this.renderTextFromQuillDelta(this.state.title, user)}
 						</div>
-						<div class="notif_message" style={sb.js2css(notif.message_style)}>
+						<div class='notif_message' style={sb.js2css(notif.message_style)}>
 							{this.renderTextFromQuillDelta(this.state.message, user)}
 						</div>
-						<div class="notif_time" style={sb.js2css(notif.subtext_style)}>
+						<div class='notif_time' style={sb.js2css(notif.subtext_style)}>
 							{this.state.timestamp}
 						</div>
 					</div>

package/src/plugin.js

@@ -29,10 +29,9 @@ function Plugin(plugin, store, $container, lib) {
 
 	this.getState = () => state
 
-	var run = async function () {
+	var run = async function() {
 		if (_destroy) return
 		if (state !== 'hold') return
-
 		// dont run converted plugin twice
 		if (plugin.type === 'popup' && store.isConverted(plugin.id)) return
 
@@ -375,8 +374,16 @@ const getLocale = (plugin, loc) => {
 	if (found) return found
 
 	found = sb.find(plugin.locales, (l) => {
-		l = l.replace('-', '_').split('_')[0].trim().toLowerCase()
-		let compareloc = loc.replace('-', '_').split('_')[0].trim().toLowerCase()
+		l = l
+			.replace('-', '_')
+			.split('_')[0]
+			.trim()
+			.toLowerCase()
+		let compareloc = loc
+			.replace('-', '_')
+			.split('_')[0]
+			.trim()
+			.toLowerCase()
 		return l == compareloc
 	})
 	if (found) return found

package/src/store/store.js

@@ -276,16 +276,18 @@ export default class Store {
 
 	now = () => sb.Date.now() + this.timeDiff // millisecond on server
 
-	async init(accid) {
+	async init(accid, mask) {
 		this.readyGate.close()
 		accid = (accid || '').trim()
 		this.api.setAuth({accid: accid})
 
 		this.g_sync = {}
-		let mask = '' // try to find mask in cookie
-		try {
-			mask = this.cookie.get('__sbmask', '')
-		} catch (e) {}
+		// try to find mask in cookie
+		if (!mask) {
+			try {
+				mask = this.cookie.get('__sbmask', '')
+			} catch (e) {}
+		}
 
 		let localstorageMask = this.kv.match('mask')
 		// cookie is deleted, fallback to local storage
@@ -333,6 +335,8 @@ export default class Store {
 		await this.reconnect()
 		this.readyGate.open()
 		this.reconnectWs(accid, userId)
+
+		return mask
 	}
 
 	seenQueue = [] // convoid will be seen

package/src/util/campaign.js

@@ -1,8 +1,8 @@
 var common = require('./common.js')
 
 // callback when user is about to leave site
-export function trackExitIntent (cb) {
-	let handler = e => {
+export function trackExitIntent(cb) {
+	let handler = (e) => {
 		if (e.clientY > 10) return // not move to top
 		if (cb) cb()
 		document.removeEventListener('mouseout', handler)
@@ -11,14 +11,15 @@ export function trackExitIntent (cb) {
 }
 
 // callback after user has scrolled X% down on the current page
-export function trackScrollingPercentage (percent, cb) {
-	let handleScroll = e => {
+export function trackScrollingPercentage(percent, cb) {
+	let handleScroll = (e) => {
 		let scrollTop = e.srcElement.scrollingElement ? e.srcElement.scrollingElement.scrollTop : e.srcElement.scrollTop
+
 		let scrollHeight = e.srcElement.scrollingElement
 			? e.srcElement.scrollingElement.scrollHeight
 			: e.srcElement.scrollHeight
 
-		if (scrollTop > 0 && scrollHeight > 0 && scrollTop / scrollHeight >= percent) {
+		if (scrollTop > 0 && scrollHeight > 0 && (scrollTop + window.innerHeight) / scrollHeight >= percent) {
 			if (cb) cb()
 			window.removeEventListener('scroll', handleScroll, false)
 		}
@@ -28,14 +29,17 @@ export function trackScrollingPercentage (percent, cb) {
 }
 
 // callback when user clicks on a specific part of page
-export function trackAreaClicked (selector, cb) {
+export function trackAreaClicked(selector, cb) {
 	if (!selector) return
 	selector = selector || ''
-	common.map(selector.split('\n'), selector => {
+	common.map(selector.split('\n'), (selector) => {
 		selector = common.trim(selector)
 		if (!selector) return
-		let doms = document.querySelectorAll(selector)
-		common.map(doms, dom => {
+		let doms = []
+		try {
+			doms = document.querySelectorAll(selector)
+		} catch (e) {}
+		common.map(doms, (dom) => {
 			if (!dom) return
 			dom.addEventListener('click', cb, false)
 		})
@@ -43,7 +47,7 @@ export function trackAreaClicked (selector, cb) {
 }
 
 // callback when user has stopped all activity (clicking, scrolling, ...)
-export function trackInactivity (seconds, cb) {
+export function trackInactivity(seconds, cb) {
 	let events = [
 		'scroll',
 		'keyup',
@@ -80,9 +84,9 @@ let timeOnPage = 0 // seconds
 setInterval(() => timeOnPage++, 1000)
 
 // when user has been on the page for at least X seconds
-export function trackTimeOnPage (seconds, cb) {
+export function trackTimeOnPage(seconds, cb) {
 	if (seconds < 1) {
-		return setTimeout(function () {
+		return setTimeout(function() {
 			cb(seconds)
 		}, 100)
 	}