reset / start new chat with dialogflow messenger - does this require a custom frontend?

[Joe_McFadden]

Hi,

I have a dialogflow CX chatbot which currently uses Google's Dialogflow Messenger widget as a frontend. I'm using the unauthenticated API setup as per the docs here:
https://cloud.google.com/dialogflow/cx/docs/concept/integration/dialogflow-messenger

I'd now like to customise the chat dialog to include an icon or button which lets users reset the chat history, starting a new chat.

I know that if I use the storage-option="none" customisation on the df-messenger element, the chat dialog  will clear when the page is refreshed/reloaded.

However I would like there to be a visible UI element for the user to reset the chat and go back to the welcome intent. Ideally, I'd like this be in the chat title bar, next the title.

From the docs, it seems there isn't any way to achieve this via HTML / CSS customisations 
https://cloud.google.com/dialogflow/cx/docs/concept/integration/dialogflow-messenger/html

I could instead use javascript to manipulate the shadow DOM for the chat dialog, and insert the desired 'new chat' element. This could then call a webhook when clicked - it looks like I'd need it to invoke the END_SESSION symblic transition target to clear the current sesssion. I'm concerned this wouldn't be a very robust solution, as changes to the df messenger UI from Google could  break my customisation. Are there other more maintainable ways of acheiving my requirement here?

[ruthseki · Accepted solution]

Hi @Joe_McFadden,

Welcome to Google Cloud Community!

You are right, achieving a seamless reset button within the Dialogflow Messenger widget directly without a custom frontend can be challenging. The Dialogflow Messenger widget is designed to handle chat interactions but doesn't provide built-in mechanisms for directly resetting the chat session without reloading the page. However, you may want to try an alternative approach where you can use Dialogflow CX Messenger fulfillment to create Text Responses and Custom Payloads. Button response type is an instance where you can configure a custom payload. The button response type is a small button with an icon that users can click or touch.

You can also file a feature request to let you customize the Dialogflow Messenger widget using your preference so that our Engineering Team can look into it. Note that there’s no definite date as to when this will be implemented. For future updates related to Dialogflow, I suggest keeping an eye out on the issue tracker and release notes.

I hope the above information is helpful.

[Joe_McFadden]

Thank you @ruthseki - I will look into implementating this with a Button response type as you have suggseted.

[Joe_McFadden]

@ruthsekisorry I should have asked this follow-up after your original answer, but would you suggest a particular type of fulfilment state handler as being most suited to this use-case, where I want the button to be added to all responses? I'm trying it with a condition handler that always evaluates to true - but is there a better way of doing this.