{"version":3,"sources":["webpack:///./src/img/help/intercom/intercom-integration5.png","webpack:///./src/img/help/intercom/intercom-integration8.png","webpack:///./src/img/help/intercom/intercom-integration3.png","webpack:///./src/img/help/integrations/intercom.png","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/intercom/intercom-integration4.png","webpack:///./src/img/help/intercom/intercom-integration1.png","webpack:///./src/pages/help/intercom-integration.js","webpack:///./src/img/help/intercom/intercom-integration6.png","webpack:///./src/img/help/intercom/intercom-integration7.png","webpack:///./src/img/help/intercom/intercom-integration2.png"],"names":["module","exports","Card","styled","div","props","setMarginBottom","media","desktop","CardBody","HelpImage","cardStyle","className","style","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","src","imgStyle","imgModalStyle","alt","title","lazy","modal","onClick","loading","React","Component","related","frontmatter","metaTitle","metaDescription","canonical","integrationLink","logo","Wrapped","HelpArticle","intercom1","role","href","target","rel","intercom2","intercom3","intercom4","intercom5","inline","intercom6","intercom7","intercom8","section"],"mappings":"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","file":"component---src-pages-help-intercom-integration-js-cdaf3a85e4c33928fec4.js","sourcesContent":["module.exports = __webpack_public_path__ + \"static/intercom-integration5-b5153ea222df405c2367aaf5901bbd4b.png\";","module.exports = __webpack_public_path__ + \"static/intercom-integration8-0d4219cf9630a16515c6ef35c2a2efb3.png\";","module.exports = __webpack_public_path__ + \"static/intercom-integration3-db0dbf8dde70fede6acae9212c5222d1.png\";","module.exports = __webpack_public_path__ + \"static/intercom-6594eafe71cad0fa956166313efed32c.png\";","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/intercom-integration4-5fdeea3c7e5a788fae22f1c299b253b6.png\";","module.exports = __webpack_public_path__ + \"static/intercom-integration1-8e598642626912dc8220f698aa05718d.png\";","import React from 'react';\n\nimport { HelpArticle, SubTitle } from 'components/help/helpArticle';\nimport Code from 'components/help/codeSnippet';\nimport Image from 'components/help/helpImage';\n\nimport intercom1 from 'img/help/intercom/intercom-integration1.png';\nimport intercom2 from 'img/help/intercom/intercom-integration2.png';\nimport intercom3 from 'img/help/intercom/intercom-integration3.png';\nimport intercom4 from 'img/help/intercom/intercom-integration4.png';\nimport intercom5 from 'img/help/intercom/intercom-integration5.png';\nimport intercom6 from 'img/help/intercom/intercom-integration6.png';\nimport intercom7 from 'img/help/intercom/intercom-integration7.png';\nimport intercom8 from 'img/help/intercom/intercom-integration8.png';\nimport logo from 'img/help/integrations/intercom.png';\n\nconst Content = () => {\n  return (\n    <div>\n      <SubTitle>What is Intercom?</SubTitle>\n      <p>\n        Intercom is a <strong>live chat solution</strong> for support, sales and marketing teams. It\n        allows you to track events and see how the customers interact with your product.\n      </p>\n      <SubTitle className=\"mt-5\">How does this integration work?</SubTitle>\n      <p>\n        The LiveSession integration adds a recording link (as a note) to every Intercom conversation\n        with an identified user. This way, you can get more insights and see exactly what the user\n        sees.\n      </p>\n      <Image src={intercom1} lazy alt=\"Intercom integration\" title=\"Conversation\" />\n      <p>\n        Every time a new Intercom conversation starts, a note with a link to the session recording\n        is created. You can play recordings of a specific user directly from the Intercom\n        conversation.\n      </p>\n      <SubTitle className=\"mt-5\">How can I install this integration?</SubTitle>\n      <div className=\"alert alert-primary mb-5 mt-5\" role=\"alert\">\n        <p>\n          For the integration to work, you need to have both Intercom and LiveSession installed on\n          your website. If you haven&apos;t installed our tracking code yet, check{' '}\n          <a\n            href=\"/help/how-to-install-livesession-script/\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n          >\n            this article\n          </a>{' '}\n          for instructions.\n        </p>\n      </div>\n      <p>\n        To install Intercom integration go to <strong>Settings &gt; Integrations</strong> and click\n        Install:\n      </p>\n      <Image\n        src={intercom2}\n        lazy\n        alt=\"Intercom integration\"\n        title=\"Integrations page in LiveSession app\"\n      />\n      <p>\n        Click <strong>Install</strong> to confirm:\n      </p>\n      <Image\n        src={intercom3}\n        lazy\n        alt=\"Intercom integration\"\n        title=\"Click on Intercom and install\"\n      />\n      <p>\n        You will be redirected to Intercom. Authorize <strong>LiveSession</strong> access to your{' '}\n        <strong>Intercom</strong> workspace:\n      </p>\n      <Image src={intercom4} lazy alt=\"Intercom integration\" title=\"Authorize access\" />\n      <p>\n        After granting access, you will be redirected back to <strong>LiveSession</strong>. You’ll\n        see the Intercom integration on the list:\n      </p>\n      <Image\n        src={intercom5}\n        lazy\n        alt=\"Intercom integration\"\n        title=\"Integration confirmed in LiveSession app\"\n      />\n      <p>To make the integration work, you also need to:</p>\n      <ul>\n        <li>\n          Use the <Code inline>Intercom(‘boot’)</Code> or <Code inline>Intercom(‘update’)</Code>{' '}\n          command with the user’s email value. If you need help, you can find instructions in\n          Intercom{' '}\n          <a\n            href=\"https://developers.intercom.com/installing-intercom/docs/intercom-javascript\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n          >\n            docs\n          </a>\n          .\n        </li>\n        <li>\n          Use the same email address to identify the user in LiveSession with the{' '}\n          <Code inline>__ls(“identify”)</Code> method. If you’re not sure how to do it, you can read\n          a tutorial{' '}\n          <a\n            href=\"/help/user-identification-custom-properties/\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n          >\n            here\n          </a>\n          .\n        </li>\n      </ul>\n      <SubTitle className=\"mt-5\">Additional settings</SubTitle>\n      <p>You can also configure these options (enabled by default):</p>\n      <p> LiveSession recording URL in user panel as an attribute:</p>\n      <Image src={intercom6} lazy alt=\"Intercom integration\" title=\"LiveSession URL\" />\n      <p> LiveSession recording URL as a user’s event:</p>\n      <Image src={intercom7} lazy alt=\"Intercom integration\" title=\"Recent events\" />\n      <p>\n        These can be changed in integration{' '}\n        <a\n          href=\"https://app.livesession.io/settings/integrations?integration=intercom\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          settings\n        </a>\n        .\n      </p>\n      <Image src={intercom8} lazy alt=\"Intercom integration\" title=\"Settings in LiveSession app\" />\n    </div>\n  );\n};\n\nconst related = [];\n\nexport const frontmatter = {\n  metaTitle: 'LiveSession and Intercom integration',\n  metaDescription: 'Send LiveSession recordings to your Intercom account',\n  canonical: '/help/intercom-integration/',\n  integrationLink: '/app/install/intercom',\n  logo,\n};\n\nconst Wrapped = HelpArticle(Content);\nexport default () => (\n  <Wrapped\n    related={related}\n    section=\"Integrations\"\n    title={frontmatter.metaTitle}\n    {...frontmatter}\n  />\n);\n","module.exports = __webpack_public_path__ + \"static/intercom-integration6-6e96235cbbec68f9fcbfbd0c5d794cf4.png\";","module.exports = __webpack_public_path__ + \"static/intercom-integration7-0aff71662cbc27a43eaead2eb48552b0.png\";","module.exports = __webpack_public_path__ + \"static/intercom-integration2-296ea8b24990cbfea5d917f8e1d59e52.png\";"],"sourceRoot":""}