Widgets

A reference to the QuickBooks API Widgets that enable your application to connect and integrate with a QuickBooks Online company.

Connect to QuickBooks button

The user initiates the authorization flow to a QuickBooks Online company by clicking the Connect to QuickBooks button you provide in your app. Upon clicking this button, a popup window appears that begins the user authorization flow.  During this flow, the user selects a company and then authorizes your app to access the data.

Render the button

Use your own JavaScript to directly access any one of these button images.

Connect to QuickBooks button graphics

 WhiteGreenImage files
SmallFile:0050_QuickBooks_API/0020_Authentication_and_Authorization/Widgets/C2QB_white_btn_sm_default.pngFile:0050_QuickBooks_API/0020_Authentication_and_Authorization/Widgets/C2QB_green_btn_sm_default.png

Download button images

Includes Connect to QuickBooks graphics in png format, both base and hover states.

MediumFile:0050_QuickBooks_API/0020_Authentication_and_Authorization/Widgets/C2QB_white_btn_med_default.pngFile:0050_QuickBooks_API/0020_Authentication_and_Authorization/Widgets/C2QB_green_btn_med_default.png
largeFile:0050_QuickBooks_API/0020_Authentication_and_Authorization/Widgets/C2QB_white_btn_lg_default.pngFile:0050_QuickBooks_API/0020_Authentication_and_Authorization/Widgets/C2QB_green_btn_lg_default.png

Connect to QuickBooks button graphics for FR locale

 WhiteGreenImage files
SmallFile:0050_QuickBooks_API/0020_Authentication_and_Authorization/Widgets/C2QB_white_btn_sm_default.pngFile:0050_QuickBooks_API/0020_Authentication_and_Authorization/Widgets/C2QB_green_btn_sm_default.png

Download FR-locale button images

Includes Connect to QuickBooks graphics in png format, both base and hover states.

MediumFile:0050_QuickBooks_API/0020_Authentication_and_Authorization/Widgets/C2QB_white_btn_med_default.pngFile:0050_QuickBooks_API/0020_Authentication_and_Authorization/Widgets/C2QB_green_btn_med_default.png
largeFile:0050_QuickBooks_API/0020_Authentication_and_Authorization/Widgets/C2QB_white_btn_lg_default.pngFile:0050_QuickBooks_API/0020_Authentication_and_Authorization/Widgets/C2QB_green_btn_lg_default.png
  • Display this button to users who have not authorized access, yet. That is, not connected to a QuickBooks Online company.
  • Include this button on any page in your app.
  • Do not modify the appearance of any button graphics.

Sign in with Intuit button

To enable your user to sign into your app with their Intuit user ID (email) and password, provide the Sign in with Intuit button in your app. Upon clicking this button, the browser is redirected to the Intuit App Center sign-in window, which prompts the user to log in with the Intuit user ID (email) and password.  After user authentication is complete, the browser is redirected back to your app. 

 If you're implementing modified single sign-on, adding this button is optional.

Render the button

Use your own JavaScript to render any one one of these button graphics.

Sign in with Intuit button graphics

 WhiteBlueImage files
SmallFile:0050_QuickBooks_API/0020_Authentication_and_Authorization/Widgets/Sign_in_white_btn_sm_default.pngFile:0050_QuickBooks_API/0020_Authentication_and_Authorization/Widgets/Sign_in_blue_btn_sm_default.png

Download Files

Includes Sign in with Intuit graphics in png format. Includes base and hover states.

MediumFile:0050_QuickBooks_API/0020_Authentication_and_Authorization/Widgets/Sign_in_white_btn_med_default.pngFile:0050_QuickBooks_API/0020_Authentication_and_Authorization/Widgets/Sign_in_blue_btn_med_default.png
LargeFile:0050_QuickBooks_API/0020_Authentication_and_Authorization/Widgets/Sign_in_white_btn_lg_default.pngFile:0050_QuickBooks_API/0020_Authentication_and_Authorization/Widgets/Sign_in_blue_btn_lg_default.png

Retina images

 WhiteBlueImage files
SmallIntuitSignIn-sm-white2x.jpgIntuitSignIn-sm-blue2x.jpg

Download files

Includes Sign in with Intuit graphics in jpg format. Includes base and hover states.

MediumIntuitSignIn-med-blue@2x.jpg
LargeIntuitSignIn-lg-white@2x.jpgIntuitSignIn-lg-blue@2x.jpg

Implement your own on-click method to invoke the destination URL that sends the authentication request and to define classes for both base and hover states.

  • Place this button anywhere on a page, display it only for users not already signed in.

  • Preserve the appearance or behavior of any graphics you use directly.
  • Don't use a link or another widget to start the sign in process.

 Got Questions? Get Answers in our developer forums.