Customize the Kustomer view

Custom Insight Cards provide some of the most versatile functionality possible within the Kustomer platform. You can use these cards to provide information to users, create processes, or provide anything an agent may otherwise need within arm's reach. 

Sometimes, you may want an insight card to display only for a particular team in your platform. For instance, you may have an escalation process that runs through an insight card that is necessary for your agents but not your managers. The instructions below will help you implement an insight card that can only be seen by users on a particular team you designate.

In this article

• Create a team-based Insight Card
• How this works

Create a team-based Insight Card

1. Find the ID of a team for which you wish to access a specific insight card. This ID can be found at the end of the web URL in your browser when editing a team's details in the Kustomer app.
   
2. To create an Insight Card, go to Settingsand select Platform > Klasses.
3. Add a new Klass, or select the one you want to create an Insight Card for.
4. Select the Insight Card tab and then select Create Insight Card. For more information, see Customize Insight Cards.
5. Select View Code at the bottom of the editor and then Convert to Code.
6. Paste the following code in the editor:

   {_.get(currentUser, 'teams', []).map(team => team.id).find(teamId => ["TEAM_ID_GOES_HERE"].includes(teamId)) && <div>
   
   { /* START OF INSIGHT CARD CONTENTS */ }
   THIS IS WHERE YOUR INSIGHT CARD CONTENTS GOES
   { /* END OF INSIGHT CARD CONTENTS */ }
   </div>
   }		

7. Replace TEAM_ID_GOES_HERE in the first line with the ID you obtained in step 1. Do not remove the double quotations. 
8. Insert the code of the insight card you wish to have run or display for people assigned to this team by replacing the THIS IS WHERE YOUR INSIGHT CARD CONTENTS GOES text on the code sample above. When finished, Save your changes.

How this works

At this point, you have an insight card with contents that will only be displayed for users who are on a particular team within your platform. These users do not need to log in as that team; only assigned to the team. 

If a user is not on the team this insight card was created for, they will still see the title of the insight card when viewing the card's context, but they will not be able to see its contents.

You can leverage the code below to display additional code based on several teams. If someone is on the first and second team designated below, they will see their insight card as if the code designated within the first and second team is running, but the code for the third team will be omitted.

return(    <>    
{_.get(currentUser, 'teams', []).map(team => team.id).find(teamId => ["FIRST_TEAM_ID_GOES_HERE"].includes(teamId)) && <div>
{ /* START OF INSIGHT CARD CONTENTS */ }
THIS IS THE TEXT AND CONTENT SEEN BY THE FIRST TEAM
{ /* END OF INSIGHT CARD CONTENTS */ }
</div>}
{_.get(currentUser, 'teams', []).map(team => team.id).find(teamId => ["SECOND_TEAM_ID_GOES_HERE"].includes(teamId)) && <div>
{ /* START OF INSIGHT CARD CONTENTS */ }
THIS IS THE TEXT AND CONTENT SEEN BY THE SECOND TEAM
{ /* END OF INSIGHT CARD CONTENTS */ }
</div>}
{_.get(currentUser, 'teams', []).map(team => team.id).find(teamId => ["THIRD_TEAM_ID_GOES_HERE"].includes(teamId)) && <div> 
{ /* START OF INSIGHT CARD CONTENTS */ } 
THIS IS THE TEXT AND CONTENT SEEN BY THE THIRD TEAM 
{ /* END OF INSIGHT CARD CONTENTS */ } 
</div>}   
</>);