Skip to main content

Screenshots Inventory for OneTap Login Documentation

This document lists all screenshots needed for the complete documentation. After taking each screenshot, check it off and note the filename.

Guidelines​

  • Format: PNG (preferred) or JPEG
  • Width: 1200px maximum (will be displayed at various sizes)
  • Quality: High, no compression artifacts
  • Annotations: Use red arrows/boxes for highlighting when needed
  • Naming: Use exact filenames listed below
  • Location: Save to /docs-site/static/img/

Getting Started (9 screenshots)​

WordPress Installation​

#FilenameDescriptionStatus
1wordpress-plugin-search.pngWP Admin > Plugins > Add New, search "OneTap Login" showing results[ ]
2plugin-install-activate.pngPlugin card with "Install Now" and "Activate" buttons[ ]

Google Cloud Console Setup​

#FilenameDescriptionStatus
3google-cloud-console-new-project.pngGoogle Cloud Console > New Project dialog[ ]
4google-cloud-enable-api.pngAPIs & Services > Library > "Google Identity" search results[ ]
5google-cloud-create-credentials.pngAPIs & Services > Credentials > Create Credentials dropdown[ ]
6google-cloud-oauth-consent-screen.pngOAuth consent screen configuration form[ ]
7google-cloud-oauth-origins-uris.pngOAuth 2.0 Client ID form showing Authorized JavaScript origins and Redirect URIs fields[ ]

Plugin Configuration​

#FilenameDescriptionStatus
8plugin-settings-api-fields.pngOneTap Settings > General tab > API section with Client ID/Secret fields[ ]
9connection-test-success.pngTest Connection results showing 5 green checkmarks[ ]

Configuration - Admin Tabs (10 screenshots)​

Full Tab Views​

#FilenameDescriptionStatus
10settings-general-tab-full.pngComplete General tab with all sections expanded[ ]
11settings-users-tab-full.pngComplete Users tab with all sections[ ]
12settings-integrations-tab-full.pngComplete Integrations tab (PRO) with webhooks, email marketing visible[ ]
13settings-statistics-tab-full.pngComplete Statistics tab (PRO) with charts and counters[ ]
14settings-emails-tab-full.pngComplete Emails tab (PRO) with editor visible[ ]

Specific Sections​

#FilenameDescriptionStatus
15settings-api-section.pngClose-up of API credentials section[ ]
16settings-error-messages-section.pngClose-up of 5 customizable error message fields[ ]
17settings-cookie-consent-dropdown.pngCookie consent dropdown showing 3 options (disabled, auto_detect, always_require)[ ]
18settings-user-config-section.pngUser Configuration section with auto-register toggle and role dropdown[ ]
19settings-button-preview-panel.pngReal-time button preview panel showing light and dark backgrounds[ ]

Button Customization (8 screenshots)​

Button Themes​

#FilenameDescriptionStatus
20button-theme-outline.pngGoogle button with outline (light) theme[ ]
21button-theme-filled-blue.pngGoogle button with filled_blue (default) theme[ ]
22button-theme-filled-black.pngGoogle button with filled_black (neutral) theme[ ]

Button Shapes​

#FilenameDescriptionStatus
23button-shape-pill.pngGoogle button with pill (rounded) shape[ ]
24button-shape-rectangular.pngGoogle button with rectangular shape[ ]

Button Options (PRO)​

#FilenameDescriptionStatus
25button-text-options.pngComparison of 4 text options: continue_with, signin_with, signup_with, signin[ ]
26button-size-comparison.pngSide-by-side: Large, Medium, Small buttons[ ]
27button-alignment-options.pngLeft, center, right aligned buttons[ ]

Features in Action (12 screenshots)​

One Tap Popup Locations​

#FilenameDescriptionStatus
28one-tap-popup-myaccount.pngOne Tap popup on WooCommerce My Account login page[ ]
29one-tap-popup-checkout.pngOne Tap popup on WooCommerce Checkout page (PRO)[ ]
30one-tap-popup-cart.pngOne Tap popup on WooCommerce Cart page (PRO)[ ]
31one-tap-popup-wplogin.pngOne Tap popup on WordPress wp-login.php page[ ]

Sign-In Button​

