> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://docs.dropinblog.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to use Smart Snippets™ on your blog

In this guide, you’ll learn how to create and manage Smart Snippets™. Smart Snippets™ allow you to create reusable content blocks, such as CTAs, forms, images, or messages, and automatically place them anywhere on your blog.

${youtube}[](7OqTm-_IcAY)
## Adding a new Smart Snippet
In your DropInBlog admin account, find the **More** tab in the top menu, then select **Smart Snippets™**.
![Accessing Smart Snippets from the More menu in DropInBlog](https://storage.crisp.chat/users/helpdesk/website/-/1/3/f/1/13f179d913687a00/accessing-smart-snippets-page-_1b2rkvn.png)
On the page that opens, click on the **Add your first snippet** button.
![Creating a new Smart Snippet](https://storage.crisp.chat/users/helpdesk/website/-/1/3/f/1/13f179d913687a00/creating-first-smart-snippet-i_1srrewh.png)
Clicking this button will open the Smart Snippets™ editor.

Once in the editor, you can choose between the **Editor View** and the **Code View**.
![Smart Snippets editor: Code View](https://storage.crisp.chat/users/helpdesk/website/-/1/3/f/1/13f179d913687a00/select-view-in-the-smart-snipp_e32i36.png)
| The **Editor View** is used for adding headings and [__CTA buttons__](https://docs.dropinblog.com/en/article/how-to-add-a-cta-to-your-blog-post-rr28hd/), while the **Code View** works with blocks of code you usually get from third-party apps, such as form builders and email marketing services.
## Customizing Smart Snippets™
We’ll select the **Code View** to show you how you can use Smart Snippets™ to add an online form to your blog.

To do that, you’ll need to create a form using an app like Jotform or Tally.

Then, within the selected app, you should find the option to share the form.

With JotForm, you’ll get the code to embed the form in an iframe, which you can then copy and paste inside the Smart Snippets™ editor using the **Code View**.
![Pasting form code inside the Code View within Smart Snippets editor](https://storage.crisp.chat/users/helpdesk/website/-/1/3/f/1/13f179d913687a00/paste-form-code-inside-smart-s_1et3j21.png)
After that, you should do the following:
1. Name your Smart Snippet.
2. Toggle the switch next to the **Active** option.
3. Select where you want the Smart Snippet to appear.
![Smart Snippet settings for a signup form](https://storage.crisp.chat/users/helpdesk/website/-/1/3/f/1/13f179d913687a00/smart-snippet-settings-for-sig_13mx02z.png)
When it comes to **Snippet Location**, you can choose one of the three options: **Targeting**, **Insert with Post Editor**, or **Both**.
### Snippet location: Targeting
If you select **Targeting**, a couple of options will appear to help you decide on the exact placement of your Smart Snippet.

These options include **Targeting Position** and **Posts to Target**.
![Smart Snippet location options](https://storage.crisp.chat/users/helpdesk/website/-/1/3/f/1/13f179d913687a00/smart-snippets-snippet-locatio_1ajsqsz.png)
The **Targeting Position** dropdown lets you choose where you want the Snippet to show. You’ll see the option to show the Snippet before or after the post title, featured image, post info, or content.

DropInBlog customers on Business plans have even more control over their Snippet placement and can set their Snippet location to target specific elements (more information on this below). 
![Smart Snippets targeting position options](https://storage.crisp.chat/users/helpdesk/website/-/1/3/f/1/13f179d913687a00/snippet-location-targeting-pos_lpe6zr.png)
You can then decide in which of your blog posts the Smart Snippet will appear by selecting one of the available options under the **Posts to Target** section.
![Posts to target options in Smart Snippets editor](https://storage.crisp.chat/users/helpdesk/website/-/1/3/f/1/13f179d913687a00/posts-to-target-options-smart-_1s961gk.png)
You can show a Smart Snippet in all posts, in posts from a specific category, by a specific author, or in the posts you select manually.

Below these options, you’ll see **Advanced Filters** that allow you to include or exclude specific authors, posts, and categories from the previously selected option.
![Smart Snippets advanced options](https://storage.crisp.chat/users/helpdesk/website/-/1/3/f/1/13f179d913687a00/smart-snippets-advanced-filter_7cs7gl.png)
For example, you can include your Smart Snippet in all posts on your blog, except the posts in the Tips category.
To make things simple, we’ll choose the **All Posts** option, without additional filters.

Before you can view your Smart Snippet, you should click the **Save** button at the bottom of the page.

To view the Snippet you just created, go to the **Posts** tab, and open one of the posts in which you selected the Smart Snippet to appear.

For this guide, we selected a Jotform form to appear on all our posts below the post content, and this is how that looks on the live site.
![Smart Snippets on a live site](https://storage.crisp.chat/users/helpdesk/website/-/1/3/f/1/13f179d913687a00/smart-snippets-preview-on-live_n7swi4.png)
## Advanced Smart Snippets™
| The Advanced Smart Snippets™ feature is only available on Business plans.
With Advanced Smart Snippets™, you have greater control over where your content will appear. If this feature is enabled for your account, you can access the **target element** option under **Targeting Position**.
![Advanced Smart Snippets: targeting elements](https://storage.crisp.chat/users/helpdesk/website/-/1/3/f/1/13f179d913687a00/snippet-position-target-elemen_1oelvbf.png)
Selecting this option will allow you to add your content before and after a specific number of paragraphs or headings (H2, H3, H4).

In the screenshot below, the Snippet is set to show after the second H2 heading in all blog posts.
![Target element settings for Advanced Smart Snippets](https://storage.crisp.chat/users/helpdesk/website/-/1/3/f/1/13f179d913687a00/target-element-settings-for-ad_qzgtyw.png)
By combining the numbers and post elements under **Target Element Selector**, you can fine-tune the positioning of your reusable content blocks.
### Snippet location: Insert with Post Editor
Another option you can select when you create a Smart Snippet is to add it from the post editor.

To do that, upon creating a Snippet, select the **Insert with Post Editor** option from the menu on the right.
![Smart Snippet location: Insert with post editor](https://storage.crisp.chat/users/helpdesk/website/-/1/3/f/1/13f179d913687a00/snippet-location-insert-with-p_pc0pql.png)
Click the **Save** button, and exit the Snippet editor.

Then, go to the **Posts** tab, open the post where you want to add a Snippet, and click on the **Smart Snippet icon** in the editor’s navigation bar.
![Inserting Smart Snippet from within the DropInBlog post editor](https://storage.crisp.chat/users/helpdesk/website/-/1/3/f/1/13f179d913687a00/insert-smart-snippet-from-with_mxwtjt.png)
A pop-up window will appear where you’ll see a list of available Snippets. If you don’t see your Snippet, use the search bar at the top to find it, then select **Insert**.
![Smart Snippet Insert button](https://storage.crisp.chat/users/helpdesk/website/-/1/3/f/1/13f179d913687a00/smart-snippet-popup-window_f905dz.png)
When you add a Snippet into the editor, it will look like in the image below.
![Smart Snippet placeholder in the DropInBlog editor](https://storage.crisp.chat/users/helpdesk/website/-/1/3/f/1/13f179d913687a00/smart-snippet-placeholder_16vivuq.png)
After publishing the changes you made, the Snippet will look like a form, CTA button, or anything else you selected it to be.
![Smart Snippet newsletter signup form on the live site](https://storage.crisp.chat/users/helpdesk/website/-/1/3/f/1/13f179d913687a00/smart-snippet-preview-insert-w_oa0w7d.png)
### Editing and deleting Smart Snippets™
To edit a Smart Snippet, open the Smart Snippets™ page, and hover over the Snippet you want to edit until you see a **pencil icon**.
![Editing Smart Snippets](https://storage.crisp.chat/users/helpdesk/website/-/1/3/f/1/13f179d913687a00/editing-smart-snippets_1seek2x.png)
Clicking this icon will open the Smart Snippets™ editor, where you can edit all your Snippets.

To delete a Smart Snippet, on the same page, look for the **kebab menu** to the right of the Snippet you want to delete.

Click on this menu, then select **Delete** from the dropdown.
![Deleting a Smart Snippet](https://storage.crisp.chat/users/helpdesk/website/-/1/3/f/1/13f179d913687a00/deleting-smart-snippets_56zny5.png)
You can create a copy of an existing Snippet using the same menu and edit it as you’d like.
### Using Smart Snippets™ via the DropInBlog API
Smart Snippets™ work differently for users who have integrated DropInBlog via API and aren’t inserted into posts automatically. Instead, your application needs to use the snippet data from the API response to position each snippet accordingly.

When you fetch a post via the API, two main properties control how Smart Snippets™ appear: **snippetsPositioning** and **snippets**. These work together to tell you what snippets exist and where they should be inserted within the post layout.

```
"snippetsPositioning": {
	"before_title": [],
	"before_featured_image": [],
	"before_meta": [],
	"before_content": [],
	"before_elements": [],
	"after_title": [],
	"after_featured_image": [],
	"after_meta": [],
	"after_content": [],
	"after_elements": [129]
}

"snippets": {
	"129": "<p> <a href=\"#\" class=\"dib-cta-break\" rel=\"\">Download your free PDF Now</a></p>"
}
```

If you have any questions about this feature or how to use it, drop us a line.

Happy blogging!