We have implemented Webchat using twilio/flex-webchat-ui
and it works great on localhost and on production, also on mobile browsers
but - on a QA tests we are having, it seems like some mobile versions are not supported.
we get a SecurityError: The operation is insecure.
message and
Actions: Error in action ToggleChatVisibility body: Expired token.
this is the list of non-loading phones:
- Iphone 11 Pro
- Iphone 12 Pro
- Iphone 12
- Iphone 12mini
- Iphone 13mini
- Iphone 13 Pro max
- Iphone 13
Does this ring any bells? is it true that Twillio will not support this?
This is the code for initializing
const webchatConfig: Record<any, any> = {
MainHeader: {
showImage: false,
titleText: windowTitle
},
MessagingCanvas: {
showTypingIndicator: true,
memberDisplayOptions: {
theirDefaultName: operatorName
}
}
};
const renderedWC = await renderWebChat({
accountSid: accountSid,
flexFlowSid: flowSid,
logLevel: "INFO",
chatFriendlyName: fullName,
context: {
friendlyName: fullName,
priority: 1,
campaignRunDebtId
},
colorTheme: {
overrides: brandedColors
},
startEngagementOnInit: true,
componentProps: webchatConfig,
available: true
});
const { manager } = renderedWC;
console.log("manager", manager);
manager.strings.WelcomeMessage = welcomeMessage;
manager.strings.PredefinedChatMessageAuthorName =
operatorName;
manager.strings.PredefinedChatMessageBody =
predefinedFirstMessage;
webChat.Actions.addListener("beforeSendMessage", (payload) => {
payload.messageAttributes = {};
payload.messageAttributes.fromWebChatDebtor = true;
payload.messageAttributes.debtId = debtId;
});
webChat.Actions.addListener("afterToggleChatVisibility", () => {
const webChatOpened =
manager.store.getState().flex.session.isEntryPointExpanded;
webChatOpened ? handleWebchatOpened() : handleWebchatClosed();
});
webChat.Actions.addListener("afterMinimizeChat", () => {
handleWebchatClosed();
});
webChat.initWithStrings(manager.strings);