Static Appearance Customizations

The user interface components shown by the BoldChatViewController are all created from separate xibs.

The default xibs are all bundled in the framework's Resource directory. They are all to be added to the project, if the default appearance of the view controller is used. Of course they all can be modified, as far as their owners are kept the same. In the view settings the name of the xibs can be set, so custom xibs can be added as far as the file's owner is the same respectively. So the application can have more than one group of xibs to be able to display differently styled chats in the same application. If you set any of the xib name, you need to give the name of it in your bundle without xib extension. The pre defined owners all contain the IBOutlets and IBActions. They implement all IBActions that are specified, and set titles/texts of IBOutlets. Any of the IBOutlets can be disconnected in the xib, but the functionality that is implemented by it will be missing.

The Main xib

The view controller has distinct views for the following UI items:

errorView
endView
pre-chat form
unavailable chat form
chat view
post-chat form
loadingView

Only one of them is visible at the same time except for the loading view. The loading view always appear on top of all views. This xib contains the design for the error, end and loading views.

View Settings property name: mainViewXibName

Default xib name: BCMainView.xib

File's owner: BoldChatViewController

IBOutlets:

view: The main view, holding all views in the chat as subviews.
endview: A view that is shown when the chat session finished successfully.
endLabel: It is placed on endView. It's text is set by the component.
errorview: If an error happened in the chat, this view is shown.
errorLabel: The error text that is shown on error. The text is set by the component.
loadingview: A view that hides the whole view when there is an ongoing asynchronous request.
loadingActivityIndicator: The UIActivityIndicator for loading.
chatHolderView: A view that the chat view is put on. It is for handling view hierarchy.
preChatHolderView: A view that the pre-chat form is put on.
postChatHolderView: A view that the post-chat form is put on.
unavailableChatHolderView: A view that the unavailable chat view is put on.
mainExternalActionButton: The main external action button. If pressed and set to the mainExternalActionPressed:, the boldChatViewControllerMainExternalActionPressed: external action is called. Custom operations, like initiating to hide the view controller, can be implemented through it.
endExternalActionButton: The end external action button. If pressed and set to the endExternalActionPressed:, the boldChatViewControllerEndExternalActionPressed: external action is called. Custom operations, like initiating to hide the view controller, can be implemented through it.
errorExternalActionButton: The error external action button. If pressed and set to theerrorExternalActionPressed:, the boldChatViewControllerErrorExternalActionPressed:IBAction external action is called. Custom operations, like hiding the view controller, can be implemented through it.

IBActions:

mainExternalActionButtonPressed: It calls boldChatViewControllerMainExternalActionPressed external action.
endExternalActionButtonPressed: It calls boldChatViewControllerEndExternalActionPressed external action.
errorExternalActionButtonPressed: It calls boldChatViewControllerErrorExternalActionPressed external action.

Form xib

Pre-chat, post-chat and unavailable chat forms use the same form architecture. They are treated as a tableview of form fields. This xib holds the tableview that is instantiated in three instances for the three forms. The fields of the forms are cells of the tableview. The cell layouts are in separate xibs by type. There are also some section header and footer defined for few of the forms.

View Settings property name: formViewXibName

Default xib name: BCFormView.xib

File's owner: BCFormViewLogic

IBOutlets:

view: The view holding the table view.
tableView: The table view of the actual form.

The Single Line Input Cell

This is a single line input cell. The email and phone number type inputs are separate in xibs.

View Settings property name: singleLineCellXibName

Default xib name: BCSingleLineCell.xib

File's owner: BCSingleLineCellLogic

IBOutlets:

cell: The cell itself.
titleLabel: The title of the field.
textField: The text input for the field.
requiredLabel: The required text is put here if the field is requested to be filled.
missingView: If the form was attempted to be submitted with at least a required field not having been filled, this view is shown.

The Single Line Email Input Cell

This is similar to single line input, but serves for taking email addresses.

View Settings property name: singleLineEmailCellXibName

Default xib name: BCSingleLineEmailCell.xib

File's owner: BCEmailCellLogic

IBOutlets:

cell: The cell itself.
titleLabel: The title of the field.
textField: The text input for the field.
requiredLabel: The required text is put here if the field is requested to be filled.
missingView: If the form was attempted to be submitted with at least a required field not having been filled, this view is shown.
invalidEmailView: This view is shown if the field is not empty, but the content is not a valid email address.

The Single Line Phone Input Cell

This is similar to single line input, but serves for taking phone numbers.

View Settings property name: singleLinePhoneCellXibName

Default xib name: BCSingleLinePhoneCell.xib

File's owner: BCPhoneCellLogic

IBOutlets:

cell: The cell itself.
titleLabel: The title of the field.
textField: The text input for the field.
requiredLabel: The required text is put here if the field is requested to be filled.
missingView: If the form was attempted to be submitted with at least a required field not having been filled, this view is shown.
invalidPhoneNumberView: This view is shown if the field is not empty, but the content is not a valid phone number.

The Multi Line Input Cell

It is a multiline input cell.

View Settings property name: multiLineCellXibName

Default xib name: BCMultiLineCell.xib

File's owner: BCMultiLineCellLogic

IBOutlets:

cell: The cell itself.
titleLabel: The title of the field.
textView: The text input for the field.
requiredLabel: The required text is put here if the field is requested to be filled.
missingView: If the form was attempted to be submitted with at least a required field not having been filled, this view is shown.

