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.

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.

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 the 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 with a query and returns JSON payload.

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 (optional). If present, this is the endpoint Dixa will call for dynamic data. The variable needs to be in a query request. You can use the following variables in the URL:
    VariableDescription
    {{calling_phone_number}}The calling phone number (available for phone conversations)*
    {{called_phone_number}}The called phone number (available for phone conversations)*
    {{customer_phone_number}}The customer's phone number (available for phone conversations)*
    {{agent_phone_number}}The agent's phone number (available for phone conversations)*
    {{widget_id}}The Dixa chat Widget ID*
    {{facebook_page_id}}The Facebook Page ID*
    {{sending_email}}The sending email (available for email/contactform conversations)*
    {{receiving_email}}The receiving email (available for email/contactform conversations)*
    {{agent_email}}The agent's email (available for email/contactform conversations)*
    {{customer_email}}The customer's email (available for email/contactform conversations)*
    {{a_phone_number}}Caller’s phone number (typical user’s numbers)*
    {{b_phone_number}}The receiver's number (typical your organization number) (available for phone conversations)*
    {{a_email}}The sender's email address*
    {{b_email}}The receiver’s email address (available for email conversations)*
    {{csid}}The conversation id in Dixa


    (*) Variables which have any invalid URL characters (eg. @ in email or + in phone number) already encoded for query string parameters(as an example `?email={{a_email}}). Being compliant with RFC 3986 encoding should not be applied if variable is a part of a path (as an example /test/{{a_email}}).

  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 base64 (user:password).
    An example could be:
    base64(dixa:secretPassword) would be ZGl4YTpzZWNyZXRQYXNzd29yZA==
    The header name is Basic
    So the complete basic auth header would be:
    Basic: ZGl4YTpzZWNyZXRQYXNzd29yZA==

    It is also possible to use Bearer authorization.
    Bearer <token>
  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.

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.

Go to Settings and select Custom Cards.

https://cdn.elev.io/file/uploads/FGTk8scc8Nk5AQVpPDURPUYrvxqg4K4sqg5u1k2QqLo/usJbOnZooThFcpyywVlCJI6AocvfPfEPicYl9r-nx1E/Integrations-aGM.png


https://cdn.elev.io/file/uploads/FGTk8scc8Nk5AQVpPDURPUYrvxqg4K4sqg5u1k2QqLo/RqXWjGGTK0Naa1_nbFXwdVDlvtEU3JSMJCfz2HKdFYE/Integrations 2-WVo.png


https://cdn.elev.io/file/uploads/FGTk8scc8Nk5AQVpPDURPUYrvxqg4K4sqg5u1k2QqLo/jQSJ7HNudS_o6iZ0ZwtbkcVR_LvJbh90R7ZJzcoR4gQ/Integrations 3-MXU.png



Examples:

https://cdn.elev.io/file/uploads/FGTk8scc8Nk5AQVpPDURPUYrvxqg4K4sqg5u1k2QqLo/drQry6SqsO7SEXOnYtcFRq4Zr7dh-VQNoxrI9lnA6f0/Integrations 4-nVM.png


https://cdn.elev.io/file/uploads/FGTk8scc8Nk5AQVpPDURPUYrvxqg4K4sqg5u1k2QqLo/_jAsFLEwYXCQjcPtBxa1D4NCtB3q4AhBAQmhWUmc-eQ/Integrations 5-F7Y.png


https://cdn.elev.io/file/uploads/FGTk8scc8Nk5AQVpPDURPUYrvxqg4K4sqg5u1k2QqLo/2I7V0hnELOxdSKtUQxzDNwkOkOzH3xhgwu4-Lox2UNo/Integrations 6-LMg.png