{"version":3,"sources":["webpack:///./src/components/help/helpImage/styled.js","webpack:///./src/components/help/helpImage/index.js","webpack:///./src/img/help/install-code/copy_button.png","webpack:///./src/components/ui/image-modal.js","webpack:///./src/img/help/install-code/gtm.png","webpack:///./src/pages/help/how-to-install-livesession-script.js","webpack:///./src/components/help/installCodeInstruction/index.js","webpack:///./src/img/help/install-code/settings_menu.png","webpack:///./src/img/help/install-code/websites_menu.png","webpack:///./src/img/help/install-code/tracking_code_tab.png"],"names":["Card","styled","div","props","setMarginBottom","media","desktop","CardBody","HelpImage","cardStyle","className","style","defaultProps","module","exports","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","link","description","frontmatter","metaTitle","metaDescription","canonical","Wrapped","Article","role","href","rel","target","section","img1","img2","img3","img4","inline","img5"],"mappings":"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","file":"component---src-pages-help-how-to-install-livesession-script-js-77c50080ce94bcb3d106.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","module.exports = __webpack_public_path__ + \"static/copy_button-fff0c13eaa97f0ca289673d65f91e121.png\";","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/gtm-567442a92f1ee15381be3b98ab4a2444.png\";","import React from 'react';\nimport Article from 'components/help/helpArticle';\nimport CopyCodeSection from 'components/help/installCodeInstruction';\nimport Link from 'components/ui/link';\n\nconst Content = () => {\n  return (\n    <div>\n      Using LiveSession requires placing a simple JavaScript code into your website.\n      <div className=\"alert alert-primary mb-5 mt-5\" role=\"alert\">\n        You need to force your visitors to use HTTPS to make our tracking code work. If you\n        don&apos;t have an SSL, our tracking code won&apos;t work correctly.{' '}\n        <Link\n          href=\"https://share.hsforms.com/1WiHAXRr6S7O3PN6aFQLr9w2ymzp\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          Contact us\n        </Link>{' '}\n        if you need help with setting up SSL.\n      </div>\n      <CopyCodeSection />\n    </div>\n  );\n};\n\nconst related = [\n  {\n    link: '/help/get-started',\n    title: 'Check other installation guides',\n    description: 'See how to install LiveSession in several ways and get started.',\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\nexport const frontmatter = {\n  metaTitle: 'How to install LiveSession script on your website?',\n  metaDescription: 'Check how can you install LiveSession on any website.',\n  canonical: '/help/how-to-install-livesession-script/',\n};\n\nconst Wrapped = Article(Content);\nexport default () => (\n  <Wrapped related={related} section=\"Get Started\" title={frontmatter.metaTitle} {...frontmatter} />\n);\n","import React from 'react';\nimport { SubTitle } from 'components/help/helpArticle';\nimport img1 from 'img/help/install-code/settings_menu.png';\nimport img2 from 'img/help/install-code/websites_menu.png';\nimport img3 from 'img/help/install-code/tracking_code_tab.png';\nimport img4 from 'img/help/install-code/copy_button.png';\nimport img5 from 'img/help/install-code/gtm.png';\nimport Code from 'components/help/codeSnippet';\nimport Image from '../helpImage';\n\nexport default () => (\n  <>\n    <SubTitle>Installing the code manually</SubTitle>\n    <p>\n      After logging in to LiveSession Application go to\n      <strong> Settings</strong>:\n    </p>\n    <Image\n      src={img1}\n      alt=\"Install code instruction\"\n      title=\"Go to settings on LiveSession Application.\"\n    />\n    <p>\n      Choose the website that you want to set up and click on the Tracking code. If you haven&apos;t\n      added a website yet, please click on Add website button and type in the website’s address\n      there:\n    </p>\n\n    <Image src={img2} lazy alt=\"Install code instruction\" title=\"Choose a website\" />\n    <p>\n      Open the <strong>Tracking code</strong> tab:\n    </p>\n    <Image src={img3} lazy alt=\"Install code instruction\" title=\"Click Tracking code tab\" />\n    <p>\n      And click on the button to <strong>Copy to clipboard</strong> button:\n    </p>\n    <Image src={img4} alt=\"Install code instruction\" title=\"Click to copy to clipboard\" />\n    <p>\n      Paste it into your website source code in the <Code inline>{'<head>'}</Code> section.\n    </p>\n    <SubTitle>Installing the code with Google Tag Manager</SubTitle>\n    <p>\n      If you want to install LiveSession tracking code using the Google Tag Manager, go to the\n      “Google Tag Manager” tab (1), click the “Connect Google Tag Manager” button (2) and follow the\n      on-screen instructions:\n    </p>\n    <Image src={img5} alt=\"Install code instruction\" title=\"Install with Google Tag Manager\" />\n    <p>\n      It&apos;s done! Now you can test if your code works correctly{' '}\n      <a\n        href=\"/help/how-to-check-if-my-tracking-script-works/\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n      >\n        using script debug mode\n      </a>\n      .\n    </p>\n  </>\n);\n","module.exports = __webpack_public_path__ + \"static/settings_menu-cd380aae18dc8baee602cd0ca5d8515a.png\";","module.exports = __webpack_public_path__ + \"static/websites_menu-24d9a33ac619057095c09ce7b248bdee.png\";","module.exports = __webpack_public_path__ + \"static/tracking_code_tab-a69df06ee7d179b611cb578fc6abd326.png\";"],"sourceRoot":""}