{"version":3,"sources":["webpack:///./src/pages/help/survicate-integration.js","webpack:///./src/img/companyLogo/survicate.png"],"names":["related","title","description","link","frontmatter","metaTitle","canonical","metaDescription","logo","Wrapped","HelpArticle","edges","useStaticQuery","allFile","className","fluid","node","childImageSharp","alt","inline","margin","copy","lang","role","href","target","rel","section","module","exports"],"mappings":"6FAAA,kLAiNMA,EAAU,CACd,CACEC,MAAO,4CACPC,YAAa,qDACbC,KAAM,mDAER,CACEF,MAAO,uCACPE,KAAM,0BACND,YAAa,yDAIJE,EAAc,CACzBC,UAAW,wCACXC,UAAW,+BACXC,gBAAiB,kEACjBC,UAGIC,EAAUC,aA5NA,WACd,IACaC,EACTC,yBAAe,cADjBC,QAAWF,MAmBb,OACE,6BACE,kBAAC,IAAD,2BACA,4IAIA,4BACE,yFACA,oIAIA,gFAEF,kBAAC,IAAD,CAAUG,UAAU,QAApB,qBACA,kBAAC,IAAD,kBACA,+FACmE,yCADnE,gIAKA,kBAAC,IAAD,CACEC,MAAOJ,EAAM,GAAGK,KAAKC,gBAAgBF,MACrCG,IAAI,eACJjB,MAAM,iCAER,kBAAC,IAAD,oBACA,mGACA,oFACwD,qDADxD,qFAEgF,IAC9E,yCAHF,6BAKA,kBAAC,IAAD,CACEc,MAAOJ,EAAM,GAAGK,KAAKC,gBAAgBF,MACrCG,IAAI,iCACJjB,MAAM,oBAER,kBAAC,IAAD,CAAUa,UAAU,QAApB,uCACA,yFAAqE,IACrE,kBAAC,IAAD,CAAMK,QAAM,GAAE,WAxChB,IAwCkC,+CAChC,kBAAC,IAAD,CAAMC,OAAO,SAASC,MAAI,EAACC,KAAK,MAAhC,4zBASA,yBAAKR,UAAU,gCAAgCS,KAAK,SAApD,gKAEyE,IACvE,kBAAC,IAAD,CAAMC,KAAK,4CAAX,gBAHF,0BAIa,IACX,uBACEA,KAAK,8HACLC,OAAO,SACPC,IAAI,gCAHN,oBAKoB,KAVtB,KAcA,kBAAC,IAAD,CAAUZ,UAAU,QAApB,iEAGA,qKAIA,+EACA,2BAAOA,UAAU,mDACf,+BACE,4BACE,4BACE,0DAEF,oDAEF,4BACE,4BACE,mDAEF,kDAEF,4BACE,4BACE,2DAEF,4EAEF,4BACE,4BACE,oDAEF,sEAEF,4BACE,4BACE,qDAEF,oIAON,4BACE,4BACE,oCACQ,8DAER,kBAAC,IAAD,CACEC,MAAOJ,EAAM,GAAGK,KAAKC,gBAAgBF,MACrCG,IAAI,iCACJjB,MAAM,kBAGV,4BACE,2HAIA,kBAAC,IAAD,CACEc,MAAOJ,EAAM,GAAGK,KAAKC,gBAAgBF,MACrCG,IAAI,iCACJjB,MAAM,mBAGV,4BACE,iEACA,kBAAC,IAAD,CACEc,MAAOJ,EAAM,GAAGK,KAAKC,gBAAgBF,MACrCG,IAAI,iCACJjB,MAAM,wBAGV,4BACE,wCACY,iDADZ,4DAMJ,2EACgD,IAC9C,kBAAC,IAAD,CAAMuB,KAAK,8CAAX,WAFF,kHAKA,4BACE,4BACE,oCACQ,mDADR,KAGA,kBAAC,IAAD,CACET,MAAOJ,EAAM,GAAGK,KAAKC,gBAAgBF,MACrCG,IAAI,iCACJjB,MAAM,qBAGV,4BACE,yCACa,2CADb,cAC2C,kDAD3C,sEAEsD,KAEtD,kBAAC,IAAD,CACEc,MAAOJ,EAAM,GAAGK,KAAKC,gBAAgBF,MACrCG,IAAI,iCACJjB,MAAM,gCA6BH,4BACb,kBAACQ,EAAD,eACET,QAASA,EACT2B,QAAQ,eACR1B,MAAOG,EAAYC,WACfD,M,qBC3ORwB,EAAOC,QAAU,IAA0B","file":"component---src-pages-help-survicate-integration-js-e86bf3ef041db4f40ce6.js","sourcesContent":["import React from 'react';\nimport { useStaticQuery, graphql } from 'gatsby';\nimport { HelpArticle, SubTitle } from 'components/help/helpArticle';\nimport { StyledH4 } from 'components/help/helpArticle/styled';\nimport Code from 'components/help/codeSnippet';\nimport Link from 'components/ui/link';\nimport logo from 'img/companyLogo/survicate.png';\nimport Img from 'gatsby-image';\n\nconst Content = () => {\n  const {\n    allFile: { edges },\n  } = useStaticQuery(graphql`\n    query {\n      allFile(\n        filter: { relativeDirectory: { eq: \"marketplace/survicate\" } }\n        sort: { fields: base, order: ASC }\n      ) {\n        edges {\n          node {\n            childImageSharp {\n              fluid {\n                ...GatsbyImageSharpFluid_withWebp\n              }\n            }\n          }\n        }\n      }\n    }\n  `);\n  return (\n    <div>\n      <SubTitle>What is Survicate?</SubTitle>\n      <p>\n        Survicate is a tool that helps you get more feedback from your customers. Connecting it with\n        LiveSession and:\n      </p>\n      <ul>\n        <li>Access the session recordings from the respondent profile</li>\n        <li>\n          Filter session recordings via custom properties, e.g. survey name, ID, title, description,\n          or answer\n        </li>\n        <li>Help your customers more easily and efficiently</li>\n      </ul>\n      <SubTitle className=\"mt-5\">How does it work?</SubTitle>\n      <StyledH4>Survicate</StyledH4>\n      <p>\n        Every respondent profile in Survicate gets a new property called <i>sessionURL</i>. It\n        contains a URL with the session recording. This way, you can see how the surveyed user has\n        interacted with the website:\n      </p>\n      <Img\n        fluid={edges[0].node.childImageSharp.fluid}\n        alt=\"View profile\"\n        title=\"Survicate respondent profile\"\n      />\n      <StyledH4>LiveSession</StyledH4>\n      <p>After every completed survey, integration sends data to LiveSession.</p>\n      <p>\n        In the LiveSession app, you can use Survicate data as <strong>custom properties</strong> for\n        filtering. If you’d like to preview the properties, hover your mouse over the{' '}\n        <i>properties</i> of the selected session:\n      </p>\n      <Img\n        fluid={edges[7].node.childImageSharp.fluid}\n        alt=\"Instruction in LiveSession App\"\n        title=\"User properties\"\n      />\n      <SubTitle className=\"mt-5\">How can I install this integration?</SubTitle>\n      <span>To install integration, add the code below before your </span>{' '}\n      <Code inline>{'</body>'}</Code> <span> closing tag:</span>\n      <Code margin=\"1rem 0\" copy lang=\"js\">\n        {`<script type=\"text/javascript\">\n__ls(\"getSessionURL\",function(s,t){!function(t){function i(){t._sva.setVisitorTraits({sessionURL:s})}\nt._sva?(i(),t._sva.addEventListener(\"survey_completed\",function(s){!function(){const{surveyState:s,backendData:t,visit:i}=_sva.getState(),e=1===s.pointsDisplayed.length&&s.pointsDisplayed[0].point.id,n=i.answers[e]&&{\"survicate.last_answer\":i.answers[e]}\n,a=s.pointsDisplayed[0].point.description&&{\"survicate.last_description\":s.pointsDisplayed[0]\n.point.description},o=s.pointsDisplayed[0].point.content&&{\"survicate.last_title\":s.pointsDisplayed[0].point.content};__ls(\"setCustomParams\",{params:{\"survicate.last_survey_name\":t.surveys[0].name,\"survicate.survey_id\":t.surveys[0].id,...o,...a,...n}})}()})):t.addEventListener(\"SurvicateReady\",function(){i()})}(window)});\n</script>\n`}\n      </Code>\n      <div className=\"alert alert-primary mb-5 mt-5\" role=\"alert\">\n        To make this integration work, you need to have both Survicate and LiveSession installed on\n        your website. If you haven&apos;t installed our tracking code yet, see{' '}\n        <Link href=\"/help/how-to-install-livesession-script/\">this article</Link>. To install\n        Survicate,{' '}\n        <a\n          href=\"https://help.survicate.com/en/articles/3933915-getting-a-survey-appear-on-your-website-installing-and-testing-tracking-code\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer nofollow\"\n        >\n          follow this guide{' '}\n        </a>\n        .\n      </div>\n      <SubTitle className=\"mt-5\">\n        How to filter sessions with custom properties from Survicate?\n      </SubTitle>\n      <p>\n        Session recording from Survicate will come with a few custom properties. You can use them as\n        filters to find specific sessions faster.\n      </p>\n      <p>Here are all of the available custom properties:</p>\n      <table className=\"table table-bordered table-responsive mt-5 mb-5\">\n        <tbody>\n          <tr>\n            <td>\n              <i>survicate.last_survey_name</i>\n            </td>\n            <td>Name of your survey</td>\n          </tr>\n          <tr>\n            <td>\n              <i>survicate.survey_id</i>\n            </td>\n            <td>ID of your survey</td>\n          </tr>\n          <tr>\n            <td>\n              <i>survicate.last_description </i>\n            </td>\n            <td>Description of your survey (only if exists)</td>\n          </tr>\n          <tr>\n            <td>\n              <i>survicate.last_title</i>\n            </td>\n            <td>Title of your survey (only if exists)</td>\n          </tr>\n          <tr>\n            <td>\n              <i>survicate.last_answer</i>\n            </td>\n            <td>\n              Answer of survey (only if exists and survey presents one question, for ex. Customer\n              Effort Score)\n            </td>\n          </tr>\n        </tbody>\n      </table>\n      <ol>\n        <li>\n          <p>\n            Click <strong>Add filter &gt; Custom param</strong>\n          </p>\n          <Img\n            fluid={edges[2].node.childImageSharp.fluid}\n            alt=\"Instruction in LiveSession App\"\n            title=\"Custom param\"\n          />\n        </li>\n        <li>\n          <p>\n            Select the first text field and choose your filter. We filter Survicate surveys by their\n            ID:\n          </p>\n          <Img\n            fluid={edges[3].node.childImageSharp.fluid}\n            alt=\"Instruction in LiveSession App\"\n            title=\"Choose filter\"\n          />\n        </li>\n        <li>\n          <p>Search for the property you need: </p>\n          <Img\n            fluid={edges[4].node.childImageSharp.fluid}\n            alt=\"Instruction in LiveSession App\"\n            title=\"Find your property\"\n          />\n        </li>\n        <li>\n          <p>\n            Click the <strong>Apply filters</strong> button. And that’s all, you’ve got filtered\n            sessions!\n          </p>\n        </li>\n      </ol>\n      <p>\n        We highly recommend saving these filters as a{' '}\n        <Link href=\"/blog/how-to-use-filters-in-user-research/\">segment</Link>. This way, you can\n        easily come back and find the right sessions even faster! Take a look at this short guide:\n      </p>\n      <ol>\n        <li>\n          <p>\n            Click <strong>Save as segment</strong>:\n          </p>\n          <Img\n            fluid={edges[5].node.childImageSharp.fluid}\n            alt=\"Instruction in LiveSession App\"\n            title=\"Save as Segment\"\n          />\n        </li>\n        <li>\n          <p>\n            Define the <i>Segment name</i> and click <strong>Create segment</strong>. Your segments\n            will be visible on the left side under My segments:{' '}\n          </p>\n          <Img\n            fluid={edges[6].node.childImageSharp.fluid}\n            alt=\"Instruction in LiveSession App\"\n            title=\"Fill the Segment name\"\n          />\n        </li>\n      </ol>\n    </div>\n  );\n};\n\nconst related = [\n  {\n    title: 'How to check if my tracking script works?',\n    description: 'Check if your tracking code is installed correctly',\n    link: '/help/how-to-check-if-my-tracking-script-works/',\n  },\n  {\n    title: 'LiveSession and User.com integration',\n    link: '/help/user-integration/',\n    description: 'Go to session replay directly from User converstion.',\n  },\n];\n\nexport const frontmatter = {\n  metaTitle: 'LiveSession and Survicate integration',\n  canonical: '/help/survicate-integration/',\n  metaDescription: 'Add LiveSession recordings to form submit details in Survicate.',\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/survicate-e8d711ebbbaf04d030b8850edd7da7b2.png\";"],"sourceRoot":""}