Call

You have to go through a three-step form wizard to enable this Control, i.e., Design, API & Advance. Let’s explain these steps below:

1st Step – Design

  1. Database Field Name (mandatory): Defines the name of the database field to which the component's data will be mapped and stored.
  2. Button Text: The text displayed on the button.
  3. Button Color: Select an option from the dropdown menu to set the button's color.
  4. Button Icon: Select an option from the dropdown menu to add an icon to the button.
  5. Column Width: Specifies the width of a column in a layout or grid system, allowing control over how much space the column occupies relative to others.
  6. Enable Tooltip?: This button is set to “Yes” if you need to enable Tooltip Text in this Control.
    1. Tooltip Text: Defines the text to be displayed in the tooltip when the user hovers over the icon.
    2. Select Tooltip Position: Select the tooltip position from the following options: Top, Right, Bottom, or Left.

2nd Step – API

  1. Save
    1. Choose Data Source Save Log: Select a data source from the following options: AI, HTTP, Workflow, No SQL, or RDBMS.
      1. HTTP: Use the HTTP data source for API integration.
        1. Data Connection: The connection configuration for the HTTP data source.
        2. Method (mandatory): Select an HTTP method from GET, PUT, POST, PATCH, DELETE, or POCO.
        3. API URL (mandatory): The endpoint URL for the API request.
        4. Query Parameters: Define the parameters to be passed with the API request.
          1. Key: The parameter name.
          2. Value: The parameter value.
          3. Query Variable: A variable representing the query parameter.
          4. Select Type: The type of parameter to use, such as string or number.
        5. Headers: Specify the headers required for the API request.
          1. Name: The header name.
          2. Value: The header value.
        6. Others: Additional configurations for the HTTP data source.
          1. Enable raw query: Enable sending raw query data.
    2. Response Attribute: Attributes or data returned by the API after processing.
    3. Mapping Fields: Map fields between the data source and your application.
      1. Binding Field: The field from your application to bind to the data source.
      2. API Field: The corresponding field from the API response.
  2. Caller Id
    1. Choose Data Source Caller Id: Select a data source for fetching Caller ID from options such as AI, HTTP, Workflow, No SQL, or RDBMS.
      1. HTTP: Use the HTTP data source to fetch Caller ID details via API.
        1. Data Connection: The connection configuration for the HTTP data source.
        2. Method (mandatory): Select an HTTP method such as GET, PUT, POST, PATCH, DELETE, or POCO.
        3. API URL (mandatory): The URL endpoint for the API request.
        4. Query Parameters: Define parameters to be included in the API request.
          1. Key: The name of the query parameter.
          2. Value: The value of the query parameter.
          3. Query Variable: A variable representing the query parameter.
          4. Select Type: Specify the type of the query parameter, such as string or number.
        5. Headers: Provide header details required for the API request.
          1. Name: The header name.
          2. Value: The header value.
        6. Others: Additional configurations for the HTTP data source.
          1. Enable raw query: Enable sending raw query data in the API request.
    2. Response Attribute: Attributes or data returned by the API after processing.
    3. Key: The identifier used to map a specific field in the API response.
    4. Value: The data corresponding to the key in the API response.
  3. Contact List
    1. Choose Data Source Contact List: Select the data source for fetching the contact list from options like AI, HTTP, Workflow, No SQL, or RDBMS.
      1. HTTP: Use the HTTP data source to fetch contact list details via API.
        1. Data Connection: The configuration for connecting to the HTTP data source.
        2. Method (mandatory): Choose an HTTP method such as GET, PUT, POST, PATCH, DELETE, or POCO.
        3. API URL (mandatory): Specify the URL of the API endpoint for fetching the data.
        4. Query Parameters: Define key-value pairs to be sent as part of the API request.
          1. Key: The name of the query parameter.
          2. Value: The value assigned to the query parameter.
          3. Query Variable: A variable representing the query parameter.
          4. Select Type: Specify the data type for the query parameter, such as string or number.
        5. Headers: Provide header information required for the API request.
          1. Name: The name of the header.
          2. Value: The value of the header.
        6. Others: Additional configurations for the HTTP data source.
          1. Enable raw query: Enable sending raw query data as part of the API request.
    2. Response Attribute: Attributes or data returned by the API after the request is processed.

3rd Step – Advance

  1. Design
    1. Bootstrap Column Class: Specifies a predefined Bootstrap CSS class to style and format the component, enabling quick customization and responsive design.
    2. Custom Class: Specifies a user-defined CSS class to apply custom styles and formatting to the component.
    3. Button Size: Select the size of the button, such as small, medium, or large.
  2. Action
    1. Enter Manually: Provide the details manually for the specific field or configuration.
      1. Phone Numbers: Define the list of phone numbers manually.
        1. Display Field: The field to display in the user interface.
        2. Mapping Field: The field used for mapping phone numbers to the desired functionality.
    2. Enable Group Call: Toggle this option to enable the group call feature.
    3. Enable Joining Meeting: Toggle this option to allow participants to join a meeting.

Click “Confirm” and “Call” control is configured.