{"version":3,"sources":["webpack:///./src/components/help/helpImage/styled.js","webpack:///./src/components/help/helpImage/index.js","webpack:///./src/pages/help/help-scout-integration.js","webpack:///./src/components/ui/image-modal.js","webpack:///./src/img/help/integrations/helpscout.png","webpack:///./src/img/help/helpscout/helpscout2.png","webpack:///./src/img/help/helpscout/helpscout1.png"],"names":["Card","styled","div","props","setMarginBottom","media","desktop","CardBody","HelpImage","cardStyle","className","style","defaultProps","related","frontmatter","metaTitle","metaDescription","canonical","logo","Wrapped","HelpArticle","src","screen1","alt","title","screen2","lazy","href","target","inline","margin","copy","section","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","module","exports"],"mappings":"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","file":"component---src-pages-help-help-scout-integration-js-ed971b3e12ff60d26537.js","sourcesContent":["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';\n\nimport { HelpArticle, SubTitle } from 'components/help/helpArticle';\nimport Code from 'components/help/codeSnippet';\nimport Image from 'components/help/helpImage';\nimport Link from 'components/ui/link';\n\nimport screen1 from 'img/help/helpscout/helpscout1.png';\nimport screen2 from 'img/help/helpscout/helpscout2.png';\n\nimport logo from 'img/help/integrations/helpscout.png';\n\nconst Content = () => {\n  return (\n    <div>\n      <SubTitle>What is Help Scout?</SubTitle>\n      <p>\n        <strong>\n          Help Scout is a handy support tool that lets you communicate with your users via emails\n        </strong>\n        . This software is useful when you want to collaborate with your team on customer service.\n        It lets you share mailbox with teammates, so you can work on issues together. What’s more,\n        you can use Help Scout to add email widget to your website, so people can use it to send\n        tickets to your mailbox. It could be nice alternative to contact forms.\n      </p>\n      <Image\n        src={screen1}\n        alt=\"Help Scout integration\"\n        title=\"Your user can submit ticket using this widget.\"\n      />\n      <SubTitle className=\"mt-5\">How does this integration work?</SubTitle>\n      <p>\n        This integration makes solving technical issues easier for you. Why? Because{' '}\n        <strong>it will send session replay links along with tickets</strong>, every time someone\n        will send it to you using Help Scout widget. Then you can easily check what people did\n        before submitting an issue and what exactly was wrong, so you can resolve it faster. The\n        result looks like below:\n      </p>\n      <Image\n        src={screen2}\n        lazy\n        alt=\"Help Scout integration\"\n        title=\"Click link to see what user did before sending this message\"\n      />\n      <p>\n        It could be especially useful if you use user identification feature in LiveSession. You\n        could then check entire history of session replays for specific customer. To make this work\n        check{' '}\n        <Link href=\"/help/user-identification-custom-properties/\" target=\"_blank\">\n          this article\n        </Link>\n        .\n      </p>\n      <p>\n        <strong>Do you want to minimize number of follow-ups sent to your customers?</strong> We\n        guess you want, so let’s try it and make your job easier!\n      </p>\n      <SubTitle className=\"mt-5\">How can I install this integration?</SubTitle>\n      <span>\n        To connect LiveSession with your Help Scout Beacon, you need to add the code below before\n        your{' '}\n      </span>{' '}\n      <Code inline>{'</body>'}</Code> <span> closing tag:</span>\n      <Code margin=\"1rem 0\" copy>\n        {`<script>\nif(__ls && Beacon) {\n  __ls('getSessionURL', function(url, isNew) {\n      if(isNew) {\n        Beacon(\"identify\", {\n        session_replay: url\n      });   \n    }\n  })\n}\n</script>`}\n      </Code>\n    </div>\n  );\n};\n\nconst related = [];\n\nexport const frontmatter = {\n  metaTitle: 'LiveSession and Help Scout integration',\n  metaDescription: 'Send LiveSession recordings with tickets to Help Scout',\n  canonical: '/help/help-scout-integration/',\n  logo,\n};\n\nconst Wrapped = HelpArticle(Content);\n\nexport default () => (\n  <Wrapped\n    related={related}\n    section=\"Integrations\"\n    title={frontmatter.metaTitle}\n    {...frontmatter}\n  />\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/helpscout-3b11a280e3cf833747cf047907081e80.png\";","module.exports = __webpack_public_path__ + \"static/helpscout2-5ef58ae2aed4d2a1c2d2e9273d7052c0.png\";","module.exports = __webpack_public_path__ + \"static/helpscout1-2e908b6ac831a6e380b2ea33d0500070.png\";"],"sourceRoot":""}