Add Knock Chat to your product onboarding

Give new users a direct way to talk to your team while they are onboarding to your product.

Instead of sending users to a generic support or sales page, you can identify them in Knock as soon as they sign up and connect them to a Knock chat experience from inside your onboarding flow.

This is especially useful for product-led companies where a new user may want to:

• Ask a question while setting up the product
• Get help with an advanced use case
• Discuss pricing or plan options
• Talk to your team before completing onboarding
• Continue a conversation they already started with your company

Because your product already knows who the user is, you can identify them in Knock without asking them to enter their information again.

How it works

The flow is:

1. The user signs up or logs in to your product.
2. Identify the user with Knock.
3. Show a Knock chat link or button anywhere in your onboarding flow.
4. Wrap the Knock link before sending the user to it.

The Knock tag must already be installed on your product.

1. Identify the user after signup

Once you know who the user is, call Knock.identify().

function knockIdentify(traits) {
  if (window.Knock) {
    window.Knock.identify(traits);
  } else {
    window.addEventListener(
      'knock:ready',
      () => window.Knock.identify(traits),
      { once: true }
    );
  }
}

Then pass the information you already have from signup:

knockIdentify({
  email: 'jane@example.com',
  firstName: 'Jane',
  lastName: 'Doe',
});

email is the most valuable field because it ties the session to a person.

You can also pass additional traits you already know:

knockIdentify({
  email: 'jane@example.com',
  firstName: 'Jane',
  lastName: 'Doe',
  company: 'Acme',
  plan: 'pro',
});

When to identify the user

Call identify() whenever your product knows who the user is.

Calling it more than once is fine. Later calls can add information you now know about the user.

2. Add a Knock chat link to onboarding

You can now add a Knock chat entry point anywhere in your onboarding experience.

For example:

Need help? Talk to us

Discuss your use case

Talk to our team

Questions about pricing?

When sending the user to a Knock destination, wrap the link with Knock.wrapLink():

function knockWrapLink(url) {
  if (window.Knock) {
    return window.Knock.wrapLink(url);
  }

  return url;
}

Then open your Knock chat link:

window.location.href = knockWrapLink(knockChatUrl);

Or open it in a new tab:

window.open(knockWrapLink(knockChatUrl), '_blank');

Wrapping the link attaches Knock's visitor ID so the session on the Knock destination is connected to the same person.

Example onboarding experience

Imagine Jane signs up for your product.

After signup, your product already knows:

knockIdentify({
  email: user.email,
  firstName: user.firstName,
  lastName: user.lastName,
});

Later in onboarding, Jane sees:

Need help setting this up? Talk to us

When she clicks it:

window.location.href = knockWrapLink(knockChatUrl);

The Knock destination can stay connected to the same visitor instead of starting with an unrelated session.

This lets you create a more continuous experience between your product and the conversations users have with your company.

Why wrap the Knock link?

Knock.wrapLink() carries Knock's visitor ID to the Knock destination.

Use it for Knock links such as:

• Chat links
• Slack links
• Meeting links

Do not use it for regular links inside your product or unrelated third-party destinations.

If the Knock tag has not loaded yet

wrapLink() needs to return a URL immediately.

If Knock has not loaded yet, return the original URL:

function knockWrapLink(url) {
  if (window.Knock) {
    return window.Knock.wrapLink(url);
  }

  return url;
}

The destination still works. It simply won't include the Knock visitor ID.

For the complete API reference, see Identifying leads and wrapping Knock links.

On this page

• Add Knock Chat to your product onboarding
• How it works
• 1. Identify the user after signup
• When to identify the user
• 2. Add a Knock chat link to onboarding
• Example onboarding experience
• Why wrap the Knock link?
• If the Knock tag has not loaded yet