Table of Contents
- What the AskYourPDF AI agent can do
- Step 1: Define your AI agent
- Step 2: Let AskYourPDF analyze your site and pick training pages
- Step 3: Customize and launch your agent
- Step 4: Test your agent in the playground
- Step 5: Review conversations in Chat Logs
- Step 6: Keep your agent up to date in Data Sources
- Step 7: Deploy and embed the agent on your website
- Plain HTML
- WordPress
- Webflow
- Wix
- Shopify
- Squarespace
- For developers, embedding in modern frameworks
- React, Vue, and Vite
- Next.js
- Local development
- Troubleshooting
- Conclusion
- Frequently Asked Questions
Ready to Publish
Ready to Publish
Excerpt
Learn how to build, train, customize, and embed an AskYourPDF AI agent that answers visitor questions using your website content 24/7.
Authors
Related Posts
Meta Title
How to Add an AI Agent to Your Website with AskYourPDF
Featured Image
Do not index
AskYourPDF now lets you build an AI agent, an embeddable chatbot that lives on your website and answers visitor questions using your own content. You point it at your site, let it train on your pages, add any documents you want, and drop a single line of code onto your pages. From there, it can handle support questions, guide visitors, and surface the right information around the clock, with no human in the loop.
This guide walks through the entire process from creating the agent to embedding it on a live site, with a screenshot of every step. If you are a developer, framework-specific instructions for React, Vue, and Next.js are near the end.
What the AskYourPDF AI agent can do
The agent is trained on your website and any files you upload, so it acts as a knowledge base that your visitors can talk to. Instead of hunting through menus or waiting on an email reply, a visitor simply asks a question and gets an instant answer drawn from your own content.
For most teams, the value is straightforward. The agent works around the clock, handles the repetitive questions that usually fill your inbox, and keeps answers consistent and on-brand because they come from content you control. It also keeps visitors engaged at the exact moment they decide whether to buy, sign up, or reach out, when a fast, accurate answer matters most.
What you gain by adding one to your site:
- Always on. It answers instantly at any hour, with no queue and no extra headcount.
- Less repetitive support. It deflects common questions so your team can focus on the complex cases that need a person.
- Consistent, on-brand answers. Responses come from your approved pages and documents, not guesswork.
- Grounded in your content. Because it answers from sources you provide, it is far less likely to invent information.
- Better engagement and capture. It guides visitors to the right page or next step while their interest is high.
- Low maintenance. You set it up in the dashboard and install it with a single line of code, with no ongoing engineering work.
- Improves over time. Chat logs and re-crawling let you spot gaps and keep its knowledge current.
Those benefits show up across a few common setups:
- Website assistant. It uses your entire public site as context and answers questions about your product, pricing, and documentation.
- Teaching and onboarding tool. Upload resources and let students or new users interact with the material directly.
- Internal or private knowledge base. Feed it documents and let a team query and extract information quickly.
Alongside your website, you can add documents such as PDFs, slide decks, notebooks, and more, so the agent can answer from everything you give it rather than from your pages alone.
Step 1: Define your AI agent
Open the AI Agent section and start a new agent. On the first screen, paste your website link, then describe what you want the agent to do. That description becomes the agent's working instructions, so be specific about its job, for example, answering customer questions and guiding users through issues using your site and documentation.
Pick a template that matches your goal, such as Customer Support, then click Continue.
Step 2: Let AskYourPDF analyze your site and pick training pages
AskYourPDF scans your website and selects the most relevant pages for training. In this example, it picked the 40 most relevant pages and scored each one, so you can see at a glance which pages matter most. Your homepage, FAQs, pricing, and documentation tend to score highest.
Review the list and uncheck anything you do not want. Use Select all to grab everything, or paste an individual link to add a page the crawler missed.
Scroll down to view the lower-scoring pages, such as comparison and tool pages, and deselect those that are not useful for your agent.
Below the page list, you can also upload extra documents to deepen your knowledge. Supported file types include PDF, TXT, PPT, PPTX, EPUB, and RTF, among others. When your selection looks right, click Train and Continue.
Step 3: Customize and launch your agent
Next, give the agent its look and behavior. Set a display name and an initial greeting message, upload an agent logo (JPG, PNG, or SVG), choose a light or dark interface theme, and set a primary color. If you are on a plan that allows it, you can also remove the AskYourPDF badge.
Set your allowed domains here, too. These are the only sites where the agent is permitted to load, so add every domain you plan to deploy on. When everything looks right, click Finish up.
Tip. Allowed domains are required. If a domain is not on this list, the agent will not appear when you embed it, including on local development URLs.
Step 4: Test your agent in the playground
After launch, you land on the agent dashboard, which has four tabs: Playground, Chat Logs, Data Sources, and Deploy. A status line shows when the agent was last trained. The Playground holds your instructions on the left and a live preview of the chat widget on the right.
Before you go live, ask the agent real questions in the preview to confirm it answers accurately. In this example, asking how to use the product returns a clear, structured answer pulled straight from the trained site content.
Step 5: Review conversations in Chat Logs
Every conversation your agent has is saved under Chat Logs. You can search by keyword or topic, filter by date range, and download the logs. This is the fastest way to find questions the agent handled poorly, so you know what knowledge to add next.
Step 6: Keep your agent up to date in Data Sources
Your knowledge base is not fixed. The Data Sources tab shows everything the agent is trained on, both files and links, along with how much of your document allowance you have used. From here, you can upload more files, add an individual link, or crawl a website again to refresh the agent with your latest content.
Step 7: Deploy and embed the agent on your website
Open the Deploy tab. It brings together your allowed domains, the embed code, the content settings (display name and initial message), and the style options. Copy the embed script shown in the Embed section.
<script src="https://askyourpdf.com/embed.js" data-bot-public-key="YOUR_PUBLIC_KEY" defer></script>
Paste that script into your website, usually just before the closing body tag or in your site builder's custom code or footer area. The chat bubble then appears on your pages. You do not need a different script for each platform. The same code works across most sites, and only the paste location changes.
Platform | Where to paste the script |
Plain HTML | Paste it just before the closing body tag. |
WordPress | Use a header or footer script plugin, your theme's custom code section, or your builder's custom code settings. The footer scripts area works well. |
Webflow | Project settings, then Custom Code, then paste in the Footer Code section, then save and publish. |
Wix | Go to Dashboard, then Settings, then Custom Code, add the script, then load it on the pages where you want the agent. |
Shopify | Theme editor, then theme code, open theme.liquid, paste before the closing body tag, then save. |
Squarespace | Settings> Advanced> Code Injection, paste into the footer area, then save. |
Here are concise step-by-step instructions for the most common platforms.
Plain HTML
- Open the HTML file for the pages where you want the agent, usually your main template or index.html.
- Paste the embed script just before the closing body tag.
- Save the file and upload it to your server.
- Reload the page and confirm the chat bubble appears.
WordPress
- In your dashboard, install a header and footer script plugin, or open your theme's custom code or footer settings.
- Paste the embed script into the footer scripts area.
- Save your changes.
- Visit your site and confirm the chat bubble appears.
Webflow
- Open your project settings.
- Go to Custom Code.
- Paste the embed script into the Footer Code section.
- Save, then publish your site.
Wix
- Go to your site dashboard.
- Open Settings, then Custom Code.
- Add the embed script.
- Choose to load it on the pages where you want the agent.
- Save and publish.
Shopify
- Open your theme editor and select Edit code.
- Open your main layout file, theme.liquid.
- Paste the embed script just before the closing body tag.
- Save your changes.
Squarespace
- Go to Settings, then Advanced.
- Open Code Injection.
- Paste the embed script into the Footer area.
- Save your changes.
For developers, embedding in modern frameworks
React, Vue, and Vite
For React, Vue, Vite, and similar projects, the same script usually goes in the main HTML file. In many setups, you paste it into index.html before the closing body tag, then replace the placeholder with the public key from your dashboard.
Next.js
For Next.js, use the built-in Script component so the agent loads after the page is interactive:
import Script from "next/script";
export default function App() {
return (
<>
<Script
src="https://askyourpdf.com/embed.js"
data-bot-public-key="YOUR_PUBLIC_KEY"
strategy="afterInteractive"
/>
</>
);
}
Local development
When you test on a local URL, add that domain to the allowed domains list or the agent will not load. This is a configuration step, not a code change.
Troubleshooting
- The agent does not appear after I paste the code. Check that the domain is in your allowed domains list.
- I am not technical. Hand the embed script to a developer and ask them to add it site-wide. It is a single line of code.
Conclusion
Adding an AI agent to your website with AskYourPDF takes only a few steps: define the agent, let it train on your pages, customize its look, test it in the playground, and embed it with one line of code. Once it is live, Chat Logs and Data Sources continue to improve over time. Create your first AI agent and give your visitors instant, accurate answers drawn from your own content.
Frequently Asked Questions
Do I need a different embed code for each website platform?
No. The same script works across most platforms. Only where you paste it changes.
What file types can I upload to train the agent?
Supported types include PDF, TXT, PPT, PPTX, EPUB, and RTF, among others.
How many pages does AskYourPDF train on?
It automatically selects the most relevant pages from your site, then lets you adjust the selection. In this example, it picked 40 pages, each with a relevance score.
Can the agent use my documents and my website?
Yes. You can add files alongside your website so the agent answers from both.
Why is my agent not showing up after I embed it?
The most common cause is a domain that is not on your allowed domains list.
Can I change the agent's look after launch?
Yes. You can update the display name, initial message, logo, theme, and primary color, and review or refresh its training sources at any time.
