CODEWITHSUNDEEP
javascriptreactjs
Srivathsa
Srivathsa

Reputation: 961

Use freshdesk feedback widget in React.js application

I am trying to use Freshdesk's feedback widget in my React.js application. I am trying to initialize and show the widget in my root component's componentDidMount method as follows

var App = React.createClass({
  componentDidMount: function() {
    FreshWidget.init("", {"queryString": "&widgetType=popup", "utf8": "✓", "widgetType": "popup", "buttonType": "text", "buttonText": "Support", "buttonColor": "white", "buttonBg": "#006063", "alignment": "4", "offset": "235px", "formHeight": "500px", "url": "<myfreshdeskurl>"} );
    FreshWidget.show();
  }
});

The widget is not getting displayed and the following error is thrown in the console

Freshdesk Error:  TypeError: Cannot read property 'style' of null
at f (http://assets.freshdesk.com/widget/freshwidget.js:1:4741)
at http://assets.freshdesk.com/widget/freshwidget.js:1:6412
at e (http://assets.freshdesk.com/widget/freshwidget.js:1:38)
at Object.C.show (http://assets.freshdesk.com/widget/freshwidget.js:1:6392)
at React.createClass.componentDidMount (http://localhost:2345/:14673:15)
at CallbackQueue.assign.notifyAll (http://localhost:2345/:102289:22)
at ReactReconcileTransaction.ON_DOM_READY_QUEUEING.close (http://localhost:2345/:115822:26)
at ReactReconcileTransaction.Mixin.closeAll (http://localhost:2345/:119697:25)
at ReactReconcileTransaction.Mixin.perform (http://localhost:2345/:119638:16)
at batchedMountComponentIntoNode (http://localhost:2345/:113776:15)

Upvotes: 3

Views: 4551

Answers (1)

Andre Meyer
Andre Meyer

Reputation: 46

You have to pass another property in the FreshWidget.init options object:

FreshWidget.init("", {"loadOnEvent": 'immediate',...});

Otherwise the widget will wait for window.load which has already happened.

Also make sure to wait until html2canvas has been loaded when using the screenshot option, otherwise you will get another error:

function showWhenHTML2CanvasIsAvailable() {
    if (window.html2canvas) {
        window.FreshWidget.show();
    } else {
        setTimeout(showWhenHTML2CanvasIsAvailable, 100);
    }
}

showWhenHTML2CanvasIsAvailable();

Upvotes: 3

Related Questions