{"version":3,"sources":["webpack:///./src/img/help/custom_props/filters_identification.png","webpack:///./src/pages/help/user-identification-custom-properties.js","webpack:///./src/components/help/helpImage/styled.js","webpack:///./src/components/help/helpImage/index.js","webpack:///./src/components/ui/image-modal.js","webpack:///./src/img/help/custom_props/session_player.png","webpack:///./src/icons/alertIcons.js","webpack:///./src/components/information/index.js","webpack:///./src/img/help/custom_props/session_list.png"],"names":["module","exports","related","link","title","description","Wrapped","Article","className","role","href","lang","style","marginBottom","inline","marginTop","color","src","img1","lazy","alt","img2","img3","fontWeight","fontSize","width","dir","margin","frontmatter","metaTitle","metaDescription","canonical","section","Card","styled","div","props","setMarginBottom","media","desktop","CardBody","HelpImage","cardStyle","defaultProps","Container","Box","Close","span","ImageWrapped","img","Image","ImageModal","escFunction","event","showModal","state","keyCode","closeModal","setState","openModal","window","innerWidth","componentDidMount","document","addEventListener","this","componentWillUnmount","removeEventListener","render","imgStyle","imgModalStyle","modal","onClick","loading","React","Component","warning","height","viewBox","fill","xmlns","fillRule","d","clipRule","success","danger","info","cx","cy","r","Alert","Text","p","Information","children","filterIcon","Object","entries","icons","filter","icon","undefined"],"mappings":"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","file":"component---src-pages-help-user-identification-custom-properties-js-c860398ce89688fba019.js","sourcesContent":["module.exports = __webpack_public_path__ + \"static/filters_identification-718ac64eda0a9118fa1b69bb15f93e25.png\";","import React from 'react';\n\nimport Article, { SubTitle } from 'components/help/helpArticle';\nimport Image from 'components/help/helpImage';\nimport Code from 'components/help/codeSnippet';\nimport Link from 'components/ui/link';\nimport img1 from 'img/help/custom_props/session_list.png';\nimport img2 from 'img/help/custom_props/session_player.png';\nimport img3 from 'img/help/custom_props/filters_identification.png';\nimport { Information } from '../../components/information';\n\nconst Content = () => {\n  return (\n    <div>\n      <p>\n        If you identify users visiting your website in any way, you can pass that data to\n        LiveSession. It will add another dimension to your research and provide you with valuable\n        information about your visitor’s behavior. In LiveSession, you can define up to 50 custom\n        properties for each session.\n      </p>\n\n      <div className=\"alert alert-primary mb-5 mt-5\" role=\"alert\">\n        To pass data to LiveSession, you have to install our tracking code first. You can learn how\n        to do it in <Link href=\"/help/how-to-install-livesession-script/\">this guide</Link>.\n      </div>\n      <SubTitle>Users identification</SubTitle>\n      <p>\n        The most common way to identify a user is to use their name or email address. You can use\n        one or both strings, according to your needs:\n      </p>\n\n      <Code lang=\"javascript\" style={{ marginBottom: 24 }}>\n        {`__ls(\"identify\", { \n    name: \"Adam McKenzie\", \n    email: \"adam@goodstuffinc.com\"\n});`}\n      </Code>\n\n      <p>\n        To pass additional parameters, add them as <Code inline>{`params: {key: value}`}</Code>:\n      </p>\n\n      <Code lang=\"javascript\" style={{ marginTop: 32 }}>\n        {`__ls(\"identify\", { \n    name: \"Adam McKenzie\", \n    email: \"adam@goodstuffinc.com\",\n    params: {\n      account_id: \"101\", \n      plan: \"premium\" \n    }\n});`}\n      </Code>\n      <div className=\"alert alert-primary mb-5 mt-5\" role=\"alert\">\n        Remember to update sample values. You have to trigger the function on every page view as we\n        do not store custom properties’ values in any way.\n      </div>\n\n      <Information color=\"warning\" style={{ marginTop: 32, marginBottom: 32 }}>\n        Custom properties are available from the Starter plan up. If you’d like to add custom\n        properties and you’re on a Micro plan, consider{' '}\n        <Link href=\"/pricing/\">switching plans</Link>.\n      </Information>\n\n      <p className=\"mt-3\">\n        Sessions from identified users will be listed on the sessions list, along with their email\n        addresses. From here, you will also be able to access all of the custom properties you\n        passed to LiveSession:\n      </p>\n\n      <Image\n        src={img1}\n        lazy\n        alt=\"Adding custom properties and identify users\"\n        title=\"Recorder session\"\n      />\n\n      <p>\n        You can also access custom properties directly from the session player. They are available\n        in the right panel, under the “Properties” tab:\n      </p>\n\n      <Image\n        src={img2}\n        lazy\n        alt=\"Adding custom properties and identify users\"\n        title=\"Result in session replay player\"\n      />\n      <p>\n        You can also use the user’s name, email address and custom parameters you passed as filters\n        to search sessions matching your criteria:\n      </p>\n\n      <Image\n        src={img3}\n        lazy\n        alt=\"Adding custom properties and identify users\"\n        title=\"Fliter sessions\"\n      />\n\n      <SubTitle>Set custom properties without identifying users</SubTitle>\n\n      <p>\n        You can pass custom properties to LiveSession without identifying your users. To do so, use\n        the\n        <Code inline>__ls(&quot;setCustomParams&quot;, data)</Code> function. Here’s an example of\n        the snippet you can use to update sessions’ parameters:\n      </p>\n\n      <Code lang=\"javascript\">\n        {`__ls(\"setCustomParams\", {\n params: {\n   order_id: \"123-abc-def\",\n   plan: \"premium\",\n },\n});\n`}\n      </Code>\n      <div className=\"alert alert-primary mb-5 mt-5\" role=\"alert\">\n        Remember to update sample values. You have to trigger the function on every page view as we\n        do not store custom properties’ values in any way.\n      </div>\n      <h5 style={{ marginBottom: '2rem', fontWeight: 800, fontSize: '1.2rem' }}>\n        Custom Params Limitations\n      </h5>\n      <table style={{ width: '100%' }}>\n        <thead>\n          <tr>\n            <td>\n              <p dir=\"ltr\">\n                <strong>Name</strong>\n              </p>\n            </td>\n            <td>\n              <p dir=\"ltr\">\n                <strong>Type</strong>\n              </p>\n            </td>\n            <td>\n              <p dir=\"ltr\">\n                <strong>Maximum length</strong>\n              </p>\n            </td>\n            <td>\n              <p dir=\"ltr\">\n                <strong>Details</strong>\n              </p>\n            </td>\n          </tr>\n        </thead>\n        <tbody>\n          <tr>\n            <td>\n              <p dir=\"ltr\">Name</p>\n            </td>\n            <td>\n              <p dir=\"ltr\">String</p>\n            </td>\n            <td>\n              <p dir=\"ltr\">128</p>\n            </td>\n            <td>\n              <p dir=\"ltr\">Displays user names in app</p>\n            </td>\n          </tr>\n          <tr>\n            <td>\n              <p dir=\"ltr\">Email</p>\n            </td>\n            <td>\n              <p dir=\"ltr\">String</p>\n            </td>\n            <td>\n              <p dir=\"ltr\">128</p>\n            </td>\n            <td>\n              <p dir=\"ltr\">Displays user email</p>\n            </td>\n          </tr>\n          <tr>\n            <td>\n              <p dir=\"ltr\">Params</p>\n            </td>\n            <td>\n              <p dir=\"ltr\">JSON object</p>\n            </td>\n            <td>\n              <p dir=\"ltr\">50 items</p>\n            </td>\n            <td>\n              <p dir=\"ltr\">\n                Valid JSON object {`{`}param1: value, param2: value, ... {`}`}\n              </p>\n            </td>\n          </tr>\n          <tr>\n            <td>\n              <p dir=\"ltr\">param.key</p>\n            </td>\n            <td>\n              <p dir=\"ltr\">string</p>\n            </td>\n            <td>\n              <p dir=\"ltr\">64</p>\n            </td>\n            <td>\n              <p dir=\"ltr\">\n                {`{`}\n                <strong>key</strong>:value{`}`}\n              </p>\n            </td>\n          </tr>\n          <tr>\n            <td>\n              <p dir=\"ltr\">param.value</p>\n            </td>\n            <td>\n              <p dir=\"ltr\">string</p>\n            </td>\n            <td>\n              <p dir=\"ltr\">64</p>\n            </td>\n            <td>\n              <p dir=\"ltr\">\n                {`{`}key:<strong>value</strong>\n                {`}`}\n              </p>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n      <h5 style={{ margin: '2rem 0', fontWeight: 800, fontSize: '1.2rem' }}>Rate limiting</h5>\n\n      <p>\n        Calls to Record Session API (rs.livesession.io) for{' '}\n        <Code inline>__ls(&apos;identify&apos;)</Code> are rate limited per-session to 5 requests\n        per second and 10 request per minute. If these limits are exceeded, custom params won&apos;t\n        be set.{' '}\n      </p>\n    </div>\n  );\n};\n\nconst related = [\n  {\n    link: '/help/how-to-install-livesession-script',\n    title: 'How to install LiveSession script?',\n    description: 'Check how can you install LiveSession on any website.',\n  },\n  {\n    link: '/help/how-to-check-if-my-tracking-script-works',\n    title: 'How to check if my tracking script works',\n    description: 'Check if your tracking code is installed correctly',\n  },\n];\n\nconst Wrapped = Article(Content);\n\nexport const frontmatter = {\n  metaTitle: 'How to identify users and add custom properties?',\n  metaDescription:\n    'With LiveSession you can identify user by email and name. Check how to do that.',\n  canonical: '/help/user-identification-custom-properties/',\n};\n\nexport default () => (\n  <Wrapped related={related} section=\"Developer\" title={frontmatter.metaTitle} {...frontmatter} />\n);\n","import styled from 'styled-components';\nimport { media } from 'theme/breakpoints';\n\nexport const Card = styled.div`\n  margin: ${(props) => (props.setMarginBottom ? '2rem 0' : '2rem 0 3rem')};\n  border: none;\n\n  ${media.desktop} {\n    margin: ${(props) => (props.setMarginBottom ? '1.25rem 0' : '1.25rem 0 2rem')};\n  }\n`;\n\nexport const CardBody = styled.div`\n  box-shadow: 0px 0px 10px #00000029;\n  padding: 0;\n`;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport ImageModal from 'components/ui/image-modal';\nimport * as Styled from './styled';\n\nconst HelpImage = (props) => {\n  const { cardStyle, setMarginBottom } = props;\n  return (\n    <Styled.Card className=\"card\" style={cardStyle} setMarginBottom={setMarginBottom}>\n      <Styled.CardBody className=\"card-body\" style={cardStyle}>\n        <ImageModal {...props} />\n      </Styled.CardBody>\n    </Styled.Card>\n  );\n};\n\nexport default HelpImage;\n\nHelpImage.propTypes = {\n  cardStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n  setMarginBottom: PropTypes.bool,\n};\n\nHelpImage.defaultProps = {\n  cardStyle: null,\n  setMarginBottom: false,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nconst Container = styled.div`\n  top: 0;\n  left: 0;\n  position: fixed;\n  width: 100%;\n  height: 100vh;\n  background-color: rgba(0, 0, 0, 0.4);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 99999;\n`;\n\nconst Box = styled.div`\n  background-color: transparent;\n  position: relative;\n  width: 95vw;\n  height: 95vh;\n  padding: 1.5rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1;\n`;\n\nconst Close = styled.span`\n  position: absolute;\n  font-size: 1.8rem;\n  right: 20px;\n  top: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  background-color: #fff;\n  border-radius: 100px;\n  width: 40px;\n  height: 40px;\n  padding-bottom: 3px;\n  filter: drop-shadow(5px 1px 4px rgba(0, 0, 0, 0.2));\n  z-index: 10;\n`;\n\nconst ImageWrapped = styled.img`\n  max-width: 100%;\n  max-height: 100%;\n  display: block;\n  margin: 0 auto;\n  border: none;\n`;\nconst minWidthToShow = 600;\n\nconst Image = styled.img`\n  border: 1px solid #eaebec;\n  max-width: 100%;\n  height: auto;\n\n  @media (min-width: ${minWidthToShow}px) {\n    cursor: pointer;\n  }\n`;\n\nclass ImageModal extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      showModal: false,\n    };\n  }\n\n  componentDidMount() {\n    document.addEventListener('keydown', this.escFunction, false);\n  }\n\n  componentWillUnmount() {\n    document.removeEventListener('keydown', this.escFunction, false);\n  }\n\n  escFunction = (event) => {\n    const { showModal } = this.state;\n\n    if (event.keyCode === 27 && showModal) {\n      this.closeModal();\n    }\n  };\n\n  closeModal = () => {\n    this.setState({ showModal: false });\n  };\n\n  openModal = () => {\n    if (window.innerWidth >= minWidthToShow) {\n      this.setState({ showModal: true });\n    }\n  };\n\n  render() {\n    const { showModal } = this.state;\n    const { src, imgStyle, imgModalStyle, alt, title, lazy } = this.props;\n\n    const modal = (\n      <Container onClick={this.closeModal}>\n        <Close onClick={this.closeModal}>&times;</Close>\n        <Box onClick={this.closeModal}>\n          <ImageWrapped\n            style={imgModalStyle}\n            src={src}\n            alt={alt}\n            title={title}\n            loading={lazy ? 'lazy' : null}\n          />\n        </Box>\n      </Container>\n    );\n\n    return (\n      <>\n        <Image\n          style={imgStyle}\n          onClick={this.openModal}\n          src={src}\n          alt={alt}\n          title={title}\n          loading={lazy ? 'lazy' : null}\n        />\n        {showModal && modal}\n      </>\n    );\n  }\n}\n\nexport default ImageModal;\n\nImageModal.propTypes = {\n  src: PropTypes.string.isRequired,\n  imgStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.node]),\n  imgModalStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.node]),\n  alt: PropTypes.string.isRequired,\n  title: PropTypes.string.isRequired,\n  lazy: PropTypes.bool,\n};\n\nImageModal.defaultProps = {\n  lazy: false,\n  imgStyle: null,\n  imgModalStyle: null,\n};\n","module.exports = __webpack_public_path__ + \"static/session_player-765edaab717e6fad82656d4847c652b2.png\";","import React from 'react';\n\nexport const warning = (\n  <svg\n    className=\"bi bi-exclamation-triangle\"\n    width=\"1em\"\n    height=\"1em\"\n    viewBox=\"0 0 16 16\"\n    fill=\"currentColor\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      fillRule=\"evenodd\"\n      d=\"M7.938 2.016a.146.146 0 00-.054.057L1.027 13.74a.176.176 0 00-.002.183c.016.03.037.05.054.06.015.01.034.017.066.017h13.713a.12.12 0 00.066-.017.163.163 0 00.055-.06.176.176 0 00-.003-.183L8.12 2.073a.146.146 0 00-.054-.057A.13.13 0 008.002 2a.13.13 0 00-.064.016zm1.044-.45a1.13 1.13 0 00-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z\"\n      clipRule=\"evenodd\"\n    />\n    <path d=\"M7.002 12a1 1 0 112 0 1 1 0 01-2 0zM7.1 5.995a.905.905 0 111.8 0l-.35 3.507a.552.552 0 01-1.1 0L7.1 5.995z\" />\n  </svg>\n);\nexport const success = (\n  <svg\n    className=\"bi bi-check-circle\"\n    width=\"1em\"\n    height=\"1em\"\n    viewBox=\"0 0 16 16\"\n    fill=\"currentColor\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      fillRule=\"evenodd\"\n      d=\"M15.354 2.646a.5.5 0 010 .708l-7 7a.5.5 0 01-.708 0l-3-3a.5.5 0 11.708-.708L8 9.293l6.646-6.647a.5.5 0 01.708 0z\"\n      clipRule=\"evenodd\"\n    />\n    <path\n      fillRule=\"evenodd\"\n      d=\"M8 2.5A5.5 5.5 0 1013.5 8a.5.5 0 011 0 6.5 6.5 0 11-3.25-5.63.5.5 0 11-.5.865A5.472 5.472 0 008 2.5z\"\n      clipRule=\"evenodd\"\n    />\n  </svg>\n);\nexport const danger = (\n  <svg\n    className=\"bi bi-exclamation-circle\"\n    width=\"1em\"\n    height=\"1em\"\n    viewBox=\"0 0 16 16\"\n    fill=\"currentColor\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      fillRule=\"evenodd\"\n      d=\"M8 15A7 7 0 108 1a7 7 0 000 14zm0 1A8 8 0 108 0a8 8 0 000 16z\"\n      clipRule=\"evenodd\"\n    />\n    <path d=\"M7.002 11a1 1 0 112 0 1 1 0 01-2 0zM7.1 4.995a.905.905 0 111.8 0l-.35 3.507a.552.552 0 01-1.1 0L7.1 4.995z\" />\n  </svg>\n);\nexport const info = (\n  <svg\n    className=\"bi bi-info-circle\"\n    width=\"1em\"\n    height=\"1em\"\n    viewBox=\"0 0 16 16\"\n    fill=\"currentColor\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      fillRule=\"evenodd\"\n      d=\"M8 15A7 7 0 108 1a7 7 0 000 14zm0 1A8 8 0 108 0a8 8 0 000 16z\"\n      clipRule=\"evenodd\"\n    />\n    <path d=\"M8.93 6.588l-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588z\" />\n    <circle cx=\"8\" cy=\"4.5\" r=\"1\" />\n  </svg>\n);\n","import React from 'react';\nimport styled from 'styled-components';\n\nimport PropTypes from 'prop-types';\nimport * as icons from '../../icons/alertIcons';\n\nconst Alert = styled.div`\n  margin: 1.5rem 0 1rem;\n  border-radius: 4px;\n  padding: 10px 12px 10px 16px;\n  background-color: transparent;\n  display: flex;\n  align-items: center;\n  & svg {\n    align-self: center;\n    line-height: 100%;\n    width: 16px;\n    height: 16px;\n  }\n  &.info {\n    background-color: #cce5ff;\n    border: 1px solid #b8daff;\n  }\n  &.success {\n    background-color: #d4edda;\n    border: 1px solid #c3e6cb;\n  }\n  &.warning {\n    background-color: #fff3cd;\n    border: 1px solid #ffeeba;\n  }\n  &.danger {\n    background-color: #f8d7da;\n    border: 1px solid #f5c6cb;\n  }\n`;\n\nconst Text = styled.p`\n  margin: 0 0 0 16px;\n  width: fit-content;\n  font-weight: 400;\n`;\n\nexport const Information = ({ children, color, style }) => {\n  const [filterIcon] = Object.entries(icons).filter((icon) => {\n    return icon[0] === color ? icon[1] : null;\n  });\n  return (\n    <Alert className={color} style={style}>\n      {filterIcon[1]}\n      <Text>{children}</Text>\n    </Alert>\n  );\n};\n\nInformation.propTypes = {\n  color: PropTypes.string.isRequired,\n  children: PropTypes.node.isRequired,\n  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n};\n\nInformation.defaultProps = {\n  style: undefined,\n};\n","module.exports = __webpack_public_path__ + \"static/session_list-293843513321cec9d95a5963d6f6f58a.png\";"],"sourceRoot":""}