Webhook Docs (#45)

* Move microsurvey into steps directory

* Move microsurvey technical reference under Microsurvey directory

* Iron out steps.

* Update url links.

* Add webhooks

* Move over webhooks technical reference.

* Add beacons technical docs

* Update title for all steps.

* Add webhooks product docs.

Author: shawnmclean

docs/references/sdks/web/advanced/index.mdx

@@ -85,14 +85,14 @@ See the [`TriggerConfig`](/references/sdks/web/reference/samelogic-js.TriggerCon
 
 ### Steps
 
-Steps are processes that are executed within your workflow. For more detailed information, see [Steps](/workflows/steps).
+Steps are processes that are executed within your workflow. For more detailed information, see [Steps](/steps).
 
 Steps contain four main pieces of information:
 
 1. `name` - this can be used by dependent steps to determine dependency or used in data mapping.
 2. `needs` - this property determines what step it depends on. It uses a combination of `name` and the name of the `event` that the step exposes.
 3. `uses` - this can be the official name and version of the step or a url to a custom step.
-4. `props` - this is the input of the step. Data can be passed in directly, or mapping information can be passed in. See the [Data Mapping](/workflows/steps/data_mapping) for more details.
+4. `props` - this is the input of the step. Data can be passed in directly, or mapping information can be passed in. See the [Data Mapping](/workflows/data_mapping) for more details.
 
 Please refer to the documentation for each step to see what the schema of the `props` are like and what events are exposed.
 

docs/steps/beacons/overview.mdx

@@ -0,0 +1,7 @@
+---
+id: overview
+title: Beacons Overview
+slug: /steps/beacons
+---
+
+Beacons are excellent tools for drawing attention to specified elements.

docs/steps/beacons/reference.mdx

@@ -0,0 +1,62 @@
+---
+id: reference
+title: Reference
+slug: /steps/beacons/technical
+hide_title: true
+---
+
+# Beacons Technical Reference
+
+### Properties:
+
+- `anchorElCssSelector` -
+  Css selector used to set the element the beacon gets attached to. If the selector matches multiple elements, the first one is chosen.
+- `radius` -
+  This controls the radius of the Beacon.
+- `anchor` -
+  Specifies the side or corner of the element you want the beacon to be positioned. Possible values are:
+  - `left`
+  - `right`
+  - `top`
+  - `bottom`
+  - `bottom-left`
+  - `bottom-right`
+  - `top-left`
+  - `top-right`
+- `anchorOffset` -
+  Sets the offset of the beacon from the anchor position to the center of the element. Anchor value is measured in pixels.
+- `background` -
+  Sets the background style of the Beacon. Any css `background` style works here.
+- `pulse` -
+  Enables or disable the Beacon's pulsing animation.
+- `hoverAnimation` -
+  Sets the hover animation. Possible values:
+  - `none`
+  - `ripple-out`
+  - `outline-out`.
+
+### Events:
+
+#### `OnClick`
+
+- No data is passed from this event.
+
+### Examples
+
+#### Basic Usage
+
+```json
+{
+  "name": "beacon",
+  "uses": "https://unpkg.com/@samelogic-steps/beacons@0.9.3/dist/runner.js",
+  "props": {
+    "radius": 20,
+    "anchor": "center",
+    "anchorOffset": 0,
+    "background": "#00beff",
+    "pulse": true,
+    "hoverAnimation": "ripple-out",
+    "anchorElCssSelector": "#target-element"
+  }
+}
+```

docs/microsurveys/fields/long_text.mdx renamed to docs/steps/microsurveys/fields/long_text.mdx

@@ -1,10 +1,10 @@
 ---
 id: overview
 title: Microsurvey Overview
-slug: /microsurveys
+slug: /steps/microsurveys
 ---
 
-Microsurveys is a powerful in-app survey displayed during any user flow or activity to collect contextual feedback sent to any app of your choice.
+Microsurveys is a powerful in-app survey displayed during any user flow or activity to collect contextual feedback sent to any app of your choice. Microsurveys are great for collecting qualitative and quantitative feedback about specific features from users.
 
 ![Docusaurus](./microsurvey-popup.png)
 

docs/microsurveys/fields/multiple_choice.mdx renamed to docs/steps/microsurveys/fields/multiple_choice.mdx

@@ -1,18 +1,18 @@
 ---
-id: microsurvey
-title: Microsurvey
-slug: /references/steps/microsurvey
+id: reference
+title: Reference
+slug: /steps/microsurveys/technical
 hide_title: true
 ---
 
-# Mirosurvey
-Microsurveys are great for collecting qualitative and quantitative feedback about specific features from users.
+# Microsurveys Technical Reference
 
 ### Properties:
+
 - `anchorElCssSelector` -
-This is the element the microsurvey gets attached to.
+  This is the element the microsurvey gets attached to.
 - `form` -
-Form used to describe the questions in the survey. Form properties include:
+  Form used to describe the questions in the survey. Form properties include:
   - `title`
   - `type`
   - `fields`
@@ -22,26 +22,28 @@ Form used to describe the questions in the survey. Form properties include:
 #### Fields
 
 `Fields` Properties:
-Form fields can be one of two types: `Long Text` or  `Multiple Choice`. Field properties:
+Form fields can be one of two types: `Long Text` or `Multiple Choice`. Field properties:
+
 - `ref`
 - `title` - The title that gets displayed for the fields
 - `type` - defines the step type. Values are `long_text` and `multiple_choice`
 - `properties` - Optional parameter defining the properties of the steps based on its type.
 
-
 #### Long Text Field:
+
 ```json
 {
-    ref: "long_text_ref",
-    title: "Welcome to my microsurvey",
-    type: "long_text",
-    properties: {
-        description: "Some placeholder text here.."
-    }
+  "ref": "long_text_ref",
+  "title": "Welcome to my microsurvey",
+  "type": "long_text",
+  "properties": {
+    "description": "Some placeholder text here.."
+  }
 }
 ```
 
 #### Multiple Choice Field:
+
 ```js
 {
     ref: "multiple_choice_ref",
@@ -62,20 +64,25 @@ Form fields can be one of two types: `Long Text` or  `Multiple Choice`. Field pr
     }
 }
 ```
+
 ### Events:
+
 #### `OnSubmit`
-- `answers` - 
-dictionary containing the refs of the fields mapped to their answers. For example:
+
+- `answers` -
+  dictionary containing the refs of the fields mapped to their answers. For example:
+
 ```json
 {
-    "mulitple_choice": "lemonade",
-    "long_text": "It's refreshing"
+  "mulitple_choice": "lemonade",
+  "long_text": "It's refreshing"
 }
 ```
 
-
 ### Examples
+
 #### Basic Example
+
 ```json
 {
     "name": "microsurvey",
@@ -117,4 +124,4 @@ dictionary containing the refs of the fields mapped to their answers. For exampl
         }
     }
 }
-```
+```

docs/microsurveys/microsurvey-popup.png renamed to docs/steps/microsurveys/microsurvey-popup.png

@@ -0,0 +1,14 @@
+---
+id: overview
+title: Steps Overview
+slug: /steps
+---
+
+Steps are **asynchronous** and long-running processes that are executed within your workflow. Steps can be connected to create complex workflows.
+
+The initialization of a step can happen via a trigger or other step events.
+Steps contain events that are fired based on their specification. Please refer to their docs for more details on what events they expose and under what criteria they are fired.
+
+:::info
+You can build your custom steps and host them wherever you want.
+:::

docs/microsurveys/overview.mdx renamed to docs/steps/microsurveys/overview.mdx

@@ -0,0 +1,11 @@
+---
+id: overview
+title: Webhooks Overview
+slug: /steps/webhooks
+---
+
+Webhooks are used to send data to any URL. Data from events can be piped in, serialized, and sent in the form of an HTTP request.
+
+The main property that we care about is the `body`. This property is usually mapped to event data that triggered the step. The string is then serialized into a JSON object and sent in the `body` of the http request.
+
+We currently recommend using webhooks to send data to a zapier endpoint for starting out. This can be connected to a [Zapier Webhook](https://zapier.com/page/webhooks/).

docs/references/steps/microsurvey.mdx renamed to docs/steps/microsurveys/reference.mdx

@@ -0,0 +1,75 @@
+---
+id: reference
+title: Reference
+slug: /steps/webhooks/technical
+hide_title: true
+---
+
+# Webhooks Technical Reference
+
+### Properties:
+
+- `body` -
+  The payload being sent to the endpoint.
+- `method` -
+  The http verb used to send the payload, i.e. `GET`, `POST`, `PUT`, `DELETE`, etc
+- `url` -
+  A valid http url.
+
+### Events:
+
+#### `OnSuccess`
+
+- `data` -
+  Response from endpoint.
+- `status` -
+  HTTP response status.
+
+#### `OnFailure`
+
+- `data` -
+  Response from endpoint.
+- `status` -
+  HTTP response status.
+- `message` -
+  Reason for failure.
+
+### Examples
+
+#### Basic Usage
+
+```json
+{
+  "name": "request",
+  "uses": "https://unpkg.com/@samelogic-steps/webhooks@0.9.1/dist/runner.js",
+  "props": {
+    "url": "https://www.myendpoint.com/uploadhere",
+    "method": "post",
+    "body": "Hello World!"
+  }
+}
+```
+
+#### Passing Data From Steps
+
+In this example, the results from a `microsurvey` step is being piped to an http endpoint once the microsurvey has been completed.
+
+```json
+{
+  "name": "request",
+  "needs": {
+    "name": "microsurvey",
+    "event": "OnSubmit"
+  },
+  "uses": "https://unpkg.com/@samelogic-steps/webhooks@0.9.1/dist/runner.js",
+  "props": {
+    "url": "https://www.myendpoint.com/uploadhere",
+    "method": "post",
+    "body": "{{microsurvey.OnSubmit.data}}"
+  }
+}
+```
+
+:::info
+Note that the `{{microsurvey.OnSubmit.data}}` is used to pass data from a previous microsurvey step to the body property.
+:::

docs/steps/overview.mdx

@@ -2,5 +2,5 @@
 id: data_mapping
 title: Data Mapping
 sidebar_label: Data Mapping
-slug: /workflows/steps/data_mapping
+slug: /workflows/data_mapping
 ---

docs/steps/webhooks/overview.mdx

@@ -12,7 +12,4 @@ Triggers are defined as a list of events that occur in the application to start
 
 ### Steps
 
-Steps are defined as a group of actions that are executed after a workflow is triggered.
-
-Steps are **asynchronous**. The initialization of a step can happen via a trigger or other step events.
-Steps contain events that are fired based on their specification. Please refer to their docs for more details on what events they expose and under what criteria they are fired.
+Steps are defined as a group of actions that are executed after a workflow is triggered. Please see [Steps Overview documentation](./steps)

docs/steps/webhooks/reference.mdx

@@ -3,13 +3,8 @@ module.exports = {
     Introduction: ["overview/getting-started"],
     Tutorials: ["tutorials/getting-started", "tutorials/churn/index"],
     "How To Guides": ["howto/getting-started"],
-
     Workflows: [
       "workflows/overview",
-      {
-        Steps: ["workflows/steps/index", "workflows/steps/data_mapping"],
-      },
-
       {
         Triggers: [
           "workflows/triggers/overview",
@@ -19,14 +14,23 @@ module.exports = {
           "workflows/triggers/hover_on",
         ],
       },
+      "workflows/data_mapping",
     ],
-    Microsurveys: [
-      "microsurveys/overview",
+    Steps: [
+      "steps/overview",
       {
-        Fields: [
-          "microsurveys/fields/long_text",
-          "microsurveys/fields/multiple_choice",
+        Beacons: ["steps/beacons/overview", "steps/beacons/reference"],
+        Microsurveys: [
+          "steps/microsurveys/overview",
+          {
+            Fields: [
+              "steps/microsurveys/fields/long_text",
+              "steps/microsurveys/fields/multiple_choice",
+            ],
+          },
+          "steps/microsurveys/reference",
         ],
+        Webhooks: ["steps/webhooks/overview", "steps/webhooks/reference"],
       },
     ],
     "Technical References": [
@@ -58,11 +62,7 @@ module.exports = {
         type: "category",
         label: "Steps",
         collapsed: false,
-        items: [
-          "references/steps/beacon",
-          "references/steps/microsurvey",
-          "references/steps/webhook"
-        ]
+        items: ["references/steps/beacon", "references/steps/webhook"],
       },
     ],
     "Release Notes": ["release_notes/releases"],