#FilenameDescriptionStatus
32sign-in-button-desktop.pngSign in with Google button on desktop view[ ]
33sign-in-button-mobile.pngSign in with Google button on mobile view (responsive)[ ]

Statistics & Errors​

#FilenameDescriptionStatus
34basic-stats-counters.pngBasic statistics counters: Total, Today, This Week, This Month[ ]
35cls-skeleton-loading.pngSkeleton placeholder visible during button loading (CLS prevention)[ ]
36error-message-popup-closed.pngCustom "popup closed" error message displayed to user[ ]
37error-message-email-exists.pngCustom "email exists" error message displayed to user[ ]

Connection Test​

#FilenameDescriptionStatus
38connection-test-button-click.pngTest Connection button being clicked[ ]
39connection-test-results-panel.pngExpanded results showing all 5 diagnostic checks[ ]

PRO Features - Webhooks (8 screenshots)​

Webhook Settings​

#FilenameDescriptionStatus
40webhook-settings-enabled.pngWebhook toggle in enabled state[ ]
41webhook-url-secret-fields.pngWebhook URL and Secret fields filled in[ ]
42webhook-payload-checkboxes.png4 optional payload section checkboxes[ ]
43webhook-payload-json-example.pngExample JSON payload (can be code block screenshot)[ ]

External Services Integration​

#FilenameDescriptionStatus
44zapier-create-zap.pngZapier: Create new Zap interface[ ]
45zapier-webhook-trigger.pngZapier: Configure Webhooks by Zapier trigger[ ]
46make-scenario-webhook.pngMake: New scenario with Webhooks module[ ]
47make-json-parser.pngMake: JSON parser configuration for OneTap payload[ ]

PRO Features - Email Marketing (15 screenshots)​

Main Settings​

#FilenameDescriptionStatus
48email-marketing-enabled.pngEmail marketing toggle enabled[ ]
49email-marketing-provider-dropdown.pngProvider dropdown showing all 5 options[ ]

MailChimp​

#FilenameDescriptionStatus
50mailchimp-api-key-field.pngMailChimp API key field[ ]
51mailchimp-list-id-field.pngMailChimp List/Audience ID field[ ]
52mailchimp-test-connection.pngMailChimp test connection success[ ]

Other Providers​

#FilenameDescriptionStatus
53mailerlite-settings.pngMailerLite API key and Group ID fields[ ]
54brevo-settings.pngBrevo (Sendinblue) full configuration[ ]
55brevo-doi-template-field.pngBrevo DOI Template ID field detail[ ]
56klaviyo-settings.pngKlaviyo API key and List ID fields[ ]
57getresponse-settings.pngGetResponse API key and Campaign ID fields[ ]
#FilenameDescriptionStatus
58marketing-consent-banner.pngMarketing consent banner on frontend[ ]
59marketing-consent-popup.pngMarketing consent popup modal[ ]
60marketing-consent-settings.pngMarketing consent admin settings[ ]

GDPR​

#FilenameDescriptionStatus
61double-optin-email-example.pngExample double opt-in confirmation email[ ]
62email-marketing-gdpr-info.pngGDPR compliance information panel[ ]

PRO Features - Analytics & Emails (10 screenshots)​

Analytics Dashboard​

#FilenameDescriptionStatus
63analytics-dashboard-full.pngComplete analytics dashboard with charts[ ]
64analytics-period-selector.pngPeriod selector dropdown: 7d, 30d, month, quarter, year, custom[ ]
65analytics-chart-registrations.pngRegistration trend chart (Chart.js line graph)[ ]
66analytics-csv-export.pngCSV export button and downloaded file[ ]

Welcome Email Editor​

#FilenameDescriptionStatus
67email-editor-full.pngComplete email editor interface[ ]
68email-template-minimal.pngMinimal template preview[ ]
69email-template-branded.pngBranded template preview[ ]
70email-url-rules-config.pngURL rules configuration (exact, contains, starts_with, etc.)[ ]
71email-merge-tags-list.pngAvailable merge tags list[ ]
72email-preview-panel.pngLive email preview panel[ ]

PRO Features - User Management (10 screenshots)​

Role Mapping​

