Connect Marvin Live Intercept to your website or product

What is Marvin Live Intercept?

Marvin Live Intercept helps teams collect feedback in the moment by launching an AI interviewer while they are exploring your website or product.

How do I connect Live Intercept to my website or product?

You need to add the code snippet shared by your Marvin admin to your website or product’s code. If they haven't shared it with you, they can follow these instructions to locate and share the code.

Access your website's code or content management system, such as Google Tag Manager.
Copy the code snippet shared by your Marvin admin.
Paste the snippet immediately after the opening <head> tag, in the code of every page of your website (Make sure that only one snippet is added per page).

The snippet will be in this format*, and the data-target-id will be unique to your company.
```
<script
  src="https://app.heymarvin.com/in-app-interviewer-loader.js"
  data-target-id="XXXXXXXXXXXXX"
  data-origin="https://app.heymarvin.com">
</script>
```
*This is a sample of the code you need to add. Please do not use this snippet in your code.

4. Save changes and clear cache for the changes to reflect.

Marvin Live Intercept should be connected to your website or product now.

5. Once the domain is successfully connected, let your Marvin admin know. They should be able to see it in the list of domains while setting up a new Intercept.

Collect user details through Live Intercept

Please add this code after the base snippet to collect user/participant data. The name and email are used to pre-fill and bypass the interview lobby.

window.MarvinIntercept.identify({
  user_id: "{{user_id}}",
  name: "{{name}}",
  email: "{{email}}",
});

user_id, name, and email are static parameters and should not be edited in the code. Mention the corresponding fields in your data in the {{ }}.

Collect custom metadata

To gather and pass custom parameters, such as role, or company, use the following code.

window.MarvinIntercept.setCustomParams({
  {{param1}}: "{{value1}}",
  {{param2}}: "{{value2}}",
  {{param3}}: "{{value3}}",
});

Add the parameter and the corresponding field in your data for values. For example,

window.MarvinIntercept.setCustomParams({
  plan: "pro",
  company: "Acme",
  company_size: 200,
});

You can use these additional attributes to target specific users or filter interviews by segment.

That's it! Your domain should now be connected to Marvin Live Intercept.

Where can I find the code snippet to connect Live Intercept?

To access the code snippet, you must be an Admin in Marvin.

Follow these instructions to locate and share the code snippet unique to your team.

Login to Marvin, and open the Settings tab from the left navigation menu. Click Developer > Install Live Intercept.

Copy the code snippet under Main code block. It will be in the first tab. You can switch between tabs to copy and share all the required code snippets.

For any questions or guidance, please write to us at [email protected].

Do I need to implement changes in my website's content security policy (CSP)?

Yes. If your website has a CSP, add Marvin to it using the details below. If it doesn't, skip this section.

Add Marvin to your policy

script-src: https://app.heymarvin.com and https://staticprod.heymarvin.com
connect-src: https://app.heymarvin.com (Marvin's API)
frame-src: https://app.heymarvin.com (the interview opens in an iframe)
style-src: 'unsafe-inline' or your page's nonce
media-src: https://marvin-static-prod.s3.us-east-2.amazonaws.com

Include Live Intercept's styles

Live Intercept adds a small set of styles to your page. How you add them depends on whether your CSP uses a nonce:

If your CSP uses a nonce, add a nonce attribute to your existing Live Intercept snippet:

<script   
src="https://app.heymarvin.com/in-app-interviewer-loader.js"   
data-target-id="XXXXXXXXXXXXX"   
data-origin="https://app.heymarvin.com"   
nonce="YOUR_PAGE_NONCE"> 
</script>

Replace YOUR_PAGE_NONCE with the nonce your server creates for each page load. It's the same value as in your CSP header.

You can find the data-target-id in the main code block. This replaces your existing snippet, so don't add a second one.

If your style-src does not list a nonce, make sure style-src includes 'unsafe-inline'.

FAQs

Q. Can I install Live Intercept with Google Tag Manager?

A. Yes. Add the Live Intercept snippet as a Custom HTML tag:

In Google Tag Manager, go to Tags > New and choose Custom HTML as the tag type.
Paste the Live Intercept code snippet from Marvin.
Set the trigger to All Pages.
Save the tag, then Submit to publish your container.

Q. Tags are firing from Google Tag Manager, but Marvin shows that the domain is not connected. What should I do?

A. Open a page on your website/product. Your domain automatically connects the first time you do this after adding the code snippet. Because the code goes through Google Tag Manager, Marvin cannot verify it until you visit your website/product.

If you're still facing issues, write to us at [email protected] with the URL of the page where the tag fires.

Q. How do I collect user details and custom metadata with Google Tag Manager

A. Create a second Custom HTML tag with the user details snippet or custom metadata code, using GTM variables for the values.

Under Advanced Settings > Tag Sequencing, set the Live Intercept tag to fire before this second tag.