How to hide chat widget on page leave.

[Saqib92]

Is your feature request related to a problem? Please describe.
How can I hide / Destroy chat widget on page leave. I dont want to show chat widget on all pages. i have a support page and want to show chat only on support page.

Describe the solution you'd like
there should be an option to show/hide on widget.

Describe alternatives you've considered
i hide it via css.

Additional context
I am using angular with ionic framework. and i want to hide it using *ngIf or is there an directive available ?

[walaszczykm]

Hello @Saqib92 👋

If you would like to hide the Chat Widget on particular pages you can use visibility="hidden" component property. Later if you would like to show it again, change the value to visibility="minimized" for example. You can read about all available component properties here: #config-data.

In case you would like to destroy the widget completely, just use *ngIf on the <livechat-widget> element.

• Setting it to false value would cause the ngOnDestroy to be called which destroys current widget instance.
• Setting it to true value would cause the ngOnInit to be called which initialize new widget instance.

[Saqib92]

dynamic visibility="hidden" is not working.
I tried Ionic Life cycle hook:

page.ts

myVisibilityVariable: string = 'minimized'; // by default;

ionViewDidEnter(){ // WillEnter workd when page loads. 
    this.myVisibilityVariable = 'minimized';
}

ionViewDidLeave(){. // didLeave works when page changed.
    this.myVisibilityVariable = 'hidden'; // not working
}

page.html

[visibility]="myVisibilityVariable" // not working

visibility="{{myVisibilityVariable}}" // not working 

[RanganadhCreditcorp]

Hi @Saqib92, I have tried it the same way, it is maximizing/minimizing/hiding the widget fine for me now.
I have added livechat-widget in app.component.html, so it is working as the model defined in app.component.ts.

But I am looking to find the solution to hide/maximize/minimize the widget from other component like Login.component/AccountDetails.component.

Do you have any solution for the same, much like we do in js as below, I need to implement in angular, please help me out.

LiveChatWidget.get(‘chat_data’)
LiveChatWidget.call(‘set_customer_name’, ‘Test’)
LiveChatWidget.call(‘set_customer_email’, ‘testemail@gmail.com’)
LiveChatWidget.call(‘maximize’)
LiveChatWidget.call(‘minimize’)
LiveChatWidget.call(‘hide’)

Please note that, LiveChatWidget is globally accessible in js, I should be able to do these where ever is required across the application in Angular.

@walaszczykm please help me to proceed further.

[Saqib92]

Hi @Saqib92, I have tried it the same way, it is maximizing/minimizing/hiding the widget fine for me now. I have added livechat-widget in app.component.html, so it is working as the model defined in app.component.ts.

But I am looking to find the solution to hide/maximize/minimize the widget from other component like Login.component/AccountDetails.component.

Do you have any solution for the same, much like we do in js as below, I need to implement in angular, please help me out.

LiveChatWidget.get(‘chat_data’) LiveChatWidget.call(‘set_customer_name’, ‘Test’) LiveChatWidget.call(‘set_customer_email’, ‘testemail@gmail.com’) LiveChatWidget.call(‘maximize’) LiveChatWidget.call(‘minimize’) LiveChatWidget.call(‘hide’)

Please note that, LiveChatWidget is globally accessible in js, I should be able to do these where ever is required across the application in Angular.

@walaszczykm please help me to proceed further.

you can do something like this: #40 (comment)
with the help you SubjectBehaviour Service.

[RanganadhCreditcorp]

@Saqib92 Thanks for the prompt reply, I have tried the BehaviourService too in other components.
I tried updating the properties using WidgetState, but the property values are not updating at the widget side.
I am not sure, may be these WidgetStateSubject, WidgetStateService are meant for read-only.

[RanganadhCreditcorp]

@walaszczykm please help me to proceed further.