#FilenameDescriptionStatus
73role-mapping-settings.pngRole mapping configuration interface[ ]
74role-mapping-example.pngExample: @company.com -> Editor mapping[ ]

Admin User Column​

#FilenameDescriptionStatus
75admin-user-column.pngUsers list with "Registered Via" column showing Google badges[ ]
76admin-user-filter-dropdown.pngFilter dropdown: All, Google, Standard[ ]

Settings Transfer​

#FilenameDescriptionStatus
77settings-export-button.pngExport Settings button and download[ ]
78settings-import-upload.pngImport Settings file upload interface[ ]

Pending Approval​

#FilenameDescriptionStatus
79pending-approval-settings.pngPending approval toggle and settings[ ]
80pending-approval-users-list.pngUsers list filtered to pending users[ ]
81pending-approval-bulk-actions.pngBulk actions dropdown: Approve, Reject[ ]

Account Merge​

#FilenameDescriptionStatus
82account-merge-modal.pngAccount merge modal with password field[ ]

PRO Features - Advanced (4 screenshots)​

#FilenameDescriptionStatus
83utm-tracking-settings.pngUTM tracking toggle and settings[ ]
84utm-order-meta.pngWooCommerce order showing UTM data in meta[ ]
85thankyou-linking-prompt.pngThank you page Google account linking prompt[ ]
86email-bypass-settings.pngEmail verification bypass toggle[ ]

Integrations (8 screenshots)​

WooCommerce​

#FilenameDescriptionStatus
87woocommerce-checkout-block.pngGoogle button on WooCommerce Blocks checkout[ ]
88woocommerce-classic-checkout.pngGoogle button on classic WooCommerce checkout[ ]

WordPress Only​

#FilenameDescriptionStatus
89wordpress-only-wplogin.pngGoogle button on wp-login.php (no WooCommerce)[ ]
#FilenameDescriptionStatus
90cookie-consent-complianz.pngOneTap working with Complianz consent plugin[ ]
91cookie-consent-cookiebot.pngOneTap working with CookieBot[ ]

Security Plugins​

#FilenameDescriptionStatus
92defender-pro-allowlist.pngDefender Pro firewall allowlist configuration[ ]

Page Builders​

#FilenameDescriptionStatus
93elementor-shortcode-widget.pngShortcode widget in Elementor editor[ ]
94divi-code-module.pngCode module in Divi builder[ ]

Troubleshooting (5 screenshots)​

#FilenameDescriptionStatus
95error-rate-limit.pngRate limiting error message[ ]
96error-forbidden-role.pngForbidden role error (admin trying to use Google login)[ ]
972fa-redirect-notice.png2FA redirect notice to standard login[ ]
98debug-log-example.pngExample debug.log entry for OneTap[ ]
99cloudflare-waf-rule.pngCloudflare WAF rule configuration[ ]

Summary​

CategoryCount
Getting Started9
Configuration - Admin Tabs10
Button Customization8
Features in Action12
PRO - Webhooks8
PRO - Email Marketing15
PRO - Analytics & Emails10
PRO - User Management10
PRO - Advanced4
Integrations8
Troubleshooting5
TOTAL99

Priority Order for Screenshots​

  1. HIGH PRIORITY (needed for launch):

    • Getting Started (1-9)
    • Configuration tabs (10-19)
    • Features in Action (28-34)

  2. MEDIUM PRIORITY (needed for complete docs):

    • Button Customization (20-27)
    • PRO Features overview screenshots
    • Integrations (87-94)

  3. LOWER PRIORITY (can be added later):

    • Detailed PRO feature screenshots
    • Troubleshooting (95-99)
    • External service screenshots (Zapier, Make)

Notes for Screenshot Capture​

Test Environment​

  • Use a clean WordPress installation
  • Install WooCommerce with Storefront theme
  • Configure plugin with valid Google credentials
  • Create test users for various scenarios

Browser​

  • Use Chrome or Firefox
  • Set viewport to 1920x1080 for consistency
  • Disable browser extensions that might interfere
  • Use incognito mode for One Tap screenshots

Annotations​

  • Use red (#EA4335) for arrows and highlights
  • Keep annotations minimal and clear
  • Add numbered steps for multi-step processes