---
title: "Custom snap-in implementation"
canonical_url: "https://www.nutrient.io/guides/docuvieware/asp-dotnet-web-forms/custom-snap-in-implementation/"
md_url: "https://www.nutrient.io/guides/docuvieware/asp-dotnet-web-forms/custom-snap-in-implementation.md"
last_updated: "2026-05-18T15:55:45.954Z"
description: "Create a custom snap-in in DocuVieware, including server-side integration and triggering custom actions."
---

# Custom snap-in implementation

> Before starting, complete the [your first DocuVieware ASP.NET Web Forms page](https://www.nutrient.io/guides/docuvieware/asp-dotnet-web-forms/your-first-docuvieware-asp-dotnet-web-forms-page.md) and [client/server coming and going with custom actions](https://www.nutrient.io/guides/docuvieware/asp-dotnet-web-forms/client-server-coming-and-going-with-custom-actions.md) guides.

A snap-in is an interface element that can be used for various purposes. DocuVieware comes with several built-in snap-ins, such as the Thumbnails, Bookmarks, Text Search, and Annotations palette.

This guide shows how to create a custom snap-in with a button that sends a `ping` command to the server, which replies with a `pong` message.

**Requirements** —.NET Framework 4.6 or above

**Note** — Screenshots were taken using Visual Studio and GdPicture.NET 14. They may differ from the current release.

## Preparing the custom snap-in content

**Steps:**

1. Add the custom snap-in content in the `Page_Load` code behind (`Default.aspx.cs`).

   > Do this only when the page isn’t in a `PostBack` context.

   A custom snap-in is created using the `AddCustomSnapIn` method, which takes several mandatory elements:

   - A name — Use this if you want to select your custom snap-in by code using the `SelectSnapIn` JavaScript API method.
   - A title — This is displayed on top of it when selected; in other words, it’s the snap-in label, here it’s “Custom Snap-In.”
   - An icon — In this guide, it’s a lightning bolt SVG icon.
   - A content — The HTML content your snap-in contains; in this guide, it’s a `<div>` with a `<button>` in it.

   ```csharp

   protected void Page_Load(object sender, EventArgs e)
   {
    if (!IsPostBack)
    {
    using (HtmlGenericControl icon = new HtmlGenericControl("svg"))
    {
    icon.Attributes["viewBox"] = "0 0 16 16";
    icon.Attributes["width"] = "100%";
    icon.Attributes["height"] = "100%";
    icon.InnerHtml = "<path d=\"M6 0l-6 8h6l-4 8 14-10h-8l6-6z\"></path>";
    using (HtmlGenericControl panel = new HtmlGenericControl("div"))
    {
    panel.ClientIDMode = ClientIDMode.Static;
    panel.ID = "customSnapInTutorialPanel" + DocuVieware1.UniqueID;
    using (HtmlGenericControl customSnapInTutorialButtonDiv = new HtmlGenericControl("div"))
    {
    customSnapInTutorialButtonDiv.Style["float"] = "left";
    customSnapInTutorialButtonDiv.Style["margin-top"] = "6px";
    customSnapInTutorialButtonDiv.Style["margin-left"] = "6px";
    using (HtmlGenericControl customSnapInTutorialButton = new HtmlGenericControl("button"))
    {
    customSnapInTutorialButton.ID = "customSnapInSubmit" + DocuVieware1.UniqueID;
    customSnapInTutorialButton.Style["height"] = "26px";
    customSnapInTutorialButton.Style["background-color"] = HexConverter(DocuVieware1.ActiveSelectedColor);
    customSnapInTutorialButton.InnerHtml = "Ping";
    customSnapInTutorialButton.Attributes["class"] = "btn-valid";
    customSnapInTutorialButton.Attributes["onclick"] = "ping(); return false;";
    customSnapInTutorialButtonDiv.Controls.Add(customSnapInTutorialButton);
    }
    panel.Controls.Add(customSnapInTutorialButtonDiv);
    }
    DocuVieware1.AddCustomSnapIn("customSnapInTutorial", "Custom Snap-In", icon, panel, true);
    }
    }
    }
   }
   ```

   The `onclick` event on the button calls the `ping()` function, which you’ll implement later on the client side.

2. Add two more things: the `HexConverter` utility function, and the custom action handler that sends the message to the client:

   ```csharp

   private static string HexConverter(Color c)
   {
    return "#" + c.R.ToString("X2") + c.G.ToString("X2") + c.B.ToString("X2");

   }
   public static void HandleCustomSnapInAction(CustomActionEventArgs e)
   {
    e.message = new DocuViewareMessage("Pong", icon: DocuViewareMessageIcon.Information);
   }
   ```

3. Add the custom action event handler in the `Global.asax.cs` file:

   ```csharp

   private void CustomActionsHandler(object sender, CustomActionEventArgs e)
   {
    if ((e.actionName == "ping"))
    {
    Default.HandleCustomSnapInAction(e);
    }
   }
   ```

Now proceed to the client side.

## Preparing your custom action client-side

There isn’t much to do client-side aside from setting up the JavaScript function that triggers the custom action you implemented previously. Add a `<script>` tag in the `<head>` section of the page:

```javascript

<script>
 function ping() {
 DocuViewareAPI.PostCustomServerAction("DocuVieware1", true, "ping");
 }
</script>

```

Compile and start the page. The custom snap-in icon appears in the left panel.![Custom Snap-In icon displayed in the left panel of DocuVieware](@/assets/guides/docuvieware/custom_snapin_1.png)

Now, if you select it and click the **Ping** button, it triggers the custom action and you should see a `Pong` message coming back from the server.
---

## Related pages

- [Client/server coming and going with custom actions](/guides/docuvieware/asp-dotnet-web-forms/client-server-coming-and-going-with-custom-actions.md)
- [ASP.NET Web Forms integration](/guides/docuvieware/asp-dotnet-web-forms.md)
- [Use and handling of the selection area](/guides/docuvieware/asp-dotnet-web-forms/use-and-handling-of-the-selection-area.md)
- [Your first DocuVieware ASP.NET Web Forms page](/guides/docuvieware/asp-dotnet-web-forms/your-first-docuvieware-asp-dotnet-web-forms-page.md)