The Selection Cell

If a form field is Select or Radio typed, it is displayed in two cells. The selection cell contains the title and the actual selected value. The other is the option picker cell. The option picker cell is hidden by default. If the selection cell is tapped, the corresponding picker cell becomes visible under it. Any second tap on selection cell, or taping on an other form field removes the picker.

View Settings property name: selectionCellXibName

Default xib name: BCSelectionCell.xib

File's owner: BCSelectionCellLogic

IBOutlets:

cell: The cell itself.
titleLabel: The title of the field.
valueLabel: The result of the selection is displayed here.
requiredLabel: The required text is put here if the field is requested to be filled.
missingView: If the form was attempted to be submitted with at least a required field not having been filled, this view is shown.

The Picker Cell

The picker for a selection.

View Settings property name: pickerCellXibName

Default xib name: BCPickerCell.xib

File's owner: BCRatingCellLogic

IBOutlets:

cell: The cell itself.
pickerView: The UIPickerView for the selection.
missingView: Inherited but never user property.

The Star Rating Cell

A star rating cell with one to five stars. It uses a modified ASStarRatingView that can be customized separately.

View Settings property name: ratingCellXibName

Default xib name: BCRatingCell.xib

File's owner: BCRatingCellLogic

IBOutlets:

cell: The cell itself.
titleLabel: The title of the field.
starRatingView: The star rating view. It has the interface of BCStarRatingView, its properties can be modified in the view's "User Defined Runtime Attributes" in Interface builder. The rating property needs to be key-value compliant.
requiredLabel: Not used.
missingView: If the form was attempted to be submitted with at least a required field not having been filled, this view is shown.

The Submit Button Cell

The form submission style can be set to have the submit button as the last cell of the form. In this case the submit button is customized through this xib.

View Settings property name: buttonCellXibName

Default xib name: BCButtonCell.xib

File's owner: BCButtonCellLogic

IBOutlets:

cell: The cell itself.
button: The button to be pressed to submit the form.

The Pre-Chat Header

The pre-chat form's first section has a header with a text. It is displayed with this view.

View Settings property name: preChatHeaderXibName

Default xib name: BCPreChatHeaderView.xib

File's owner: BCPreChatHeaderLogic

IBOutlets:

cell: The cell itself.
label: Text set by the framework.

The Post-Chat Header

The post-chat form's first section has a header with a text. It is displayed with this view.

View Settings property name: postChatHeaderXibName

Default xib name: BCPostChatHeaderView.xib

File's owner: BCPostChatHeaderLogic

IBOutlets:

cell: The cell itself.
label: Text set by the framework.

The Post-Chat Email Footer

The post-chat form's first section is an email field. Its footer is this view.

View Settings property name: postChatEmailFooterXibName

Default xib name: BCPostChatEmailFooterView.xib

File's owner: BCPostChatEmailFooterLogic

IBOutlets:

cell: The cell itself.
label: Text set by the framework.

The Unavailable Chat Header

The unavailable chat form's first section has a header with a text. It is displayed with this view.

View Settings property name: unavailableChatHeaderXibName

Default xib name: BCUnavailableChatHeaderView.xib

File's owner: BCUnavailableChatHeaderLogic

IBOutlets:

cell: The cell itself.
label: Text set by the framework.

The Chat View

The chat view appearance is in a separate xib. It has a lot of items. One important component is the chat history web view. The messages sent by the agent can be arbitrary html texts, and they can only be shown effectively in one web view. The displaying html name is set by chatHistoryHtmlName property. The chat view has many dynamic behaviors that can be customized by adding a custom chatViewEventHandler .

View Settings property name: chatViewXibName

Default xib name: BCChatView.xib

File's owner: BCChatViewLogic

IBOutlets:

view: the view that holds all other elements.
cancelChatButton: The button that cancels the chats and requests to fill unavailable chat form. Shown when the user is in a queue of an agent.
chatHistoryWebView: The web view holding the previous chat messages in timed order.
chatHistoryWebViewHolderView: A view behind the webview.
emailChatHistoryButton: Requests to send the chat transcript when the chat ends. Brings up an alert view to ask for the email to send the transcript.
endChatButton: Finish chat button.
inputTextView: The input text view. It follows BCTextViewWithPlaceHolder protocol to be able to add placeholder text.
inputHolderView: View behind the inputTextView and sendButton.
queuePositionLabel: Label displaying the queue position of the customer.
sendButton: Send message button.
typingLabel: Agent or agents typing label.
chatExternalActionButton: The main external action button. If pressed and set to the chatExternalActionPressed:, the boldChatViewControllerChatExternalActionPressed: external action is called. Custom operations, like initiating to hide the view controller, can be implemented through it.

IBActions

cancelChatPressed: Action for cancel chat to answer unavailable chat form.
emailChatHistoryPressed: Request to add an email address to send the chat transcript to.
endChatPressed: finish chat action.(Not connected by default)
sendButtonPressed: Action for sending the text typed into the inputTextView.
chatExternalActionButtonPressed: It calls boldChatViewControllerChatExternalActionPressed external action.

The displayed chat list

The chat history is displayed in a web view. The chat messages are intended to be added with JavaScript functions in the html. This html name can be set here. The actual insertion of chat messages happen by the ChatViewEventHandler.