> ## Documentation Index
> Fetch the complete documentation index at: https://docs.thoughtly.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Purchase a phone number in Thoughtly

> Buy a US or non-US phone number inside Thoughtly, choose area codes and capabilities, and assign the number to a voice agent for inbound or outbound calling.

export const CustomFooter = () => {
  const year = new Date().getFullYear();
  return <footer>
			<div style={{
    borderTop: '1px solid #e5e7eb',
    marginTop: '4rem',
    paddingTop: '3rem',
    paddingBottom: '3rem',
    fontSize: '0.875rem',
    color: '#9ca3af'
  }} className="dark:border-gray-700 dark:text-gray-400">
				<div className="flex flex-col md:flex-row items-center justify-between w-full max-w-8xl px-4 lg:px-12 mx-auto">
					<a href="https://thoughtly.com" target="_blank">
						<img src="https://cdn.thoughtly.com/logo/wordmark-light.svg" alt="Thoughtly Logo" className="h-5 block dark:hidden" />
						<img src="https://cdn.thoughtly.com/logo/wordmark-dark.svg" alt="Thoughtly Logo" className="h-5 hidden dark:block" />
					</a>
					<div className="pt-4 md:pt-0">
						© {year} Thoughtly, Inc. All Rights Reserved.
					</div>
				</div>
			</div>
		</footer>;
};

export const PromptbookPage = ({id, title, description, category, integrations, videoUrl, htmlContent}) => <div>
		<div className="py-8 flex flex-row items-start justify-between">
			<div>
				<h1 className="font-bold text-gray-900 dark:text-white" style={{
  fontSize: '2.5rem'
}}>
					{title}
				</h1>
				<p className="text-sm text-gray-500 dark:text-gray-400 mt-3" style={{
  maxWidth: '30rem'
}}>
					{description}
				</p>
			</div>
			<div className="flex flex-row gap-3 items-center">
				{integrations?.map(integration => <div className="border border-gray-200 dark:border-gray-700 rounded-md flex items-center px-2 py-1">
						<div className="font-medium text-black dark:text-white text-sm">
							{integration}
						</div>
					</div>)}
				<div className="border border-gray-200 dark:border-gray-700 rounded-md flex items-center px-2 py-1">
					<div className="font-medium text-black dark:text-white text-sm">
						{category}
					</div>
				</div>
			</div>
		</div>

		<div style={{
  position: 'relative',
  paddingBottom: 'calc(54.13424124513618% + 41px)',
  height: 0,
  width: '100%'
}}>
			<iframe src={`https://demo.arcade.software/${id}?embed&embed_mobile=tab&embed_desktop=inline&show_copy_link=true`} frameBorder="0" loading="lazy" allowFullScreen allow="clipboard-write" style={{
  position: 'absolute',
  top: 0,
  left: 0,
  width: '100%',
  height: '100%',
  colorScheme: 'light'
}} />
		</div>

		{htmlContent && <div className="flex flex-col lg:flex-row gap-12 mt-12">
				<div className="w-[560px] space-y-4">
					{videoUrl && <iframe width="560" height="315" src={videoUrl} title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen style={{
  borderRadius: 10
}}></iframe>}
					<div className="bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-md p-4 text-sm text-gray-600 dark:text-gray-300">
						<p><strong>What you’ll learn:</strong></p>
						<ul className="list-disc pl-5 mt-2">
							<li><span className="font-medium">{title}</span></li>
							<li><span className="font-medium">Integrations:</span> {integrations?.join(', ') || '—'}</li>
							<li><span className="font-medium">Category:</span> {category}</li>
						</ul>
					</div>
				</div>

				<div className="w-full space-y-8">
					<div className="border-t border-gray-200 dark:border-gray-700 pt-4 text-xs text-gray-400">
						Follow the interactive demo above, watch the video, or read the instructions below.
					</div>
					{htmlContent && <div className="promptbook-content text-gray-900 dark:text-white prose dark:prose-invert max-w-none" dangerouslySetInnerHTML={{
  __html: htmlContent
}} />}
				</div>
			</div>}
	</div>;

<div className="px-4 mx-auto max-w-8xl lg:px-12 min-h-screen">
  <div className="max-w-fit">
    <a href="/promptbooks/browse" className="py-8 inline-flex items-center gap-x-2 transition-transform transform hover:scale-105 origin-left">
      <Icon icon="arrow-left" iconType="light" size={16} />

      <span className="text-primary font-medium">Browse Promptbooks</span>
    </a>
  </div>

  <div className="pointer-events-none cursor-default" style={{ width: '150px' }}>
    <img className="block dark:hidden" src="https://mintcdn.com/thoughtly/SDuN6oJ1BG6zNAlA/images/misc/promptbooks-light.svg?fit=max&auto=format&n=SDuN6oJ1BG6zNAlA&q=85&s=0ffc45763665cbf7965e7fcd4e790bbf" alt="Promptbooks" width="3772" height="688" data-path="images/misc/promptbooks-light.svg" />

    <img className="hidden dark:block" src="https://mintcdn.com/thoughtly/SDuN6oJ1BG6zNAlA/images/misc/promptbooks-dark.svg?fit=max&auto=format&n=SDuN6oJ1BG6zNAlA&q=85&s=612599d6b4718c7cae6ec4330d3dbb97" alt="Promptbooks" width="3772" height="688" data-path="images/misc/promptbooks-dark.svg" />
  </div>

  <PromptbookPage id={"Ui6FulcqDj9ItNRwQTds"} title={`Purchasing a Phone Number`} description={`Learn how to purchase U.S. and Non-U.S. phone numbers`} category={"General"} integrations={[]} videoUrl={""} htmlContent={``} />
</div>

<CustomFooter />