Settings

Quick Embedder

[pdf_embed url=”https://example.com/document.pdf” width=”100%” height=”842px” print=”true” title=”My PDF Document” download_btn=”true” fullscreen_btn_text=”View in Fullscreen” ]

Free Attributes

You can customize the PDF viewer using the following attributes:

• url (required): The URL of the PDF file.
  • Default: null
  • Example: url="https://example.com/document.pdf"
• width (optional): Width of the PDF viewer.
  • Default: "100%"
  • Example: width="80%"
• height (optional): Height of the PDF viewer.
  • Default: "842px"
  • Example: height="600px"
• print (optional): Display a print button.
  • Accepted values: “true” | “false”
  • Default: "false"
  • Example: print="true"
• title (optional): Title displayed above the PDF viewer.
  • Default: null
  • Example: title="Document Title"
• download_btn (optional): Display a download button.
  • Accepted values: “true” | “false”
  • Default: "false"
  • Example: download_btn="true"
• fullscreen_btn_text (optional): Text for the fullscreen button.
  • Default: "View Fullscreen"
  • Example: fullscreen_btn_text="Open Fullscreen"

Premium Attributes

• download_btn_text (optional): Download button text.
  • Default: null
  • Example: download_btn_text="Download PDF"
• align (optional): PDF alignment type.
  • Accepted values: “none” | “wide” | “full”
  • Default: "none"
  • Example: align="none"
• alignment (optional): Content alignment.
  • Accepted values: “left” | “center” | “right”
  • Default: "left"
  • Example: alignment="left"
• only_pdf (optional): Display only PDF without controls.
  • Accepted values: “true” | “false”
  • Default: "false"
  • Example: only_pdf="true"
• protect (optional): Protect PDF content.
  • Accepted values: “true” | “false”
  • Default: false
  • Example: protect="true"
• thumb_menu (optional): Show thumbnail menu.
  • Accepted values: “true” | “false”
  • Default: false
  • Example: thumb_menu="true"
• initial_page (optional): Starting page number.
  • Default: 1
  • Example: initial_page="2"
• hr_scroll (optional): Enable horizontal scroll.
  • Accepted values: “true” | “false”
  • Default: "false"
  • Example: hr_scroll="true"
• adobe (optional): Use Adobe PDF viewer.
  • Accepted values: “true” | “false”
  • Default: "false"
  • Example: adobe="true"
• class (optional): Custom CSS class.
  • Default: ""
  • Example: class="my-custom-class"
• new_window (optional): Open PDF in new window.
  • Accepted values: “true” | “false”
  • Default: false
  • Example: new_window="true"
• popup (optional): Open PDF in popup.
  • Accepted values: “true” | “false”
  • Default: false
  • Example: popup="true"
• popup_btn_text (optional): Popup button text.
  • Default: "Open PDF"
  • Example: popup_btn_text="View PDF"
• popup_btn_bg (optional): Popup button background color.
  • Default: null
  • Example: popup_btn_bg="#000000"
• popup_btn_color (optional): Popup button text color.
  • Default: null
  • Example: popup_btn_color="#ffffff"
• popup_btn_font_size (optional): Popup button font size.
  • Default: null
  • Example: popup_btn_font_size="16px"
• popup_btn_padding (optional): Popup button padding.
  • Default: "10px 20px"
  • Example: popup_btn_padding="12px 24px"

Custom CSS & Cloud API

Custom CSS

Select Custom CSS from Settings. Here you can write Custom CSS.

Cloud API

Insert Dropbox, Google, and Adobe keys in Settings > Cloud API.

Get the keys from here.

Preset

You can set the default preset of the PDF embedder. To do that go to Preset from Settings.

Set width, height, enable/disable Allow Print, Open in New Window, Protect Content, Thumbnails Toggle Menu, show/hide Only PDF, File Name, Download Button, View Fullscreen Button.

Shortcode

Toggle Gutenberg Shortcode Generator from Settings > Shortcode.

Cloud API

Insert Dropbox, Google, and Adobe keys in Settings > Cloud API.

Get the keys from here.

Google

Step 1: –Create a project if it does not exist. Select the project

Step 2: Enable ‘Google Picker API’.

Just make sure you’ve selected the right project. Screenshot

Step 3: – Enable ‘Google Drive API’

Step 4: – To create an API key:

1. In the Google Cloud console, go to Menu menu > APIs & Services > Credentials. Go to Credentials
2. Click Create credentials > API key.
3. Your new API key is displayed.
   • Click Copy content_copy to copy your API key for use in your app’s code. The API key can also be found in the “API Keys” section of your project’s credentials.
   • To prevent unauthorized use, we recommend restricting where and for which APIs the API key can be used. For more details, see Add API restrictions.

Step 5: Authorize credentials for a web app

To authenticate end users and access user data in your app, you need to create one or more OAuth 2.0 Client IDs. A client ID is used to identify a single app to Google’s OAuth servers. If your app runs on multiple platforms, you must create a separate client ID for each platform. In the Google Cloud console, go to Menu menu > Google Auth platform > Clients.

Go to Clients Click Create Client. Click Application type > Web application. In the Name field, type a name for the credential. This name is only shown in the Google Cloud console. Add authorized URIs related to your app:

• Client-side apps (JavaScript)–Under Authorized JavaScript origins, click Add URI. Then, enter a URI to use for browser requests. This identifies the domains from which your application can send API requests to the OAuth 2.0 server.

Click Create.

The newly created credential appears under OAuth 2.0 Client IDs

Step 6: Click here to get the project number