Custom Cards in Dixa

With Custom Cards you can display information from external sources, for instance, your CRM system in the conversation view in Dixa, so the agent has all the necessary information available to them without having to switch between systems. All you need to do is add some code.

You can get information by searching the customer's email address and phone number. To give some examples, we see customers using Custom Cards for:

  • Order history
  • Shipping status of latest purchase
  • Subscription status
  • Invoice history

The possibilities are virtually endless.

At your end

  1. You have to add an HTTPS API endpoint that responds to GET requests and return JSON.

Adding a Custom Card in Dixa

  1. Go to Settings
  2. Go to Integrations
  3. Click on Custom Card
  4. Click on Add Custom Card
  5. Enter a Title for the Custom Card. This will be the header in the conversation view.
  6. Enter a HOOK URL. This is the endpoint Dixa will call for dynamic data. You can use the following variables in the url:

    {{calling_phone_number}} - The calling phone number{{called_phone_number}} - The called phone number.
    {{customer_phone_number}} - The customer's phone number
    {{agent_phone_number}} - The agent's phone number
    {{widget_id}} - The Dixa chat Widget ID
    {{facebook_page_id}} - The Facebook Page ID
    {{sending_email}} - The sending email
    {{receiving_email}} - The receiving email
    {{agent_email}} - The agent's email
    {{customer_email}} - The customer's email
    {{a_phone_number}} - Caller’s phone number (typical user’s number).
    {{b_phone_number}} - The receiver's number (typical your organization number).
    {{a_email}} - The sender's email address.
    {{b_email}} - The receiver’s email address.
    {{csid}} - The conversation id in Dixa.

    For example:{{a_phone_number}}&csid={{csid}}

    * Remember to encode any invalid URL characters (eg. @ in email) before sending it. You can use Liquid {{ “” | url_encode }} method to do that.
  7. Add an optional Authorization Header.
    To make this secure you can use the authorization header by adding an auth token and Dixa will use this token on each request to the hook URL.

    The authorization should be Basic base64(user:password).
  8. Add HTML that will render the information from the external system.
    The template can be written in HTML and supports Liquid too.

Be careful not to affect anything globally. Use a styling wrapper if you add any custom styling.

  1. Add Data Fields to your profile with a webhook. Your server should respond to a GET request containing the user’s email address or phone number and return data fields as JSON.

Be careful not to affect anything globally. Use a styling wrapper if you add any custom styling.

When the Custom Card is set up correctly, information from your external system will be displayed in the conversation view.

It is possible to add multiple Custom Cards.

Go to Settings and select Custom Cards. 2-WVo.png 3-MXU.png

Examples: 4-nVM.png 5-F7Y.png 6-LMg.png